Mercurial
comparison .claude/skills/zenbu-design-system/SKILL.md @ 251:117c4d53c9a4
[ui] Add HTML-first Web Component system
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 09:14:57 -0700 |
| parents | |
| children | 7a7581f040e8 |
comparison
equal
deleted
inserted
replaced
| 250:745fd127b2a1 | 251:117c4d53c9a4 |
|---|---|
| 1 --- | |
| 2 name: zenbu-design-system | |
| 3 description: Use this skill when changing Zenbu UI Web Components, design tokens, component stories, catalog routes, or cross-project design-system assets. | |
| 4 --- | |
| 5 | |
| 6 # Zenbu UI design system | |
| 7 | |
| 8 ## Structure | |
| 9 | |
| 10 - `design_system/src/components/`: dependency-free ES module Web Components. | |
| 11 - `design_system/src/styles/tokens.css`: shared `--zen-*` design tokens. | |
| 12 - `design_system/src/styles/components.css`: component presentation. | |
| 13 - `design_system/src/index.html`: declarative component stories. | |
| 14 - `design_system/src/storybook.js` and `storybook.css`: catalog shell. | |
| 15 - `design_system/main.c`: Seobeo catalog server. | |
| 16 | |
| 17 ## Component conventions | |
| 18 | |
| 19 - Stay close to native HTML and use light DOM. | |
| 20 - Wrap native interactive elements instead of recreating form/link semantics. | |
| 21 - Do not add framework or runtime dependencies. | |
| 22 - Keep application state outside components. | |
| 23 - Preserve keyboard, form, validity, label, and ARIA behavior. | |
| 24 - Prefix custom elements and tokens with `zen-` / `--zen-`. | |
| 25 - Keep selectors low-specificity so applications can override tokens. | |
| 26 - Support light, dark, reduced-motion, desktop, and mobile behavior. | |
| 27 | |
| 28 ## Bazel targets | |
| 29 | |
| 30 ```bash | |
| 31 bazel run //design_system:dev | |
| 32 bazel test //design_system/test:storybook_test | |
| 33 bazel build //design_system:design_system_server_bundle | |
| 34 ``` | |
| 35 | |
| 36 Reusable targets: | |
| 37 | |
| 38 - `//design_system:components` | |
| 39 - `//design_system:styles` | |
| 40 - `//design_system:web_assets` | |
| 41 | |
| 42 ## Story convention | |
| 43 | |
| 44 Write stories declaratively with `zen-story` and a direct `template`. Every | |
| 45 component state should have a rendered example and visible source. Browser tests | |
| 46 must cover native semantics and interactions rather than only element presence. |