Skip to content
Development
Skill

/styleseed

Teaches Claude Code design judgment, not just design data. 69 visual rules that make AI output look designed, not generated.

BOOST
@rohitg00rohitg00@rohitg00
From plugin
rohitg00-claude-code-toolkit
2.8k40 skills138 agents199 commands

Claude Code

$ npx -y skills add rohitg00/awesome-claude-code-toolkit --skill styleseed --agent claude-code

SKILL.md

styleseed.SKILL.md

StyleSeed — Design Judgment Engine

> Teaches Claude Code design judgment, not just design data. 69 visual rules that make AI output look designed, not generated.

What It Teaches

  • **Color discipline** — `#2A2A2A` as refined black, 5-level grayscale, one accent color maximum
  • **Spatial rhythm** — alternating section heights, 2:1 number-to-unit ratios
  • **Information hierarchy** — card/background separation, progressive density
  • **Shadow & elevation** — 4% opacity ceiling, dark mode border substitution
  • **Component variance** — never 4 identical KPI cards, stagger content types
  • **Motion & feedback** — 200ms normal, spring for entrance, ease-out for exit

Quick Start

# Copy engine into your project
cp -r styleseed/engine/* your-project/

# Or just point Claude at the repo
# "Refer to https://github.com/bitjaru/styleseed — read engine/CLAUDE.md and DESIGN-LANGUAGE.md"

Includes

  • 69 visual design rules (brand-agnostic)
  • 48 React components (shadcn-style, Tailwind CSS v4 + Radix UI)
  • 11 slash commands (`/ss-page`, `/ss-review`, `/ss-audit`, `/ss-lint`, etc.)
  • Swappable brand skins (Toss, Stripe, Linear, Vercel, Notion, Raycast, Arc)

Links

  • **Repository:** https://github.com/bitjaru/styleseed
  • **Live demo:** https://styleseed-demo.vercel.app
  • **License:** MIT
Read it on GitHub ↗
Stats
PythonJavaScriptReactCSSKubernetesAWSGitGitHubCI/CDAnthropicMCPFlutter
2,827
Stars
1,095
Forks
Quiet
Maintenance
JavaScript
Language
Apache-2.0
License
Last commit
Created

Repo: rohitg00/awesome-claude-code-toolkit

In this plugin
199 commands138 agents40 skills
See everything inside
@rohitg00
Ships withrohitg00-claude-code-toolkit

The most comprehensive toolkit for Claude Code -- 135 agents, 35 curated skills (+400,000 via SkillKit), 42 commands, 176+ plugins, 20 hooks, 15 rules, 7 templates, 15 MCP configs, 26 companion apps, 53 ecosystem entries, and more.

2.8k40 skills138 agents
Get the whole plugin

Stars on GitHub

Momentum

stars in total
2.8k
Star history of rohitg00/awesome-claude-code-toolkit on GitHub, a chart by star-history.com
See what's trending this week

Other skills on rohitg00-claude-code-toolkit.

See all 40 skills in rohitg00-claude-code-toolkit

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

superpowers13d311k
@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills11d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc13d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react2d252k
@facebook@facebookInstall Skill

Questions about styleseed.

Which coding agents can use styleseed?
styleseed installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.