arrange

概要

arrangeとは？

arrangeは、レイアウト、間隔、視覚的リズムの向上に特化したUIデザインスキルです。単調なグリッド、不揃いな間隔、弱い視覚的階層を抱えるプロジェクトに最適で、フロントエンドチームやデザイナーにおすすめです。インターフェースが窮屈に感じられたり、明確な整列が欠けていたり、構成を強化したい場合に、arrangeは評価と改善の実践的な指針を提供します。

arrangeを使うべき人

• 視覚的階層やリズムを洗練させたいUIデザイナー
• Reactなどのフレームワークを使うフロントエンド開発者
• ユーザーからのレイアウトや間隔に関する不満を解消したいチーム

arrangeが解決する課題

• 単調で繰り返しの多いグリッドレイアウト
• 要素間の任意または不揃いな間隔
• 弱い視覚的階層や不明瞭なグルーピング
• 窮屈で整列が不十分なUIコンポーネント

使い方

インストール手順

1. 以下のコマンドでarrangeをインストールします：
   npx skills add https://github.com/pbakaus/impeccable --skill arrange
2. ワークフローの概要を掴むために、まずSKILL.mdファイルを確認してください。
3. README.md、AGENTS.md、metadata.jsonなどの補助ファイルも参照して背景情報を把握しましょう。
4. rules/、resources/、references/、scripts/フォルダ内の資料も活用してください。

ワークフローの案内

• MANDATORY PREPARATIONの手順に従い、まず$frontend-designを呼び出してデザイン原則やコンテキストを収集します。デザインコンテキストがない場合は、先に$teach-impeccableを実行してください。
• 現状のレイアウトを間隔の一貫性、視覚的階層、構造の明確さの観点から評価します。
• arrangeの推奨に基づき、計画的にレイアウト改善を実施します。
• ワークフローはプロジェクトや使用ツールに合わせて調整し、丸写しは避けてください。

重要なファイル

• SKILL.md（主要なワークフローと評価手順）

よくある質問

詳細はどこで確認できますか？

ファイルタブで全ファイルツリーを確認できます。ネストされた参照や補助スクリプトも含まれています。

arrangeはすべてのフロントエンドプロジェクトに適していますか？

arrangeはレイアウト、間隔、視覚的階層が重要なプロジェクトに最適です。特にReactなどのモダンなフロントエンドフレームワークで効果的です。

プロジェクトにデザインコンテキストがない場合は？

MANDATORY PREPARATIONの手順に従い、まず$teach-impeccableを実行して基本的なデザインコンテキストを整えてからarrangeを使用してください。