@vadimcomanescu/nadicode-design-system 2.0.0

package/.agents/skills/seed/recipes/company-contact.md

@@ -0,0 +1,234 @@
+# Recipe: Company Contact
+
+Contact page with form, company information, and FAQ.
+
+## Route Pattern
+
+`/contact` or `/contatti`
+
+## Shell
+
+`marketing-shell` (HeaderBlock + FooterBlock)
+
+---
+
+## Layout Blueprint (Desktop)
+
+```
++------------------------------------------------+
+| HeaderBlock: Logo  [Nav links]  [CTA Button]   |
++------------------------------------------------+
+|                                                 |
+|              HEADING                            |
+|    "Get in Touch"                               |
+|    Subtitle                                     |
+|                                                 |
++------------------------------------------------+
+|                                                 |
+|   CONTACT BLOCK (2-col)                         |
+|   +-------------------+ +------------------+    |
+|   | Contact form      | | Company info     |    |
+|   | Name, Email,      | | Address, phone,  |    |
+|   | Subject, Message  | | email, map       |    |
+|   | [Submit]          | |                  |    |
+|   +-------------------+ +------------------+    |
+|                                                 |
++------------------------------------------------+
+|                                                 |
+|   INFO CARDS (3-col)                            |
+|   +----------+ +----------+ +----------+        |
+|   | Email    | | Phone    | | Office   |        |
+|   +----------+ +----------+ +----------+        |
+|                                                 |
++------------------------------------------------+
+|                                                 |
+|         FAQ (Accordion)                         |
+|                                                 |
++------------------------------------------------+
+| FooterBlock: columns + social + legal           |
++------------------------------------------------+
+```
+
+---
+
+## Section Sequence
+
+### 1. Header
+
+```tsx
+<HeaderBlock logo={<Logo />} links={navLinks} actions={<Button>Book a Call</Button>} />
+```
+
+### 2. Heading
+
+```tsx
+<section className="py-16 md:py-24">
+  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <motion.div variants={heroStagger.container} initial="hidden" animate="visible">
+      <motion.h1 variants={heroStagger.child} className="text-4xl md:text-5xl font-bold tracking-tight">
+        Get in Touch
+      </motion.h1>
+      <motion.p variants={heroStagger.child} className="mt-4 text-lg text-text-secondary max-w-xl mx-auto">
+        Have a question or want to work together? We'd love to hear from you.
+      </motion.p>
+    </motion.div>
+  </div>
+</section>
+```
+
+### 3. Contact Block
+
+```tsx
+<ScrollFadeIn>
+  <section className="pb-16 md:pb-24">
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <ContactBlock
+        fields={contactFields}
+        companyInfo={companyInfo}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  </section>
+</ScrollFadeIn>
+```
+
+### 4. Info Cards
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-16 md:py-24 bg-muted">
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {contactChannels.map(channel => (
+          <Card key={channel.id} className="glass-panel p-6 text-center">
+            <channel.icon className="mx-auto mb-4 h-8 w-8 text-accent" />
+            <Heading level={4} size="title" >{channel.label}</Heading>
+            <Typography variant="body" className="mt-2 text-text-secondary">
+              {channel.value}
+            </Typography>
+          </Card>
+        ))}
+      </div>
+    </div>
+  </section>
+</ScrollFadeIn>
+```
+
+### 5. FAQ
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-16 md:py-24">
+    <FAQBlock items={contactFaqItems} />
+  </section>
+</ScrollFadeIn>
+```
+
+### 6. Footer
+
+```tsx
+<FooterBlock columns={footerColumns} social={socialLinks} legal={legalLinks} />
+```
+
+---
+
+## Animation Storyboard
+
+```
+ANIMATION STORYBOARD
+====================
+BUDGET: 600ms (above-fold) | SPRING: dramatic (heading), snappy (rest) | REDUCED: opacity-only
+
+T+0ms     [nav]        Header visible                  (instant)
+T+100ms   [headline]   Page heading                    {fadeInUp, dramatic}
+T+250ms   [subtitle]   Subtitle                        {fadeInUp, dramatic}
+
+SCROLL-TRIGGERED (below fold):
+[contact]      ScrollFadeIn at 20% visible    {fadeInUp, snappy}
+[info-cards]   ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 100ms}
+[faq]          ScrollFadeIn at 20% visible    {fadeInUp, snappy}
+
+REDUCED MOTION: All items visible immediately, opacity 0->1 in 10ms
+```
+
+---
+
+## Required Components
+
+| Component | Import Path | Purpose |
+|-----------|-------------|---------|
+| `HeaderBlock` | `@vadimcomanescu/nadicode-design-system/header-block` | Site navigation |
+| `FooterBlock` | `@vadimcomanescu/nadicode-design-system/footer-block` | Site footer |
+| `Button` | `@vadimcomanescu/nadicode-design-system/button` | CTAs and form submit |
+| `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animations |
+| `ContactBlock` | `@vadimcomanescu/nadicode-design-system/contact-block` | Contact form + company info |
+
+### Allowed (optional)
+
+`FAQBlock`, `Card`, `FeatureGridBlock`, `Badge`, `HeroBlock`, `HeroSectionBlock`, `CallToActionBlock`, `Typography`
+
+### Forbidden
+
+`Sidebar`, `DataTable`, `FormWizard`, `AgentTeamPanel`, `PricingBlock`, `SettingsLayout`, `ChatLayout`
+
+---
+
+## Required States
+
+| State | Trigger | Visual |
+|-------|---------|--------|
+| `default` | Page loaded | Form ready for input |
+| `form-submitting` | Form submit | Button shows loading spinner, fields disabled |
+| `form-success` | Submission succeeds | Success toast/message, form resets |
+| `form-error` | Submission fails | Error toast/message, form retains values |
+
+---
+
+## Responsive Contract
+
+| Breakpoint | Heading | Contact Block | Info Cards | Content Width |
+|------------|---------|---------------|------------|---------------|
+| Mobile | text-center | Stacked (form above info) | 1 col | px-4 |
+| `sm:` | text-center | Stacked (form above info) | 2 col | px-6, max-w-7xl |
+| `lg:` | text-center | Side-by-side (form left, info right) | 3 col | px-8, max-w-7xl |
+
+---
+
+## Styling Rules
+
+- Contact form container uses `glass-panel` for visual depth
+- Info cards use `glass-panel` with centered icon layout
+- Section backgrounds alternate: `bg-background` and `bg-muted`
+- Form inputs use standard Seed Input/Textarea components
+- Submit button uses `Button` with loading state
+- No raw palette colors; semantic tokens only
+
+---
+
+## Accessibility
+
+- Page heading is `<h1>`, section headings are `<h2>`
+- Form fields have visible stacked labels (no floating labels)
+- Required fields marked with `aria-required="true"`
+- Form errors announced via `aria-live="polite"` region
+- Submit button disabled during submission with `aria-disabled`
+- Skip-nav link to main content
+- Mobile nav is keyboard accessible with focus trap
+
+---
+
+## Reference Implementations
+
+- `src/components/blocks/ContactBlock.tsx`
+- `src/components/blocks/FAQBlock.tsx`
+
+---
+
+## Verification
+
+```bash
+npx tsc --noEmit
+npm run lint
+npm run test
+npx vitest run src/test/css-variable-usage.test.ts
+```

package/.agents/skills/seed/recipes/crud-form.md

@@ -0,0 +1,233 @@
+# Recipe: CRUD Form
+
+Create or edit entity pages with sectioned form groups and validation.
+
+## Route Patterns
+
+- `/[entity]/new` (create)
+- `/[entity]/[id]/edit` (edit)
+
+## Shell
+
+`app-shell` (Sidebar + top bar + SearchCommand)
+
+---
+
+## Layout Blueprint (Desktop)
+
+```
++--+---------------------------------------------+
+|  | Breadcrumb: Home > [Entity] > New            |
+|S | Page Title                        [Cancel]   |
+|I |                                               |
+|D | +------------------------------------------+  |
+|E | | Section 1: Basic Information     glass-panel|
+|B | | +--------------------------------------+ |  |
+|A | | | Label                                | |  |
+|R | | | [Input]                               | |  |
+|  | | | Label                                | |  |
+|  | | | [Textarea]                            | |  |
+|  | | +--------------------------------------+ |  |
+|  | +------------------------------------------+  |
+|  |                                               |
+|  | +------------------------------------------+  |
+|  | | Section 2: Configuration       glass-panel|  |
+|  | | [Select]  [Switch]  [Checkbox]           |  |
+|  | +------------------------------------------+  |
+|  |                                               |
+|  | +------------------------------------------+  |
+|  | | Actions Row                              |  |
+|  | | [Delete]              [Cancel] [Save]    |  |
+|  | +------------------------------------------+  |
++--+---------------------------------------------+
+```
+
+---
+
+## Section Sequence
+
+### 1. Page Header
+
+```tsx
+<div className="flex items-center justify-between">
+  <div>
+    <Breadcrumb>...</Breadcrumb>
+    <Heading level={2} size="section" >{isEdit ? `Edit ${name}` : `New ${entityType}`}</Heading>
+  </div>
+  <Button variant="ghost" onClick={handleCancel}>Cancel</Button>
+</div>
+```
+
+### 2. Form Sections (grouped in Cards)
+
+```tsx
+<Form {...form}>
+  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+    {/* Section 1 */}
+    <Card className="glass-panel p-6">
+      <Heading level={4} size="title"  className="mb-4">Basic Information</Heading>
+      <div className="space-y-4">
+        <FormField control={form.control} name="name" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl><Input {...field} /></FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+        <FormField control={form.control} name="description" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Description</FormLabel>
+            <FormControl><Textarea {...field} /></FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+      </div>
+    </Card>
+
+    {/* Section 2 */}
+    <Card className="glass-panel p-6">
+      <Heading level={4} size="title"  className="mb-4">Configuration</Heading>
+      <div className="space-y-4">
+        {/* Select, Switch, Checkbox fields */}
+      </div>
+    </Card>
+
+    {/* Actions */}
+    <div className="flex items-center justify-between pt-4">
+      {isEdit && (
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="destructive">Delete</Button>
+          </AlertDialogTrigger>
+          {/* Delete confirmation */}
+        </AlertDialog>
+      )}
+      <div className="flex items-center gap-3 ml-auto">
+        <Button variant="outline" onClick={handleCancel}>Cancel</Button>
+        <Button type="submit" disabled={!isDirty || isSubmitting}>
+          {isSubmitting ? <Spinner className="mr-2" /> : null}
+          {isEdit ? "Save Changes" : "Create"}
+        </Button>
+      </div>
+    </div>
+  </form>
+</Form>
+```
+
+---
+
+## Animation Storyboard
+
+```
+ANIMATION STORYBOARD
+====================
+BUDGET: 400ms | SPRING: snappy | REDUCED: opacity-only
+
+T+0ms     [shell]     Sidebar + top bar visible    (instant)
+T+50ms    [header]    Title + breadcrumb            {fadeInUp, snappy}
+T+130ms   [section-1] First form section            {fadeInUp, snappy}
+T+230ms   [section-2] Second form section           {fadeInUp, snappy}
+T+330ms   [actions]   Action buttons row            {fadeIn, snappy}
+
+REDUCED MOTION: All items visible immediately
+```
+
+---
+
+## Required Components
+
+| Component | Import Path | Purpose |
+|-----------|-------------|---------|
+| `Form` | `@vadimcomanescu/nadicode-design-system/form` | Form wrapper (react-hook-form) |
+| `FormField` | `@vadimcomanescu/nadicode-design-system/form` | Field binding |
+| `FormItem` | `@vadimcomanescu/nadicode-design-system/form` | Field container |
+| `FormLabel` | `@vadimcomanescu/nadicode-design-system/form` | Stacked label (above input) |
+| `FormControl` | `@vadimcomanescu/nadicode-design-system/form` | Control wrapper |
+| `FormMessage` | `@vadimcomanescu/nadicode-design-system/form` | Validation error message |
+| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Text inputs |
+| `Textarea` | `@vadimcomanescu/nadicode-design-system/textarea` | Long text |
+| `Select` | `@vadimcomanescu/nadicode-design-system/select` | Dropdowns |
+| `Switch` | `@vadimcomanescu/nadicode-design-system/switch` | Toggles |
+| `Checkbox` | `@vadimcomanescu/nadicode-design-system/checkbox` | Boolean fields |
+| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Submit, cancel, delete |
+| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Section containers |
+| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Section headings |
+| `Breadcrumb` | `@vadimcomanescu/nadicode-design-system/breadcrumb` | Navigation context |
+| `AlertDialog` | `@vadimcomanescu/nadicode-design-system/alert-dialog` | Delete confirmation |
+| `Alert` | `@vadimcomanescu/nadicode-design-system/alert` | Submission errors |
+| `Spinner` | `@vadimcomanescu/nadicode-design-system/spinner` | Submit loading |
+| `Skeleton` | `@vadimcomanescu/nadicode-design-system/skeleton` | Loading state (edit mode) |
+
+### Allowed (optional)
+
+`Field`, `Label`, `DatePicker`, `Combobox`, `TagInput`, `RadioGroup`, `Slider`, `FileUpload`, `InputOTP`, `NativeSelect`, `InputGroup`, `Tooltip`
+
+### Forbidden
+
+`DataTable`, `HeroBlock`, chart components, decorative effects, text effects, agentic components
+
+---
+
+## Required States
+
+| State | Trigger | Visual |
+|-------|---------|--------|
+| `loading` | Edit mode: fetching entity | Skeleton form sections |
+| `pristine` | Form loaded, no changes | Submit button disabled |
+| `dirty` | User modified a field | Submit button enabled, optional unsaved indicator |
+| `submitting` | Form submitted | Submit button shows Spinner, form disabled |
+| `validation-error` | Invalid fields | `FormMessage` below invalid fields (red text) |
+| `submission-error` | Server error on submit | `Alert` variant="destructive" at top of form |
+| `success` | Saved successfully | Toast "Saved" + redirect to list page |
+
+---
+
+## Responsive Contract
+
+| Breakpoint | Layout | Actions |
+|------------|--------|---------|
+| Mobile | Single column, cards full width | Stacked buttons, full width |
+| `sm:` | Single column, max-w-2xl centered | Inline buttons, right-aligned |
+| `lg:` | Single column within sidebar layout | Same as sm |
+
+---
+
+## Styling Rules
+
+- Form sections: `glass-panel p-6`
+- Labels: always stacked above inputs (never inline, never floating)
+- Field spacing: `space-y-4` within sections
+- Section spacing: `space-y-6`
+- Required fields: visual asterisk on label
+- Error text: `text-destructive text-sm`
+- Delete button: `variant="destructive"`, left-aligned, separated from save/cancel
+- Max form width: `max-w-2xl mx-auto` for readability
+
+---
+
+## Accessibility
+
+- All inputs have associated `<label>` via `FormLabel`
+- Error messages linked via `aria-describedby`
+- Required fields have `aria-required="true"`
+- Delete uses `AlertDialog` with confirmation
+- Tab order: fields top-to-bottom, then cancel, then save
+- Form has `noValidate` (custom validation via react-hook-form)
+
+---
+
+## Reference Implementations
+
+- `src/components/blocks/CreateBlock.tsx`
+- `src/components/ui/Form.tsx` (form primitives)
+
+---
+
+## Verification
+
+```bash
+npx tsc --noEmit
+npm run lint
+npm run test
+npx vitest run src/test/css-variable-usage.test.ts
+```

package/.agents/skills/seed/recipes/crud-list-detail.md

@@ -0,0 +1,230 @@
+# Recipe: CRUD List + Detail
+
+Entity management page with search, filter, sort, and record inspection.
+
+## Route Patterns
+
+- `/[entity]` (list view)
+- `/[entity]/[id]` (detail view, optional -- can use Dialog/Sheet instead)
+
+## Shell
+
+`app-shell` (Sidebar + top bar + SearchCommand)
+
+---
+
+## Layout Blueprint (Desktop)
+
+```
++--+---------------------------------------------+
+|  | Breadcrumb: Home > [Entity]                  |
+|S | Page Title        [Search] [Filter] [+ New]  |
+|I |                                               |
+|D | +------------------------------------------+  |
+|E | | DataTable                                |  |
+|B | | [ ] Name        Status    Date    Actions|  |
+|A | | [ ] Record 1    Active    Jan 1   ...    |  |
+|R | | [ ] Record 2    Pending   Jan 2   ...    |  |
+|  | | [ ] Record 3    Active    Jan 3   ...    |  |
+|  | | ...                                      |  |
+|  | +------------------------------------------+  |
+|  |                                               |
+|  | [< Prev]  Page 1 of 10  [Next >]             |
++--+---------------------------------------------+
+
+Detail (Dialog/Sheet overlay):
++--+---------------------------------------------+
+|  | ...list in background...                     |
+|  |        +---------------------------+         |
+|  |        | Sheet/Dialog              |         |
+|  |        | Entity Name               |         |
+|  |        | Status: [Badge]           |         |
+|  |        |                           |         |
+|  |        | Details section           |         |
+|  |        | Related records section   |         |
+|  |        |                           |         |
+|  |        | [Edit] [Archive] [Delete] |         |
+|  |        +---------------------------+         |
++--+---------------------------------------------+
+```
+
+---
+
+## Section Sequence
+
+### 1. Page Header + Controls
+
+```tsx
+<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+  <div>
+    <Breadcrumb>...</Breadcrumb>
+    <Heading level={2} size="section" >Entities</Heading>
+  </div>
+  <div className="flex items-center gap-3">
+    <Input placeholder="Search..." startIcon={<SearchIcon size={16} />} className="w-64" />
+    <Select>{/* Filter options */}</Select>
+    <Button><PlusIcon size={16} /> New Entity</Button>
+  </div>
+</div>
+```
+
+### 2. Data Table
+
+```tsx
+<Card className="glass-panel">
+  <DataTable
+    columns={columns}
+    data={entities}
+    onRowClick={openDetail}
+    selectable
+  />
+</Card>
+```
+
+### 3. Pagination
+
+```tsx
+<div className="flex items-center justify-between mt-4">
+  <Typography variant="small" className="text-text-secondary">
+    Showing {start}-{end} of {total}
+  </Typography>
+  <Pagination current={page} total={totalPages} onPageChange={setPage} />
+</div>
+```
+
+### 4. Detail Panel (Sheet or Dialog)
+
+```tsx
+<Sheet open={!!selectedEntity} onOpenChange={closeDetail}>
+  <SheetContent className="sm:max-w-lg">
+    <SheetHeader>
+      <SheetTitle>{entity.name}</SheetTitle>
+      <Badge>{entity.status}</Badge>
+    </SheetHeader>
+    <div className="space-y-6 mt-6">
+      {/* Detail fields */}
+      {/* Related records */}
+    </div>
+    <SheetFooter>
+      <Button variant="outline">Edit</Button>
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive">Delete</Button>
+        </AlertDialogTrigger>
+        {/* Confirmation dialog */}
+      </AlertDialog>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>
+```
+
+---
+
+## Animation Storyboard
+
+```
+ANIMATION STORYBOARD
+====================
+BUDGET: 400ms | SPRING: snappy | REDUCED: opacity-only
+
+T+0ms     [shell]     Sidebar + top bar visible    (instant)
+T+50ms    [header]    Title + controls fade in      {fadeInUp, snappy}
+T+130ms   [table]     Table container fades in      {fadeIn, snappy}
+T+200ms   [rows]      Table rows stagger            {blockStagger, 40ms, max 10}
+T+400ms   [pagination] Pagination fades in          {fadeIn, snappy}
+
+DETAIL PANEL:
+T+0ms     [overlay]   Backdrop appears              {fadeIn, 150ms}
+T+0ms     [sheet]     Sheet slides in from right    {slideInRight, gentle}
+
+REDUCED MOTION: All items visible immediately
+```
+
+---
+
+## Required Components
+
+| Component | Import Path | Purpose |
+|-----------|-------------|---------|
+| `DataTable` | `@vadimcomanescu/nadicode-design-system/data-table` | Main data display |
+| `Pagination` | `@vadimcomanescu/nadicode-design-system/pagination` | Page navigation |
+| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Search field |
+| `Select` | `@vadimcomanescu/nadicode-design-system/select` | Filter dropdown |
+| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Actions (new, edit, delete) |
+| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Status indicators |
+| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Table container |
+| `Sheet` | `@vadimcomanescu/nadicode-design-system/sheet` | Detail side panel |
+| `AlertDialog` | `@vadimcomanescu/nadicode-design-system/alert-dialog` | Delete confirmation |
+| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Titles |
+| `Breadcrumb` | `@vadimcomanescu/nadicode-design-system/breadcrumb` | Navigation context |
+| `Skeleton` | `@vadimcomanescu/nadicode-design-system/skeleton` | Loading state |
+| `Empty` | `@vadimcomanescu/nadicode-design-system/empty` | No-data state |
+
+### Allowed (optional)
+
+`Dialog`, `Tabs`, `DropdownMenu`, `ContextMenu`, `Tooltip`, `Table`, `Checkbox`
+
+### Forbidden
+
+`HeroBlock`, `PricingBlock`, decorative effects, text effects, `FormWizard`, chart components
+
+---
+
+## Required States
+
+| State | Trigger | Visual |
+|-------|---------|--------|
+| `loading` | Initial data fetch | Skeleton table rows (5 rows) |
+| `empty` | Zero records | `Empty` with entity icon, "No [entities] yet", "Create your first [entity]" CTA |
+| `has-data` | Data loaded | Full DataTable with records |
+| `filtering` | Active filter/search | Table with filtered results, active filter indicators |
+| `empty-filter` | Filter returns zero | `Empty` with "No results match", "Clear filters" CTA |
+| `error` | API failure | `Alert` variant="destructive" with retry |
+
+---
+
+## Responsive Contract
+
+| Breakpoint | Table | Filters | Detail Panel |
+|------------|-------|---------|--------------|
+| Mobile | Card list (hidden columns) | Filter button -> Sheet | Full-screen Sheet |
+| `sm:` | Table (key columns) | Inline search + filter button | Sheet side="right" |
+| `lg:` | Full table all columns | Persistent search + filter bar | Sheet max-w-lg |
+
+---
+
+## Styling Rules
+
+- Table container: `glass-panel`
+- Status badges: semantic variants (`success`, `warning`, `destructive`, `default`)
+- Row hover: `hover:bg-surface-hover`
+- Selected rows: `bg-surface-active`
+- No raw palette colors
+
+---
+
+## Accessibility
+
+- Table has proper `<thead>`, `<tbody>` structure
+- Sortable columns have `aria-sort` attribute
+- Row actions have `aria-label`
+- Delete uses `AlertDialog` for confirmation (keyboard trap)
+- Search input has `role="search"` wrapper
+
+---
+
+## Reference Implementations
+
+- `src/components/blocks/DataGridBlock.tsx`
+- `src/components/blocks/DirectoryBlock.tsx`
+
+---
+
+## Verification
+
+```bash
+npx tsc --noEmit
+npm run lint
+npm run test
+npx vitest run src/test/css-variable-usage.test.ts
+```