メニュー
Use when arranging elements on a page. Strong composition guides the eye through intentional flow. Z-pattern and F-pattern are useful starting points.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/x3allamerican/design-skills --skill composition-and-visual-flowコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Use when shipping a page. Accessibility tier (A, AA, AAA) sets minimum requirements; AA is the legal default in most jurisdictions.
Use when sizing images and embedded media. Consistent aspect ratios (16:9, 4:3, 1:1, 3:4) signal designed layout.
Use when designing editorial or luxury landing pages. Asymmetric grids feel curated; symmetric grids feel template-SaaS.
SOC 職業分類に基づく
SKILL.md を表示中
| name | composition-and-visual-flow |
| description | Use when arranging elements on a page. Strong composition guides the eye through intentional flow. Z-pattern and F-pattern are useful starting points. |
Composition controls reading order. Use F-pattern (Western reading flow) for content, Z-pattern for marketing pages, asymmetric for editorial.
Reader's eye on content page:
Place key info top-left and top-of-section.
Marketing page flow:
Editorial composition:
Intentional left-right alternation keeps eye moving.
Composition rules for CardPrepAI hero + section design.