⚡

CSS开发技能 css-development

CSS开发技能是一个专门用于前端样式开发的综合工作流工具，基于Tailwind CSS和语义组件模式。该技能提供CSS组件创建、代码验证和样式重构三大核心功能，支持深色模式、语义化命名、组件化开发和自动化测试。适用于前端工程师、UI开发者和全栈开发者进行高效、可维护的CSS开发工作。关键词：CSS开发、Tailwind CSS、语义组件、前端样式、深色模式、CSS重构、组件化CSS、CSS验证、前端工程化、样式工作流。

前端开发 0 次安装 0 次浏览 更新于 2/28/2026

名称: css开发 描述: 该技能应用于处理CSS、创建组件、样式化元素、重构样式或审查CSS代码时。触发关键词包括"CSS"、“样式”、“Tailwind”、“深色模式”、“组件样式”、“语义类”、“@apply”、“样式表”。可路由到专门的子技能进行创建、验证或重构。

CSS开发技能

概述

使用Tailwind + 语义组件模式的CSS开发综合工作流。该技能会根据上下文自动路由到相应的专门工作流。

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

  • css开发:创建组件 - 创建新的CSS组件
  • css开发:验证 - 审查现有CSS
  • css开发:重构 - 将CSS转换为语义模式

适用场景

Claude Code将在以下情况自动加载此技能：

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

CSS开发模式

所有子技能都遵循这些核心模式。处理CSS时请参考本节。

核心原则

  1. 语义命名 - 使用描述性类名（.button-primary、.card-header），而非工具类名（.btn-blue、.card-hdr）
  2. Tailwind组合 - 通过@apply指令利用Tailwind工具类
  3. 默认支持深色模式 - 为所有彩色/交互元素包含dark:变体
  4. 组合优先于创建 - 在创建新类之前重用现有类
  5. 测试覆盖 - 静态CSS测试 + 组件渲染测试
  6. 文档化 - 在每个组件类上方添加使用注释

组件类模式

/* 按钮组件 - 带悬停状态的主要操作按钮
   用法：<button className="button-primary">点击我</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;
}

关键特征：

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

文件结构约定

styles/
├── components.css      # 所有语义组件类
└── __tests__/
    └── components.test.ts  # CSS和组件测试

标记集成（框架无关）

适用于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>

关键原则： 应用语义类 + 允许添加自定义类进行定制。

原子设计层级

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

测试模式

静态CSS测试：

it('应包含按钮组件类', () => {
  const content = readFileSync('styles/components.css', 'utf-8');
  expect(content).toContain('.button-primary');
});

组件渲染测试：

it('应用语义类和自定义className', () => {
  render(<Button variant="primary" className="custom" />);
  expect(screen.getByRole('button')).toHaveClass('button-primary', 'custom');
});

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

调用此技能时，请按照以下步骤路由到适当的子技能：

步骤1：分析上下文

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

创建新组件？

  • 关键词：“创建”、“添加”、“新组件”、“构建”、“制作”
  • 文件：提及components.css或新组件名称
  • 意图：用户想要添加新的CSS

验证现有CSS？

  • 关键词：“审查”、“验证”、“检查”、“审计”、“查看”
  • 文件：引用现有CSS文件或组件
  • 意图：用户想要对现有CSS提供反馈

重构CSS？

  • 关键词：“重构”、“清理”、“提取”、“改进”、“转换”
  • 代码：标记中可见的内联样式或工具类
  • 意图：用户想要转换现有的CSS模式

步骤2：选择子技能

基于上下文分析：

如果创建： 使用技能工具调用css开发:创建组件

如果验证： 使用技能工具调用css开发:验证

如果重构： 使用技能工具调用css开发:重构

如果不明确： 使用AskUserQuestion工具询问用户：

问题："您想对CSS做什么？"
选项：
  - "创建新组件"（指导创建新的语义CSS组件类）
  - "验证现有CSS"（根据既定模式审查CSS）
  - "重构CSS"（将内联/工具样式转换为语义组件）

步骤3：调用子技能

使用技能工具调用选定的子技能：

示例：

我将您路由到创建组件工作流。
[使用技能工具调用技能："css开发:创建组件"]

步骤4：移交控制权

一旦子技能被调用，它将接管。主技能的工作就完成了。

重要注意事项

  • 不要跳过路由： 始终分析上下文并选择正确的子技能
  • 不要重复子技能逻辑： 让子技能处理它们的工作流
  • 参考模式文档： 子技能将参考上述记录的模式
  • 用户可以直接调用： 用户可以直接调用子技能（例如，“使用css开发:验证”）