swiss-grid-system

Use when establishing a precise layout grid. Swiss/International style uses 12-col grid with strict adherence; every element snaps to grid.

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/x3allamerican/design-skills --skill swiss-grid-system

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

SKILL.md

ソースの指示 · 読み取り専用プレビュー

name	swiss-grid-system
description	Use when establishing a precise layout grid. Swiss/International style uses 12-col grid with strict adherence; every element snaps to grid.

Swiss grid: 12-column desktop, strict adherence. Eliminates 'kinda-aligned' layout. The grid is the design.

Container: 1200px max-width, centered Columns: 12 equal columns with 24-32px gutter Margins: 32-48px outside columns

All elements snap to column starts. Headers, body, images, callouts — everything aligns to a column edge.

Container: 100% width minus 32px padding Columns: 4 equal columns Gutter: 12-16px Margins: 16px outside

Mobile is more constrained; many elements span full width.

Don't:

Do:

Foundation grid for CardPrepAI layouts.