设计与多媒体

adapt

aladicf/better-web-ui

Adapt designs for narrow, medium, wide, embedded, or print web contexts without losing usability, hierarchy, or target sizing. Use when the user mentions responsive design, breakpoints, narrow layouts, viewport changes, touch-capable browsers, or cross-context adaptation.

  • 582 次安装
  • 46 星标
  • 收录于

安装命令

npx skills add https://github.com/aladicf/better-web-ui --skill adapt

SKILL.md

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.

MANDATORY PREPARATION

Users start this workflow with /adapt. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: target platforms/devices and usage contexts.

Consult the responsive reference for narrow-first adaptation, fluid behavior, and container-query strategy. Consult the spacing system when adaptation problems are really grouping, rhythm, or width-discipline issues. Consult the cognitive load when smaller screens or constrained contexts amplify too many visible choices at once.


Assess Adaptation Challenge

Understand what needs adaptation and why: