スキル: リデザイン & 監査
監査ファーストのリデザイン。動作を維持します。
手順
workflows/redesign-audit.mdを読む(スキャン→診断→指示→適用→検証の完全シーケンス+出力完全性)。- コードベースをスキャンする:フレームワーク、スタイリング方法(→一致する
frameworks/アダプターにルーティング)、トークンの実態、コンポーネント、保存すべきもの。 - Banned Defaultsチェックリスト(
taste/design-taste.md)+レビュールーブリック(design-reviewスキル)で診断する。優先順位付きの問題一覧を生成する。 - 指示:ブランドに合ったアーキテクチャ/システム(
apply-aestheticスキル)を選択する。 - 順番に適用する — トークン→タイポグラフィ/スペーシング→コンポーネント状態→モーション。ルート/データ/マークアップのセマンティクスは変更しない(a11y修正を除く)。
- 検証:
design-review+a11y-auditを再実行する。以前動作していたすべてのフローをスモークテスト。ダークモード+レスポンシブのスポットチェック。トークンソース上でscripts/validate_contrast.py、変更コード上でscripts/lint_hardcodes.pyを実行する。
ガードレール
動作している機能を美観のために犠牲にしない。コントラスト基準を満たさないブランドカラーを本番に出さない。既存のアクセシビリティ対応を削除しない。完全なファイルを提供し、プレースホルダーを残さない。
シングルテーマの一貫性(マルチページアプリでは重要)
1つの共有トークンテーマに統合し、すべてのページがそれを使用する — 異なるページが異なるパレットのままのリデザインは失敗です。ページごと/アドホックな色をセマンティックトークンに置き換え、scripts/lint_hardcodes.pyでどのページもテーマ外の値を再導入していないことを検証します。テーマの切り替えは1つのトークンソースから行わなければならず、ページ編集から行ってはなりません(.claude/rules/tokens-and-color.md → シングルテーマの一貫性)。