adaptive-interfacelisted
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