coding-standards
React 19 TypeScript コーディング標準を適用
Portfolio Buddy 2 の開発者は、コード品質を維持するために一貫したコーディングパターンが必要です。このスキルは、React 19 コンポーネント、TypeScript 型、プロジェクト構成に関する文書化された標準を提供します。
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "coding-standards". コーディング標準に従って MetricsTable コンポーネントを作成
Resultado esperado:
- TypeScript インターフェースを持つ関数コンポーネントを使用
- hooks をトップレベルに配置(useState、useMemo、useCallback)
- hooks に適切な依存配列を追加
- グローバル状態ライブラリを使用しない(Redux、Zustand など)
- コンポーネントを名前付きエクスポートでエクスポート
- コンポーネントを200行未満に制限
A utilizar "coding-standards". 350行のコンポーネントのリファクタリングを手伝って
Resultado esperado:
- 機能境界に基づいてサブコンポーネントを抽出
- ビジネスロジックをカスタム hooks に移動
- オーケストレーションロジックを親コンポーネントに保持
- コンポーネントごとに200行未満を目指す
A utilizar "coding-standards". リスクメトリクスを計算する関数を書いて
Resultado esperado:
- 計算を説明する JSDoc コメントを追加
- パラメータに明示的な TypeScript インターフェースを使用
- 空のデータなどのエッジケースを処理
- 型付けされた結果を返し、any は決して使用しない
Auditoria de Segurança
SeguroThis 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.
Fatores de risco
⚙️ Comandos externos (67)
🌐 Acesso à rede (1)
📁 Acesso ao sistema de arquivos (1)
Pontuação de qualidade
O Que Você Pode Construir
新規コンポーネントの作成
ポートフォリオアプリケーション用の新しい React コンポーネントを構築する際に、hook パターンと TypeScript 標準に従います。
コード貢献のレビュー
プルリクエストがコンポーネントサイズ、型、インポート整理に関する文書化された標準を満たしているか検証します。
技術的負債の削減
文書化されたパターンを使用して、PortfolioSection.tsx のような大きすぎるコンポーネントを小さな部品にリファクタリングします。
Tente Estes Prompts
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.
Melhores Práticas
- `any` を使用する代わりに、常にデータ構造用の TypeScript インターフェースを定義する
- サブコンポーネントとカスタム hooks を抽出して、コンポーネントを200行未満に保つ
- React hooks は完全な依存配列を持つトップレベルでのみ使用する
Evitar
- 適切な TypeScript インターフェースの代わりに `any` 型を使用する
- 条件文やループ内に hooks を配置する
- プレーンな React hooks が推奨される場合にグローバル状態ライブラリを混在させる
Perguntas Frequentes
このスキルはどの React 機能をカバーしていますか?
どの TypeScript ルールが適用されますか?
これは Claude Code とどのように統合されますか?
このスキルでデータは安全ですか?
なぜ200行のコンポーネント制限があるのですか?
これは eslint とどう比較されますか?
Detalhes do Desenvolvedor
Estrutura de arquivos
📄 SKILL.md