DevelopmentMédio

Building Components

porvercel·vercel· v1.0.0 · atualizado em 2026-04-10

Score

Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.

ui-componentscomponent-designaccessibilityreactfront-end-developmentdesign-systems

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdbuilding-components/workflow

Understand Requirements: — Clarify the component's purpose, functionality, and target audience.

Design API: — Define a clear and composable API using slots, render props, or controlled/uncontrolled state.

Implement Accessibility: — Ensure ARIA compliance, keyboard navigation, and focus management.

Set Up Styling: — Choose a styling approach (CSS-in-JS, CSS modules, etc.) and implement design tokens.

Write Documentation: — Create clear and concise documentation with examples and usage guidelines.

Test Thoroughly: — Write unit and integration tests to ensure component functionality and stability.

Publish Component: — Package and publish the component to npm or a registry.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

60%

Árvore do Skill

Building Components

building-components

Fases Cognitivas6

1.SENSE

2.CONTEXTUALIZE

3.HYPOTHESIZE

4.RECOMMEND

5.ACT

6.REFLECT

Triggers8

build a new UI componentimplement accessibility in a componentcreate a composable component APIset up design tokens for a componentpublish a component to npmwrite documentation for a componentimplement the as-child patternwork with data attributes in a component

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança50%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download building-components

$ synaptic skills detail building-components

$ synaptic skills live building-components

Dependências

react typescript npm

Links

GitHub Repository