Voltar ao MarketplaceScore
DevelopmentMédioVerificado
React Component Generator
89
Generates React components with TypeScript, Tailwind and unit tests from descriptions or Figma designs.
reacttypescriptcomponentstailwindfigma
Linguagens
TypeScriptJavaScriptCSSHTML
Documento do Skill
SKILL.mdreact-component-gen/workflow
1
SENSE — Analyze component requirements
Interpret textual description or Figma design
Identify props, state, and events needed
2
CONTEXTUALIZE — Check project design system
Extract color, spacing, and typography tokens
Check existing components for reuse
3
HYPOTHESIZE — Define component architecture
Decompose into sub-components
Decisions: controlled vs uncontrolled, forwardRef, etc.
4
ACT — Generate code
TypeScript with prop interfaces
Responsive Tailwind CSS styling
Unit tests with React Testing Library
5
REFLECT — Validate output
Automatically generated Storybook story
Accessibility (ARIA, keyboard navigation)
Telemetria de Agentes
Execuções
35.2K
total
Taxa de Sucesso
87%
últimos 30d
Latência Média
2.8s
p50
Alucinação
3.0%
detecção
Uso por Plataforma
cursor18.2K
claude-code11.0K
codex4.0K
copilot2.0K
Árvore do Skill
React Component Generator
react-component-gen
Fases Cognitivas5
1.SENSE
2.CONTEXTUALIZE
3.HYPOTHESIZE
4.ACT
5.REFLECT
Triggers4
crie componentegerar componente reactcriar react componentcomponente UI
MCP Servers2
🔌
Figma MCP
Design token, component and asset extraction from Figma
npx figma-developer-mcpConfigConfigure FIGMA_ACCESS_TOKEN
📁
Filesystem MCP
Reading and writing files in the project workspace
AutoLocal workspace access
Skills Associados2
Avaliar este Skill
Score Breakdown
⭐Avaliação Humana92%
🤖Sucesso de Agentes87%
🕐Atualidade95%
🔗Saúde de Dependências100%
🕸️Centralidade no Grafo72%
🛡️Segurança49%
CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança
Instalação
$ skillschain install react-component-gen
$ skillschain use react-component-gen