Goodspeed Design System — Claude Code Skill

A reusable Claude Code skill that teaches Claude the Goodspeed brand system: colors, Acid Grotesk + Geist typography, spacing, components, and voice.

Built so every team member gets the exact same design output from Claude — no copy-pasting tokens, no drift.

Install (one command)

npx github:Mohamed-Bakri/goodspeed-design

That's it. The skill is now at ~/.claude/skills/goodspeed-design/SKILL.md and available in every Claude Code session.

Project-scoped install (commit the skill into a repo)

npx github:Mohamed-Bakri/goodspeed-design --project

This writes to .claude/skills/goodspeed-design/SKILL.md in the current directory, so anyone who clones the repo gets the skill automatically.

Use it

After installing, restart Claude Code and invoke the skill:

/goodspeed-design

Or just ask:

Apply the goodspeed-design skill and build me a hero section.

Update

Re-run the install command — it overwrites the skill file with the latest version from GitHub.

npx github:Mohamed-Bakri/goodspeed-design

What's inside

brand-design.md — the full skill content:

• Color palette — all hex values + semantic aliases + usage rules
• Typography — Acid Grotesk + Geist, full type scale
• Spacing, radii, shadows — the complete token set
• Component patterns — navbar, buttons, cards, testimonials, CTA, footer
• Layout grid — responsive breakpoints
• Brand voice — say-this/not-that table + section naming
• Copy-paste CSS block — drop-in :root tokens

Publish to npm (optional)

If you want npx goodspeed-design instead of npx github:...:

npm login
npm publish --access public

Teammates then run:

npx goodspeed-design

Uninstall

rm -rf ~/.claude/skills/goodspeed-design