css-development

用途

CSS Development 是一个面向 CSS 开发的综合工作流技能，采用 Tailwind 与语义化组件模式。它根据上下文自动将用户路由到合适的专门化工作流，而不是由用户手动选择。

该技能会调用以下三个子技能之一：

• css-development:create-component —— 创建新的 CSS 组件
• css-development:validate —— 审查现有 CSS
• css-development:refactor —— 将 CSS 转换为语义化模式

适用时机

当出现以下情况时，Claude Code 会自动加载该技能：

• 创建新的 CSS 组件或样式
• 审查或验证现有 CSS 代码
• 重构内联样式或工具类
• 在任意框架中处理组件样式
• 需要添加暗色模式支持
• 编写 CSS 测试

核心原则

所有子技能都遵循以下核心模式：

• 语义化命名：使用描述性类名（如 .button-primary、.card-header），而非工具类名（如 .btn-blue、.card-hdr）
• Tailwind 组合：通过 @apply 指令复用 Tailwind 工具类
• 默认暗色模式：为所有带颜色或交互的元素包含 dark: 变体
• 组合优于创建：在创建新类之前先复用已有类
• 测试覆盖：静态 CSS 测试 + 组件渲染测试
• 文档：在每个组件类上方添加用法注释

组件类模式

示例：

/* Button component - Primary action button with hover states Usage: <button className="button-primary">Click me</button> */ .button-primary { @apply bg-indigo-500 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-800; @apply px-6 py-3 rounded-lg font-medium text-white; @apply transition-all duration-200 hover:-translate-y-0.5; }

关键特征：

• 按逻辑分组相关工具类（背景、间距、排版、过渡）
• 包含 hover/focus/active 状态
• 使用 dark: 前缀包含暗色模式变体
• 使用 Tailwind 内置色阶（indigo-500、gray-800 等）

文件结构约定

styles/ ├── components.css # All semantic component classes └── tests/ └── components.test.ts # CSS and component tests

标记集成（框架无关）

适用于 React、Vue、Svelte 或原生 HTML：

React：

const classes = button-primary ${className}.trim(); <button className={classes}>...</button>

原生 HTML：

<button class="button-primary custom-class">...</button>

Vue：

<button :class="['button-primary', customClass]">...</button>

关键原则：应用语义化类 + 允许附加类以进行自定义。

原子设计层级

• 原子（Atoms）：基础构建块（.button、.input、.badge、.spinner）
• 分子（Molecules）：组合组件（.card、.form-field、.empty-state）
• 有机体（Organisms）：复杂组件（.page-layout、.session-card、.conversation-timeline）

测试模式

静态 CSS 测试：

it('should have button component classes', () => { const content = readFileSync('styles/components.css', 'utf-8'); expect(content).toContain('.button-primary'); });

组件渲染测试：

it('applies semantic class and custom className', () => { render(<Button variant="primary" className="custom" />); expect(screen.getByRole('button')).toHaveClass('button-primary', 'custom'); });

工作流：上下文检测与路由

当该技能被调用时，按以下步骤路由到合适的子技能：

第 1 步：分析上下文

查看用户请求和近期对话以确定意图：

创建新组件？

• 关键词："create"、"add"、"new component"、"build a"、"make a"
• 文件：提及 components.css 或新组件名称
• 意图：用户希望添加新 CSS

验证现有 CSS？

• 关键词："review"、"validate"、"check"、"audit"、"look at"
• 文件：引用现有 CSS 文件或组件
• 意图：用户希望对现有 CSS 获得反馈

重构 CSS？

• 关键词："refactor"、"clean up"、"extract"、"improve"、"convert"
• 代码：标记中可见内联样式或工具类
• 意图：用户希望转换现有 CSS 模式

第 2 步：选择子技能

基于上下文分析：

• 若为创建：使用 Skill 工具调用 css-development:create-component
• 若为验证：使用 Skill 工具调用 css-development:validate
• 若为重构：使用 Skill 工具调用 css-development:refactor
• 若意图不明确：使用 AskUserQuestion 工具询问用户：

问题："What would you like to do with CSS?" 选项：

• "Create new component"（指导创建新的语义化 CSS 组件类）
• "Validate existing CSS"（依据既定模式审查 CSS）
• "Refactor CSS"（将内联/工具类样式转换为语义化组件）

第 3 步：调用子技能

使用 Skill 工具调用所选子技能：

示例：

I'm routing you to the create-component workflow. [Invoke Skill tool with skill: "css-development:create-component"]

第 4 步：移交控制权

一旦子技能被调用，它即接管工作。主技能的任务完成。

重要说明

• 不要跳过路由：始终分析上下文并选择正确的子技能
• 不要重复子技能逻辑：让子技能处理其工作流
• 参考模式文档：子技能会引用上述记录的模式
• 用户可直接调用：用户可以直接调用子技能（例如 "use css-development:validate"）

限制

资料未提供该技能的具体收费、价格、平台支持范围或效果数据，暂未提供相关信息。