Habilidades css-development
🎨
在代码库中创建和维护一致的 CSS 非常困难。开发人员常常面临命名约定、深色模式支持以及测试等方面的挑战。本技能提供引导式工作流，帮助您使用语义化命名、Tailwind 组合以及默认的深色模式来创建、验证和重构 CSS 组件。
Suporta: Claude Codex Code(CC)
1
Baixar o ZIP da skill
2
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
3
Ative e comece a usar
Testar
A utilizar "css-development". 验证我的 CSS 样式并提出改进建议
Resultado esperado:
- 语义化命名：已审查 8 个类，其中 2 个需要重命名（.btn-blue -> .button-primary）
- 深色模式覆盖率：已完成 75%，3 个类缺少变体
- 测试覆盖率：已完成 60%，4 个类需要静态 CSS 测试
- 建议操作：为 .card-header、.badge、.empty-state 添加 dark: 变体
Auditoria de Segurança
Segurov3 • 1/10/2026
Pure prompt-based skill system with no code execution, no network operations, and no external data access. All file operations are limited to reading project CSS files and creating/modifying styles within the user's project directory.
4
Arquivos analisados
900
Linhas analisadas
0
achados
3
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude Ver Histórico de Auditoria →
Pontuação de qualidade
38
Arquitetura
100
Manutenibilidade
81
Conteúdo
31
Comunidade
100
Segurança
78
Conformidade com especificações
O Que Você Pode Construir
创建新的组件类
按照语义化命名和 Tailwind 组合模式构建新的 CSS 组件。
重构传统样式
将内联样式和实用工具类转换为可维护的语义化组件模式。
审核 CSS 一致性
验证 CSS 文件的命名约定、深色模式覆盖率和测试覆盖率。
Tente Estes Prompts
创建组件
Create a new button-primary component class in styles/components.css following the semantic naming pattern.
验证 CSS
Validate the CSS in styles/components.css against semantic naming and dark mode patterns.
重构样式
Refactor the inline styles in components/ to use semantic classes with dark mode support.
完整工作流程
Create a new card component with header, body, and footer variants including dark mode and tests.
Melhores Práticas
- 使用描述性名称而非外观描述的语义化类名
- 为所有彩色和交互元素包含深色模式变体
- 通过 @apply 组合 Tailwind 实用工具以实现集中式样式管理
Evitar
- 使用类似 .btn-blue 或 .text-big 的实用工具类名
- 将内联样式分散在标记中
- 创建不支持深色模式的组件
Perguntas Frequentes
这是否适用于 SCSS 或 Sass 文件？
该技能专注于纯 CSS。对于预处理器，这些模式仍然适用，但您需要调整文件位置。
它一次可以处理多少个 CSS 类？
没有硬性限制。该技能会根据您的请求范围处理文件。
它可以与我现有的测试套件集成吗？
是的，该技能为 vitest 和 React Testing Library 模式生成测试。您可以为其他框架调整模板。
此技能访问哪些数据？
它只读取您明确引用的项目目录中的文件。数据不会被发送到任何地方。
为什么我的样式没有被检测到？
确保 styles/components.css 文件存在于预期路径。检查您是否使用了像 CSS 或样式这样的技能关键词。
这与直接使用 Tailwind 有什么不同？
该技能强制执行一致的语义化命名、深色模式覆盖率和测试覆盖率模式，而原始 Tailwind 并不提供这些。