📦 Install Now · 🤖 Explore Agents · 📖 Documentation · ⭐ Star this repo
What is this?
Css Assistant is a Claude Code plugin with 7 agents and 8 skills for css development.
📑 Table of Contents
Click to expand
🚀 Quick Start
Prerequisites
- Claude Code CLI v2.0.27+
- Active Claude subscription
Installation (Choose One)
Option 1: From Marketplace (Recommended)
# Step 1️⃣ Add the marketplace
/plugin marketplace add pluginagentmarketplace/custom-plugin-css
# Step 2️⃣ Install the plugin
/plugin install css-development-assistant@pluginagentmarketplace-css
# Step 3️⃣ Restart Claude Code
# Close and reopen your terminal/IDE
Option 2: Local Installation
# Clone the repository
git clone https://github.com/pluginagentmarketplace/custom-plugin-css.git
cd custom-plugin-css
# Load locally
/plugin load .
# Restart Claude Code
✅ Verify Installation
After restart, you should see these agents:
css-development-assistant:01-css-fundamentals
css-development-assistant:02-css-layout-master
css-development-assistant:03-css-animations
css-development-assistant:04-css-architecture
css-development-assistant:05-css-preprocessors
... and 2 more
✨ Features
| Feature | Description |
|---|---|
| 🤖 7 Agents | Specialized AI agents for css tasks |
| 🛠️ 8 Skills | Reusable capabilities with Golden Format |
| ⌨️ 4 Commands | Quick slash commands |
| 🔄 SASMP v1.3.0 | Full protocol compliance |
🤖 Agents
7 Specialized Agents
| # | Agent | Purpose |
|---|---|---|
| 1 | 01-css-fundamentals | Master CSS basics including selectors, specificity, box model, typography |
| 2 | 02-css-layout-master | Flexbox, CSS Grid, responsive design, layout patterns |
| 3 | 03-css-animations | Keyframes, transitions, performance optimization |
| 4 | 04-css-architecture | BEM, SMACSS, design systems, scalability |
| 5 | 05-css-preprocessors | Sass, PostCSS, Tailwind, CSS Modules |
| 6 | 06-css-performance | Critical CSS, code splitting, optimization |
| 7 | 07-css-modern-features | Custom properties, :has(), @layer, container queries |
🛠️ Skills
Available Skills
| Skill | Description | Invoke |
|---|---|---|
css-fundamentals | Selectors, specificity, box model | Skill("css-development-assistant:css-fundamentals") |
css-flexbox-grid | Flexbox & CSS Grid layouts | Skill("css-development-assistant:css-flexbox-grid") |
css-animations | Keyframes, transitions, motion | Skill("css-development-assistant:css-animations") |
css-architecture | BEM, SMACSS, design systems | Skill("css-development-assistant:css-architecture") |
css-sass | Sass/SCSS preprocessing | Skill("css-development-assistant:css-sass") |
css-tailwind | Utility-first CSS framework | Skill("css-development-assistant:css-tailwind") |
css-performance | Critical CSS, optimization | Skill("css-development-assistant:css-performance") |
css-modern | Custom properties, container queries | Skill("css-development-assistant:css-modern") |