@1money/component-ui 0.0.1

package/.claude/skills/1money-component-dev/references/StyleSystemAPI.md

@@ -0,0 +1,389 @@
+# Style System API Reference
+
+Internal SCSS authoring reference for `@1money/components-ui` component development.
+
+## Import
+
+```scss
+@use '@/styles/api' as theme;
+@use '@/styles/recipes/variants' as variants;
+```
+
+Components use **namespaced** imports:
+- `theme.*` for all token functions, semantic helpers, typography mixins, and responsive mixins
+- `variants.*` for the Variant DSL helpers
+- `theme.$prefix` for the BEM prefix (`om-react-ui`)
+
+---
+
+## Token Functions
+
+### `theme.spacing($domain, $key)` — Spacing
+
+Domain determines the spacing group. Available domains: `scale`, `gap`, `component-padding`, `section-padding`.
+
+#### `theme.spacing(scale, $key)` — Raw Spacing Scale
+
+| Key | Value |
+|-----|-------|
+| `0` | 0 |
+| `100` | 4px |
+| `200` | 8px |
+| `300` | 12px |
+| `400` | 16px |
+| `500` | 20px |
+| `600` | 24px |
+| `800` | 32px |
+| `1000` | 40px |
+| `1200` | 48px |
+| `1400` | 56px |
+| `1600` | 64px |
+| `2000` | 80px |
+| `2400` | 96px |
+| `3200` | 128px |
+| `4000` | 160px |
+
+```scss
+.element { padding: theme.spacing(scale, 400); } // 16px
+```
+
+#### `theme.spacing(gap, $key)` — Gap Spacing
+
+Allowed keys: `050`, `100`, `200`, `300`, `400`, `600`, `1600`
+
+```scss
+.stack { gap: theme.spacing(gap, 400); } // 16px
+```
+
+#### `theme.spacing(component-padding, $key)` — Component Internal Padding
+
+Allowed keys: `050`, `100`, `200`, `300`, `400`, `600`, `800`
+
+```scss
+.button { padding: theme.spacing(component-padding, 400); }
+```
+
+#### `theme.spacing(section-padding, $key)` — Page Section Padding
+
+Allowed keys: `800`, `1600`, `2400`, `4000`
+
+```scss
+.section { padding: theme.spacing(section-padding, 1600); }
+```
+
+### `theme.shape($key)` — Border Radius
+
+| Key | Value |
+|-----|-------|
+| `0` | 0 |
+| `100` | 4px |
+| `200` | 8px |
+| `300` | 12px |
+| `400` | 16px |
+| `600` | 24px |
+| `full` | 9999px |
+
+```scss
+.element { border-radius: theme.shape(300); } // 12px
+.pill { border-radius: theme.shape('full'); } // 9999px
+```
+
+### `theme.shadows($key)` — Box Shadow
+
+| Key | Value |
+|-----|-------|
+| `0` | none |
+| `100` | `0 4px 8px rgba(65, 91, 130, 12%)` |
+| `200` | `0 10px 22px rgba(0, 0, 0, 10%)` |
+
+```scss
+.element { box-shadow: theme.shadows(100); }
+```
+
+### `theme.sizing($domain, $key)` — Sizing
+
+Domain determines the sizing group. Available domains: `scale`, `component-height`.
+
+#### `theme.sizing(scale, $key)` — Percentage Sizing
+
+| Key | Value |
+|-----|-------|
+| `25` | 25% |
+| `33` | 33.333% |
+| `50` | 50% |
+| `66` | 66.667% |
+| `75` | 75% |
+| `100` | 100% |
+| `auto` | auto |
+
+#### `theme.sizing(component-height, $key)` — Component Heights
+
+Standardized heights for interactive elements.
+
+| Key | Value | Use case |
+|-----|-------|----------|
+| `xs` | 24px | Badge, small chips |
+| `sm` | 32px | Small button, icon button |
+| `md` | 40px | Medium button, sidebar items |
+| `lg` | 44px | Small input/select |
+| `xl` | 48px | Cell, stepper step |
+| `2xl` | 52px | Default button |
+| `3xl` | 56px | Default input/select |
+
+```scss
+.button { height: theme.sizing(component-height, 'md'); } // 40px
+.icon-circle { width: theme.sizing(component-height, 'sm'); height: theme.sizing(component-height, 'sm'); } // 32px
+```
+
+### `theme.opacity($key)` — Opacity
+
+| Key | Value |
+|-----|-------|
+| `subtle` | 0.05 |
+| `light` | 0.1 |
+| `medium` | 0.2 |
+| `disabled-light` | 0.3 |
+| `overlay` | 0.4 |
+| `disabled` | 0.5 |
+| `disabled-heavy` | 0.6 |
+
+```scss
+.disabled { opacity: theme.opacity('disabled'); } // 0.5
+```
+
+---
+
+## Semantic Color Functions
+
+### `theme.palette($domain, $token, $state?)` — All Color Domains
+
+A single function handles all four color domains: `bg`, `text`, `icon`, `border`.
+
+When called with three arguments, `$token` and `$state` are concatenated with a hyphen (e.g., `theme.palette(bg, 'brand', 'hover')` → resolves key `'brand-hover'`). When called with two arguments, `$token` is used as the key directly.
+
+```scss
+// Background colors
+.card { background-color: theme.palette(bg, 'brand'); }
+.card:hover { background-color: theme.palette(bg, 'brand-hover'); }
+.card:hover { background-color: theme.palette(bg, 'brand', 'hover'); } // equivalent
+
+// Text colors
+.label { color: theme.palette(text, 'default'); }
+.label-muted { color: theme.palette(text, 'default-tertiary'); }
+.on-dark { color: theme.palette(text, 'on-neutral'); }
+
+// Icon colors
+.icon { color: theme.palette(icon, 'default'); }
+.icon-brand { color: theme.palette(icon, 'brand'); }
+
+// Border colors
+.input { border-color: theme.palette(border, 'default'); }
+.input:focus { border-color: theme.palette(border, 'brand'); }
+.input.error { border-color: theme.palette(border, 'danger'); }
+```
+
+See `SemanticColors.md` for the complete key list for each domain.
+
+---
+
+## Typography
+
+All typography tokens are emitted as CSS custom properties under `:root`, enabling runtime theme overrides:
+
+```css
+--om-body-md-font-size: 14px;
+--om-body-md-line-height: 19.6px;
+--om-body-md-font-weight: 400;
+--om-body-md-strong-font-weight: 500;
+--om-link-md-text-decoration: underline;
+```
+
+Variable naming: `--om-{category}-{size}-{property}`
+
+### `@include theme.typography($category, $size, [$strong: false])`
+
+Emits all CSS properties as `var()` references: `font-family`, `font-size`, `line-height`, `letter-spacing`, `font-weight`.
+
+```scss
+.body { @include theme.typography(body, md); }
+// Compiles to:
+//   font-size: var(--om-body-md-font-size);
+//   font-family: var(--om-body-md-font-family);
+//   line-height: var(--om-body-md-line-height);
+//   letter-spacing: var(--om-body-md-letter-spacing);
+//   font-weight: var(--om-body-md-font-weight);
+
+.body-bold { @include theme.typography(body, md, $strong: true); }
+// font-weight: var(--om-body-md-strong-font-weight);
+
+.link { @include theme.typography(link, md); }
+// Also emits: text-decoration: var(--om-link-md-text-decoration);
+```
+
+### Categories & Sizes
+
+| Category | Sizes | Font | Strong weight |
+|----------|-------|------|---------------|
+| `display` | `xl`, `lg`, `md`, `sm`, `xs` | Aeonik | -- |
+| `headline` | `lg`, `md`, `sm`, `xs` | Aeonik | -- |
+| `title` | `lg`, `md`, `sm` | Inter | 700 |
+| `body` | `lg`, `md`, `sm` | Inter | 500 |
+| `link` | `md`, `sm` | Inter | -- |
+| `label` | `xl`, `lg`, `md`, `sm`, `xs` | Inter | 600-700 |
+
+---
+
+## Responsive Mixins
+
+Mobile-first breakpoint helpers using `max-width` media queries.
+
+### `@include theme.down($breakpoint)`
+
+| Breakpoint | Max-width |
+|------------|-----------|
+| `lg` | 1279.98px |
+| `md` | 1023.98px |
+| `sm` | 767.98px |
+
+```scss
+.sidebar {
+  width: 280px;
+  @include theme.down(md) { width: 200px; }
+  @include theme.down(sm) { display: none; }
+}
+```
+
+### Other Responsive Mixins
+
+```scss
+@include theme.up($bp)              // min-width
+@include theme.between($lo, $hi)    // min-width and max-width
+@include theme.only($bp)            // exact range for one breakpoint
+@include theme.respond($bp)         // alias for theme.down
+```
+
+---
+
+## Variant DSL
+
+Use the variant helpers when a component has multiple color/status modifiers that differ only by a set of token values. The DSL eliminates repetitive `&-{variant}` blocks by declaring a schema once and generating all modifier classes automatically.
+
+**Import**: `@use '@/styles/recipes/variants' as variants;`
+
+### Concepts
+
+1. **Schema** — maps CSS custom property names to token keys inside each variant payload. Use `variants.om-variant-schema($component, $keys...)` to auto-generate this from the component name and key list.
+2. **Variants map** — keyed by string variant names, each value is a token map matching the schema
+3. **Mixins** — `variants.om-variant-default` sets the base, `variants.om-variant-classes` generates all modifier classes
+
+### Basic Example
+
+```scss
+@use '@/styles/api' as theme;
+@use '@/styles/recipes/variants' as variants;
+
+$component: 'badge';
+// Auto-generates: (--om-badge-text: text, --om-badge-bg: bg)
+$badge-variant-schema: variants.om-variant-schema($component, text, bg);
+
+$badge-variants: (
+  'info': (
+    text: theme.palette(text, 'brand'),
+    bg: theme.palette(bg, 'brand-secondary'),
+  ),
+  'danger': (
+    text: theme.palette(text, 'danger'),
+    bg: theme.palette(bg, 'danger-secondary'),
+  ),
+);
+
+.#{theme.$prefix}-#{$component} {
+  // Set default variant values + validate all variants against schema
+  @include variants.om-variant-default($badge-variants, 'info', $badge-variant-schema);
+
+  color: var(--om-badge-text);
+  background-color: var(--om-badge-bg);
+
+  // Generate modifier classes, skipping 'info' (already set as default)
+  @include variants.om-variant-classes($badge-variants, $badge-variant-schema, $default: 'info');
+}
+```
+
+### Extending a Base Variant
+
+Use `variants.om-variant-extend` when variants share a common base:
+
+```scss
+$base: (
+  text: theme.palette(text, 'default'),
+  bg: theme.palette(bg, 'default'),
+  hover-bg: theme.palette(bg, 'default-hover'),
+);
+
+$variants: (
+  'default': $base,
+  'active': variants.om-variant-extend($base, (
+    bg: theme.palette(bg, 'brand'),
+    hover-bg: theme.palette(bg, 'brand-hover'),
+  )),
+);
+```
+
+### Available Helpers
+
+| Helper | Description |
+|--------|-------------|
+| `variants.om-variant-schema($component, $keys...)` | Auto-generates a schema map from component name + token key list |
+| `variants.om-variant($variants, $name)` | Returns a variant token map; errors on unknown names |
+| `variants.om-variant-value($tokens, $key)` | Returns a token value; errors on missing keys |
+| `variants.om-variant-extend($base, $overrides)` | Creates a new variant by merging overrides into a base |
+| `@include variants.om-variant-apply($schema, $tokens)` | Emits CSS declarations for one variant payload |
+| `@include variants.om-variant-default($variants, $name, $schema)` | Validates all variants against schema, then applies the default |
+| `@include variants.om-variant-classes($variants, $schema, $default, $selector-prefix)` | Validates and generates modifier classes; `$default` skips the default variant |
+
+### Compile-Time Safety
+
+Both `variants.om-variant-default` and `variants.om-variant-classes` validate that every variant contains all token keys required by the schema. A missing key triggers a Sass `@error` at build time.
+
+### Naming Conventions
+
+- Schema variable: `$component-variant-schema`
+- Variants map: `$component-variants`
+- Individual variant (if extracted): `$component-{name}-variant`
+- Always quote variant names: `'white'`, `'black'`, `'grey'` (prevents Sass color literal issues)
+
+---
+
+## Architecture
+
+The style system has three layers:
+
+1. **Tokens** (`src/styles/tokens/`): Raw primitives — colors, spacing multipliers, font sizes, scale maps
+2. **Theme** (`src/styles/theme/`): Functions that resolve tokens to CSS variables or raw values, breakpoint mixins, typography mixin
+3. **System** (`src/styles/system/`): The `om-sx` mixin — a compact shorthand API for layout (used in business code, **not** in component SCSS)
+
+All three layers are exposed through the `@use '@/styles/api' as theme;` import (namespaced under `theme`).
+
+The Variant DSL lives in `src/styles/recipes/` and is imported separately: `@use '@/styles/recipes/variants' as variants;`.
+
+---
+
+## Quick Decision Table
+
+| Figma concept | SCSS function |
+|---------------|---------------|
+| Background fill | `theme.palette(bg, 'key')` |
+| Text color | `theme.palette(text, 'key')` |
+| Icon color | `theme.palette(icon, 'key')` |
+| Border color | `theme.palette(border, 'key')` |
+| Padding/margin | `theme.spacing(scale, key)` or `theme.spacing(component-padding, key)` |
+| Gap between items | `theme.spacing(gap, key)` |
+| Section padding | `theme.spacing(section-padding, key)` |
+| Corner radius | `theme.shape(key)` |
+| Box shadow/elevation | `theme.shadows(key)` |
+| Component height | `theme.sizing(component-height, key)` |
+| Font styles | `@include theme.typography(cat, size)` |
+| Opacity/disabled | `theme.opacity(key)` |
+| Width/height % | `theme.sizing(scale, key)` |
+| Responsive breakpoint | `@include theme.down(bp)` |
+| Multi-variant color scheme | Variant DSL: `variants.om-variant-default` + `variants.om-variant-classes` |

