DevelopmentMédio

React Component Writing Guide

porlobehub·lobehub· v1.0.0 · atualizado em 2026-04-10

Score

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

reactcomponent-developmentui-designfrontendroutinglobehub-uitsx

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdreact/workflow

1. Identify the component's purpose and requirements.

2. Choose appropriate components from `@lobehub/ui`, antd, or create custom components.

3. Implement the component's logic and UI using JSX and TypeScript.

4. Style the component using `antd-style` or inline styles.

5. Implement layout using `Flexbox` or `Center` from `@lobehub/ui`.

6. Integrate the component into the application's routing structure using Next.js App Router or React Router DOM.

7. Test the component's functionality and UI.

8. Refactor and optimize the component for performance and maintainability.

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

Depende de ←Artifacts Builder

100%

Depende de ←Ant Design

100%

Depende de ←TanStack Start Skill

100%

Depende de ←Next.js (v16+) — App Router

100%

Depende de ←Auth0 Quickstart

100%

Depende de ←React Performance Optimization

100%

Depende de ←React + Vite Best Practices

100%

Depende de ←next

100%

Depende de ←web-renderer-test

100%

Depende de ←valtio-define

100%

60%

Árvore do Skill

React Component Writing Guide

react

Fases Cognitivas5

1.SENSE

2.CONTEXTUALIZE

3.RECOMMEND

4.ACT

5.REFLECT

Triggers8

create a React componentmodify a React componentimplement UI layoutadd navigation to a React applicationuse lobehub/ui componentsimplement routing in a React appbuild a frontend feature with Reactwork with .tsx files

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 react

$ synaptic skills detail react

$ synaptic skills live react

Dependências

@lobehub/ui antd antd-style react-router-dom next

Links

GitHub Repository