shadcn-aesthetic
Aplicar princípios de design shadcn/ui ao CSS
Gere CSS profissional e acessível que corresponde à estética limpa do shadcn/ui. Esta skill fornece padrões abrangentes para variáveis CSS, cores HSL, escalas de espaçamento e técnicas modernas de layout.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "shadcn-aesthetic". Estilizar um formulário de login com CSS moderno
النتيجة المتوقعة:
- Formulário completo com variáveis CSS para cores
- Espaçamento consistente usando escala de 4px
- Estados focus-visible para acessibilidade
- Suporte a modo escuro integrado
- Transições suaves em todos os estados interativos
استخدام "shadcn-aesthetic". Criar um layout de dashboard com cards
النتيجة المتوقعة:
- Layout em grid com colunas auto-fit
- Componentes de card com sombras apropriadas
- Espaçamento responsivo usando variáveis CSS
- Anéis de foco acessíveis em todos os elementos interativos
استخدام "shadcn-aesthetic". Refatorar meu CSS antigo para padrões modernos
النتيجة المتوقعة:
- Cores hexadecimais fixas substituídas por variáveis HSL
- Escala de espaçamento de 4px implementada em todo o código
- focus-visible adicionado para navegação por teclado
- Sobrescritas de modo escuro criadas na classe .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
Refatorar CSS legado para usar variáveis, cores HSL e escalas de espaçamento consistentes.
Construir componentes tematizáveis
Criar componentes com suporte completo a tematização e compatibilidade com modo escuro.
Corresponder à estética shadcn
Construir componentes que correspondem à aparência limpa e profissional do 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.
أفضل الممارسات
- Use variáveis CSS para tudo que precisa de tematização
- Aplique formato de cor HSL para permitir fácil manipulação de opacidade
- Mantenha espaçamento consistente usando a escala base de 4px
تجنب
- Evite cores hexadecimais fixas sem variáveis
- Não use valores aleatórios de pixels para espaçamento
- Nunca remova outline sem fornecer substituto focus-visible