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.

AI & Automation 5,395 stars 412 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

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

Skill Content

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. ## MANDATORY PREPARATION 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. --- ## 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 patterns on desktop) **CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new cont...

Details

Author
fengshao1227
Repository
fengshao1227/ccg-workflow
Created
4 months ago
Last Updated
today
Language
Go
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

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.

240 Updated today
joewinke
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.

226 Updated yesterday
AkaraChen
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