frontend-component

ツール名、入力、出力、エラーが曖昧だと、エージェントは失敗します。このスキルは、ツールの説明、スキーマ、レスポンス形式、テストのための実践的なパターンを提供します。

構造化されていないバグ修正は時間を浪費し、本当の失敗原因を隠すことがあります。このスキルは Claude、Codex、Claude Code に、証拠に基づく根本原因分析をガイドします。

本番運用チームには、明確な信頼性目標と再現可能なインシデント対応の実践が必要です。このスキルは、SLO、エラーバジェット、アラート、ポストモーテムのためのSREテンプレートを提供します。

Reactチームには、モダンなNext.jsで機能する一貫したUIパターンが必要です。このスキルは、shadcn/uiのセットアップガイダンス、コンポーネント例、フォームバリデーション、テーブル、サイドバー、ダークモードパターンを提供します。

ユーザーが進捗、応答状態、UIの変化を確認できない場合、リアルタイムAIチャットは壊れているように感じられます。このスキルは、Claude、Codex、Claude Codeに、ストリーミングのライフサイクル、進捗イベント、クライアント効果、クライアントツールのパターンを提供します。

長い AI セッションでは、コンテキストが増えたり、競合したり、注意をそらす素材が含まれたりすると、精度が低下することがあります。このスキルは、Claude、Codex、Claude Code が劣化パターンを特定し、実用的な緩和手順を選ぶのに役立ちます。

フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。

フルスタックプロジェクトでは、一貫したセットアップ、アーキテクチャ選定、品質チェックが必要になることがよくあります。このスキルは、React、Next.js、Node.js、GraphQL、PostgreSQL の作業向けにスクリプトとリファレンスを提供します。

React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。

React TypeScript の作業では、event、hook、route の正確な型が必要になることがよくあります。このスキルは、型付きcomponents、React 19 APIs、routing に焦点を当てたパターンを提供します。

React と Next.js アプリは、ウォーターフォール、大きなバンドル、回避可能な再レンダリングによって速度が低下しがちです。このスキルは、エージェントがより安全にパフォーマンス重視の変更を行うための具体的なルールを提供します。

ReactおよびNext.jsプロジェクトでは、ルーティング、コンポーネント、スタイリング、データ、フォーム、テスト、デプロイ全体で一貫したセットアップ方針が必要になることがよくあります。このスキルは、Claude、Codex、Claude Codeに、モダンなフロントエンドアプリケーションを計画および構築するためのフェーズベースのワークフローを提供します。