diff .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
line wrap: on
line diff
--- a/.claude/skills/zenbu-design-system/SKILL.md	Tue Aug 04 12:21:19 2026 -0700
+++ b/.claude/skills/zenbu-design-system/SKILL.md	Tue Aug 04 15:12:09 2026 -0700
@@ -30,12 +30,35 @@
 - Prefix custom elements and tokens with `zen-` / `--zen-`.
 - Keep selectors low-specificity so applications can override tokens.
 - Support light, dark, reduced-motion, desktop, and mobile behavior.
+- Disclosure, overlay, and collapsing surfaces require smooth tokenized motion
+  plus a reduced-motion fallback. Native disclosure markers must be replaced by
+  first-party `zen-icon` geometry.
+- Reset browser chrome for design-system form controls and restyle every state
+  with Zenbu tokens. Calendar and date-picker UI must use the first-party
+  keyboard calendar rather than exposing the browser's default date picker.
+- Browser acceptance must exercise every catalog route at desktop and mobile
+  widths and reject horizontal page overflow.
+- Preserve the warm, restrained MUJI-like visual character: paper neutrals,
+  natural material colors, strong typography, and deliberate color accents.
+- Use semantic `--zen-color-*` aliases in component CSS. Use primitive ramps
+  or the ten data tokens only when a semantic role does not fit; never encode
+  meaning through color alone.
+- Raw color literals are forbidden outside `src/styles/tokens.css`. Run
+  `//design_system/test:design_system_policy_test` whenever styles, components,
+  stories, or catalog markup changes.
+- Render every interface icon with the first-party `zen-icon` component. Emoji,
+  text-glyph icons, ad hoc SVG, icon fonts, and external icon packages are
+  forbidden.
+- Every exported JavaScript class, function, or constant requires Google-style
+  JSDoc with its public type tags. The policy test must fail when documentation
+  is missing.
 
 ## Bazel targets
 
 ```bash
 bazel run //design_system:dev
 bazel test //design_system/test:storybook_test
+bazel test //design_system/test:design_system_policy_test
 bazel build //design_system:design_system_server_bundle
 ```