Compétences frontend-design
🎨

frontend-design

Sûr 🌐 Accès réseau

Projurar Interfaces Frontend de Grau de Produção

Également disponible depuis: sickn33,7Spade,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics

Esta habilidade cria interfaces frontend distintas e prontas para produção que se destacam dos designs genéricos gerados por IA. Ele entrega componentes web polidos com estética ousada e atenção meticulosa aos detalhes.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "frontend-design". Criar uma barra de navegação com estética de design brutalista

Résultat attendu:

  • Tipografia em maiúsculas bold com espaçamento intenso entre letras
  • Esquema de cores preto e branco agudo com bordas de destaque
  • Estados hover com cores invertidas e efeitos de escala
  • Menu hamburger apenas CSS com animação de revelação suave
  • Posicionamento fixo com efeito de desfoque no fundo

Utilisation de "frontend-design". Projetar uma seção de preços com tema orgânico e inspirador na natureza

Résultat attendu:

  • Paleta de cores suaves de tons terrosos com acentos de musgo verde e terracota
  • Bordas curvas fluidas e valores irregulares de border-radius
  • Animações sutis de partículas flutuantes em segundo plano
  • Estados hover de cards com elevação suave e brilho de sombra
  • Par de tipografia: fonte de exibição arredondada com corpo sans-serif limpo

Audit de sécurité

Sûr
v5 • 1/17/2026

Documentation-only skill containing markdown guidance for frontend design. No executable code, scripts, network calls, filesystem operations, or external command invocations are present. The SKILL.md file contains only design instructions and best practices.

1
Fichiers analysés
42
Lignes analysées
1
résultats
5
Total des audits

Facteurs de risque

🌐 Accès réseau (1)
skill-report.json:6
Audité par: claude Voir l’historique des audits →

Score de qualité

38
Architecture
100
Maintenabilité
85
Contenu
46
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Construir Componentes Polidos

Crie componentes React, Vue ou JS vanilla distintos com estética criativa.

Prototipagem Rápida de Interfaces

Traduza conceitos de design em código frontend funcional com direção visual ousada.

Implementações de Páginas Completas

Desenvolva páginas web completas com sistemas de design coesos e efeitos visuais envolventes.

Essayez ces prompts

Componente Básico 
Create a [component name] with [functional description]. Use a [specific aesthetic direction] style.
Elemento Animado 
Build an animated [element type] featuring [specific animation effects]. Choose a [mood/theme] aesthetic.
Seção Temática 
Design a [section name] section with [brand/tone] aesthetics. Include [key elements] and [animation effects].
Página Completa 
Create a complete [page type] page with [specific theme] design. Implement all sections with consistent aesthetics.

Bonnes pratiques

  • Comprometa-se com uma direção estética ousada antes de codificar e execute-a consistentemente
  • Use variáveis CSS para temas consistentes e personalização fácil em todo o design
  • Priorize animações apenas CSS para desempenho e então aprimore com bibliotecas JavaScript

Éviter

  • Usar fontes genéricas como Arial, Inter ou Roboto sem estilização intencional
  • Aplicar gradientes roxos em fundos brancos como estilização padrão
  • Construir layouts previsíveis sem interesse espacial ou surpresa visual

Foire aux questions

Quais frameworks esta habilidade suporta?
A habilidade funciona com HTML/CSS/JS, React, Vue e outros frameworks frontend modernos conforme solicitado.
Posso usar esta habilidade com qualquer produto Claude?
Sim, esta habilidade é compatível com Claude, Codex e Claude Code para tarefas de design frontend.
Esta habilidade cria efeitos de animação?
Sim, a habilidade implementa animações CSS, micro-interações e pode usar bibliotecas de animação como Motion para React.
Como obtenho designs únicos a cada vez?
Forneça direções estéticas específicas. A habilidade evita intencionalmente escolhas comuns para gerar designs distintos.
O código gerado está pronto para produção?
Sim, a habilidade produz código funcional e de grau de produção que segue melhores práticas e padrões modernos.
Posso solicitar temas escuros ou paletas de cores específicas?
Sim, especifique suas preferências de tema. A habilidade suporta designs com tema claro, escuro e personalizado com variáveis CSS.

Détails du développeur

Auteur

anthropics

Licence

Complete terms in LICENSE.txt

Dépôt

https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design

Réf

main

Structure de fichiers

📄 SKILL.md