rayden-code
Gera código React usando componentes e padrões de design específicos. Ajuda a criar interfaces de usuário consistentes e bonitas rapidamente.
O que ela faz
Este código gera partes de sites ou aplicativos usando componentes prontos da biblioteca Rayden UI. Ele garante que o código siga as regras de design e use os elementos corretos.
Quando usar
- ✓Ao criar uma nova página ou funcionalidade com Rayden UI.
- ✓Para montar rapidamente layouts como painéis, páginas de login ou configurações.
- ✓Quando você precisa de código React que siga um sistema de design específico com precisão.
Exemplo do que pedir para a IA
“Crie uma página de painel com cartões de métricas, uma tabela de pedidos recentes e um feed de atividades.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Ele analisa seu pedido, consulta um guia completo de componentes e regras de design, planeja como os elementos se encaixam e gera o código React e Tailwind CSS. Depois, ele verifica se o código está correto e segue as diretrizes de design.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill rayden-codeOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/rayden-code/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Rayden Code Skill
Visão Geral
Gere código React + Tailwind CSS de qualidade de produção usando a biblioteca de componentes de UI Rayden (34 componentes). A skill carrega uma referência completa da API com cada componente, cada prop, tokens de design, padrões de layout e uma lista explícita de anti-padrões — prevenindo componentes alucinados e saídas genéricas de IA. Construído sobre o sistema de design Rayna UI.
Quando Usar Esta Skill
- Você está construindo uma nova página ou recurso usando componentes Rayden UI
- Você quer estruturar um dashboard, landing page, tela de autenticação, página de configurações ou tabela de dados
- Você precisa gerar código React que siga precisamente um sistema de design específico
- Você quer prototipar UI rapidamente com uso correto de componentes e estética premium
- Você está codificando no "vibe" e quer saídas compatíveis com o sistema de design
Como Funciona
- Analisa a solicitação — Identifica o tipo de página, componentes necessários e modelo de dados
- Carrega RAYDEN_RULES.md — Referência completa: 34 componentes com props completas, filosofia de design, classes de token, padrões de layout, anti-padrões e regras de acessibilidade
- Planeja o layout — Decide a estrutura da página, seleção de componentes, espaçamento, cor e estratégia de elevação
- Gera código — Escreve React + Tailwind CSS usando apenas componentes documentados e classes de token
- Auto-valida — Executa um checklist de 16 pontos cobrindo correção (componentes/props válidos, uso de token, aninhamento) e qualidade de design (espaço em branco, hierarquia, moderação, responsividade)
Exemplos
Codifique um dashboard SaaS no "vibe"
/rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed
Caso de uso: Você está construindo uma ferramenta de análise interna e precisa de uma página de dashboard completa com grade de MetricsCard, Tabela classificável e barra lateral ActivityFeed — tudo com importações Rayden corretas e classes de token.
Estruture uma página de login
/rayden-code login page with email and password
Caso de uso: Você precisa de um formulário de autenticação centralizado com componentes Input, um Button primário e hierarquia visual adequada — seguindo o padrão "Auth / Focused Form" da Rayden.
Construa uma página de configurações de administrador
/rayden-code settings page with profile section, notification toggles, and danger zone
Caso de uso: Você está adicionando uma área de configurações ao seu aplicativo e precisa de seções de formulário com componentes Toggle, uma zona de ação destrutiva e um layout restrito de coluna única.
Crie uma página de preços
/rayden-code pricing page with 3 tiers and a feature comparison table
Caso de uso: Você precisa de uma seção de preços de marketing com componentes Card para cada plano, Badge para o plano recomendado e uma Tabela para comparação de recursos.
Construa uma grade de produtos de e-commerce
/rayden-code product catalog with filters, search, and a card grid
Caso de uso: Você está construindo uma loja virtual e precisa de uma grade de produtos responsiva com filtros Chip, pesquisa Input, Paginação e Cards com imagens — tudo usando as regras de layout e espaçamento da Rayden.
Melhores Práticas
- Descreva o que você quer em linguagem clara — a skill mapeia sua solicitação para os componentes corretos
- Instale
@raydenui/uiem seu projeto primeiro (npm install @raydenui/ui) - Importe
@raydenui/ui/styles.cssno ponto de entrada do seu aplicativo para que os tokens de design funcionem - Revise o código gerado para lógica de negócios — a skill cuida da UI, não da busca de dados
- Use em conjunto com
/rayden-usese você também quiser o mesmo design construído no Figma
Notas de Segurança e Proteção
- Esta skill apenas lê seu arquivo de regras empacotado e escreve código em seu projeto
- Sem requisições de rede externas
- Sem segredos ou credenciais envolvidos
- O código gerado usa padrões React padrão sem
evalou execução de código dinâmico
Armadilhas Comuns
| Problema | Solução |
|---|---|
| Componentes não renderizando corretamente | Certifique-se de que @raydenui/ui/styles.css está importado no ponto de entrada do seu aplicativo |
| Erro "Componente não existe" | A skill usa apenas componentes documentados — verifique se você está solicitando algo que a Rayden não possui |
| Cores parecem erradas | Use classes de token (bg-primary-500) em vez de valores hexadecimais. Certifique-se de que o CSS da Rayden foi carregado |
| Layout não responsivo | A skill gera código responsivo por padrão — verifique se sua tag meta de viewport está definida |
Skills Relacionadas
rayden-use— Construa componentes e telas Rayden UI no Figma via MCP (incluído no mesmo pacote)
Limitações
- Use esta skill apenas quando a tarefa corresponder claramente ao escopo descrito acima.
…
Perguntas frequentes
O que são componentes Rayden UI?
São blocos de construção pré-fabricados para criar interfaces de usuário, como botões, formulários e cartões, que seguem um estilo visual consistente.
O que são 'tokens de design'?
São valores básicos definidos para cores, espaçamentos e fontes (como 'cor primária' ou 'espaçamento médio') que garantem a consistência visual em todo o projeto.
Por que preciso importar `@raydenui/ui/styles.css`?
Este arquivo contém as regras de estilo e os tokens de design para que os componentes apareçam corretamente e sigam o visual definido.
Detalhes
Descrição original do autor
Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #3955
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC