shadcn-aesthetic
Aplicar principios de diseño shadcn/ui a CSS
Generar CSS profesional y accesible que coincida con la estética limpia de shadcn/ui. Esta habilidad proporciona patrones completos para variables CSS, colores HSL, escalas de espaciado y técnicas modernas de diseño.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「shadcn-aesthetic」を使用しています。 Estilizar un formulario de inicio de sesión con CSS moderno
期待される結果:
- Formulario completo con variables CSS para colores
- Espaciado consistente usando escala de 4px
- Estados focus-visible para accesibilidad
- Soporte de modo oscuro integrado
- Transiciones suaves en todos los estados interactivos
「shadcn-aesthetic」を使用しています。 Crear un diseño de panel con tarjetas
期待される結果:
- Diseño de cuadrícula con columnas auto-fit
- Componentes de tarjeta con sombras apropiadas
- Espaciado responsivo usando variables CSS
- Anillos de enfoque accesibles en todos los elementos interactivos
「shadcn-aesthetic」を使用しています。 Refactorizar mi CSS antiguo a patrones modernos
期待される結果:
- Reemplazados colores hexadecimales codificados con variables HSL
- Implementada escala de espaciado de 4px en todo el código
- Agregado focus-visible para navegación por teclado
- Creadas anulaciones de modo oscuro en la clase .dark
セキュリティ監査
安全This is a pure documentation skill containing only markdown files with CSS/SCSS code examples. All 209 static findings are false positives: the scanner confused markdown code block backticks with Ruby backtick execution, HSL color values like '222.2 84% 4.9%' with weak cryptographic algorithms, and benign documentation patterns with system reconnaissance. No executable code, network calls, file system access, or command execution exists in this skill.
リスク要因
⚙️ 外部コマンド (4)
品質スコア
作れるもの
Modernizar base de código CSS
Refactorizar CSS heredado para usar variables, colores HSL y escalas de espaciado consistentes.
Construir componentes tematizables
Crear componentes con soporte completo de tematización y compatibilidad con modo oscuro.
Igualar la estética shadcn
Construir componentes que coincidan con la apariencia limpia y profesional de shadcn/ui.
これらのプロンプトを試す
Create a button component with modern CSS using the shadcn aesthetic pattern. Include hover, focus-visible, and disabled states.
Build a card component with header, content, and footer sections using CSS variables for all colors and spacing.
Add dark mode support to my component styles using CSS variables with HSL color format.
Define a complete design token system with spacing scale, typography scale, color palette, and shadow system.
ベストプラクティス
- Usar variables CSS para todo lo que necesite tematización
- Aplicar formato de color HSL para permitir manipulación fácil de opacidad
- Mantener espaciado consistente usando la escala base de 4px
回避
- Evitar colores hexadecimales codificados sin variables
- No usar valores de píxeles aleatorios para espaciado
- Nunca eliminar el outline sin proporcionar un reemplazo focus-visible