From ui-design-grounding
UI/UXデザインの意図を実装視点に翻訳・整理する。コンポーネント分解・責務整理・UI状態の洗い出し・実装構造の設計を行う。デザインからの実装・コンポーネント設計・実装プラン策定を依頼されたときに使用する。
npx claudepluginhub nextscape/ns-plugins --plugin ui-design-groundingThis skill uses the workspace's default tool permissions.
ui-design-grounding スキルを呼び出し、以下のリファレンスを読み込む:
Guides 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.
ui-design-grounding スキルを呼び出し、以下のリファレンスを読み込む:
ui-design-grounding/reference/design-system.mdui-design-grounding/reference/design-tokens.mdui-design-grounding/reference/color-system.mdui-design-grounding/reference/implementation.mdui-design-grounding/reference/responsive-design.mdui-design-grounding/reference/motion-design.mdui-design-grounding/reference/typography.md## デザイン意図の整理
- ...
## コンポーネント構成案
| コンポーネント | 粒度 | 責務 | 再利用元 |
|-------------|------|------|---------|
| ... | Atom/Molecule/Organism | ... | 既存/新規 |
## UI状態一覧
| コンポーネント | Initial | Loading | Success | Error | Empty |
|-------------|---------|---------|---------|-------|-------|
| ... | ... | ... | ... | ... | ... |
## 実装上の注意点
- ...
## 推奨される次のステップ
- `/audit-ui`（実装後の技術品質監査 — a11y・パフォーマンス・トークン準拠を確認）
- `/optimize-ui`（パフォーマンス最適化 — CWV・レンダリング・バンドルサイズ）