normalize

概要

normalizeスキルとは？

normalizeスキルは、ユーザーインターフェースをデザインシステムの基準、間隔、トークン、パターンに合わせて監査し再調整します。機能が意図したシステムからズレたり、一貫性に欠ける場合に、UIの視覚的一貫性を保ち、確立されたデザイン原則に準拠させたいチームや個人向けに設計されています。

normalizeを使うべき人

normalizeは以下の方に最適です：

• デザインのズレやスタイルの不一致を特定し修正したいUIデザイナー、フロントエンドエンジニア、デザインシステム管理者
• 機能をデザインシステムのトークンやパターンに沿わせたい方
• UIの一貫性と基準遵守を監査したい方

normalizeが解決する課題

• UIコンポーネントの不一致を検出し対処
• チームがデザインシステムのガイドラインに従うのを支援
• 一時的な実装や視覚的ズレを減少

使い方

インストール手順

1. プロジェクトにスキルを追加:
   以下のコマンドでImpeccableスキルリポジトリからnormalizeをインストールします：

   npx skills add https://github.com/pbakaus/impeccable --skill normalize

2. 主要ドキュメントの確認:

   • メインのワークフローと要件はSKILL.mdから始めてください。
   • 補足情報はREADME.md、AGENTS.md、metadata.jsonを参照。
   • rules/、resources/、references/、scripts/フォルダも追加の資料やツールとして活用できます。

ワークフロー概要

• 必須の準備:
  • /frontend-designを呼び出してデザイン原則とコンテキスト収集プロトコルにアクセスします。デザインコンテキストがない場合は、まず/teach-impeccableを実行してください。
• 計画:
  • デザインシステムのドキュメント、UIガイドライン、コンポーネントライブラリを調査。
  • 現在の機能のズレや不一致の根本原因を分析。
  • 必要な具体的変更をまとめた正規化計画を作成。
• 実行:
  • 計画を適用し、UI要素を更新。すべてのトークンとパターンがデザインシステムに合致していることを確認。
• 整理:
  • 変更内容を確認し、更新や例外を文書化。

ワークフローへの適応

normalizeは柔軟に使えます。リポジトリやツール、チームのプロセスに合わせて指示をそのままコピーせず、UI整合のベストプラクティスの参考として活用してください。

よくある質問

いつnormalizeを使うべきですか？

UIの不一致やデザインのズレ、トークンの不整合に気づいたときに、機能をデザインシステムに沿わせたい場合に使います。

まずどのファイルを確認すればいいですか？

正規化プロセスの全体像はSKILL.mdから始めてください。補足ファイルのREADME.mdやAGENTS.mdも参考になります。

normalizeは自動で変更を加えますか？

いいえ。normalizeは手動でのUI監査と再調整のための構造化されたワークフローとベストプラクティスを提供します。準備、計画、実行、レビューの各段階を案内します。

詳細やスクリプトはどこで見つけられますか？

リポジトリのFilesタブを開くと、ヘルパースクリプトや深い統合のための参考資料など、利用可能なすべてのリソースを確認できます。