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.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
Invoke /frontend-design — 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 /teach-impeccable 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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Agent Ready project design context for navigation, docs links, and interface tone. Use when building or reviewing UI in this repo so patterns match the documented product feel.
The English summary is being prepared. Showing the original description.
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
The English summary is being prepared. Showing the original description.
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
The English summary is being prepared. Showing the original description.
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
The English summary is being prepared. Showing the original description.
Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints. Use when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, handling RTL layout direction, or reviewing frontend code for layout. Triggers on layout, spacing, alignment, grouping, negative space, whitespace, visual hierarchy, reading order, progressive disclosure, breakpoints, responsive layout, container queries, safe area, full-bleed, edge-to-edge, layout margins, RTL layout, logical properties.
The English summary is being prepared. Showing the original description.
Submit a blog draft to waynesutton.ai. Use when the user says "blog this", "blog to wsai", "send to wsai", "write to wsai", "post this to my blog", "write this up for the blog", "turn this session into a blog post", "turn this session into a blog post wsai", "draft a post about", "wsai draft a post about", or asks to file session notes to waynesutton.ai. Drafts go to a review inbox and are never published without approval.
The English summary is being prepared. Showing the original description.