Mercurial
comparison .claude/skills/zenbu-design-system/SKILL.md @ 254:2b6e732087ff
[ui] Add complete native component catalog
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 15:12:09 -0700 |
| parents | fdf3816959cb |
| children | 30c2196d03d4 |
comparison
equal
deleted
inserted
replaced
| 253:fdf3816959cb | 254:2b6e732087ff |
|---|---|
| 28 on hover/focus; do not import Sonner or Radix. | 28 on hover/focus; do not import Sonner or Radix. |
| 29 - Preserve keyboard, form, validity, label, and ARIA behavior. | 29 - Preserve keyboard, form, validity, label, and ARIA behavior. |
| 30 - Prefix custom elements and tokens with `zen-` / `--zen-`. | 30 - Prefix custom elements and tokens with `zen-` / `--zen-`. |
| 31 - Keep selectors low-specificity so applications can override tokens. | 31 - Keep selectors low-specificity so applications can override tokens. |
| 32 - Support light, dark, reduced-motion, desktop, and mobile behavior. | 32 - Support light, dark, reduced-motion, desktop, and mobile behavior. |
| 33 - Disclosure, overlay, and collapsing surfaces require smooth tokenized motion | |
| 34 plus a reduced-motion fallback. Native disclosure markers must be replaced by | |
| 35 first-party `zen-icon` geometry. | |
| 36 - Reset browser chrome for design-system form controls and restyle every state | |
| 37 with Zenbu tokens. Calendar and date-picker UI must use the first-party | |
| 38 keyboard calendar rather than exposing the browser's default date picker. | |
| 39 - Browser acceptance must exercise every catalog route at desktop and mobile | |
| 40 widths and reject horizontal page overflow. | |
| 41 - Preserve the warm, restrained MUJI-like visual character: paper neutrals, | |
| 42 natural material colors, strong typography, and deliberate color accents. | |
| 43 - Use semantic `--zen-color-*` aliases in component CSS. Use primitive ramps | |
| 44 or the ten data tokens only when a semantic role does not fit; never encode | |
| 45 meaning through color alone. | |
| 46 - Raw color literals are forbidden outside `src/styles/tokens.css`. Run | |
| 47 `//design_system/test:design_system_policy_test` whenever styles, components, | |
| 48 stories, or catalog markup changes. | |
| 49 - Render every interface icon with the first-party `zen-icon` component. Emoji, | |
| 50 text-glyph icons, ad hoc SVG, icon fonts, and external icon packages are | |
| 51 forbidden. | |
| 52 - Every exported JavaScript class, function, or constant requires Google-style | |
| 53 JSDoc with its public type tags. The policy test must fail when documentation | |
| 54 is missing. | |
| 33 | 55 |
| 34 ## Bazel targets | 56 ## Bazel targets |
| 35 | 57 |
| 36 ```bash | 58 ```bash |
| 37 bazel run //design_system:dev | 59 bazel run //design_system:dev |
| 38 bazel test //design_system/test:storybook_test | 60 bazel test //design_system/test:storybook_test |
| 61 bazel test //design_system/test:design_system_policy_test | |
| 39 bazel build //design_system:design_system_server_bundle | 62 bazel build //design_system:design_system_server_bundle |
| 40 ``` | 63 ``` |
| 41 | 64 |
| 42 Reusable targets: | 65 Reusable targets: |
| 43 | 66 |