Layout

frontend-design を使うと、明確なビジュアルの方向性を持った、個性のある本番品質のフロントエンド UI を構築できます。この frontend-design skill は、ランディングページ、ダッシュボード、アプリのシェル、各種コンポーネントなど、実装だけでなく階層、タイポグラフィ、モーション、仕上げの精度が重要な場面向けです。デザイン先行の UI 制作に向けたインストール方法と使い方のガイドも含まれています。

design-system skill を使って UI システムを生成・監査し、既存コードからトークンを抽出し、実運用のリポジトリでスタイルの一貫性をレビューできます。

ux-designer は、リサーチ、アクセシビリティ、情報設計、インタラクションフロー、ワイヤーフレームの指針、UX ライティングに対応した構造化 UX デザイン skill です。AGENTS.md と用途別のルールファイルを使い、粗いプロダクト案を、判断基準が明確な設計意思決定へ落とし込むのに役立ちます。

design-reviewは、稼働中のインターフェースを監査し、余白、階層、ビジュアルの一貫性、インタラクション上の問題を見つけ、検証しながら段階的に修正していく、UX志向のデザインQAスキルです。実装前のplan-modeレビューにも対応しており、曖昧な助言ではなく、具体的なソース変更に踏み込んだdesign-reviewガイドが必要なときに役立ちます。

design-consultation は、ざっくりした製品アイデアを完成度の高いデザイン方針へと落とし込むための design-consultation skill です。`DESIGN.md` を唯一の参照元として作成し、プレビューや、タイポグラフィ、カラー、余白、レイアウト、モーションに関するシステムレベルの指針までまとめます。新規プロダクトや、一貫した出発点が必要な UI 面の設計に向いています。

mobile-ios-designスキルを使うと、Apple HIGの原則、SwiftUIパターン、ナビゲーション設計、アクセシビリティ、iPhoneとiPadに対応した適応レイアウトに基づき、iOSネイティブらしいUIガイダンスをエージェントが作成しやすくなります。

react-native-designは、React Native UIパターンに特化したスキルです。StyleSheetによるスタイリング、型付きのReact Navigation、Reanimated 3の活用をカバーし、クロスプラットフォーム対応の画面実装に役立ちます。

wshobson/agents リポジトリの responsive-design スキルを使って、container queries、fluid typography、CSS Grid、Flexbox、モバイルファーストの breakpoints を活用した適応型 UI レイアウトを計画・実装するためのガイドです。

typeset は、フォント選択、階層、サイズ、ウェイト、読みやすさを整えることで、UI のタイポグラフィを改善し、テキストに意図を持たせます。UI Design で、文字がありきたりで一貫性がない、または読み取りにくいときに使うと、迷いの少ない明確な টাইポグラフィ体系を作れます。

quieterは、うるさく見える、または刺激が強すぎるUIの視覚的な強さを抑えつつ、明瞭さ、階層構造、ブランドの意図は保つためのUIデザイン改善 skill です。親となる `$impeccable` skill の後に使うのが最適で、的を絞った調整を行う前に、強さの原因を見極めるのに役立ちます。

polishは、公開前にアライメント、余白、整合性、トークンの使い方、微細なディテールの問題を見つけるための、最終確認向けUIレビュー スキルです。すでに動いているものの、あと少し洗練が足りない画面、フロー、コンポーネントに最適です。不要な作り直しをせずに、リリース準備、デザインシステムとの整合、全体品質を高めるのに役立ちます。

layoutスキルは、UIが平坦に見える、詰まって見える、あるいは機械的に配置されているときに、余白、階層、構成を整えるのに役立ちます。一般的なスタイリングではなく、UI Design向けの実践的なlayoutガイドとして、レイアウト、整列、視覚的なリズムの問題に使えます。構造的な修正、グルーピングの明確化、より自然な読み順が必要な場面に最適です。

