Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/bitjaru/styleseed/ss-componentnpx skills add bitjaru/styleseed --skill ss-componentgit clone --depth 1 https://github.com/bitjaru/styleseedWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00014 | $0.00774 |
| Opus 5 | $0.00007 | $0.00387 |
| Sonnet 5 | $0.00003 | $0.00155 |
| Haiku 4.5 | $0.00001 | $0.00077 |
Grade A, and why
ss-component scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 66 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Component 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 full-page scaffolding → use
/ss-page - For composed multi-component patterns → use
/ss-pattern - For tweaking an existing component — just edit the file directly
- For non-StyleSeed projects (no
components/ui/directory or no Tailwind v4)
Generate a new component: $0 Description: $ARGUMENTS
Instructions
-
First, read the compiled design method:
- Read
.styleseed/effective-rules.mdand.styleseed/manifest.json; resolve if stale - Read
css/theme.cssfor available design tokens - Read
css/recipes.cssfor morphology variables and helper classes - Read
components/ui/button.tsxas a reference pattern
- Read
-
Follow these conventions strictly:
- Use
functiondeclaration (notconst) - Add
data-slot="component-name"attribute - Use
cn()from@/components/ui/utilsfor all className merging - Use
React.ComponentProps<>for prop typing - Always support
classNameprop for overrides - Use CVA (
class-variance-authority) if the component has variants - Use semantic color tokens (
bg-card,text-foreground) — never inline hex
- Use
-
Design token usage:
- Colors:
text-foreground,bg-card,text-brand,text-muted-foreground,border-border - Pattern surfaces:
ss-pattern-surface; insets/controls/icons use the matchingss-*class - Primitives use the project token scale; do not hardcode one radius or shadow personality
- Spacing follows one repeatable selected-recipe rhythm
- Motion:
duration-[var(--duration-fast)],ease-[var(--ease-default)]
- Colors:
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 66 lines · 14 tokens per session scan A ef3259b045b0
ss-component is a skill published in the GitHub repository bitjaru/styleseed (928 stars, last pushed 7d ago), licensed MIT. It adds 14 tokens to every session and 774 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
extract-design
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get…
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
omd:apply
프로젝트 DESIGN.md를 UI/시각 작업의 brand context로 적용. 컴포넌트·색상·폰트·레이아웃 수정 같은 구체적 요청과 톤·분위기 표현 — KR '좀 더 따뜻하게', EN 'make it warmer/cooler', 日本語「もう少し暖かく」, 繁體中文「更溫暖一點」 — 모두에 트리거. DESIGN.md 부재 시 omd:init 우선. 화면 전체 신규 디자인은 omd:harness, 교정 기록은 omd:remember.
omd-apply
프로젝트 DESIGN.md를 UI/시각 작업의 brand context로 적용. 컴포넌트·색상·폰트·레이아웃 수정 같은 구체적 요청과 톤·분위기 표현 — KR '좀 더 따뜻하게', EN 'make it warmer/cooler', 日本語「もう少し暖かく」, 繁體中文「更溫暖一點」 — 모두에 트리거. DESIGN.md 부재 시 omd:init 우선. 화면 전체 신규 디자인은 omd:harness, 교정 기록은 omd:remember.
claude-design
현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬. 터미널 한 번의 호출로 코드베이스 → Claude Design 컨텍스트 이관을 수행한다. claude.ai/design 은 사용자의 로그인된 Chrome(claude-in-chrome)으로 구동하되, 상호작용 레이어가 막히면(알려진…