yohaku-design
The Yohaku design system: static tokens, component catalog, and section snippets for the Yohaku personal blog. Adapts the Kami constraint-system shape to a webapp context.
Step 1 · Identify the task
| User says |
Task tier |
Read |
| "make a mockup for X" / "design a new hero / modal / sheet" / "做一个 mockup" |
New mockup |
CHEATSHEET.md + references/tokens.md + references/anti-patterns.md |
| "build component X" / "I need a new Button variant" / "新组件" |
New React component |
CHEATSHEET.md + references/components.md + references/anti-patterns.md |
| "convert this mockup to React" / "mockup 转 React" / "implement this design" |
Handoff |
references/mockup-to-react.md + references/components.md |
| "audit this file for token compliance" / "is this color right?" / "检查 token 合规" |
Token audit |
references/anti-patterns.md + references/tokens.md |
| "what size for this text?" / "字号" / "audit typography" / "migrate hardcoded text-[Npx]" |
Type audit |
references/typography.md + CHEATSHEET.md § Type scale |
If unsure, ask one short question instead of guessing.
Step 2 · Produce
New mockup
- Copy
templates/scaffold.html to docs/superpowers/plans/<topic>-mockup.html (or wherever the user wants).
- Pick relevant pieces from
templates/snippets/ (hero, list-card, modal, sheet, form, code-block, stat-grid, comment-thread). Copy and adapt.
- Use only token classes / vars listed in
CHEATSHEET.md. No raw hex except inside <style> blocks where contract applies.
- Open the file in a browser to verify before declaring done.
New React component
- First check
references/components.md and apps/web/src/components/ui/ to confirm the primitive does not already exist. Reuse beats reinvent.
- If a new ui/ entry is needed, follow the patterns in
components.md (file structure, exports, Tailwind variants).
- Use only the tokens listed in
CHEATSHEET.md. Never reach for text-neutral-50…950.
- Run
pnpm --filter @yohaku/web lint on changed files only (do not lint the whole project).
Handoff
- Open the mockup HTML and
references/mockup-to-react.md side by side.
- Walk the mapping table top-to-bottom: every HTML class / pattern has a target React component or Tailwind class.
- Replace structure first, styling second. Do not introduce new tokens during handoff.
- Run
pnpm --filter @yohaku/web lint on the changed files.
Token audit
- Read
references/anti-patterns.md.
- Scan the target file for:
text-neutral-50/100/200/.../950, raw hex literals, n-5 used as text, hardcoded font-family, synthetic font-weight: bold on Chinese text.
- Report a punch list with line numbers and proposed replacements.
Step 3 · Verify
pnpm --filter @yohaku/design-system check
Lints token drift between the cheatsheet and src/tokens.css, plus forbidden patterns in templates/. Run before committing changes inside packages/design-system/.
When NOT to use this skill
- Editing application logic, routes, queries, hooks — this skill is design-only.
- Producing PDF / slides / marketing pages — Yohaku is a webapp, use Kami for static documents.
- Restyling
@haklex/* packages — those have their own rich-style-token system.
- Modifying
apps/web/src/styles/yohaku.css runtime injection — that is application owned, not design contract.
Languages
This skill, the cheatsheet, and references are English. The web app and its content are Chinese-first. Do not translate the contract docs.
1---2name: yohaku-design3description: Build new Yohaku-style UI: HTML mockups, React components, or mockup→React handoff. Triggers on "make a Yohaku mockup / design a new component / add a hero / modal / sheet / convert mockup to React / audit token compliance / 做一个 Yohaku 风的 mockup / 设计一个新组件 / mockup 转 React / 检查 token 合规".4---56# yohaku-design78The Yohaku design system: static tokens, component catalog, and section snippets for the Yohaku personal blog. Adapts the Kami constraint-system shape to a webapp context.910## Step 1 · Identify the task1112| User says | Task tier | Read |13|---|---|---|14| "make a mockup for X" / "design a new hero / modal / sheet" / "做一个 mockup" | **New mockup** | `CHEATSHEET.md` + `references/tokens.md` + `references/anti-patterns.md` |15| "build component X" / "I need a new Button variant" / "新组件" | **New React component** | `CHEATSHEET.md` + `references/components.md` + `references/anti-patterns.md` |16| "convert this mockup to React" / "mockup 转 React" / "implement this design" | **Handoff** | `references/mockup-to-react.md` + `references/components.md` |17| "audit this file for token compliance" / "is this color right?" / "检查 token 合规" | **Token audit** | `references/anti-patterns.md` + `references/tokens.md` |18| "what size for this text?" / "字号" / "audit typography" / "migrate hardcoded text-[Npx]" | **Type audit** | `references/typography.md` + `CHEATSHEET.md` § Type scale |1920If unsure, ask one short question instead of guessing.2122## Step 2 · Produce2324### New mockup251. Copy `templates/scaffold.html` to `docs/superpowers/plans/<topic>-mockup.html` (or wherever the user wants).262. Pick relevant pieces from `templates/snippets/` (hero, list-card, modal, sheet, form, code-block, stat-grid, comment-thread). Copy and adapt.273. Use only token classes / vars listed in `CHEATSHEET.md`. No raw hex except inside `<style>` blocks where contract applies.284. Open the file in a browser to verify before declaring done.2930### New React component311. **First** check `references/components.md` and `apps/web/src/components/ui/` to confirm the primitive does not already exist. Reuse beats reinvent.322. If a new ui/ entry is needed, follow the patterns in `components.md` (file structure, exports, Tailwind variants).333. Use only the tokens listed in `CHEATSHEET.md`. Never reach for `text-neutral-50…950`.344. Run `pnpm --filter @yohaku/web lint` on changed files only (do not lint the whole project).3536### Handoff371. Open the mockup HTML and `references/mockup-to-react.md` side by side.382. Walk the mapping table top-to-bottom: every HTML class / pattern has a target React component or Tailwind class.393. Replace structure first, styling second. Do not introduce new tokens during handoff.404. Run `pnpm --filter @yohaku/web lint` on the changed files.4142### Token audit431. Read `references/anti-patterns.md`.442. Scan the target file for: `text-neutral-50/100/200/.../950`, raw hex literals, `n-5` used as text, hardcoded `font-family`, synthetic `font-weight: bold` on Chinese text.453. Report a punch list with line numbers and proposed replacements.4647## Step 3 · Verify4849```bash50pnpm --filter @yohaku/design-system check51```5253Lints token drift between the cheatsheet and `src/tokens.css`, plus forbidden patterns in `templates/`. Run before committing changes inside `packages/design-system/`.5455## When NOT to use this skill5657- Editing application logic, routes, queries, hooks — this skill is design-only.58- Producing PDF / slides / marketing pages — Yohaku is a webapp, use Kami for static documents.59- Restyling `@haklex/*` packages — those have their own `rich-style-token` system.60- Modifying `apps/web/src/styles/yohaku.css` runtime injection — that is application owned, not design contract.6162## Languages6364This skill, the cheatsheet, and references are English. The web app and its content are Chinese-first. Do not translate the contract docs.
innei