jubscodes/get-shit-pretty/gsp-typography
Claude Code and agent skill by jubscodes/get-shit-pretty
- community
Checking that the SKILL.md file is still in the repository.
Design type systems — scale, pairing, fluid type, vertical rhythm — use when: pick fonts, font pairing, type scale, vertical rhythm, fluid typography, body and heading sizes
Install
npx vskill@latest install jubscodes/get-shit-pretty/gsp-typographySKILL.md
<context> Typography skill — thin router. Domain expertise lives in domains/ files, reference material in references/.
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. </context>
<objective> Build a production-ready typography system — scale, pairing, fluid type, vertical rhythm, and font loading strategy.
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 </objective>
<execution_context> @${CLAUDE_SKILL_DIR}/chunk-format.md </execution_context>
<rules>
- Always use
AskUserQuestionfor user interaction — never prompt via plain text - One decision per question — never batch multiple questions in a single message
- All sizes include px, rem, AND fluid clamp() values for headings
- CSS output defaults to Tailwind v4 / shadcn format unless
--vanillais passed - Foundation chunks follow
chunk-format.mdformat exactly
</rules>
<process>
Step 0: Parse mode
| 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. </process>
Security
- Security scanPassed, 100 of 100Pattern checks on the skill's files.
- Model reviewNot runA model review is scheduled for the next rescan.
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckinggsp/skills/gsp-typography/SKILL.md
Popularity
- Repository stars
- 55
- Repository forks
- 4
- Repository npm downloads, 7 days
- 59
- 7-day trend score
- 33
Stars and forks are for the whole GitHub repository, not this skill alone. Downloads are for the repository's npm package. Refreshed 17 May 2026, 5 months ago.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/jubscodes/get-shit-pretty/gsp-typography)