Habilidades css-development

🎨

css-development

Name: css-development
Author: 2389-research

Seguro ⚙️ Comandos externos📁 Acceso al sistema de archivos🌐 Acceso a red

使用 Tailwind 语义化模式创建和重构 CSS

También disponible en: 2389-research

在项目中管理一致的 CSS 样式既困难又容易出错。此技能将指导您创建语义化组件类、添加深色模式支持以及维护测试覆盖率。

Soporta: Claude Codex Code(CC)

📊 70 Adecuado

Descargar el ZIP de la skill

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

Activa y empieza a usar

Pruébalo

Usando "css-development". Create a card component for displaying user profiles

Resultado esperado:

在 styles/components.css 中创建了 .card-profile 类
为背景和文本颜色添加了深色模式变体
编写了静态 CSS 测试以验证类的存在
提供了 React 和 HTML 示例的使用模式文档

Usando "css-development". Validate the CSS in our components.css file

Resultado esperado:

共找到 12 个类,识别出 3 个问题
问题:.btn-blue 使用了工具类命名而非语义化命名
问题:.card-header 缺少深色模式变体
建议:重命名为 .button-secondary 并添加 dark:bg-gray-800

Auditoría de seguridad

Seguro

v3 • 1/16/2026

This skill is a documentation-only workflow guide for CSS development. All 281 static findings are false positives caused by pattern matching on markdown code examples. The backtick detections match markdown formatting, not shell execution. Cryptographic algorithm detections match file extensions. No executable code, network requests, or file system operations exist in this skill.

Archivos escaneados

1,520

Líneas analizadas

hallazgos

Auditorías totales

Factores de riesgo

⚙️ Comandos externos (240)

📁 Acceso al sistema de archivos (5)

create-component/SKILL.md:230 create-component/SKILL.md:234 refactor/SKILL.md:268 refactor/SKILL.md:273 SKILL.md:100

🌐 Acceso a red (1)

skill-report.json:6

Auditado por: claude Ver historial de auditorías →

Puntuación de calidad

Arquitectura

100

Mantenibilidad

Contenido

Comunidad

100

Seguridad

Cumplimiento de la especificación

Lo que puedes crear

创建新的样式组件

从头开始构建新的按钮、卡片或表单组件,包含语义化命名、深色模式支持和适当的测试覆盖率。

审核 CSS 代码库的一致性

审查现有样式表,识别命名问题、缺失的深色模式变体以及合并优化的机会。

将工具类重构为语义化 CSS

将标记中分散的 Tailwind 工具类转换为可维护的语义化组件类,并提供文档。

Prueba estos prompts

创建组件

Create a button-secondary component that matches our button-primary style but with a gray background for less prominent actions.

验证样式

Review the CSS in styles/components.css and check if it follows our semantic naming and dark mode patterns.

重构 CSS

Refactor the inline Tailwind classes in src/components/Card.tsx to use semantic component classes.

添加深色模式

Add dark mode support to all component classes in styles/components.css that are missing dark: variants.

Mejores prácticas

在创建新类之前始终检查现有的 components.css 以实现重用
为所有背景、文本和边框颜色添加 dark: 变体
编写静态 CSS 测试和组件渲染测试以实现完整覆盖

Evitar

创建工具类风格的类名,如 .btn-blue 或 .card-sm,而不是语义化名称
添加 CSS 类时没有相应的测试覆盖
在有颜色或交互的元素上跳过深色模式变体

Preguntas frecuentes

什么是语义化类名?

描述用途而非外观的类名。使用 .button-primary 而不是 .btn-blue。名称应该传达元素的作用。

我应该何时创建新的 CSS 类而不是组合现有的类?

首先检查现有类是否可以组合以实现您的目标。只有在组合不起作用或导致过度重复时才创建新类。

如何添加深色模式支持?

对颜色和背景使用 Tailwind dark: 前缀。例如:@apply bg-white dark:bg-gray-800 text-gray-900 dark:text-white。

我应该为 CSS 组件编写什么测试?

编写静态测试以验证类在 components.css 中存在,并编写渲染测试以确认类已应用于实际组件。

此技能可以与 React 以外的框架一起使用吗?

可以。这些模式适用于 React、Vue、Svelte 和原生 HTML。该技能为多个框架提供示例。

这里使用的原子设计模式是什么?

组件被组织为原子(button、input)、分子(card、form-field)和有机体(page-layout)。这有助于限定复杂性范围。

Detalles del desarrollador

Autor

2389-research

Licencia

MIT

Repositorio

https://github.com/2389-research/claude-plugins/tree/main/css-development/skills

Ref.

main

Estructura de archivos

📁 create-component/

📄 SKILL.md

📁 refactor/

📄 SKILL.md

📁 validate/

📄 SKILL.md