normalize

概要

normalizeスキルとは？

normalizeスキルは、ユーザーインターフェースの機能をデザインシステムの基準に合わせて監査し、スペーシング、トークン、既存のパターンに沿って再調整するUIデザインツールです。デザインのズレやスタイルの不一致を解消し、機能をシステムのガイドラインに戻したいチームや個人に最適です。

normalizeは誰が使うべき？

デザインシステムを維持しているデザイナー、フロントエンド開発者、プロダクトチームに最適です。UIの不整合に気づいたとき、デザインのズレを修正したいとき、新しい機能がデザインシステムに準拠しているか確認したいときに活用してください。

normalizeが解決する課題

• デザインシステム基準からの逸脱を特定し修正
• トークン、スペーシング、パターンに沿ってUIコンポーネントを再調整
• 製品全体の視覚的・操作的一貫性の維持を支援

使い方

インストール手順

1. 以下のコマンドでnormalizeをインストールします：
   npx skills add https://github.com/pbakaus/impeccable --skill normalize
2. 詳細なワークフローや背景はSKILL.mdファイルを確認してください。
3. README.md、AGENTS.md、metadata.jsonなどの補助ファイルも参考にしてください。

ワークフロー概要

• まず/frontend-designを呼び出してデザインのコンテキストや原則を収集します。
• デザインコンテキストがない場合は/teach-impeccableを実行して基準を設定します。
• デザインシステムのドキュメント、UIガイドライン、コンポーネントライブラリを確認します。
• 機能の不整合を分析し、正規化計画を立てます。
• 計画に沿ってUIを調整し、デザイントークンやパターンに合わせます。
• 変更を整理し、将来の参照のためにドキュメント化します。

normalizeが適している状況

• UIの一貫性を監査したいとき
• 機能がデザインシステム基準からズレているとき
• 新しいメンバーをデザインシステムの運用に慣れさせたいとき

normalizeが推奨されない状況

• デザインシステムやUIガイドラインがない場合
• 純粋にバックエンドや非視覚的な作業の場合

よくある質問

補助ファイルはどこで見られますか？

リポジトリのFilesタブを開くと、SKILL.mdや関連ファイル、参考資料やヘルパースクリプトをプレビューできます。

normalizeはデザインシステムが必要ですか？

はい、normalizeは確立されたデザインシステムやUIガイドラインがある場合に最も効果的です。ない場合は、まず/teach-impeccableで作成してください。

normalizeは機能的な問題も修正できますか？

normalizeは視覚的・デザイン的一貫性に焦点を当てています。機能的な問題は別途対応が必要ですが、正規化の過程でデザインと機能の交差点が明らかになることがあります。

normalizeを自分のワークフローにどう適応させればいいですか？

SKILL.mdや補助ファイルのガイドに従いながら、自分のリポジトリやツール、チームのニーズに合わせてプロセスを調整してください。ワークフローを丸写しせず、UIデザイン監査の基盤として活用しましょう。