UI Pattern Generator

UI Pattern Generator is a Frontend skill for Claude Code, published by bitjaru in styleseed.

906 stars82 forkson bitjaru/styleseedAdded 2026/08/22Repository updated 2026/08/21

agent-skillsai-codingai-designai-uiclaude-codeclaude-skillscodexcursordesign-judgmentdesign-systemdesign-tokensnextjsradix-uireactshadcnshadcn-uitailwindcsstypescriptui-designvibe-coding

Install in seconds

Install UI Pattern Generator

Copy UI Pattern Generator into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/bitjaru/styleseed/tree/main/skills/ss-pattern ~/.claude/skills/ss-pattern

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/bitjaru/styleseed.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/ss-pattern/SKILL.md in bitjaru/styleseed
Installs to: ~/.claude/skills/ss-pattern
Collection: One of 23 skills cataloged from this repository
Category: Frontend — 567 skills

What UI Pattern Generator does

UI Pattern Generator composes a UI pattern from the active StyleSeed grammar and brand recipe using existing primitives. Use it when you need a reusable pattern component instead of a single primitive, page, flow, or token set.

UI Pattern Generator is cataloged under Frontend on DirSkills. UI Pattern Generator comes from a repository tagged agent-skills, ai-coding, ai-design, ai-ui and claude-code.

Documentation

README

Excerpt

UI Pattern Generator

Registry-first artifact boundary

When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact-id>.md and .styleseed/manifests/<artifact-id>.json. Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective-rules.md only when no registry exists.

When NOT to use

For a single primitive component → use /ss-component
For a full mobile screen → use /ss-page
For an entire multi-page user flow → use /ss-flow
For design tokens and color/spacing decisions → use /ss-tokens

Pattern type: $0 Description: $ARGUMENTS

Available Pattern Types

This is the opening of the README. Read the full README on GitHub.

Commands UI Pattern Generator provides

Slash commands named in this skill’s SKILL.md, listed in the order they first appear.

/ss-component
/ss-page
/ss-flow
/ss-tokens
/ss-score

Frequently asked about UI Pattern Generator

What else does bitjaru publish alongside UI Pattern Generator?
UI Pattern Generator is one of 23 skills that DirSkills catalogs from bitjaru/styleseed, the repository it ships in. Its siblings there include Accessibility Audit, Design Lint and Design Score. Each one is a separate skill with its own page in this directory, installs the same way UI Pattern Generator does, and is maintained by bitjaru in that same repository. The rest of the collection is listed on the bitjaru/styleseed page.
How does UI Pattern Generator compare to other Frontend skills?
UI Pattern Generator ranks #362 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of UI Pattern Generator against them. Open each page to compare what they document and how they install.