coding-standards
Aplicar padrões de codificação React 19 TypeScript
Os desenvolvedores do Portfolio Buddy 2 precisam de padrões de codificação consistentes para manter a qualidade do código. Esta skill fornece padrões documentados para componentes React 19, tipos TypeScript e organização de projeto.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「coding-standards」を使用しています。 Criar um componente MetricsTable seguindo padrões de codificação
期待される結果:
- Usar componente funcional com interface TypeScript
- Colocar hooks no nível superior (useState, useMemo, useCallback)
- Adicionar array de dependências apropriado aos hooks
- Sem bibliotecas de estado global (Redux, Zustand, etc.)
- Exportar componente como named export
- Limitar componente a menos de 200 linhas
「coding-standards」を使用しています。 Ajude-me a refatorar um componente de 350 linhas
期待される結果:
- Extrair sub-componentes com base em limites de funcionalidade
- Mover lógica de negócio para hooks customizados
- Manter lógica de orquestração no componente pai
- Almejar menos de 200 linhas por componente
「coding-standards」を使用しています。 Escrever uma função para calcular métricas de risco
期待される結果:
- Adicionar comentários JSDoc explicando o cálculo
- Usar interfaces TypeScript explícitas para parâmetros
- Tratar casos extremos como dados vazios
- Retornar resultados tipados, nunca usar any
セキュリティ監査
安全This skill contains only markdown documentation with TypeScript code examples. All 91 static findings are false positives: hash strings triggered C2/crypto keywords, mathematical formulas were misidentified as cryptographic code, and TypeScript patterns were flagged as system reconnaissance. No executable code, network calls, file system access, or environment variable usage exists.
リスク要因
⚙️ 外部コマンド (67)
🌐 ネットワークアクセス (1)
📁 ファイルシステムへのアクセス (1)
品質スコア
作れるもの
Criação de novo componente
Seguir padrões de hooks e TypeScript ao construir novos componentes React para a aplicação de portfólio.
Revisar contribuições de código
Verificar se pull requests atendem aos padrões documentados para tamanho de componente, tipos e organização de imports.
Redução de débito técnico
Usar padrões documentados para refatorar componentes grandes como PortfolioSection.tsx em partes menores.
これらのプロンプトを試す
Create a new React 19 component following the coding-standards skill. Use functional component with TypeScript, hooks at top level, useMemo for derived state, and useCallback for handlers.
Define TypeScript interfaces for my data using the coding-standards skill. No any types, use strict null checks, and add JSDoc comments for complex functions.
Help me refactor this oversized component using patterns from coding-standards. Extract sub-components and move logic to custom hooks to stay under 200 lines.
Organize my imports following the coding-standards skill: React libraries first, then internal hooks, then utils, then types.
ベストプラクティス
- Sempre definir interfaces TypeScript para estruturas de dados em vez de usar `any`
- Manter componentes com menos de 200 linhas extraindo sub-componentes e hooks customizados
- Usar hooks React apenas no nível superior com arrays de dependências completos
回避
- Usar tipo `any` em vez de interfaces TypeScript apropriadas
- Colocar hooks dentro de condicionais ou loops
- Misturar bibliotecas de estado global quando hooks React simples são preferidos