css-development — Claude Code plugin: Tailwind CSS workflows
Gives Claude a CSS workflow: Tailwind classes built by composition, meaningful names, dark mode as the default. Useful once stylesheets start to sprawl.
/plugin marketplace add anthropics/claude-plugins-community
/plugin install css-development@claude-communityWhat css-development does
The plugin sets three habits for CSS work. Tailwind classes get assembled from parts instead of one long line, class names carry meaning, and dark mode is the starting point. The agent follows those habits whenever it writes or edits styles.
It ships as a claude-community marketplace entry with a workflow description only. You install it the usual marketplace way and configure nothing else. On a plain-CSS project without Tailwind the composition rule has nothing to act on, because it assumes a utility-first setup.
Dark mode by default means any light theme has to be spelled out. Fine for something new. On an existing light-only interface, look at what changes in your styles first.
What it helps with
- keep long Tailwind class strings readable
- name CSS classes after what they do
- make dark mode the base state, not an add-on
- hold one CSS style while an agent edits the code
Example prompts for the agent
- Build the product card using the plugin's rules: composed Tailwind classes, meaningful names, dark mode by default
- Rework
styles.css: split the long Tailwind class strings into parts and name them clearly - Add a light theme on top of the default dark one in this component
How to install css-development
Plugin marketplace
/plugin marketplace add anthropics/claude-plugins-community/plugin install css-development@claude-communityStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about css-development
How do I install css-development in Claude Code?
Run two commands in order: /plugin marketplace add anthropics/claude-plugins-community, then /plugin install css-development@claude-community.
What does css-development do?
It gives the agent a CSS workflow built on composed Tailwind classes, semantic naming, and dark mode as the default.
Does it work on a project without Tailwind?
Tailwind composition is one of its three foundations, so that part needs utility classes present. On plain CSS the naming and theme rules still apply.
Source text
css-development · MIT
<!-- ABOUTME: README for the 2389 Research Claude Code plugin marketplace --> <!-- ABOUTME: Public-facing documentation with install instructions and plugin catalog --> # 2389 Research Claude Code Plugin Marketplace 28 plugins and MCP servers for Claude Code — parallel exploration, iterative refinement, binary reverse engineering, structured decision-making, and more. Built by the team at [2389](https://2389.ai). These are the tools we use every day. **Browse the marketplace:** https://skills.2389.ai ## Quick Start Install any plugin in **any agent** (Claude Code, Cursor, Codex, …) with [vercel-labs/skills](https://github.com/vercel-labs/skills): ```bash npx skills add 2389-research/simmer ``` Or natively in Claude Code: ```bash # Add the marketplace, then install any plugin /plugin marketplace add 2389-research/claude-plugins /plugin install simmer@2389-research ``` > The 4 MCP servers (journal, socialmedia, slack-mcp, agent-drugs) install via Claude Code only — they ship no skills for npx. ## Available Plugins ### Meta Plugins | Plugin | Description | |--------|-------------| | [botboard-biz](https://github.com/2389-research/botboard-biz) | Social media and journaling capabilities for AI agents | | [better-dev](https://github.com/2389-research/better-dev) | CSS, Firebase, code quality, testing, parallel exploration, docs verification, codegen | | [sysadmin](https://github.com/2389-research/sysadmin) | Structured Linux maintenance and diagnostics | ### Development | Plugin | Description | |--------|-------------| | [css-development](https://github.com/2389-research/css-development) | CSS workflows with Tailwind, semantic naming, dark mode by default | | [firebase-development](https://github.com/2389-research/firebase-development) | Firebase project workflows: setup, features, debugging, validation | | [landing-page-design](https://github.com/2389-research/landing-page-design) | High-converting landing pages with anti-AI-slop principles | | [xtool](https://github.com/2389-research/xtool) | Xcode-free iOS development with xtool via SwiftPM | | [building-multiagent-systems](https://github.com/2389-research/building-multiagent-systems) | Architecture patterns for multi-agent systems | | [speed-run](https://github.com/2389-research/speed-run) | Token-efficient code generation with hosted LLM (Cerebras) | | [thrifty](https://github.com/2389-research/thrifty) | Tiered-delegation execution: Sonnet plans a spec into sprints, cheap Haiku executes + self-verifies; ~64% cheaper than Opus | | [binary-re](https://github.com/2389-research/binary-re) | Agentic binary reverse engineering for ELF binaries | ### Testing and Quality | Plugin | Description | |--------|-------------| | [test-kitchen](https://github.com/2389-research/test-kitchen) | Parallel exploration of implementation approaches | | [simmer](https://github.com/2389-research/simmer) | Iterative artifact refinement with investigation-first judges | | [scenario-testing](https://github.com/2389-research/scenario-testing) | End-to-end testing with real dependencies, no mocks | | [fresh-eyes-review](https://github.com/2389-research/fresh-eyes-review) | Final sanity check before commits/PRs | | [documentation-audit](https://github.com/2389-research/documentation-audit) | Verify documentation against codebase reality | | [review-squad](https://github.com/2389-research/review-squad) | Dispatch panels of specialized subagents for project review | | [prbuddy](https://github.com/2389-research/prbuddy) | PR health assistant: CI monitoring, review triage, fixes | | [git-repo-prep](https://github.com/2389-research/git-repo-prep) | Prepare codebases for public/open-source release | ### Business and Strategy | Plugin | Description | |--------|-------------| | [ceo-personal-os](https://github.com/2389-research/ceo-personal-os) | Personal operating system for executives | | [worldview-synthesis](https://github.com/2389-research/worldview-synthesis) | Systematic worldview articulation | | [deliberation](https://github.com/2389-research/deliberation) | Decision-making through deliberation and discernment | | [summarize-meetings](https://github.com/2389-research/summarize-meetings) | Batch-process meeting transcripts into structured summaries | ### Utilities | Plugin | Description | |--------|-------------| | [terminal-title](https://github.com/2389-research/terminal-title) | Auto-update terminal title with emoji + project + topic | | [remote-system-maintenance](https://github.com/2389-research/remote-system-maintenance) | Linux system diagnostics and maintenance via SSH/tmux | ### MCP Servers | Server | Description | |--------|-------------| | [agent-drugs](https://github.com/2389-research/agent-drugs) | Digital drugs that modify AI behavior through prompt injection | | [socialmedia](https://github.com/2389-research/mcp-socialmedia) | Social media functionality for AI agents | | [journal](https://github.com/2389-research/journal-mcp) | Private journaling capability for Claude | | [slack-mcp](https://github.com/2389-research/slack-mcp) | Slack workspace integration MCP server | ## Adding a Plugin 1. Create a GitHub repo under `2389-research/` with standard plugin structure 2. Add an entry to `.claude-plugin/marketplace.json` 3. Run `npm run generate` to update the marketplace site 4. Commit and push See [CLAUDE.md](CLAUDE.md) for the full marketplace.json format and detailed instructions. ## Like this? If these plugins save you time, a ⭐ helps us know what's landing. We build what people use. ## Contact **Email:** [[email protected]](mailto:[email protected]) — we'd love to hear what you're building with these. ## License MIT
© 2389-research · MIT · 2389-research/claude-plugins