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-flownpx skills add bitjaru/styleseed --skill ss-flowgit clone --depth 1 https://github.com/bitjaru/styleseedWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/bitjaru/styleseed/ss-flow)<a href="https://agentmods.dev/skills/bitjaru/styleseed/ss-flow"><img src="https://agentmods.dev/badge/skills/bitjaru/styleseed/ss-flow.svg" alt="Measured on agentmods" height="20"></a>What 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.00013 | $0.00723 |
| Opus 5 | $0.00006 | $0.00362 |
| Sonnet 5 | $0.00003 | $0.00145 |
| Haiku 4.5 | $0.00001 | $0.00072 |
Grade A, and why
ss-flow 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 4d 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 — 65 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UX Flow Designer
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 implementing a single page → use
/ss-pageafter the flow is settled - For copy on each step → use
/ss-copyafter the structure is settled - For information architecture of an entire product — narrow scope to one flow first
- For high-fidelity mockups — this produces a flow map, not pixel-perfect designs
Design a user flow: $0 Description: $ARGUMENTS
Instructions
-
Read the design system reference:
CLAUDE.mdfor component inventoryDESIGN-LANGUAGE.mdfor layout patterns (sections 13-14, 19-20)components/patterns/for available building blocks
-
Apply these UX principles:
Information Architecture
- Progressive Disclosure: Show only what's needed at each step. Hide complexity behind logical drill-downs.
- Cognitive load: Chunk information around the user's decision; the resolved grammar and content density decide the grouping rather than a universal item count.
- Hick's Law: Minimize choices per screen while preserving the product's real task vocabulary.
Navigation Patterns
- Hub & Spoke: Dashboard → detail pages → back to dashboard (default for mobile apps)
- Linear Flow: Step 1 → Step 2 → Step 3 (for forms, onboarding, checkout)
- Navigation: use the resolved surface adapter; BottomNav is only one possible mobile pattern.
Screen Flow Rules
- Every flow must have a clear entry point and clear exit point
- Key features should be reachable with an appropriate number of steps for the product and platform; do not impose a universal tap count.
- Back navigation must always be available (except root screens)
- Error states must provide recovery paths (retry, go back, contact support)
- Loading states must use skeleton screens (never spinners in cards)
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.
- 4d ago First seen · 65 lines · 13 tokens per session scan A f4c16d0daa05
ss-flow is a skill published in the GitHub repository bitjaru/styleseed (928 stars, last pushed 8d ago), licensed MIT. It adds 13 tokens to every session and 723 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…
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:autopilot
One-prompt autonomous product design and implementation. Use automatically for broad greenfield UI requests such as 'from scratch', '새 제품/화면을 알아서 만들어줘', or requests that delegate DESIGN.md creation. It decides whether to reuse, establish, refresh, or skip a project design system; asks at most one consequential…
omd:reference-capture
선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/reference/ / 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드 에셋 가져와줘', 'X 사이트 패칭', 'X reference 캡쳐', 'X 라이브 스타일 추출', '브랜드 자료 받아와' 류 요청에 트리거. omd:init 직후 또는 omd:harness 중간에 호출 가능. DESIGN.md는 이…
omd:asset-fetch
사용자 product UI 생성 시 placeholder 자리를 generic SVG가 아닌 실제 free-license CDN 자산으로 채운다. 로고·일러스트·아이콘·사진·폰트·패턴 카탈로그를 verified URL만으로 운영. '에셋 가져와줘', '플레이스홀더 진짜 이미지로', '로고 자리 채워줘', 'unsplash에서 사진 가져와' 류 요청에 트리거. omd:apply / omd:harness 안에서 자동 호출됨.