responsive-layout-design
Responsive Layout Design
Overview
Use this skill to define responsive behavior that keeps critical workflows usable across supported screen sizes.
Scope Boundaries
- Layouts break, overflow, or lose usability across devices.
- Teams need explicit breakpoint and adaptation rules before implementation.
- Localization/content growth increases truncation and wrapping risk.
Templates And Assets
- Responsive rule template:
assets/responsive-rule-template.md
- Breakpoint test checklist:
assets/breakpoint-test-checklist.md
Inputs To Gather
- Device and viewport support matrix.
- Critical tasks and layout priority by context.
- Content constraints including localization expansion risk.
- Interaction modality requirements (touch, pointer, keyboard).
Deliverables
- Responsive rule set with breakpoint-specific behavior.
- Component adaptation guidance for each viewport range.
- Risk list for overflow, truncation, and interaction regressions.
- Verification checklist for critical screens.
Workflow
- Define viewport model and breakpoint rationale.
- Specify component behavior per breakpoint (reflow, collapse, hide, or transform).
- Validate text expansion, dynamic data density, and media constraints.
- Define interaction affordance adjustments by modality.
- Verify critical workflows at each supported viewport range.
- Publish responsive rules with ownership and review cadence.
Quality Standard
- Core tasks remain usable at all supported viewport ranges.
- Overflow and truncation risks are addressed explicitly.
- Interactive targets remain accessible and operable.
- Rules are consistent and do not conflict across breakpoints.
Failure Conditions
- Stop when breakpoint choices lack user/device evidence.
- Stop when critical workflows fail in supported viewport ranges.
- Escalate when responsive constraints conflict with required functionality.
More from kentoshimizu/sw-agent-skills
graph-algorithms
Graph algorithm workflow for modeling entities/relations and selecting traversal, path, ordering, or flow strategies. Use when correctness or performance depends on graph representation and algorithm choice; do not use for schema-only modeling or deployment topology planning.
14bash-style-guide
Style, review, and refactoring standards for Bash shell scripting. Trigger when `.sh` files, files with `#!/usr/bin/env bash` or `#!/bin/bash`, or CI workflow blocks with `shell: bash` are created, modified, or reviewed and Bash-specific quality controls (quoting safety, error handling, portability, readability) must be enforced. Do not use for generic POSIX `sh`, PowerShell, or language-specific application style rules. In multi-language pull requests, run together with other applicable `*-style-guide` skills.
11architecture-clean-architecture
Clean Architecture workflow for enforcing dependency direction, stable domain boundaries, and use-case-centered application design. Use when teams must separate business rules from frameworks and delivery mechanisms; do not use for isolated module cleanup without boundary implications.
11powershell-style-guide
Style, review, and refactoring standards for PowerShell scripting. Trigger when `.ps1`, `.psm1`, `.psd1` files, or CI workflow blocks with `shell: pwsh` or `shell: powershell` are created, modified, or reviewed and PowerShell-specific quality controls (error handling, parameter validation, readability, operational safety) must be enforced. Do not use for Bash, generic POSIX `sh`, or language-specific application style rules. In multi-language pull requests, run together with other applicable `*-style-guide` skills.
10github-codeowners-management
Govern CODEOWNERS rules so review routing reflects real ownership and risk boundaries on GitHub. Use when repository ownership mapping or mandatory reviewer rules must be defined, updated, or audited; do not use for non-GitHub runtime architecture or data-layer design.
9security-authentication
Security workflow for authentication architecture, credential lifecycle, and session/token assurance. Use when login, identity proofing, MFA, or session security decisions are required; do not use for authorization policy design or non-security quality tuning.
9