skills は何をしますか？
アクセシビリティ、CSS、エコデザインのベストプラクティスに特化したフロントエンドスキルパック。エージェントワークフロー向け。
概要
このスキルパックは、AIエージェント（Claude Code、Cursor、Codexなど）と連携するために設計されたフロントエンドスキルセットです。アクセシビリティ、CSS設計、エコデザイン（持続可能なWeb開発）の3つの柱に基づき、高品質でユーザーフレンドリーかつ環境に配慮したフロントエンドコードの生成を支援します。
含まれるスキル
- アクセシビリティ: WCAG 2.1/2.2に準拠したHTML構造、ARIA属性の適切な使用、キーボード操作対応。
- CSS: BEM、ITCSSなどの設計手法を活用したモジュール化、パフォーマンス最適化（レイアウトシフト回避など）。
- エコデザイン: 軽量な画像・フォント・スクリプトの選定、レンダリングブロッキングの最小化、サーバー負荷低減。
使用方法
- エージェントの設定ファイル（例：
.cursorrules、claude.md）でこのスキルパックを参照してください。 - プロンプト内で
@skillsまたはスキル名を指定して、特定のベストプラクティスに基づいたコード生成をリクエストします。 - 各スキルは個別に有効化・無効化でき、プロジェクトの要件に応じて調整可能です。
例
ユーザー: 「@skills アクセシブルなナビゲーションメニューを実装して」
エージェント: WCAGに準拠し、キーボード操作可能な`<nav>`要素とARIAラベルを使用したメニューを生成します。
注意事項
- このスキルパックはベストプラクティスのガイドラインであり、すべてのケースで完璧な解決策を提供するものではありません。プロジェクトのコンテキストに応じて調整してください。
- エコデザインの推奨事項は、最新のWebパフォーマンス指標（Core Web Vitalsなど）に基づいています。