develop-frontend

バックエンドとフロントエンドにまたがるデバッグでは、コンテキストが失われたりリグレッションテストを見落としたりすることがあります。このスキルは、根本原因分析、最小限の修正、検証、プルリクエストへの引き継ぎをガイドします。

アーキテクチャレビューでは、バックエンド、フロントエンド、ドキュメントにまたがるプロジェクト固有のルールが見落とされがちです。このスキルは、Claude、Codex、Claude Code が一貫したレビュー結果を出せるよう、厳格なチェックリストに沿って進めます。

バックエンドの変更は、プロジェクトの規約、データベースドキュメント、テスト期待値からずれることがあります。このスキルは、タスク受け入れからAPI、データ、テスト、検証まで、構造化されたSpring Boot/MyBatisワークフローを提供します。

コミット、ファイル、テスト、issueリンクを要約する必要がある場合、プルリクエストの準備には時間がかかることがあります。このスキルはリポジトリの変更を確認し、PR本文を作成し、ブランチをプッシュして、GitHub CLIでPRを開きます。

OpenAPI契約が変更されると、手動で更新するAPIクライアントは乖離しがちです。このスキルはOrval生成と型チェックをガイドし、フロントエンドクライアントの整合性を保ちます。

Figma MCPの出力には、保守しにくいデザイン変数やインラインスタイルが含まれることがあります。このスキルは、それらの値を標準のTailwind CSSクラスとプロジェクトトークンにマッピングします。

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

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

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

Vue Options API プロジェクトでは、型安全性や正しい this バインディングが失われることがあります。このスキルは、より安全な Vue コンポーネントのための実践的なパターンを提供します。

Playwrightスイートは、設定、ロケーター、フィクスチャに一貫性がないと不安定になることがあります。このスキルは、信頼性の高いブラウザテスト、デバッグ、再利用可能なページオブジェクトのための実践的なパターンを提供します。

弱いテストはリリースを遅らせ、リグレッションを見逃します。このスキルは、テスト戦略、TDD、自動化、カバレッジレビュー、Playwright による Web チェックをガイドします。