adapt

Solid

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.

Web & Frontend 45 stars 2 forks Updated today MIT

Install

View on GitHub

Quality Score: 89/100

Stars 20%
55
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

<!-- ๐Ÿ”’ LOCKED โ€” managed by clade ยท auto-generated by sync-to-agents; edit source in .claude/ then re-run sync --> Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. ## MANDATORY PREPARATION Invoke /impeccable โ€” 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 /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. --- ## Assess Adaptation Challenge Understand what needs adaptation and why: 1. **Identify the source context**: - What was it designed for originally? (Desktop web? Mobile app?) - What assumptions were made? (Large screen? Mouse input? Fast connection?) - What works well in current context? 2. **Understand target context**: - **Device**: Mobile, tablet, desktop, TV, watch, print? - **Input method**: Touch, mouse, keyboard, voice, gamepad? - **Screen constraints**: Size, resolution, orientation? - **Connection**: Fast wifi, slow 3G, offline? - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - **User expectations**: What do users expect on this platform? 3. **Identify adaptation challenges**: - What won't fit? (Content, navigation, features) - What won't work? (Hover states on touch, tiny touch targets) - What's inappropriate? (Desktop patterns on mobile, mobile patte...

Details

Author
YuDefine
Repository
YuDefine/nuxt-supabase-starter
Created
4 months ago
Last Updated
today
Language
JavaScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content โ€” not just same category

Web & Frontend Solid

adapt

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.

389 Updated today
mxyhi
Web & Frontend Listed

adapt

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.

546 Updated yesterday
spool-lab
Web & Frontend Listed

adapt

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.

546 Updated yesterday
paperboytm
Web & Frontend Listed

adapt

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.

22 Updated 2 days ago
AkaraChen
AI & Automation Solid

adapt

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.

5,395 Updated today
fengshao1227