designing-components
Diseñar Componentes con Tailwind CSS
Los desarrolladores necesitan componentes de UI consistentes y mantenibles, pero carecen de orientación sobre las convenciones del proyecto. Esta skill proporciona reglas claras para diseñar componentes usando Tailwind CSS, incluyendo organización de archivos, patrones de estilo y estructura del proyecto.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「designing-components」。 Design a button component
預期結果:
Crearé un componente de botón siguiendo las convenciones del proyecto:
1. Crear src/components/button.css con @layer components
2. Usar @apply para las clases de utilidad de Tailwind
3. Agregar @utility para utilidades personalizadas del botón
4. Agregar @variant para variantes de estado del botón
5. Colocar el componente en el directorio raíz de src/components
正在使用「designing-components」。 Design a card component with hover effects. Add hover states and focus states using @variant directives.
預期結果:
Diseñaré un componente de tarjeta con:
- @layer components para el contenedor de la tarjeta y elementos hijos
- Estados @variant hover y focus
- Clases anidadas para el estilo del contenido de la tarjeta
- Directivas @utility para utilidades específicas de la tarjeta
- Archivo creado en src/components/card.css
安全審計
安全All static findings are false positives. The scanner incorrectly identified Tailwind CSS directives (@apply, @layer, @utility, @variant) as shell backticks, and misinterpreted YAML frontmatter as weak cryptographic patterns. The skill is a legitimate component design guide containing only documentation and CSS styling instructions.
中風險問題 (2)
品質評分
你能建構什麼
Crear un Nuevo Componente de UI
Diseñar un nuevo componente de botón, tarjeta o formulario siguiendo las convenciones del proyecto con una organización adecuada de Tailwind CSS.
Refactorizar Componentes Existentes
Actualizar componentes heredados para usar patrones modernos de Tailwind CSS con @layer components y directivas @utility.
Establecer Estándares de Componentes
Definir patrones de diseño de componentes a nivel de equipo usando esta skill como referencia para una arquitectura de estilos consistente.
試試這些提示
Design a component for [component-name] in this project. Follow the Tailwind CSS rules for creating components.
Design a [component-name] component. It should use @utility directives for custom utilities and @variant directives for responsive states.
Design a [parent-component] that contains [child-component] elements. Use nested classes in @layer components for parent-child styling relationships.
Create a complete [component-name] component including: separate CSS file, @layer components for styling, @utility directives for custom utilities, @variant directives for interactive states, and proper file placement in src/components.
最佳實務
- Usa archivos CSS separados para cada componente para mantener la separación de responsabilidades y permitir mejor caché
- Organiza los estilos dentro de @layer components para asegurar un orden de cascada adecuado y evitar conflictos
- Consulta la documentación de Tailwind v4 para patrones específicos del contexto antes de implementar soluciones personalizadas
避免
- Evita mezclar estilos inline con clases de utilidad de Tailwind, ya que rompe el patrón utility-first
- No modifiques archivos en src/components/ui ya que están reservados para componentes compartidos de la librería de UI
- Evita crear archivos CSS monolíticos que combinen estilos de múltiples componentes no relacionados