design-a-responsive-layout
Design a resilient layout across content sizes, viewports, input modes, and zoom. Use when an interface must preserve hierarchy, reading, controls, and tasks beyond a few fixed mockup widths.
ソース情報
- リポジトリ
- protosphinx/sphinxstack
- ソースの最終更新活動
- 2026年7月29日 13:55
- 検出された SKILL.md の言語
- 英語
- スター
- 3
- フォーク
- 0
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
ファイルエクスプローラー
2 ファイルSKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- design-a-responsive-layout
- category
- design
- description
- Design a resilient layout across content sizes, viewports, input modes, and zoom. Use when an interface must preserve hierarchy, reading, controls, and tasks beyond a few fixed mockup widths.
# design-a-responsive-layout
## Procedure
1. Define critical tasks, content priorities, supported environments, and accessibility constraints.
2. Use real short, long, missing, translated, and user-generated content.
3. Establish intrinsic regions, readable measures, spacing, and minimum control sizes.
4. Choose breakpoints where the content and task need them, not from device labels.
5. Define reflow, wrapping, stacking, overflow, cropping, and sticky behavior.
6. Preserve reading and focus order across visual rearrangement.
7. Test 320 CSS pixels, wide screens, text resizing, 400% zoom, landscape, and keyboard navigation.
8. Exercise loading, error, empty, dense data, media, and dynamic insertion states.
9. Check performance, layout shift, safe areas, and reduced motion.
10. Record implementation constraints and visual regression cases.
## Guardrails
- Do not hide required content merely to fit a small screen.
- Avoid horizontal scrolling except for content that genuinely requires two dimensions.
- Visual order must not contradict semantic or focus order.
## Done
- A responsive layout report and specification cover real content, reflow, states, and order
- Viewport, zoom, keyboard, and regression tests pass
- Overflow and performance failures are recorded and owned
GitHubで見る