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.12.1bash
$ schematize install web譲れない基準
「速くするため」に無効化しない。完全な一覧はスキルに。
サーバー側の機密
バンドルや 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 からコンポーネント/フックの索引を(再)生成。/web-ops環境／プレビューのフロー、デプロイはパイプライン経由のみ（サイトへの直接投入は不可）、マルチアプリでは並列ビルド／独立性を検証する/web-iamクライアント側 IAM（auth.<domain> 上の自前 auth フロント、ログイン／2FA／パスキーのフロー、デバイス一覧、不可逆ログアウト）を強制・監査・スキャフォールドする/web-claudeリポジトリ直下の CLAUDE.md をスキルの現行バージョンで作成または更新（上書き）する。ローカルのカスタマイズがあればバックアップする/web-loadフロントエンドの規範体系すべて（アーキテクチャ／クライアント・サーバー境界、クリーンコード、セキュリティ、アクセシビリティ、パフォーマンス/CWV、SEO/i18n、テスト）を強制的にコンテキストへ読み込み、プ…に適用しはじめる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 で確認。
ディスカッション
読み込み中…