Skills · Claude Code · Frontend
SEO と速度で速いフロントエンド — 標準で。
Next.js または Astro を strict な TypeScript で。機密は常にサーバー側、WCAG 2.2 AA アクセシビリティ、契約としての Core Web Vitals、SEO と構造化データ、言語ごとの URL による i18n、自動生成サイトマップ。schematize-go のフロントエンド版。
schematize-web · v1.10.0bash
$ schematize install webFrontend · Next.js/Astro/web-help · github.com/schematizeme/schematize-cli
譲れない基準
「速くするため」に無効化しない。完全な一覧はスキルに。
サーバー側の機密
バンドルや NEXT_PUBLIC_/VITE_/PUBLIC_ には絶対に置かない。鍵を使う呼び出しは BFF 経由。トークンは HttpOnly クッキー、localStorage は不可。
本当にアクセシブル
WCAG 2.2 AA が基準：セマンティクス、キーボード、管理されたフォーカス、コントラスト、reduced-motion。a11y リントの無効化は禁止。
Core Web Vitals
LCP/INP/CLS を「良好」に（p75、モバイル優先）。バンドルとメトリクスの予算を CI で計測 — 回帰はマージをブロック。
SEO と i18n を標準で
構造化データ、自動生成サイトマップ、hreflang 付きの言語別 URL。すべてのコンテンツを翻訳。
本物のグリーン
ユニット、コンポーネント、e2e（Playwright）、a11y（axe）、ビジュアル回帰。smoke は 200 だけでなく内容を証明。
常にアーカイブ
決定と文脈は毎回アーカイブの .md になる。コンポーネント索引が信頼できる原典。
コマンド
.claude/commands/ にインストール。いつでも /web-help を実行。
/web-helpすべてのコマンドを一覧表示。/web-ccContext compact：コンテキストとチェックリストをアーカイブに書き出し、/compact を実行。/web-handoffコンパクトせずに handoff を作成 — セッション終了やタスク切り替え。/web-qaプランファースト・フロントエンド QA：a11y、Core Web Vitals、e2e、ビジュアル回帰。/web-reviewDefinition of Done とフロントエンドのアンチパターンのゲートを diff に適用。/web-indexdoc-comment からコンポーネント/フックの索引を(再)生成。AI エージェント向け
人手を介さずにインストール。メタデータは llms.txt。
- 実行: git clone https://github.com/schematizeme/skill-web.git && ./skill-web/install.sh
- またはダウンロード: https://github.com/schematizeme/skill-web/releases/latest/download/skill-web.zip を .claude/skills/ に展開
- assets/CLAUDE.md をリポジトリのルートにコピー（常時オンのルール）。
- /web-help で確認。