Responsive Web Design (2025) — Guidelines for Design + Design Engineering
When to use
Use this skill when the task is primarily about design and this guidance is the most relevant operating rule set.
When not to use
Do not use this skill as the primary guide when another skill has a tighter domain fit for the requested output.
Trigger cues
- Request explicitly references
design-responsive-rules or this source file.
- Request language includes terms like: design, responsive, rules.
- Keywords include: IA, usability, responsive layout, design system, aesthetic direction, motion.
Routing boundary
- Primary for UX architecture, visual hierarchy, responsiveness, and interface behavior.
- Do not use as primary for backend architecture, threat modeling, or release operations.
Inputs required
- Goal or task request
- Current constraints (time, scope, platform, risk)
- Existing artifacts (code, docs, screenshots, metrics) when available
- Source of truth:
subagents/rules/design/design-responsive-rules.md
Instructions
- Read references/source.md first.
- Extract the non-negotiable rules and translate them into a short execution checklist.
- Apply the checklist to the current task, produce concrete outputs, and avoid abstract recommendations.
- Validate outcomes with evidence (tests, screenshots, logs, diffs, or written audit findings).
- Record decisions and tradeoffs so another engineer can continue without re-discovery.
Completion gate
Before reporting completion, verify the applicable binary contracts in evals/cases.json: no horizontal scrolling at target widths, core tasks remain usable, breakpoints follow content failure rather than named devices, and reusable components adapt to their containers.
Output format
- Primary decision/output: User flow clarity, interaction model, and visual system constraints.
- Summary: one-paragraph decision or result
- Actions: compact checklist with owners and status
- Evidence: links/paths to artifacts proving completion
1---2name: design-responsive-rules3description: Trigger: responsive layout, media queries, mobile view, desktop layout, tablet break points, thumb zone. Scope: Multi-device layouts, breakpoints, mobile touch zones. Boundary: Excludes backend API design or database scaling.4---56# Responsive Web Design (2025) — Guidelines for Design + Design Engineering78## When to use910Use this skill when the task is primarily about design and this guidance is the most relevant operating rule set.1112## When not to use1314Do not use this skill as the primary guide when another skill has a tighter domain fit for the requested output.1516## Trigger cues1718- Request explicitly references `design-responsive-rules` or this source file.19- Request language includes terms like: design, responsive, rules.20- Keywords include: IA, usability, responsive layout, design system, aesthetic direction, motion.2122## Routing boundary2324- Primary for UX architecture, visual hierarchy, responsiveness, and interface behavior.25- Do not use as primary for backend architecture, threat modeling, or release operations.2627## Inputs required2829- Goal or task request30- Current constraints (time, scope, platform, risk)31- Existing artifacts (code, docs, screenshots, metrics) when available32- Source of truth: `subagents/rules/design/design-responsive-rules.md`3334## Instructions35361. Read [references/source.md](references/source.md) first.372. Extract the non-negotiable rules and translate them into a short execution checklist.383. Apply the checklist to the current task, produce concrete outputs, and avoid abstract recommendations.394. Validate outcomes with evidence (tests, screenshots, logs, diffs, or written audit findings).405. Record decisions and tradeoffs so another engineer can continue without re-discovery.4142## Completion gate4344Before reporting completion, verify the applicable binary contracts in `evals/cases.json`: no horizontal scrolling at target widths, core tasks remain usable, breakpoints follow content failure rather than named devices, and reusable components adapt to their containers.4546## Output format4748- Primary decision/output: User flow clarity, interaction model, and visual system constraints.49- Summary: one-paragraph decision or result50- Actions: compact checklist with owners and status51- Evidence: links/paths to artifacts proving completion
coreyone