distill は、ノイズ、弱い情報階層、重複した選択肢を取り除き、画面上の主目的を明確にすることで、煩雑な UI デザインを整理しやすくするスキルです。画面を引き算で見直したいとき、優先順位をより明快にしたいとき、焦点を絞ったシンプル化レビューを行いたいときに適しています。

harden スキルは、UI デザインやインターフェース仕様を本番投入できる状態に近づけるために、エッジケース、空状態、エラー処理、長文、ローカライズ、権限、その他の実運用で起こりうる失敗パターンをテストします。UI Design 用の harden が必要で、レイアウト崩れを減らし、動作ルールをより完全にしたいときに使ってください。

delight skill を使って、使いやすさや集中を損なわずに、成功・読み込み中・空状態・オンボーディングの各状態へ、上品なUIの磨き込み、マイクロインタラクション、そしてブランドらしさを加えられます。

layout スキルは、UIの構成、余白、階層、整列、視覚的リズムを見直し、改善するためのスキルです。情報が詰まりすぎた画面や、構造が弱い画面のレビューに特に向いており、利用前に文脈整理のため /impeccable へ先に依存します。

brandkit は、ロゴシステム、アイデンティティデッキ、ビジュアルガイドラインボード、アートディレクションされたブランドプレゼンテーションなど、ブランディング業務向けのプレミアムなブランドキット画像生成スキルです。スタートアップ、開発者向けツール、セキュリティ、ゲーム、コンシューマーアプリ、ラグジュアリー系コンセプトまで、一貫性のあるスタジオ品質の仕上がりを狙えるよう設計されています。ありきたりな AI ムードボードではなく、洗練されたブランド世界観を作りたいときに使うスキルです。

industrial-brutalist-ui skill for UI Design は、スイス風グリッド、極端なタイポグラフィ対比、実用本位の配色、アナログな質感を使って、機械的で高密度なインターフェースを作るための skill です。ダッシュボード、編集システム、ポートフォリオページなど、規律のあるコントロールパネル風の見た目が必要な場面で、この industrial-brutalist-ui ガイドを活用できます。

bolder は、使いやすさを損なわずに、無難で平板になりがちな UI デザインへ個性と視覚的な強さを加えるためのスキルです。bolder を使うべき場面、必須の事前ステップである $frontend-design、そしてより効果的なプロンプト設計・診断・コントロールされた視覚的インパクトの出し方を確認できます。

arrange は、UIのレイアウト、余白、視覚的階層の課題を診断し、改善の方向性を示すためのスキルです。画面が詰まり気味なUI、単調で繰り返し感のあるグリッド、構成の弱いレイアウトを見直したいときに役立ちます。利用には $frontend-design のセットアップが必須で、必要に応じて $teach-impeccable のコンテキストも併用できます。

typeset は、フォント選定、情報の階層、サイズ、ウェイト、可読性を見直し、UIタイポグラフィを監査・改善するスキルです。プロダクトUI、ダッシュボード、ランディングページに適しています。事前に /frontend-design のコンテキストが必要で、デザイン文脈がない場合は /teach-impeccable も先に使う必要があります。

polishスキルは、リリース前にUIの最終品質チェックを行いたいチーム向けのスキルです。インターフェースの機能実装が完了し、デザインの前提も共有できている段階で使うことで、余白、整列、操作状態、文言、エッジケースなどの見落としを出荷前に洗い出せます。

normalizeは、UI機能を監査し、デザインシステムに沿う形へ整えるためのスキルです。normalizeの導入方法、必要なfrontend-designの事前準備、ページ・ルート・コンポーネントでの実践的な使い方を確認できます。

distillは、画面・コンポーネント・ユーザーフローを本来の目的に必要な要素まで絞り込むためのUIデザインスキルです。 clutterや視覚的ノイズ、機能肥大の抑制に役立ちますが、利用前に /frontend-design への依存があり、状況によっては /teach-impeccable も先に必要になります。