From ui-design-grounding
UI・UX・画面・ユーザーインターフェース・フロントエンドの設計・実装プラン策定・実装・コード修正などを行う際に、設計意図と判断軸を整理してからプランや実装に落とす。具体的な実装プランが明示されている場合でも必要な知識を活用して実装を進める。本スキルは独立コマンドスキル（audit-ui, score-ui 等）のナレッジベースとして機能する。
npx claudepluginhub nextscape/ns-plugins --plugin ui-design-groundingThis skill uses the workspace's default tool permissions.
- UI/UXの判断・提案・改善・修正を、**理由と前提を明示しながら安全に進める**。
reference/accessibility.mdreference/anti-patterns.mdreference/cognitive.mdreference/color-system.mdreference/design-system.mdreference/design-tokens.mdreference/implementation.mdreference/information-arch.mdreference/interaction.mdreference/motion-design.mdreference/responsive-design.mdreference/spatial-layout.mdreference/typography.mdreference/usability.mdreference/wording.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
守るべきスタンス
具体的な実装プランが既に存在する場合でも、本Skill配下の reference をガイドラインとして参照したうえで実装せよ。
本スキルは ナレッジベース である。
reference/）にUI/UX設計の判断基準・原則・パターンを集約| やりたいこと | コマンドスキル |
|---|---|
| 要件からUI構造を設計 | /design-ui |
| デザインを実装構造に翻訳 | /implement-ui |
| DESIGN.md の作成・更新 | /init-design |
| 技術品質の監査 | /audit-ui |
| UXヒューリスティクス採点 | /score-ui |
| リリース前の最終仕上げ | /polish-ui |
| エッジケースの堅牢化 | /guard-ui |
| パフォーマンス最適化 | /optimize-ui |
| デザインの印象を強める | /boost-ui |
| デザインの印象を抑える | /calm-ui |
| アニメーション追加 | /animate-ui |
| タイポグラフィ修正 | /typeset-ui |
| レイアウト・余白修正 | /arrange-ui |
| コンポーネント・トークン抽出 | /extract-ui |
| マルチデバイス適応 | /adapt-ui |
| テキスト・コピー改善 | /clarify-ui |
| UIの簡素化 | /slim-ui |
UI設計・実装の判断は、明示／暗黙いずれかのルールや前提に依存している。作業前に次を判定せよ。
前提が不明確な場合は、/init-design で DESIGN.md を生成すること。
最低限確認すべき情報
本Skillは、UI/UXに関するすべての知識をこのファイル内に保持しない。
詳細な原則・設計観点・実装方針は、必要に応じて以下を参照せよ。
usability.md — ニールセン10ヒューリスティクス、ペルソナテスト、P0-P3重篤度分類cognitive.md — 認知負荷（Cowanの限界）、違反パターン、記憶、注意information-arch.md — 情報階層、ナビゲーション設計color-system.md — OKLCH、ダークモード、60-30-10ルール、ティンテッドニュートラルtypography.md — フォント選定、モジュラースケール、垂直リズム、Fluid Typespatial-layout.md — 4ptグリッド、視覚階層、コンテナクエリ、タッチターゲットinteraction.md — 8インタラクティブ状態、フォーカスリング、Popover API、キーボードナビmotion-design.md — デュレーション体系、イージング、アニメーション性能、reduced-motionwording.md — ボタンラベル、エラーメッセージ、ボイス/トーン、i18n、用語一貫性accessibility.md — WCAG、focus-visible、reduced-motion、フォントサイズ、スキップリンクresponsive-design.md — モバイルファースト、コンテンツ駆動ブレイクポイント、入力方式検出design-system.md — コンポーネント設計、Atomic Design、バリアントdesign-tokens.md — Primitive/Semantic/Component トークン、命名、段階的導入implementation.md — コンポーネント粒度、責務分離、UI状態管理anti-patterns.md — 横断的アンチパターン、AI生成UI品質ゲート