メニュー
Use when creating consistent size hierarchies. Modular scale = all sizes derived from one base × ratio. Eliminates arbitrary sizes.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/x3allamerican/design-skills --skill modular-scaleコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | modular-scale |
| description | Use when creating consistent size hierarchies. Modular scale = all sizes derived from one base × ratio. Eliminates arbitrary sizes. |
All sizes derived from one base × scale ratio. Ratio examples: 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth), 1.618 (golden).
:root {
--base: 1rem;
--scale: 1.333;
--size-xs: calc(var(--base) / var(--scale) / var(--scale)); /* 0.56rem */
--size-sm: calc(var(--base) / var(--scale)); /* 0.75rem */
--size-md: var(--base); /* 1rem */
--size-lg: calc(var(--base) * var(--scale)); /* 1.333rem */
--size-xl: calc(var(--base) * var(--scale) * var(--scale)); /* 1.78rem */
--size-2xl: ...;
}
1.25 (major third): subtle hierarchy 1.333 (perfect fourth): balanced (recommended for CardPrepAI) 1.5 (perfect fifth): moderate hierarchy 1.618 (golden): dramatic, display-focused
Avoid: arbitrary sizes (14px, 17px, 22px) — these don't fit any ratio and feel random.
Apply same modular scale to:
Result: visual harmony across components.
Modular scale system underpinning CardPrepAI's typographic and spacing system.