Habilidades react-component

⚛️

react-component

Name: react-component
Author: Awais68

Seguro 🌐 Acesso à rede📁 Acesso ao sistema de arquivos⚙️ Comandos externos

Construir componentes React com TypeScript

Crie componentes funcionais e hooks de React com TypeScript. Esta habilidade fornece padrões para construir componentes de UI acessíveis, performáticos e sustentáveis seguindo as melhores práticas modernas do React.

Suporta: Claude Codex Code(CC)

📊 71 Adequado

Baixar o ZIP da skill

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

Ative e comece a usar

Testar

A utilizar "react-component". Create a button component with loading state

Resultado esperado:

Arquivo de componente: Button.tsx com interface de props tipada
Usa React.memo para otimização de desempenho
Lida com estados desabilitado e de carregamento
Inclui tipos TypeScript adequados
Arquivo de teste: Button.test.tsx com interações
Storybook: Button.stories.tsx com variantes

A utilizar "react-component". Build a useUserData custom hook

Resultado esperado:

Arquivo do hook: useUserData.ts com interface de retorno tipada
Estados de carregamento e erro incluídos
useCallback para funções de callback estáveis
Tratamento de limpeza em useEffect
Testes unitários cobrindo caminhos de sucesso e erro

A utilizar "react-component". Create a modal dialog component

Resultado esperado:

Modal.tsx com gerenciamento de estado de abrir/fechar
Acessível com atributos ARIA e suporte a teclado
Renderização via portal para controle adequado de z-index
Clique no backdrop para fechar
Suporte a animação para transições de abrir/fechar

Auditoria de Segurança

Seguro

v5 • 1/16/2026

Pure documentation skill containing only markdown guidance and TypeScript code examples. No executable code, network calls, file system access, or environment variable access. All static analyzer findings are false positives: backticks in TypeScript code blocks were misidentified as shell execution, and metadata fields were flagged as file access. This is a legitimate React development guidance skill.

Arquivos analisados

484

Linhas analisadas

achados

Total de auditorias

Fatores de risco

🌐 Acesso à rede (5)

skill-report.json:6 SKILL.md:296 SKILL.md:297 SKILL.md:298 SKILL.md:299

📁 Acesso ao sistema de arquivos (1)

skill-report.json:6

⚙️ Comandos externos (27)

Auditado por: claude Ver Histórico de Auditoria →

Pontuação de qualidade

Arquitetura

100

Manutenibilidade

Conteúdo

Comunidade

100

Segurança

Conformidade com especificações

O Que Você Pode Construir

Construir widgets de UI e cards de KPI

Criar cards de KPI reutilizáveis, tabelas de dados e widgets de dashboard para aplicações corporativas

Extrair hooks personalizados reutilizáveis

Refatorar a lógica do componente em hooks personalizados com tipagem adequada e tratamento de erros

Construir componentes de formulário com validação

Criar componentes de formulário com TypeScript, validação e estados de erro acessíveis

Tente Estes Prompts

Criar componente simples

Create a React functional component called StudentKPICard that displays a student's name and attendance percentage. Use TypeScript and include a loading state.

Construir hook personalizado

Build a custom hook called useAttendance that fetches student attendance data. Include loading state, error handling, and a refetch function.

Componente com composição

Create a reusable Card component using composition patterns. It should accept a title, children content, and optional footer. Use TypeScript.

Formulário com validação

Create a StudentForm component using React Hook Form. Include name and email fields with required validation and error display.

Melhores Práticas

Sempre use componentes funcionais com interfaces explícitas de props em TypeScript
Inclua funções de limpeza em useEffect para evitar vazamentos de memória
Aplique React.memo e useCallback para componentes que recebem as mesmas props com frequência
Garanta acessibilidade com rótulos ARIA adequados e suporte à navegação por teclado

Evitar

Evite usar componentes de classe; use componentes funcionais com hooks
Não use any; sempre defina interfaces explícitas em TypeScript
Evite texto hardcoded; prepare componentes para internacionalização
Não pule o tratamento de erros ou estados de carregamento para operações assíncronas

Perguntas Frequentes

Qual versão do React esta habilidade suporta?

Compatível com React 18 e 19+ com padrões modernos de hooks e as melhores práticas mais recentes de TypeScript.

Esta habilidade cria arquivos de teste?

Sim, gera arquivos de teste Jest/Vitest e histórias do Storybook para cada componente.

Posso usar isso com Next.js?

Sim, os padrões funcionam com componentes do Next.js App Router e Pages Router.

Os dados são armazenados ou transmitidos?

Não. Esta é uma habilidade baseada apenas em prompt, sem armazenamento de dados, transmissão ou chamadas externas.

Isso funciona com componentes shadcn/ui?

Sim, integra padrões do shadcn/ui e usa as convenções de componentes deles.

Como isso se compara à geração de código genérica?

Fornece padrões específicos de React, tipagem em TypeScript, acessibilidade e testes integrados.

Detalhes do Desenvolvedor

Autor

Awais68

Licença

MIT

Repositório

https://github.com/Awais68/hackathon-2-phase-ii-full-stack-web-app/tree/main/.claude/skills/react-component

Referência

main

Estrutura de arquivos

📄 SKILL.md