← ClaudeAtlas

adaptive-interfacelisted

Adapt one interface across space, input, content pressure, text scaling, orientation, localization, and reduced motion. Use when designing or reviewing responsive behavior, touch and keyboard support, or layouts that break under real content.
Dragoon0x/10x-interface · ★ 0 · Web & Frontend · score 70
Install: claude install-skill Dragoon0x/10x-interface
# Adaptive Interface ## Mission Design one product that behaves appropriately across changing contexts. Responsive design is contextual adaptation, not merely resizing. ## Context model Consider available width/height, pointer precision, touch, keyboard, orientation, text size, zoom, localization, content length, performance constraints, reduced motion, and platform conventions. ## Invariants Before adapting, define what must remain true: primary task, important content, current location, feedback, essential actions, and keyboard operation where applicable. ## Priority under pressure Classify elements as must remain, should remain, can collapse, can move, can defer, or can disappear. Do not let CSS accidentally decide product hierarchy. ## Behavioral breakpoints A breakpoint exists because behavior changes. Possible changes include sidebar to contextual navigation, toolbar to overflow, columns to stacked groups, persistent controls to contextual controls, or hover affordance to explicit touch affordance. ## Input adaptation Touch needs tolerant targets and little hover dependence. Pointer can support denser interaction. Keyboard needs visible focus and predictable traversal. Do not create separate products unless the interaction model truly differs. ## Content pressure Test long labels, translations, large values, long names, multiline content, missing metadata, and user-generated content. Choose intentionally between wrapping, truncation, scrolling, collapsin