Skill.md検索

src/pages/ ディレクトリに新規ページを自動生成でき、Astroの規約に準拠した構造がすぐに完成します。 BaseLayout.astroを自動適用するため、Swupによるページ遷移アニメーション対応が確実に実装され、サイト全体の一貫性が保たれます。 microCMS連携やTailwindスタイルなど、プロジェクトの既存パターンに自動で合わせるため、手作業での設定ミスが減ります。 動的ルート（[param].astro）やデータ取得も含めて対応でき、ブログ記事ページやカテゴリページなど様々なページタイプに対応できます。 Astroでウェブサイトやブログを構築・保守しているエンジニア プロジェクトに新機能ページを追加する際に規約チェックを自動化したい開発者 microCMS等ヘッドレスCMSと連携したコンテンツサイトを運用している人 Swupなどのページ遷移ライブラリを使用しており、新ページ追加時の設定漏れを防ぎたい人 このスキルは src/pages/ 配下に引数で指定したページを作成します。手順は既存ページ構造の確認（index.astroや動的ルート例）、BaseLayout.astroの使い方確認、ページ作成の3段階です。規約として、BaseLayout.astroを使用して Swupの#swupコンテナを含める、titleとdescriptionメタデータを設定、パラメータ必要時は[param].astro形式、microCMSデータはlibのクライアント使用でカテゴリは常にstring[]、Tailwindユーティリティクラス優先、既存コンポーネント再利用、React島はインタラクティブ機能必要時のみとしています。

React コンポーネント、カスタムフック、ユーティリティ関数などの単位に対して、Vitest を使ったユニットテストを自動生成します。 ページ全体のユーザーフロー（ログイン→検索→購入など）を Playwright で自動テストし、本当にユーザーが使える状態かを検証します。 Firebase や microCMS などの外部サービスをモック（偽物に置き換え）し、テスト環境を独立させて実行速度を上げます。 既存のテストパターンを参考に、プロジェクトの規約に合ったテストコードを作成し、チーム全体で同じ品質基準を保ちます。 テスト実行コマンドで自動検証でき、デプロイ前に不具合を早期発見できます。 QA エンジニアで、手動テストの手間を減らして自動化したい方 開発チームで、リリース前のバグ検出率を上げたい方 CI/CD パイプライン（自動デプロイ）を導入していて、自動テスト環境が必要な方

React コンポーネントやページが不必要に何度も再レンダリング（再描画）されていないかを診断し、パフォーマンス最適化の提案をします。 画像圧縮、遅延読み込み、Code Splitting などの具体的な最適化手法を提案し、ページの読み込み速度を改善します。 セマンティック HTML（正しい HTML タグ使用）、ARIA 属性、キーボード操作対応などをチェックし、視覚障害者や身体障害者も使えるサイトにします。 メタタグ（タイトル、説明文）、構造化データ、見出しの階層をチェックして、検索エンジン最適化（SEO）が十分か診断します。 XSS 対策（ユーザー入力の安全な処理）や API のセキュリティ設定をレビューし、セキュリティ上の問題がないか確認します。 フロントエンドエンジニアで、自分が作ったコンポーネントの品質を客観的に評価したい方 UX エンジニアで、ページ速度やアクセシビリティを改善して、ユーザー満足度を上げたい方 マーケティング担当者で、検索エンジンからのアクセス流入を増やしたい方