@godxjp/ui-mcp 0.18.0 → 0.19.0

package/dist/index.js

@@ -1604,10 +1604,79 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
     rules: []
   },
   // ─── data-entry ─────────────────────────────────────────────────────────
+  {
+    name: "Form",
+    group: "data-entry",
+    tagline: "Ant-style layout container \u2014 renders <form> and pushes layout (vertical/horizontal), labelWidth/controlWidth, label alignment, responsive collapse, and multi-column grid down to every FormField (overridable per field).",
+    props: [
+      {
+        name: "layout",
+        type: '"vertical" | "horizontal" | "inline"',
+        defaultValue: '"vertical"',
+        description: "Label position relative to control; applied to all FormFields."
+      },
+      {
+        name: "labelWidth",
+        type: "number | string",
+        description: "Label column width in horizontal layout (number\u2192px). e.g. 120 or '8rem'."
+      },
+      {
+        name: "controlWidth",
+        type: "number | string",
+        description: "Cap the control width (number\u2192px). Omit to fill the column."
+      },
+      {
+        name: "labelAlign",
+        type: '"start" | "end"',
+        defaultValue: '"end"',
+        description: "Horizontal alignment of the label within its column."
+      },
+      {
+        name: "collapseBelow",
+        type: '"sm" | "md" | "lg" | "xl" | false',
+        defaultValue: '"md"',
+        description: "Breakpoint below which horizontal collapses to vertical (mobile-first). false = always horizontal."
+      },
+      {
+        name: "columns",
+        type: "number | { sm?: number; md?: number; lg?: number }",
+        description: "Lay fields out in a responsive grid (reuses ResponsiveGrid; 1 col on small)."
+      },
+      {
+        name: "density",
+        type: '"compact" | "default" | "comfortable"',
+        description: "Apply a density to controls inside the form."
+      }
+    ],
+    usage: [
+      "DO set `layout`, `labelWidth`, `controlWidth` ONCE on `<Form>` \u2014 every `<FormField>` inside inherits them. Override a single field by passing the same prop on that `<FormField>` (Form \u2192 FormField priority).",
+      "DO rely on mobile-first collapse: `layout='horizontal'` automatically stacks to vertical below `collapseBelow` (default `md`). Pass `collapseBelow={false}` only when a field MUST stay label-beside-control even on phones.",
+      "DO use `columns` for multi-field forms (e.g. `columns={2}`) \u2014 it reuses ResponsiveGrid (1 column on small screens, more on md/lg). Span a wide field across columns with `<FormField colSpan={2}>`.",
+      "DON'T hand-roll a `<form>` + Flex stack for spacing \u2014 `<Form>` provides the vertical rhythm and the layout context FormField reads. Wire react-hook-form by spreading `onSubmit={handleSubmit(...)}` onto `<Form>`."
+    ],
+    useCases: [
+      "A settings page form where every label sits in a fixed 120px column to the left of its control (horizontal), collapsing to stacked labels on mobile.",
+      "A two-column entity-edit form (`columns={2}`) where the address field spans both columns (`colSpan={2}`).",
+      "A compact filter form (`layout='horizontal' density='compact'`) above a DataTable."
+    ],
+    related: [
+      "FormField \u2014 the per-field wrapper (label + control + helper/error) that reads Form's layout context; use one per control inside a Form.",
+      "ResponsiveGrid \u2014 Form `columns` reuses it; use ResponsiveGrid directly for non-form card grids."
+    ],
+    example: `import { Form, FormField, Input } from "@godxjp/ui/data-entry";
+
+<Form layout="horizontal" labelWidth={120} columns={2} onSubmit={onSubmit}>
+  <FormField id="first" label="\u59D3"><Input id="first" /></FormField>
+  <FormField id="last" label="\u540D"><Input id="last" /></FormField>
+  <FormField id="address" label="\u4F4F\u6240" colSpan={2}><Input id="address" /></FormField>
+</Form>`,
+    storyPath: "data-entry/Form.stories.tsx",
+    rules: [23, 24]
+  },
   {
     name: "FormField",
     group: "data-entry",
-    tagline: "Wraps a control with label, helper, and error; injects aria-describedby/aria-invalid onto the child.",
+    tagline: "Wraps a control with label, helper, and error; injects aria-describedby/aria-invalid onto the child. Reads the parent Form's layout (vertical/horizontal) \u2014 overridable per field.",
     props: [
       {
         name: "id",
@@ -1633,6 +1702,26 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
         type: "string",
         description: "Destructive error message (role=alert); overrides helper."
       },
+      {
+        name: "layout",
+        type: '"vertical" | "horizontal" | "inline"',
+        description: "Override the parent Form's layout for this field only."
+      },
+      {
+        name: "labelWidth",
+        type: "number | string",
+        description: "Override the Form's label width for this field."
+      },
+      {
+        name: "controlWidth",
+        type: "number | string",
+        description: "Override the Form's control width for this field."
+      },
+      {
+        name: "colSpan",
+        type: "number",
+        description: "Span N columns when inside a `columns` Form grid."
+      },
       {
         name: "children",
         type: "ReactNode",
@@ -2342,7 +2431,8 @@ export function InvoiceDueDateField() {
     usage: [
       "Use `Dialog` for form-style or wizard-style modal flows that need freeform content and a close action.",
       "DO always control open state via `open` + `onOpenChange`. Dialog has no uncontrolled shortcut \u2014 omitting `open` means the trigger alone drives state, which is fine for simple trigger-only cases, but any async submission flow must use controlled state so you can hold the dialog open while `pending=true` and close it only on success.",
-      "DO include `DialogHeader` with `DialogTitle` (and optionally `DialogDescription`) inside every `DialogContent`. Radix requires an accessible title for screen readers; omitting it triggers a console warning and breaks a11y."
+      "DO include `DialogHeader` with `DialogTitle` (and optionally `DialogDescription`) inside every `DialogContent`. Radix requires an accessible title for screen readers; omitting it triggers a console warning and breaks a11y.",
+      "DO wrap tall/scrolling content in `DialogBody` (the ring-safe scroll slot, max-height ~60vh). It insets the content to match the dialog padding so a full-width control's focus ring never clips against the scroll container \u2014 mirror of SheetBody."
     ],
     useCases: [
       "Inline form dialog \u2014 create or edit a record (invoice line, supplier, coupon) without navigating away. Place `FormField`/`Input`/`Select` inside `DialogContent`, wire the submit button to your mutation, and hold `open` while `pending` to prevent double-submit.",
@@ -2469,20 +2559,33 @@ function CreateDialog() {
   {
     name: "Sheet",
     group: "feedback",
-    tagline: "Side-panel drawer (Radix Dialog). Parts: Sheet/SheetTrigger/SheetContent(side=right|left|top|bottom)/SheetHeader/SheetTitle/SheetFooter.",
+    tagline: "Side-panel drawer (Radix Dialog). Parts: Sheet/SheetTrigger/SheetContent(side=right|left|top|bottom)/SheetHeader/SheetBody/SheetTitle/SheetFooter.",
     props: [
       { name: "open", type: "boolean", description: "Controlled open state." },
       {
         name: "onOpenChange",
         type: "(open: boolean) => void",
         description: "Open-state change handler."
+      },
+      {
+        name: "width",
+        type: "number | string",
+        description: "On SheetContent (side left/right): desired panel width (number\u2192px). Caps at the viewport \u2014 full-width on a small screen (min(width,100%)), NOT a hard fixed width. Default w-3/4 sm:max-w-md."
+      },
+      {
+        name: "title / subtitle / extra / tone",
+        type: "ReactNode / ReactNode / ReactNode / ToneProp",
+        description: "On SheetHeader (Ant-style): title (\u2192 SheetTitle, accessible name), subtitle (\u2192 SheetDescription), right-aligned extra actions, and a soft semantic `tone` background band. Children still supported."
       }
     ],
     usage: [
+      "DO build the panel with SheetHeader (pass `title`/`subtitle`/`extra`/`tone` OR children) > SheetBody (scrollable, ring-safe) > SheetFooter (pinned). SheetTitle is required for a11y \u2014 the `title` prop renders it for you. Never skip the title.",
+      "DO set `width` on SheetContent for a wider/narrower panel (e.g. width={480}); it caps at the viewport so small screens still get a full-width panel.",
       "DO use all named sub-parts in order: Sheet (root) > SheetTrigger (opener) > SheetContent (panel) > SheetHeader > SheetTitle (required for a11y \u2014 maps to Radix DialogPrimitive.Title, announced as the accessible name) > optional SheetDescription > body content > SheetFooter. Never skip SheetTitle inside an open SheetContent.",
       "DO control state explicitly with open + onOpenChange on Sheet root when you need to close programmatically (e.g. after form submit). Uncontrolled (no props) works for simple trigger-only cases but gives you no hook to reset form state on close.",
       "DO use SheetTrigger asChild to wrap a Button or other interactive element \u2014 this avoids a nested <button> in the DOM. Never render a raw <button> as a direct child of SheetTrigger.",
-      "DO use SheetFooter (renders at the bottom via mt-auto) for primary/cancel action Buttons. Never float action Buttons inside the body \u2014 they will not stick to the panel bottom.",
+      "DO wrap a long/scrolling body in SheetBody (between SheetHeader and a pinned SheetFooter). It is the ring-safe scroll slot: a hand-rolled <div className='overflow-y-auto'> clips the 3px focus ring of a full-width Input/Select at the scroll edges \u2014 SheetBody insets the content so the ring never clips.",
+      "DO use SheetFooter (renders at the bottom via mt-auto, symmetric 16/24 padding, full-bleed top border) for primary/cancel action Buttons. Never float action Buttons inside the body \u2014 they will not stick to the panel bottom.",
       "DON'T set showCloseButton={false} on SheetContent unless you provide your own SheetClose element; omitting both leaves users with no keyboard-accessible close path and breaks a11y.",
       "DON'T put a Sheet inside a Dialog (nested Radix portals conflict). If you need a slide-over triggered from within a modal, close the Dialog first, then open the Sheet."
     ],
@@ -5790,51 +5893,6 @@ export default function PasswordBlock() {
     storyPath: "data-entry/PasswordStrength.stories.tsx",
     rules: [3, 6]
   },
-  {
-    name: "Drawer",
-    group: "feedback",
-    tagline: "Bottom-sheet (vaul) \u2014 a draggable sheet that slides up from the screen edge. DISTINCT from Sheet (the side panel); use Drawer for mobile/touch bottom sheets.",
-    props: [
-      { name: "open", type: "boolean", description: "Controlled open state." },
-      {
-        name: "onOpenChange",
-        type: "(open: boolean) => void",
-        description: "Open-state callback."
-      },
-      {
-        name: "shouldScaleBackground",
-        type: "boolean",
-        defaultValue: "true",
-        description: "Scale the page behind the sheet (iOS-style)."
-      }
-    ],
-    usage: [
-      "DO compose Drawer > DrawerTrigger > DrawerContent (> DrawerHeader/DrawerTitle + body + DrawerFooter).",
-      "DO use Drawer for mobile/touch bottom sheets; use Sheet for a desktop side panel and Dialog for a centered modal.",
-      "DON'T confuse with Sheet \u2014 Sheet slides from a side edge, Drawer is the draggable bottom sheet."
-    ],
-    useCases: [
-      "Mobile action sheet / menu",
-      "Filter panel on small screens",
-      "Quick-create form on touch",
-      "Detail peek that drags up"
-    ],
-    related: [
-      "Sheet (side panel, same Radix Dialog base, different placement)",
-      "Dialog (centered modal)"
-    ],
-    example: `import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle } from "@godxjp/ui/feedback";
-
-<Drawer>
-  <DrawerTrigger>\u7D5E\u308A\u8FBC\u307F</DrawerTrigger>
-  <DrawerContent>
-    <DrawerHeader><DrawerTitle>\u7D5E\u308A\u8FBC\u307F</DrawerTitle></DrawerHeader>
-    {/* filters */}
-  </DrawerContent>
-</Drawer>`,
-    storyPath: "feedback/Drawer.stories.tsx",
-    rules: [3, 6, 24]
-  },
   {
     name: "InputOTP",
     group: "data-entry",
@@ -6084,7 +6142,7 @@ export default function PasswordBlock() {
   {
     name: "Carousel",
     group: "data-display",
-    tagline: "Embla-backed carousel primitives including previous/next controls and context API.",
+    tagline: "Embla-backed carousel primitives: previous/next controls, CarouselDots indicators, and a context API.",
     props: [
       {
         name: "opts",
@@ -6105,15 +6163,17 @@ export default function PasswordBlock() {
     useCases: ["Feature cards", "Image galleries", "Horizontal stepping lists"],
     storyPath: "data-display/Carousel.stories.tsx",
     rules: [3, 6],
-    example: `import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@godxjp/ui/data-display";
+    example: `import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots } from "@godxjp/ui/data-display";
 
-<Carousel>
+// CarouselDots reads the Embla api from context \u2014 no setApi wiring needed.
+<Carousel opts={{ loop: true }}>
   <CarouselContent>
     <CarouselItem>1</CarouselItem>
     <CarouselItem>2</CarouselItem>
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
+  <CarouselDots />
 </Carousel>`
   },
   {
@@ -7061,10 +7121,14 @@ function searchPatterns(query) {
 }
 
 // src/data/skills-index.ts
+function isConsumerSkill(s) {
+  return s.audience !== "core";
+}
 var SKILLS = [
   // ── taste (foundational) ───────────────────────────────────────
   {
     id: "taste",
+    audience: "both",
     name: "Taste baseline \u2014 Senior UI/UX engineering",
     whenToUse: "Default for any production app screen. Metric-based rules, strict component architecture, CSS hardware acceleration, balanced design engineering.",
     source: "Leonxlnx/taste-skill (root) + @godxjp/ui design-thinking.ts",
@@ -7144,6 +7208,7 @@ broken). Spinner during init is wrong (nothing to spin over).`
   // ── soft (Awwwards / premium agency) ───────────────────────────
   {
     id: "soft",
+    audience: "consumer",
     name: "Awwwards-tier \u2014 $150k agency build",
     whenToUse: "Premium agency brief \u2014 marketing site, hero pages, product showcase. NOT every internal SaaS screen. Apply when the brief asks for 'Linear-tier', 'Apple-esque', 'Awwwards-style'.",
     source: "Leonxlnx/taste-skill/soft-skill",
@@ -7263,6 +7328,7 @@ or Framer Motion's whileInView. NEVER window.addEventListener("scroll")
   // ── minimalist (editorial workspace) ───────────────────────────
   {
     id: "minimalist",
+    audience: "consumer",
     name: "Minimalist \u2014 editorial workspace",
     whenToUse: "Document-style apps (Notion-clone, knowledge base, blog admin). Warm monochrome + spot pastels. Bento grids. Editorial serif headings + sans body + monospace for data.",
     source: "Leonxlnx/taste-skill/minimalist-skill",
@@ -7346,6 +7412,7 @@ position:fixed pointer-events-none layer.`
   // ── brutalist ──────────────────────────────────────────────────
   {
     id: "brutalist",
+    audience: "consumer",
     name: "Brutalist \u2014 Swiss print + military terminal",
     whenToUse: "Data-heavy dashboards, declassified-blueprint feel, portfolios needing raw mechanical aesthetic. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects.",
     source: "Leonxlnx/taste-skill/brutalist-skill",
@@ -7368,6 +7435,7 @@ portfolios.`
   // ── gpt-tasteskill ─────────────────────────────────────────────
   {
     id: "gpt-tasteskill",
+    audience: "consumer",
     name: "GPT taste \u2014 editorial + advanced GSAP motion",
     whenToUse: "Long-scroll marketing pages with cinematic scroll choreography. Pins, stacks, scrubbed timelines. AIDA structure. Wide editorial typography. Bans 6-line wraps. Gapless bento grids.",
     source: "Leonxlnx/taste-skill/gpt-tasteskill",
@@ -7390,6 +7458,7 @@ over current), scrubbing (animation tied to scroll progress).`
   // ── redesign ───────────────────────────────────────────────────
   {
     id: "redesign",
+    audience: "both",
     name: "Redesign \u2014 audit + upgrade existing UI",
     whenToUse: "Working on an existing project (not greenfield). Find generic patterns, weak points, missing states. Apply fixes in priority order \u2014 font swap first, palette cleanup second, etc.",
     source: "Leonxlnx/taste-skill/redesign-skill + redesign-audit.ts",
@@ -7437,6 +7506,7 @@ no skip-to-content.`
   // ── output (full-output enforcement) ───────────────────────────
   {
     id: "output",
+    audience: "both",
     name: "Full-output enforcement",
     whenToUse: "Always. Bans the // ... / // TODO / 'I'll leave this as an exercise' patterns. Treat every task as production-critical.",
     source: "Leonxlnx/taste-skill/output-skill + output-quality.ts",
@@ -7476,6 +7546,7 @@ of writing it.`
   // ── brandkit ───────────────────────────────────────────────────
   {
     id: "brandkit",
+    audience: "consumer",
     name: "Brandkit \u2014 identity guidelines boards",
     whenToUse: "Designing a brand identity board first (before screens). Logo system, color palette, typography lockup, icon system, photography direction, brand voice.",
     source: "Leonxlnx/taste-skill/brandkit",
@@ -7497,6 +7568,7 @@ imagery. Flexible grid layouts.`
   // ── stitch ─────────────────────────────────────────────────────
   {
     id: "stitch",
+    audience: "consumer",
     name: "Stitch \u2014 semantic DESIGN.md for Google Stitch",
     whenToUse: "Pairing with Google Stitch (or similar AI UI generator). Generate DESIGN.md files that enforce premium standards \u2014 strict typography, calibrated color, asymmetric layouts, perpetual micro-motion.",
     source: "Leonxlnx/taste-skill/stitch-skill",
@@ -7518,6 +7590,7 @@ expressive.`
   // ── imagegen-mobile ────────────────────────────────────────────
   {
     id: "imagegen-mobile",
+    audience: "consumer",
     name: "Imagegen mobile \u2014 app screen reference images",
     whenToUse: "Pre-code phase. Generate mobile screen mockups before implementing. Onboarding flows, auth, home dashboards, profile, settings, chat, ecommerce, fintech, health, productivity.",
     source: "Leonxlnx/taste-skill/imagegen-frontend-mobile",
@@ -7544,6 +7617,7 @@ screens in flows.`
   // ── imagegen-web ───────────────────────────────────────────────
   {
     id: "imagegen-web",
+    audience: "consumer",
     name: "Imagegen web \u2014 landing page section images",
     whenToUse: "Pre-code phase for landing / marketing sites. Generate ONE image per section (8 sections \u2192 8 images). Hero composition variety (NOT always left-text/right-image).",
     source: "Leonxlnx/taste-skill/imagegen-frontend-web",
@@ -7580,6 +7654,7 @@ for the brand.`
   // ── image-to-code ──────────────────────────────────────────────
   {
     id: "image-to-code",
+    audience: "consumer",
     name: "Image-to-code \u2014 generate design first, then implement",
     whenToUse: "Visual-first brief in Codex. First generate the design image yourself, deeply analyze, THEN implement code matching it.",
     source: "Leonxlnx/taste-skill/image-to-code-skill",
@@ -7604,6 +7679,7 @@ visible on a small laptop.`
   // ── component discipline (hard contract) ───────────────────────
   {
     id: "component-discipline",
+    audience: "core",
     name: "Component discipline \u2014 international standards (hard contract)",
     whenToUse: "MANDATORY before creating or changing ANY @godxjp/ui component, recipe, doc, or example. Enforces real primitives only, no duplication, i18n (Intl/CLDR/ISO/IANA/BCP-47), WAI-ARIA APG + WCAG 2.2 AA, RTL, and the controlled-vocabulary API.",
     source: "@godxjp/ui .claude/skills/godxjp-ui-component + international-standardization audit",
@@ -7650,12 +7726,26 @@ with expectNoA11yViolations. Prefer Radix/cmdk/vaul for ARIA.`
 "default"); positive booleans; tone for status; forward ref + ...props + className + id; export
 XProp + XProp as XProps and register in props/registry. Then: add an MCP catalog entry + a
 real-screen docs page; verify typecheck/lint/audit/check:*/preview:build/test all green.`
+      },
+      {
+        id: "report-bug",
+        title: "Found a library-level defect \u2192 file a gh issue (never paper over it)",
+        tagline: "A missing token / wrong vocab / broken a11y in the system is a bug to report, not to work around.",
+        body: `If satisfying this contract is blocked by @godxjp/ui itself \u2014 a token tier that
+doesn't exist, a primitive missing the controlled-vocabulary prop, a Radix wiring with a
+real a11y bug, a catalog example that's wrong \u2014 the contract says STOP and fix the SYSTEM,
+not the call site. Don't bake a one-off around it. If you can fix the library in this repo,
+do. If you can't (or you're a consumer agent without write access), open a detailed GitHub
+issue: use the draft_bug_report MCP tool to produce the issue body + a 'gh issue create
+--repo godx-jp/godxjp-ui \u2026' command, linking the component (get_component) and the cardinal
+rule (get_rule) involved, with a minimal repro, expected vs actual, version, and env.`
       }
     ]
   },
   // ── design-to-page (consumer: handoff → real page) ─────────────
   {
     id: "design-to-page",
+    audience: "consumer",
     name: "Design handoff \u2192 real page (consumer build guide)",
     whenToUse: "You (a consumer agent) received a Claude Design handoff \u2014 a bundle/mock/screenshot/HTML prototype or a written brief \u2014 and must build it as a REAL page with @godxjp/ui. Read this BEFORE writing any JSX. It teaches: read intent, map every block to a real primitive via this MCP, consume existing tokens, apply the dxs-kintai DNA, treat tables as the centerpiece, resolve gaps by extend-or-ask, and verify.",
     source: "@godxjp/ui .design/research (chats-intent, tables, atomic-components) + dxs-kintai SKILL/colors_and_type.css",
@@ -7784,6 +7874,114 @@ format numbers/dates via Intl. Then run the build: pnpm typecheck + pnpm lint +
 pnpm audit must be green, console clean, and eyeball the page at 390 / 768 / 1280
 (atoms never wrap, containers wrap with row-gap, tabs horizontal-scroll, grids
 minmax(0,1fr), heights never break).`
+      },
+      {
+        id: "report-bug",
+        title: "godx-ui bug / can't-follow-a-rule \u2192 file a gh issue (never fake it)",
+        tagline: "If the LIBRARY is wrong, report it \u2014 don't hand-roll a workaround that hides the bug.",
+        body: `When you CANNOT satisfy a rule because @godxjp/ui itself is at fault \u2014 a
+primitive doesn't expose the controlled-vocabulary prop you need, a token is
+missing, a component has a real a11y/behaviour bug, an example in the catalog is
+wrong \u2014 the rule is: DO NOT silently hand-roll/fake a replacement to dodge it (that
+just buries a library bug inside every app). Instead:
+\u2022 DON'T: copy a primitive's internals into your app, swap in a raw <input>/<div>, or
+  redeclare a token to route around the defect.
+\u2022 DO: open a detailed GitHub issue against the library, then apply the SMALLEST
+  possible local workaround marked // TODO(godxui#<n>: <summary>) so it's grep-able
+  and removed once fixed.
+\u2022 Use the MCP tool draft_bug_report to generate the issue body + a copy-paste
+  'gh issue create --repo godx-jp/godxjp-ui \u2026' command. Include: the component/rule
+  (link via get_component/get_rule), a minimal repro, expected vs actual, the
+  installed @godxjp/ui version, and your env. A vague "X is broken" issue is not
+  enough \u2014 the report must let a maintainer reproduce in one paste.`
+      }
+    ]
+  },
+  // ── compose-a-screen (consumer: primitives → a finished screen) ──
+  {
+    id: "compose-a-screen",
+    audience: "consumer",
+    name: "Compose a screen \u2014 primitives \u2192 a finished app view (consumer)",
+    whenToUse: "You (a consumer agent) are building a NEW screen/page in an app that imports @godxjp/ui \u2014 from a written brief or product requirement, not a design handoff. Read this to assemble it from real primitives via this MCP: pick the right components, lay out one-intent-per-screen, wire every state + a11y + i18n, and verify. For a Claude Design handoff bundle/mock specifically, use design-to-page instead.",
+    source: "@godxjp/ui MCP (consumer surface) \u2014 taste/one-intent + component-discipline + dxs-kintai DNA",
+    sections: [
+      {
+        id: "pick-primitives",
+        title: "Pick primitives via the MCP \u2014 never hand-roll, never guess a prop",
+        tagline: "Decompose the screen into a shopping list; resolve each item with list_primitives \u2192 get_component.",
+        body: `Start from the requirement, not the markup. Write a shopping list of every
+block the screen needs, then resolve each through THIS MCP before writing JSX:
+list_primitives (discover the group), get_component <Name> (confirm the exact
+prop/union/default \u2014 never guess), suggest_primitive / search_components when unsure
+which fits. Hard rules: compose ONLY real @godxjp/ui primitives \u2014 no styled <div>
+faking a Card, no raw <input>/<select>/<button>/<textarea>/<table>. No duplication:
+Select (showSearch/loadOptions) is the ONLY searchable/async select (there is no
+Combobox/Autocomplete/CountrySelect); the 4 i18n pickers are one AppSettingPicker
+kind=\u2026. A table = Card + CardContent-flush + DataTable. If a block has no clean
+primitive, see gaps handling in design-to-page/gaps-extend-or-ask + report-bug.`
+      },
+      {
+        id: "assemble-screen",
+        title: "Assemble it \u2014 one intent per screen, real chrome, fixed signaling",
+        tagline: "One primary question per page; AppShell/PageContainer chrome; --primary once; semantic color is fixed.",
+        body: `Distil the screen to ONE primary question it answers (one-intent-per-screen):
+1\u20132 hero facts + ONE primary list/form + contextual actions; push tertiary content to
+a Sheet/Dialog/next page. An 8-stat-card wall is a red flag. Use real page chrome
+(AppShell/Sidebar/Topbar/PageContainer) \u2014 content never touches the viewport edge,
+two bordered surfaces never touch (\u9593/breathing via Stack gap). Exactly ONE --primary
+action per view; status uses the FIXED semantic mapping (success/warning/info/
+attention/danger) \u2014 never recolor a wa-iro hue into a role, never use --primary for
+status. Pick density up front (compact 28 heavy-table / default 32 / comfortable 44
+login-mobile) and don't mix it mid-page. Hierarchy from type weight+size+color
+(20/18/14/13 \xD7 400/500/700), not colored background blocks. Mobile-first: default one
+column, add columns only at md:/lg: when each keeps \u226514px body at \u2265~280px width.`
+      },
+      {
+        id: "state-and-a11y",
+        title: "Wire every state + a11y + i18n (the part that gets skipped)",
+        tagline: "default/hover/focus/active/disabled/loading/empty/error all handled; APG keyboard; t() everything.",
+        body: `A screen isn't done at the happy path. Handle every state: Skeleton for INIT
+fetch (no data yet), Form loading / Spinner for active save (data present), EmptyState
+for no-data (one calm sentence, no illustration), inline error near the field via
+FormField (NOT a disappearing toast). Forms: explicit label + help + error always \u2014
+never placeholder-as-label. A11y (WAI-ARIA APG + WCAG 2.2 AA): correct roles/landmarks,
+keyboard (arrows/Home/End/Enter/Esc, visible focus, no positive tabindex, return focus
+on close), \u226524px targets, never colour-only state (add sr-only text), icon-only buttons
+need a name. i18n: zero hardcoded strings \u2014 every label + aria-label through t();
+numbers/currency/dates via Intl with the active locale (ISO 4217/8601, IANA tz),
+plurals via Intl.PluralRules. State-truthful affordances: a parent checkbox aggregates
+its children (checked/indeterminate/empty); a held value is visible when a control
+opens; controlled inputs mirror type\u2194click both ways (a controlled value with no
+synchronous onValueChange FREEZES the input).`
+      },
+      {
+        id: "verify",
+        title: "Verify \u2014 states shown, console clean, build green, 3 widths",
+        tagline: "Drive every interactive control; 0 console errors/warnings; typecheck/lint green; eyeball 390/768/1280.",
+        body: `Before calling the screen done: drive EVERY interactive control to its
+terminal state in a real browser (don't infer behaviour from source) and read the
+DevTools console \u2014 a <button>-in-<button>/hydration/act()/404 warning is a FINDING,
+not noise. Confirm: every prop \xD7 union \xD7 state is exercised; held values visible on
+open; multi-step selections (date range, capped multi-select) can be restarted from a
+complete state, not trapped; controlled mirrors update both directions. Run the app's
+build: typecheck + lint clean, console clean, and eyeball at 390 / 768 / 1280 (atoms
+never wrap, containers wrap with row-gap, natural-width components stay w-fit, no
+decorative edge fades, no dead grey panes). If a failure traces to @godxjp/ui itself,
+do not fake around it \u2014 see report-bug.`
+      },
+      {
+        id: "report-bug",
+        title: "godx-ui bug / can't-follow-a-rule \u2192 file a gh issue (never fake it)",
+        tagline: "If the LIBRARY is wrong, report it \u2014 don't hand-roll a workaround that hides the bug.",
+        body: `Same contract as design-to-page/report-bug: when a rule is impossible because
+@godxjp/ui is at fault (missing token, a primitive without the controlled-vocabulary
+prop, a real a11y/behaviour bug, a wrong catalog example) \u2014 DO NOT silently fake a
+replacement. DON'T copy primitive internals, drop to raw HTML, or redeclare a token to
+dodge it. DO open a detailed GitHub issue (use the draft_bug_report MCP tool to build
+the body + the 'gh issue create --repo godx-jp/godxjp-ui \u2026' command), then apply the
+smallest local workaround tagged // TODO(godxui#<n>: <summary>). The issue must carry a
+minimal repro, expected vs actual, the installed version, and env \u2014 enough to
+reproduce in one paste.`
       }
     ]
   }
@@ -7794,7 +7992,7 @@ function findSkill(id) {
 function findSection(skillId, sectionId) {
   return findSkill(skillId)?.sections.find((s) => s.id === sectionId);
 }
-function routeTask(task) {
+function routeTask(task, opts) {
   const q = task.toLowerCase();
   const matches = [];
   const route = (kw, skill, section, why, alsoSee) => {
@@ -7885,13 +8083,73 @@ function routeTask(task) {
     "Generate design image first \u2192 analyze \u2192 implement."
   );
   route(
-    ["handoff", "design bundle", "claude design", "prototype", "build the page", "implement the design", "build this screen", "mockup"],
+    [
+      "handoff",
+      "design bundle",
+      "claude design",
+      "prototype",
+      "build the page",
+      "implement the design",
+      "build this screen",
+      "mockup"
+    ],
     "design-to-page",
     "map-to-primitives",
     "Map every block to a real @godxjp/ui primitive (MCP-first), consume existing tokens, apply the dxs-kintai DNA, tables central, gaps \u2192 extend-or-ask, verify.",
     ["design-to-page/read-intent", "design-to-page/dna", "design-to-page/tables-central"]
   );
-  if (matches.length === 0) {
+  route(
+    [
+      "compose a screen",
+      "new screen",
+      "new page",
+      "create a page",
+      "create a screen",
+      "build a view",
+      "build a screen",
+      "from scratch",
+      "screen from a brief"
+    ],
+    "compose-a-screen",
+    "pick-primitives",
+    "Build a new app screen from real @godxjp/ui primitives (MCP-first): one-intent-per-screen, real chrome, every state + a11y + i18n, verify.",
+    [
+      "compose-a-screen/assemble-screen",
+      "compose-a-screen/state-and-a11y",
+      "taste/one-intent-per-screen"
+    ]
+  );
+  route(
+    [
+      "bug in godx",
+      "godx-ui bug",
+      "report a bug",
+      "file an issue",
+      "gh issue",
+      "can't follow the rule",
+      "library is broken",
+      "primitive is broken"
+    ],
+    "compose-a-screen",
+    "report-bug",
+    "If @godxjp/ui itself is at fault, don't fake a workaround \u2014 file a detailed gh issue (use draft_bug_report).",
+    ["design-to-page/report-bug"]
+  );
+  const filtered = opts?.consumerOnly ? matches.filter((m) => {
+    const sk = findSkill(m.skill);
+    return !sk || sk.audience !== "core";
+  }) : matches;
+  if (filtered.length === 0) {
+    if (opts?.consumerOnly) {
+      return [
+        {
+          skill: "compose-a-screen",
+          section: "pick-primitives",
+          why: `No keyword match for "${task}". Default consumer path: compose the screen from real primitives via the MCP.`,
+          alsoSee: ["design-to-page/map-to-primitives", "taste/one-intent-per-screen"]
+        }
+      ];
+    }
     return [
       {
         skill: "taste",
@@ -7900,7 +8158,7 @@ function routeTask(task) {
       }
     ];
   }
-  return matches;
+  return filtered;
 }
 
 // src/data/anti-ai-tells.ts
@@ -8629,27 +8887,71 @@ var TOOL_DEFINITIONS = [
   },
   {
     name: "get_tokens",
-    description: "Read design tokens, optionally filtered by category.",
+    description: "Read design tokens, optionally filtered by tier category (primitive / semantic / component).",
     inputSchema: {
       type: "object",
       properties: {
         category: {
           type: "string",
-          enum: [
-            "color",
-            "spacing",
-            "typography",
-            "radius",
-            "shadow",
-            "motion",
-            "breakpoint",
-            "density",
-            "z-index"
-          ]
+          enum: ["primitive", "semantic", "component"]
         }
       }
     }
   },
+  // ── CONSUMER NAMESPACE (app-dev surface — core-only skills hidden) ─
+  {
+    name: "list_consumer_skills",
+    description: "List the design skills relevant to an app-dev BUILDING WITH @godxjp/ui (audience consumer/both). Hides core library-maintenance skills. START HERE if you import @godxjp/ui and want guidance (design-to-page, compose-a-screen, taste, \u2026). Returns id + name + whenToUse + section ids.",
+    inputSchema: { type: "object", properties: {} }
+  },
+  {
+    name: "get_consumer_skill",
+    description: "Fetch ONE section of ONE consumer-facing skill. Same as get_skill_section but refuses core-only skills (steers app-devs away from library-maintenance material). Use after list_consumer_skills / route_consumer_task.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        skill: {
+          type: "string",
+          description: "Consumer skill id (e.g. 'design-to-page', 'compose-a-screen')."
+        },
+        section: { type: "string", description: "Section id within that skill." }
+      },
+      required: ["skill"]
+    }
+  },
+  {
+    name: "route_consumer_task",
+    description: "Natural-language task \u2192 consumer skill+section pointer. Like route_task but only points to consumer-facing skills (never core library-maintenance). Use FIRST when you're building an app with @godxjp/ui.",
+    inputSchema: {
+      type: "object",
+      properties: { task: { type: "string", description: "Describe what you want to build." } },
+      required: ["task"]
+    }
+  },
+  {
+    name: "draft_bug_report",
+    description: "When @godxjp/ui ITSELF is at fault (missing token, a primitive lacking the controlled-vocabulary prop, a real a11y/behaviour bug, a wrong catalog example) and you cannot follow a rule \u2014 DON'T fake a workaround. This drafts a detailed GitHub issue body + a copy-paste `gh issue create` command so you can report it. Prints the command only; never runs gh.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        summary: { type: "string", description: "One-line title of the bug / blocked rule." },
+        repro: { type: "string", description: "Minimal steps or code to reproduce." },
+        expected: { type: "string", description: "What SHOULD happen (per the rule/spec)." },
+        actual: { type: "string", description: "What actually happens." },
+        component: {
+          type: "string",
+          description: "Affected component name, if any (links to get_component)."
+        },
+        rule: {
+          type: "number",
+          description: "Cardinal rule number that can't be followed, if any."
+        },
+        version: { type: "string", description: "Installed @godxjp/ui version (e.g. '12.1.0')." },
+        env: { type: "string", description: "Environment (browser/OS/framework), if relevant." }
+      },
+      required: ["summary"]
+    }
+  },
   // ── TASK ROUTING (smallest response — pointer) ─────────────────
   {
     name: "route_task",
@@ -8716,9 +9018,18 @@ async function dispatchTool(name, args) {
     case "get_rule":
       return getRule(typeof args.number === "number" ? args.number : void 0);
     case "get_vocab":
-      return getVocab(args.name);
+      return getVocab(args.name == null ? void 0 : String(args.name));
     case "get_tokens":
       return getTokens(args.category);
+    // Consumer namespace
+    case "list_consumer_skills":
+      return listConsumerSkills();
+    case "get_consumer_skill":
+      return getConsumerSkill(String(args.skill ?? ""), String(args.section ?? ""));
+    case "route_consumer_task":
+      return routeTaskTool(String(args.task ?? ""), { consumerOnly: true });
+    case "draft_bug_report":
+      return draftBugReport(args);
     // Task routing
     case "route_task":
       return routeTaskTool(String(args.task ?? ""));
@@ -8736,12 +9047,15 @@ async function dispatchTool(name, args) {
 function listSkills() {
   let out = `# Available skills (${SKILLS.length})
 
+`;
+  out += `Each is tagged \`[audience]\` \u2014 \`core\` = building @godxjp/ui itself, \`consumer\` = building an app with it, \`both\`. App-devs: use \`list_consumer_skills\` to hide core material.
+
 `;
   out += `Use \`get_skill_section skill="..." section="..."\` to drill in.
 
 `;
   for (const s of SKILLS) {
-    out += `## ${s.id} \u2014 ${s.name}
+    out += `## ${s.id} \u2014 ${s.name}  \`[${s.audience}]\`
 `;
     out += `**When to use:** ${s.whenToUse}
 
@@ -8754,6 +9068,124 @@ function listSkills() {
 _Source: ${SKILLS.map((s) => s.source).filter((v, i, a) => a.indexOf(v) === i).slice(0, 3).join("; ")}, \u2026_`;
   return out;
 }
+function listConsumerSkills() {
+  const list = SKILLS.filter(isConsumerSkill);
+  let out = `# Consumer skills (${list.length}) \u2014 building an app WITH @godxjp/ui
+
+`;
+  out += `Core library-maintenance skills are hidden. Drill in with \`get_consumer_skill skill="..." section="..."\`, or route a task with \`route_consumer_task\`.
+
+`;
+  for (const s of list) {
+    out += `## ${s.id} \u2014 ${s.name}  \`[${s.audience}]\`
+`;
+    out += `**When to use:** ${s.whenToUse}
+
+`;
+    out += `**Sections:** ${s.sections.map((sec) => `\`${sec.id}\``).join(", ")}
+
+`;
+  }
+  return out;
+}
+function getConsumerSkill(skillId, sectionId) {
+  const skill = findSkill(skillId);
+  if (skill && !isConsumerSkill(skill)) {
+    return `Skill "${skillId}" is CORE-only (building @godxjp/ui itself) and isn't served to app-devs. Use \`list_consumer_skills\` for consumer-facing guidance${skillId === "component-discipline" ? ` \u2014 the standards you need when composing/extending are folded into \`compose-a-screen/state-and-a11y\` and \`design-to-page/verify\`.` : `.`}`;
+  }
+  return getSkillSection(skillId, sectionId);
+}
+function draftBugReport(args) {
+  const get = (k) => {
+    const v = args[k];
+    return typeof v === "string" ? v.trim() : "";
+  };
+  const summary = get("summary");
+  if (!summary) {
+    return "Pass at least `summary` (one-line title). For a useful report also pass `repro`, `expected`, `actual`, and ideally `component` / `rule` / `version` / `env`. A vague report a maintainer can't reproduce is not enough.";
+  }
+  const repro = get("repro");
+  const expected = get("expected");
+  const actual = get("actual");
+  const component = get("component");
+  const rule = typeof args.rule === "number" ? args.rule : void 0;
+  const version = get("version");
+  const env = get("env");
+  const missing = [];
+  if (!repro) missing.push("repro");
+  if (!expected) missing.push("expected");
+  if (!actual) missing.push("actual");
+  const ph = (label, val) => val ? val : `_(TODO: ${label} \u2014 required for a reproducible report)_`;
+  const title = `[bug] ${summary}`;
+  let body = `## Summary
+
+${summary}
+
+`;
+  body += `## Affected
+
+`;
+  body += component ? `- Component: \`${component}\` (see \`get_component name="${component}"\`)
+` : `- Component: _(n/a)_
+`;
+  body += rule !== void 0 ? `- Cardinal rule: #${rule} (see \`get_rule number=${rule}\`)
+` : "";
+  body += `
+## Reproduction (minimal)
+
+${ph("repro", repro)}
+
+`;
+  body += `## Expected
+
+${ph("expected", expected)}
+
+`;
+  body += `## Actual
+
+${ph("actual", actual)}
+
+`;
+  body += `## Environment
+
+`;
+  body += `- @godxjp/ui version: ${version || "_(TODO: e.g. 12.1.0)_"}
+`;
+  body += `- Env: ${env || "_(TODO: browser / OS / framework)_"}
+
+`;
+  body += `## Proposed fix
+
+_(optional \u2014 what the library should do instead)_
+`;
+  const q = (s) => `'${s.replace(/'/g, `'\\''`)}'`;
+  const cmd = `gh issue create --repo godx-jp/godxjp-ui --label bug --title ${q(title)} --body ${q(body)}`;
+  let out = `# Draft bug report
+
+`;
+  if (missing.length) {
+    out += `> \u26A0\uFE0F Incomplete \u2014 fill ${missing.map((m) => `\`${m}\``).join(", ")} before filing (a report a maintainer can't reproduce will bounce).
+
+`;
+  }
+  out += `**Title:** ${title}
+
+`;
+  out += `## Issue body (Markdown)
+
+${body}
+`;
+  out += `## File it (copy-paste \u2014 this tool does NOT run gh)
+
+\`\`\`sh
+${cmd}
+\`\`\`
+
+`;
+  out += `_Reminder: don't hand-roll a fake workaround to hide the bug \u2014 file this, then mark any minimal local workaround with \`// TODO(godxui#<n>)\`._
+`;
+  return out;
+}
 function listPrimitives(group) {
   const list = group ? componentsByGroup(group) : COMPONENTS;
   if (list.length === 0) return `No components${group ? ` in group "${group}"` : ""}.`;
@@ -9093,11 +9525,11 @@ function getTokens(cat) {
   }
   return out;
 }
-function routeTaskTool(task) {
+function routeTaskTool(task, opts) {
   if (!task.trim())
     return "Describe the task (e.g. 'design a premium agency hero', 'audit existing settings page').";
-  const results = routeTask(task);
-  let out = `# Routing "${task}"
+  const results = routeTask(task, opts);
+  let out = `# Routing "${task}"${opts?.consumerOnly ? " (consumer)" : ""}
 
 `;
   for (const r of results) {
@@ -9196,10 +9628,19 @@ function lintJsx(jsx) {
   check(/<input[\s>]/, "Use `<Input>` instead of raw `<input>` (rule 29).");
   check(/<select[\s>]/, "Use `<Select>` instead of raw `<select>` (rule 29).");
   check(/<textarea[\s>]/, "Use `<Textarea>` instead of raw `<textarea>` (rule 29).");
+  check(/<(table|thead|tbody)[\s>]/, "Use `<DataTable>` instead of a hand-rolled `<table>` (rule 29).");
   check(
     /bg-(red|blue|green|yellow|gray|slate|zinc|neutral|stone|orange|amber|lime|emerald|teal|cyan|sky|indigo|violet|purple|fuchsia|pink|rose)-\d{2,3}\b/,
     "Use semantic token utilities (`bg-primary`/`bg-destructive`) not raw color scales (rule 2)."
   );
+  check(
+    /\b(?:ml|mr|pl|pr|left|right)-(?:\d|\[|auto|px|full|screen)|\b(?:rounded-[lr]|border-[lr]|text-(?:left|right))\b/,
+    "Physical direction class \u2014 use logical CSS (`ms-/me-`, `ps-/pe-`, `start-/end-`, `rounded-s/e`, `text-start/end`) so the UI flips correctly under RTL (rule: logical CSS)."
+  );
+  check(
+    /size=["']default["']/,
+    '`size="default"` is not in the controlled vocabulary \u2014 use `size` \u2208 xs|sm|md|lg.'
+  );
   check(
     /<Tag[\s\S]*?color=["']error["']/i,
     'Tag `color="error"` \u2192 `"destructive"` (v5.0, PR #60).'
@@ -9268,6 +9709,7 @@ Note: heuristic only \u2014 not a substitute for the full CI gate.
 }
 
 // src/resources/registry.ts
+var RULE_COUNT = CARDINAL_RULES.length;
 var RESOURCE_DEFINITIONS = [
   {
     uri: "godx-ui://components",
@@ -9289,8 +9731,8 @@ var RESOURCE_DEFINITIONS = [
   },
   {
     uri: "godx-ui://rules",
-    name: "Cardinal rules (34)",
-    description: "The 34 binding rules from CLAUDE.md as Markdown.",
+    name: `Cardinal rules (${RULE_COUNT})`,
+    description: `The ${RULE_COUNT} binding rules from CLAUDE.md as Markdown.`,
     mimeType: "text/markdown"
   },
   {
@@ -9397,7 +9839,7 @@ ${c.example}
 // package.json
 var package_default = {
   name: "@godxjp/ui-mcp",
-  version: "0.18.0",
+  version: "0.19.0",
   description: "Model Context Protocol server for @godxjp/ui \u2014 gives Claude Code / Codex CLI / Cursor / any MCP-aware agent live access to the component catalog, prop vocabulary, design tokens, 34 cardinal rules, copy-paste-ready patterns, 12 design / taste skills synthesised from Leonxlnx/taste-skill, 20+ anti-AI-tell patterns, and a 50-check redesign audit \u2014 token-efficient (list \u2192 drill-down).",
   type: "module",
   main: "./dist/index.js",