gsp-typography
This is a standalone composable skill. It works two ways:
- Standalone — user runs
/gsp-typographydirectly for type scale generation, font pairing, or full system design - As a building block — the creative-director invokes
/gsp-typography --enrichto add technical precision to creative typeface choices
Visual companion: https://typescale.com/ — users can preview ratios interactively there, then feed the values here.
Input: Font families + ratio, --enrich, --list-ratios, --preview, --from-style, or interactive
Output: typography.md foundation chunk + CSS file (Tailwind or vanilla)
Agent: None — inline skill, mathematical scale generation
<execution_context> @${CLAUDE_SKILL_DIR}/chunk-format.md </execution_context>
| Input | Mode | Domain |
|---|---|---|
"Inter" --ratio 1.25 |
Direct scale | domains/scale.md |
--from-style cyberpunk |
From style preset | domains/scale.md |
--list-ratios |
List ratios | domains/scale.md |
--preview "Inter" --ratio 1.25 |
Preview scale | domains/scale.md |
--enrich |
Enrich existing typography | domains/pairing.md |
| (no args) | Interactive full system | domains/system.md |
Step 1: Load domain
Read the domain file from ${CLAUDE_SKILL_DIR}/domains/{domain}.md.
For scale modes, also read ${CLAUDE_SKILL_DIR}/references/typography-scales.md.
Step 2: Follow domain framework
Execute the loaded domain's workflow. The domain file contains all rules, formulas, tables, and output specifications.
Step 3: Write output
Write typography.md + optional CSS file to the resolved output path. Display scale summary and offer next steps.
More from jubscodes/get-shit-pretty
get-shit-pretty
Design engineering for AI coding tools. Full pipeline: brand research, strategy, identity, guidelines, UI design, critique, accessibility audit, build, and review. Expertise skills (color, typography, visuals) serve the entire pipeline. 14 specialized agents with Apple HIG, Nielsen's heuristics, WCAG 2.2 AA, and design token standards.
15gsp-visuals
Define visual direction — imagery, 3D, video, textures, and surface treatments
14gsp-accessibility
Quick contrast checks and token WCAG audits — inline, no agent
14gsp-help
Show all skills
14gsp-color
Design color systems — palettes, contrast, semantic mapping, dark mode
14gsp-brand-audit
Audit an existing brand before evolving it
13