メニュー
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Find and load skills on demand. Use when you need a specialized skill for a task but don't know which one, or to load a skill by name.
Check for stuffbucket MCP server updates and apply them. Use when the user asks to update skills, check for new versions, or upgrade the stuffbucket MCP server.
Root index for the boundary-* family — differential closure analysis for code and AI-generated code. Treats each domain (types, schemas, state machines, shared values) as having a boundary condition d(S) between current state and validity; the family enumerates open domains, encodes seeds, controls generation, and detects drift. Use when the user asks about making invalid states unrepresentable, single source of truth, type-driven design, AI code-gen safety, drift detection in diffs, or LLM noise vs signal.
Root index for the design-* family — UI/UX design review, refinement, and production polish across foundation (project context, design system, frontend scaffolding), visual treatment (color, typography, layout, motion), UX content and flow (clarity, onboarding, adaptation), and review/quality (audit, critique, check, polish, harden). Use when the user asks to design, review, improve, polish, animate, simplify, or audit a UI; or mentions visual hierarchy, design system drift, accessibility, or "make this look better". Routes to specific design-* sub-skills.
Root index for the pages-* family — a five-step pipeline that deploys a Vite project to GitHub Pages via GitHub Actions, including GitHub Enterprise (GHE) codespace-style subdomain discovery. Steps run in order — prepare → build → commit → push → publish. Use when the user asks to deploy a Vite app to GitHub Pages, set up the Pages workflow, switch Pages source to Actions, or troubleshoot a Pages deploy.
Root index for the react-* family — performance best practices (Vercel Engineering guidelines for React + Next.js) and composition patterns (compound components, render props, context, React 19 API changes). Use when the user asks about React or Next.js patterns, component API design, render performance, bundle optimization, or refactoring boolean-prop proliferation.
| name | design-adapt |
| description | Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. |
| metadata | {"author":"stuffbucket","version":"1.0.0"} |
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
Invoke /design-frontend — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /design-context first. Additionally gather: target platforms/devices and usage contexts.
Understand what needs adaptation and why:
Identify the source context:
Understand target context:
Identify adaptation challenges:
CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context.
Create context-appropriate strategy:
Layout Strategy:
Interaction Strategy:
Content Strategy:
Navigation Strategy:
Layout Strategy:
Interaction Strategy:
Layout Strategy:
Interaction Strategy:
Content Strategy:
Layout Strategy:
Content Strategy:
Layout Strategy:
Interaction Strategy:
Apply changes systematically:
Choose appropriate breakpoints:
clamp(): Fluid sizing between min and maxdisplay: none sparingly (still downloads)srcset, picture element)IMPORTANT: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
NEVER:
Test thoroughly across contexts:
Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.