This is the pattern composer you reach for when you need a card layout, data table, or form section built from your design system's primitives. It knows the difference between a single component (that's /ss-component), a full page (/ss-page), and these mid-level compositions. You tell it something like "grid-2col" or "search-header" and it assembles the pattern using what's already in your components/ui/ folder, following your semantic tokens and spacing rules. The skill includes a solid reference list of common patterns like action sheets, stat grids, and horizontal scrollers. It won't reinvent your button component, which is exactly the discipline you want when keeping a design system coherent.

skills.sh installs
828
GitHub stars
1K
last updated
Jun 11, 2026

Install

$ npx -y skills add bitjaru/styleseed --skill ss-pattern --agent claude-code

Installs into .claude/skills of the current project.

Files

This is the pattern composer you reach for when you need a card layout, data table, or form section built from your design system's primitives. It knows the difference between a single component (that's /ss-component), a full page (/ss-page), and these mid-level compositions. You tell it something like "grid-2col" or "search-header" and it assembles the pattern using what's already in your components/ui/ folder, following your semantic tokens and spacing rules. The skill includes a solid reference list of common patterns like action sheets, stat grids, and horizontal scrollers. It won't reinvent your button component, which is exactly the discipline you want when keeping a design system coherent.

Browse the repository on GitHub

Sponsors

Details

Repository
github.com/bitjaru/styleseed
Categories
Frontend Development, Design & UI/UX
License
MIT
First seen
Jun 11, 2026

More from bitjaru/styleseed

All 14
1mindrally avatarblazormindrally/skillsGuidelines for Blazor development including component lifecycle, state management, and performance optimization823skills.sh installs
2softaworks avatardesign-system-startersoftaworks/agent-toolkitCreate and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable823skills.sh installs
3mindrally avatarionicmindrally/skillsIonic development guidelines for building cross-platform mobile applications with Angular, Cordova, and Firebase integration.822skills.sh installs
4adobe avatarappbuilder-e2e-testingadobe/skillsUse this skill whenever the user wants browser-based end-to-end tests for an Adobe App Builder application. Covers Playwright E2E testing for ExC Shell SPAs, AE800skills.sh installs
5diodeinc avatarreference-designdiodeinc/pcbGrow a component package into a high-quality, sourceable reusable design in Zener. Use when translating a datasheet, application note, or eval design into circu799skills.sh installs
6lingui avatarlingui-best-practiceslingui/skillsImplement internationalization with Lingui in React and JavaScript applications. Use when adding i18n, translating UI, working with Trans/useLingui/Plural, extr796skills.sh installs