package/.claude/skills/1money-component-review/SKILL.md

@@ -0,0 +1,316 @@
+---
+name: 1money-component-review
+description: Review an existing component against its Figma design for pixel-perfect fidelity. Takes a Figma URL and component name, performs a property-by-property comparison, and outputs a detailed checklist table.
+metadata:
+  short-description: Review component design fidelity against Figma
+---
+
+# 1money-component-review
+
+## Activation
+
+**Act when**: User invokes `/1money-component-review` with a Figma URL and component name to verify design fidelity.
+**Goal**: Compare the implemented component against the Figma design source-of-truth, checking every visual property, and output a structured table showing pass/fail status for each item.
+
+## Inputs
+
+- **Figma URL** (required): The Figma design link for the component to review.
+- **Component Name** (required): PascalCase name of the existing component in `src/components/`.
+
+## Workflow
+
+```dot
+digraph review {
+    "Phase 1:\nValidate Inputs" -> "Phase 2:\nExtract Figma Design";
+    "Phase 2:\nExtract Figma Design" -> "Phase 3:\nRead Component Code";
+    "Phase 3:\nRead Component Code" -> "Phase 4:\nProperty-by-Property Comparison";
+    "Phase 4:\nProperty-by-Property Comparison" -> "Phase 5:\nOutput Review Table";
+    "Phase 5:\nOutput Review Table" -> "Phase 6:\nSummary & Recommendations";
+}
+```
+
+### Phase 1 — Validate Inputs
+
+1. Confirm the component exists at `src/components/{Name}/`.
+2. Parse the Figma URL to extract `fileKey` and `nodeId`.
+3. If either input is missing, ask the user before proceeding.
+
+### Phase 2 — Extract Figma Design
+
+Extract all design data from Figma using MCP tools:
+
+1. **`mcp__figma__get_design_context(nodeId, fileKey)`** — Get code hints and structure.
+2. **`mcp__figma__get_screenshot(nodeId, fileKey)`** — Get visual screenshot for layout/spacing reference.
+3. **`mcp__figma__get_variable_defs(nodeId, fileKey)`** — Get design tokens (colors, spacing, radii, typography).
+
+From the extracted data, build a **Design Spec** covering:
+- All color values (background, text, icon, border) per variant and state
+- Spacing values (padding, gap, margin)
+- Typography (font family, size, weight, line-height)
+- Border radius
+- Shadows
+- Component heights/widths
+- Icon usage and sizes
+- All variants (color, size, state)
+- Layout structure (flex direction, alignment, gap)
+
+### Phase 3 — Read Component Code
+
+Read all component files:
+
+1. `src/components/{Name}/{Name}.tsx` — Component logic and structure
+2. `src/components/{Name}/interface.ts` — Props interface
+3. `src/components/{Name}/style/{Name}.scss` — Styles
+4. `src/components/{Name}/{Name}.stories.tsx` — Stories (if exists)
+
+Also read the token source files for color verification:
+
+5. `src/styles/tokens/color/_semantic-color.scss` — Semantic token → primitive mapping
+6. `src/styles/tokens/color/_primitives.scss` — Primitive → hex value definitions
+
+Extract the **Implementation Spec**:
+- All token function calls (`theme.palette()`, `theme.spacing()`, `theme.shape()`, `theme.typography()`, `theme.sizing()`, `theme.shadows()`)
+- CSS custom properties and variant DSL values
+- Variant names and their token mappings
+- State handling (hover, disabled, active, focus)
+- Layout properties (display, flex, gap, alignment)
+- Icon components used and their props
+
+### Phase 4 — Property-by-Property Comparison
+
+Compare each design property against the implementation. Check every item in these categories:
+
+#### 4.1 Colors (per variant, per state)
+
+**CRITICAL: Token-to-Hex Verification**
+
+Never mark a color as ✅ or ⚠️ based on token name alone. For every color comparison, you MUST complete the full verification chain:
+
+1. Get the Figma hex value (from `get_variable_defs` or design context CSS variables)
+2. Identify the SCSS token used in code (e.g., `theme.palette(icon, 'neutral-secondary')`)
+3. Trace the token through `src/styles/tokens/color/_semantic-color.scss` to find the primitive reference (e.g., `p.$grey-500`)
+4. Resolve the primitive in `src/styles/tokens/color/_primitives.scss` to get the actual hex value (e.g., `$grey-500: #9fa3a3`)
+5. Compare the resolved hex against the Figma hex — mark ✅ if they match, ❌ if they don't
+
+In the review table, always include the resolved hex value:
+```
+| Icon color | info | #073387 | `theme.palette(icon, 'brand')` → `$blue-700` → #073387 | ✅ |
+| Close icon | all  | #646465 | `theme.palette(icon, 'neutral-secondary')` → `$grey-500` → #9fa3a3 | ❌ |
+```
+
+For each variant × state combination:
+- [ ] Background color matches Figma (verified via hex)
+- [ ] Text color matches Figma (verified via hex)
+- [ ] Icon color matches Figma (verified via hex)
+- [ ] Border color matches Figma (verified via hex, if applicable)
+
+#### 4.2 Typography
+
+Check in two steps:
+
+**Step 1 — Extract Figma text style name** (e.g., `Headline(Beta)/Small`, `Body(Beta)/Large`, `Title(Beta)/Medium Strong`)
+
+**Step 2 — Verify `<Typography>` component usage and mapping**
+
+All text rendering MUST use the `Typography` compound component (`@/components/Typography`). The component exposes sub-components per category: `Typography.Display`, `Typography.Headline`, `Typography.Title`, `Typography.Body`, `Typography.Label`, `Typography.Link`.
+
+If the Figma text style maps correctly to the right `Typography.*` sub-component + `size` prop, the font properties (family, size, weight, line-height) are automatically correct — no need to check pixel values individually.
+
+Figma style → Typography component mapping:
+
+| Figma Text Style | Typography Component | Props |
+|---|---|---|
+| `Display(Beta)/XL` | `<Typography.Display size="xl">` | |
+| `Display(Beta)/Large` | `<Typography.Display size="lg">` | |
+| `Display(Beta)/Medium` | `<Typography.Display size="md">` | |
+| `Display(Beta)/Small` | `<Typography.Display size="sm">` | |
+| `Display(Beta)/XS` | `<Typography.Display size="xs">` | |
+| `Headline(Beta)/Large` | `<Typography.Headline size="lg">` | |
+| `Headline(Beta)/Medium` | `<Typography.Headline size="md">` | |
+| `Headline(Beta)/Small` | `<Typography.Headline size="sm">` | |
+| `Headline(Beta)/XS` | `<Typography.Headline size="xs">` | |
+| `Title(Beta)/Large` | `<Typography.Title size="lg">` | |
+| `Title(Beta)/Medium` | `<Typography.Title size="md">` | |
+| `Title(Beta)/Medium Strong` | `<Typography.Title size="md" strong>` | `strong` |
+| `Title(Beta)/Small` | `<Typography.Title size="sm">` | |
+| `Body(Beta)/Large` | `<Typography.Body size="lg">` | |
+| `Body(Beta)/Medium` | `<Typography.Body size="md">` | |
+| `Body(Beta)/Small` | `<Typography.Body size="sm">` | |
+| `Label(Beta)/XL` | `<Typography.Label size="xl">` | |
+| `Label(Beta)/Large` | `<Typography.Label size="lg">` | |
+| `Label(Beta)/Medium` | `<Typography.Label size="md">` | |
+| `Label(Beta)/Small` | `<Typography.Label size="sm">` | |
+| `Label(Beta)/XS` | `<Typography.Label size="xs">` | |
+| `Link(Beta)/Medium` | `<Typography.Link size="md">` | |
+| `Link(Beta)/Small` | `<Typography.Link size="sm">` | |
+
+Additional Typography props to check:
+
+- `color` — maps to `TypographyColor` (e.g., `"default"`, `"default-secondary"`, `"brand"`, `"disabled"`)
+- `strong` — only available on `Typography.Title`, `Typography.Body`, `Typography.Label`
+- `as` — override the HTML tag (e.g., `as="h2"` for semantic heading)
+
+Checklist:
+
+- [ ] All text elements use `Typography.*` sub-components — no raw `<p>`, `<span>`, `<h1>`–`<h6>`, or `<div>` for text rendering
+- [ ] No SCSS `@include theme.typography(...)` used directly — typography is handled by `Typography.*` components, not SCSS
+- [ ] Each text element uses the correct `Typography.*` sub-component matching the Figma text style category (Display/Headline/Title/Body/Label/Link)
+- [ ] Each `size` prop matches the corresponding Figma text style size
+- [ ] `strong` prop is set when Figma uses a Strong/Bold variant (e.g., `Title(Beta)/Medium Strong`)
+- [ ] `color` prop matches the Figma text color token (e.g., Text/Default/Default → `color="default"`)
+- [ ] If Figma text style cannot be mapped to a known Typography variant, flag as ❌
+
+#### 4.3 Spacing
+
+- [ ] Padding top/right/bottom/left matches
+- [ ] Gap between children matches
+- [ ] Margin matches (if applicable)
+
+#### 4.4 Visual Properties
+
+- [ ] Border radius matches
+- [ ] Box shadow matches
+- [ ] Opacity matches (if applicable)
+- [ ] Border width and style matches (if applicable)
+
+#### 4.5 Sizing
+
+- [ ] Component height matches (per size variant)
+- [ ] Component width matches (if fixed)
+- [ ] Icon size matches
+- [ ] Min/max constraints match
+
+#### 4.6 Layout
+
+- [ ] Flex direction matches
+- [ ] Alignment (align-items, justify-content) matches
+- [ ] Element ordering matches
+
+#### 4.7 States
+
+- [ ] Default state matches
+- [ ] Hover state matches
+- [ ] Disabled state matches
+- [ ] Active/pressed state matches (if applicable)
+- [ ] Focus state matches (if applicable)
+- [ ] Selected/checked state matches (if applicable)
+
+#### 4.8 Variants Coverage
+
+- [ ] All Figma variants are implemented
+- [ ] No extra variants exist that aren't in Figma
+- [ ] Default variant matches Figma default
+
+#### 4.9 Icons
+
+- [ ] Correct icon names used
+- [ ] Icon sizes match Figma
+- [ ] Icon colors match per variant/state
+
+### Phase 5 — Output Review Table
+
+Present results as a detailed Markdown table. Use these status markers:
+
+| Marker | Meaning |
+|--------|---------|
+| ✅ | Matches Figma exactly |
+| ⚠️ | Close but has minor deviation |
+| ❌ | Does not match / missing |
+| ➖ | Not applicable |
+
+**Output format:**
+
+```markdown
+## Design Review: {ComponentName}
+
+### Colors
+
+| Property | Variant | State | Figma Value | Implementation | Token Used | Status |
+|----------|---------|-------|-------------|----------------|------------|--------|
+| Background | primary | default | #1D4ED8 | `theme.palette(bg, 'brand')` → blue-700 | `bg-brand` | ✅ |
+| Background | primary | hover | #1E40AF | `theme.palette(bg, 'brand-hover')` → blue-800 | `bg-brand-hover` | ✅ |
+| Text | primary | default | #FFFFFF | `theme.palette(text, 'on-brand')` | `text-on-brand` | ✅ |
+
+### Typography
+
+| 文本元素 | Figma 样式 | 期望组件 | 实际实现 | 使用 Typography | 状态 |
+|----------|-----------|---------|----------|----------------|------|
+| 标题 | `Headline(Beta)/Small` | `<Typography.Headline size="sm">` | `<Typography.Headline size="sm">` | ✅ | ✅ |
+| 内容 | `Body(Beta)/Large` | `<Typography.Body size="lg">` | `<span>` (原生标签) | ❌ | ❌ |
+
+### Spacing
+
+| Property | Variant/Size | Figma Value | Implementation | Token Used | Status |
+|----------|-------------|-------------|----------------|------------|--------|
+| Padding H | medium | 16px | `theme.spacing(component-padding, 400)` | `cp-400` | ✅ |
+| Gap | all | 8px | `theme.spacing(gap, 200)` | `gap-200` | ✅ |
+
+### Visual Properties
+
+| Property | Figma Value | Implementation | Token Used | Status |
+|----------|-------------|----------------|------------|--------|
+| Border Radius | 12px | `theme.shape(300)` | `shape-300` | ✅ |
+| Shadow | none | none | — | ✅ |
+
+### Sizing
+
+| Property | Variant/Size | Figma Value | Implementation | Token Used | Status |
+|----------|-------------|-------------|----------------|------------|--------|
+| Height | medium | 40px | `theme.sizing(component-height, md)` | `ch-md` | ✅ |
+
+### States
+
+| State | Variant | Property | Figma | Implementation | Status |
+|-------|---------|----------|-------|----------------|--------|
+| hover | primary | bg | blue-800 | `bg-brand-hover` | ✅ |
+| disabled | primary | bg | grey-100 | `bg-disabled` | ✅ |
+| disabled | primary | cursor | not-allowed | `cursor: not-allowed` | ✅ |
+
+### Variants Coverage
+
+| Figma Variant | Implemented | Status |
+|---------------|------------|--------|
+| primary | yes | ✅ |
+| secondary | yes | ✅ |
+| ghost | no | ❌ |
+
+### Icons
+
+| Icon Slot | Figma Icon | Implementation | Size Match | Color Match | Status |
+|-----------|-----------|----------------|------------|-------------|--------|
+| iconStart | arrow-left | `<Icons name="arrow-left" />` | ✅ | ✅ | ✅ |
+```
+
+### Phase 6 — Summary & Recommendations
+
+After the table, provide:
+
+1. **Score**: `{passed}/{total}` items matching (`{percentage}%`)
+2. **Critical Issues** (❌): List each mismatch with the fix needed
+3. **Minor Issues** (⚠️): List deviations that may be acceptable
+4. **Missing Features**: Variants/states in Figma not implemented
+
+Example:
+```markdown
+### Summary
+
+**Score: 28/32 (87.5%)**
+
+#### Critical Issues (❌)
+1. `ghost` variant exists in Figma but is not implemented
+2. Disabled background for `secondary` uses `bg-disabled` but Figma shows `bg-default-secondary`
+
+#### Minor Issues (⚠️)
+1. Hover transition duration is 200ms in code but 150ms in Figma
+
+#### Missing Features
+- `ghost` variant (3 states: default, hover, disabled)
+```
+
+## Constraints
+
+- **Do NOT modify any code** — this skill is read-only review. Report findings only.
+- **Do NOT guess values** — if a Figma value cannot be determined from MCP data, mark as `⚠️ Unable to verify` and note why.
+- **Compare against Figma as source of truth** — if code differs from Figma, it is a mismatch regardless of whether the code "looks right."
+- **Check ALL variants and states** — do not skip any variant × state combination visible in Figma.
+- **Use the style system references** — consult `SemanticColors.md` and `StyleSystemAPI.md` from the `1money-component-dev` skill to verify token mappings are correct.