From ui-design-grounding
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/responsive-design.mdui-design-grounding/reference/spatial-layout.mdui-design-grounding/reference/accessibility.mdui-design-grounding/reference/interaction.mdmin-width（モバイルファースト）か max-width（デスクトップファースト）かclamp() でブレイクポイント間のフルードスケーリングmin-width）への統一ナビゲーション:
コンテンツ:
<details>/<summary> で補助情報を折りたたみsrcset + sizes でレスポンシブ配信グリッド:
repeat(auto-fit, minmax(280px, 1fr))@container）/* タッチデバイス: 大きなタッチターゲット */
@media (pointer: coarse) {
.interactive { min-height: 44px; padding: 12px; }
}
/* hover不可: hover依存UIの代替 */
@media (hover: none) {
.tooltip-trigger { /* タップで表示に変更 */ }
}
.bottom-bar {
padding-bottom: env(safe-area-inset-bottom);
}
<meta name="viewport" content="viewport-fit=cover"> の設定レスポンシブ適応後、以下のコマンドスキルの実行を検討する:
/guard-ui — デバイス固有のエッジケースを堅牢化/optimize-ui — レスポンシブ画像・パフォーマンスを最適化