Adapt existing design systems across screen sizes, devices, and contexts.
npx skills add https://github.com/chuan-khuna/digital-garden-2024 --skill adapt-chuan-khuna
Please help me install this Agent Skill. Skill: adapt Source: https://github.com/chuan-khuna/digital-garden-2024/tree/main/.agents/skills/adapt Command: npx skills add https://github.com/chuan-khuna/digital-garden-2024 --skill adapt-chuan-khuna
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
Provide a mobile-first adaptation plan for the current desktop design to ensure cross-context consistency.
High-intent search queries and answers about installing and using this skill.
Adapting a desktop design for mobile screens requires auditing the source design against mobile constraints and applying mobile-first layout strategies. This ensures layout, interaction, and content remain coherent across different screen sizes.
Handling hover interactions for touch devices involves prescribing specific interaction patterns. The adaptation process evaluates hover versus touch decisions and applies progressive disclosure to maintain a consistent user experience across device contexts.
Responsive design applies to web, mobile, print, and embedded contexts. The adaptation process specifies layout strategies and validation steps to ensure that interaction and content remain coherent regardless of the target platform or context.
Validating cross-context consistency involves defining specific checks and guardrails. The process documents edge cases with examples and establishes validation steps to ensure the adapted design system works seamlessly across all targeted devices.
You should reconsider mobile-first adaptation when your target context heavily relies on complex interactions or large viewports. The adaptation process collects constraints from all target contexts, meaning a desktop-first or context-specific approach may be more appropriate for specialized embedded or print use cases.
HechaoYannetGenerate a master architecture document from GDDs, ADRs, and governance constraints.
nobelkConvert Product Requirements Documents into RFC-style Developer Design Documents.
heyramziProvide adaptive design plans with breakpoints and layout changes for cross-device interfaces.
berkcangumusisikGenerates React Native components with platform-specific styles and accessibility.
