npm - trdr-ds-install - Versions diffs - 1.1.0 → 1.2.0 - Mend

trdr-ds-install 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +61 -17
package/package.json +7 -1
package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md +168 -514
package/plugins/trdr-design-system/skills/trdr-ds/data/components.json +1165 -0
package/plugins/trdr-design-system/skills/trdr-ds/references/tokens.css +399 -0

package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md CHANGED Viewed

@@ -1,20 +1,38 @@
 ---
 name: trdr-ds
-description: Applies the TRDR Design System to any project. Runs a two-phase workflow: first analyzes the project and presents a migration plan for approval, then executes the full implementation (tokens, components, CLAUDE.md, violation fixes). Trigger when developer mentions "apply design system", "implement TRDR DS", "add TRDR tokens", "design system setup", "migrar design system", "aplicar design system", or invokes /trdr-ds.
+description: Applies the TRDR Design System to any project. Runs a two-phase workflow - first analyzes the project and presents a migration plan for approval, then executes the full implementation (tokens, components, CLAUDE.md, violation fixes). Trigger when developer mentions "apply design system", "implement TRDR DS", "add TRDR tokens", "design system setup", "migrar design system", "aplicar design system", or invokes /trdr-ds.
 user-invocable: true
-argument-hint: "[analyze|apply]"
+argument-hint: "[analyze|apply|sync]"
 allowed-tools: [Read, Glob, Grep, Edit, Write, Bash, WebFetch]
 ---
-You are implementing the TRDR Design System in a developer's project. The Design Hub is the single source of truth and lives at **https://trdr.mrocontent.com.br**.
+You are implementing the **TRDR Design System** in a developer's project. The Design Hub is the single source of truth and lives at **https://trdr.mrocontent.com.br**.
+This skill ships with two **offline-first snapshots** of the Hub:
+- `references/tokens.css` — all TRDR CSS variables (dark + light mode), copied verbatim from the Hub
+- `data/components.json` — full component catalog (implemented + stubs), with code blocks for everything `implemented: true`
+The snapshots are kept in sync by the skill's maintainer via `npm run sync` in the `trdr-plugins` repo. **Always prefer the local snapshot.** Only fetch from the Hub when the user explicitly asks for the latest (`--latest` argument or `sync` mode).
 Execute in two clearly separated phases: **PHASE 1: ANALYZE → PHASE 2: EXECUTE (only after approval)**.
 ---
-## PHASE 1: ANALYSIS (run automatically on invocation)
+## Argument behaviour
+| Arg | Behaviour |
+|-----|-----------|
+| `analyze` *(default when none given)* | Run Phase 1 only — produce a migration plan, do not modify any project file |
+| `apply` | Run Phase 1 + Phase 2 |
+| `sync` | Re-fetch `https://trdr.mrocontent.com.br/components.json` and `https://trdr.mrocontent.com.br/tokens.css`, overwrite `data/components.json` and `references/tokens.css` in the skill directory, report the diff. No project changes. |
+| `--latest` *(modifier on `analyze` or `apply`)* | Same as `sync` first, then continue normally |
+---
+## PHASE 1: ANALYSIS (default behaviour on invocation)
-Scan the project and produce a structured migration plan. Do NOT modify any files yet.
+Scan the project and produce a structured migration plan. Do NOT modify any project files yet.
 ### Step 1 — Detect framework
@@ -71,16 +89,56 @@ Flag any gradient that doesn't reference a TRDR gradient token (`var(--gradient-
 **H — Hardcoded font-size in px** (should use .trdr-h* / .trdr-body-* text style classes):
 Search: `font-size:\s*\d+px` in CSS/SCSS files (skip tokens.css itself)
-### Step 4 — Fetch latest component list from Hub
+### Step 4 — Load component catalog (offline-first)
+Read the local snapshot from the skill directory:
-Fetch the component catalog to know what's currently available:
 ```
-WebFetch: https://trdr.mrocontent.com.br/componentes
+Read: <skill-dir>/data/components.json
 ```
-From the page, note which components are marked as "Implementado" (they have code blocks ready to use).
+Where `<skill-dir>` is either `~/.claude/skills/trdr-ds/` or `<project>/.claude/skills/trdr-ds/`. Try both.
+Expected JSON shape:
+```json
+{
+  "version": "1.0",
+  "generatedAt": "2026-05-08T...",
+  "total": 60,
+  "implemented": 13,
+  "categories": { "formulario": "Formulário / Controles", ... },
+  "components": [
+    {
+      "slug": "button", "name": "Button", "figmaId": "1318:749",
+      "category": "formulario", "description": "...",
+      "implemented": true,
+      "props": [...], "dimensions": [...], "tokens": [...],
+      "code": { "html": "...", "css": "...", "react": "...", "prompt": "..." }
+    },
+    {
+      "slug": "modal", "name": "Modal", "figmaId": "...",
+      "category": "modal", "description": "...",
+      "implemented": false,
+      "tokens": [{ "property": "background", "token": "--surface-secondary", "value": "#222" }, ...]
+    }
+  ]
+}
+```
+If `--latest` was passed (or argument is `sync`), first fetch the canonical JSON:
+```
+WebFetch: https://trdr.mrocontent.com.br/components.json
+```
+And overwrite `data/components.json` in the skill directory before continuing.
+If both the local snapshot and the Hub fail → STOP with:
+> ❌ Could not load TRDR component catalog (local snapshot missing AND Hub unreachable). Aborting. Run `npm run sync` in the trdr-plugins repo to refresh the snapshot.
+Use the loaded data throughout the rest of the workflow. Track:
+- `implementedSlugs` = list of `c.slug` where `c.implemented === true`
+- `stubSlugs` = list of `c.slug` where `c.implemented !== true`
-### Step 5 — Present the Migration Plan and STOP
+### Step 5 — Present the migration plan and STOP
 Output the following report and **do not proceed** until the developer explicitly approves:
@@ -88,7 +146,8 @@ Output the following report and **do not proceed** until the developer explicitl
 ## TRDR Design System — Migration Plan
 ### Project: [framework] | [language] | [styling approach]
-### Hub: https://trdr.mrocontent.com.br
+### Catalog: TRDR DS v[version] (generated [generatedAt])
+### Coverage: [implemented]/[total] components implemented
 ---
@@ -98,9 +157,10 @@ Output the following report and **do not proceed** until the developer explicitl
 ---
 ### FILES TO CREATE:
-- [ ] `[detected-styles-dir]/tokens.css` — 292 TRDR CSS custom properties (dark + light mode)
+- [ ] `[detected-styles-dir]/tokens.css` — TRDR CSS custom properties (dark + light mode)
 - [ ] `[detected-styles-dir]/components.css` — TRDR utility classes (.trdr-btn, .trdr-card, etc.)
 - [ ] `CLAUDE.md` (project root) — design system rules for Claude Code
+- [ ] `MISSING_COMPONENTS.md` (only if stubs are referenced) — pending implementations
 ### FILES TO MODIFY:
 - [ ] `[global-css-file]` — add @import for tokens.css and components.css
@@ -119,9 +179,14 @@ Output the following report and **do not proceed** until the developer explicitl
 | Custom gradients | N | `linear-gradient(135deg, #FF6B6B...)` in header:24 |
 | Hardcoded font-size | N | `font-size: 22px` in card.css:99 |
-### TRDR COMPONENTS AVAILABLE (from Hub):
-[List implemented components from the Hub catalog — these have ready-to-use code]
-e.g.: Button, TextInput, Switch, Dropdown, Checkbox, RadioButton, ComboInput, Tooltip
+### TRDR COMPONENTS REFERENCED IN PROJECT:
+[Cross-reference detected UI patterns with the catalog]
+| Slug | Status | Project usage |
+|------|--------|---------------|
+| button | ✅ implemented | 6 occurrences in Button.tsx, Header.tsx |
+| modal | ⚠️ stub (figmaId 1234:5) | 2 occurrences in Modal.tsx — will receive token guidance, not full code |
+| (other) | ... | ... |
 ### SCOPE ESTIMATE: [Small / Medium / Large]
 Small = <10 violations | Medium = 10–50 | Large = 50+
@@ -139,6 +204,7 @@ Small = <10 violations | Medium = 10–50 | Large = 50+
 - `"Apply, skip [file or directory]"` — proceed but exclude specific paths
 - `"Only tokens"` — only create tokens.css, components.css, and CLAUDE.md (no violation fixes)
 - `"Change [detail]"` — adjust a specific part of the plan before executing
+- `"Sync first"` — pull the latest catalog from the Hub before applying
 ```
 **STOP HERE. Wait for explicit developer approval before Phase 2.**
@@ -151,447 +217,33 @@ Execute in order. Report progress after each major step.
 ### Step 1 — Create tokens.css
-Create `tokens.css` in the detected styles directory with this content:
-```css
-/* ==========================================================================
-   TRDR Design System — CSS Variables
-   Source: designtokens.md v1.4 | https://trdr.mrocontent.com.br
-   DO NOT edit manually — update via the TRDR Design Hub
-   ========================================================================== */
-:root {
-  /* =========================================================================
-     PRIMITIVES — COLORS (never use directly in UI — use semantic tokens)
-     ========================================================================= */
-  /* Brand Cyan (formerly Blue) */
-  --color-blue-50: #E6FEFF;
-  --color-blue-100: #CCFDFF;
-  --color-blue-200: #99F9FF;
-  --color-blue-300: #5CF3FF;
-  --color-blue-400: #29ECFF;
-  --color-blue-500: #00D4FF;
-  --color-blue-600: #00A8CC;
-  --color-blue-700: #007D99;
-  --color-blue-800: #005266;
-  --color-blue-900: #002933;
-  --color-blue-alpha-08: #00D4FF14;
-  --color-blue-alpha-16: #00D4FF29;
-  --color-blue-alpha-32: #00D4FF52;
-  /* Neutral */
-  --color-neutral-0: #FFFFFF;
-  --color-neutral-50: #FAFAFA;
-  --color-neutral-100: #EEEEEE;
-  --color-neutral-200: #E8E8E8;
-  --color-neutral-300: #D2D2D2;
-  --color-neutral-400: #BCBCBC;
-  --color-neutral-500: #A4A4A4;
-  --color-neutral-600: #777777;
-  --color-neutral-700: #4A4A4A;
-  --color-neutral-800: #222222;
-  --color-neutral-900: #1A1A1A;
-  --color-neutral-1000: #141519;
-  --color-neutral-1200: #0E0E0E;
-  /* Green */
-  --color-green-50: #F0FFF7;
-  --color-green-100: #CCFFDF;
-  --color-green-200: #99FFBF;
-  --color-green-300: #66FFA0;
-  --color-green-400: #33FF80;
-  --color-green-500: #00FF60;
-  --color-green-600: #31DD7E;
-  --color-green-700: #00CC4D;
-  --color-green-800: #009933;
-  --color-green-900: #00661F;
-  --color-green-alpha-08: #4FE29014;
-  --color-green-alpha-12: #4FE2901F;
-  --color-green-alpha-16: #4FE29029;
-  --color-green-alpha-32: #4FE29052;
-  --color-green-alpha-40: #4FE29066;
-  --color-green-alpha-48: #4FE2907A;
-  --color-green-alpha-56: #4FE2908F;
-  /* Red */
-  --color-red-50: #FFF0F0;
-  --color-red-100: #FFCCCC;
-  --color-red-200: #FF9999;
-  --color-red-300: #FF6666;
-  --color-red-400: #FF3333;
-  --color-red-500: #FF0000;
-  --color-red-600: #F34F45;
-  --color-red-700: #CC0000;
-  --color-red-800: #990000;
-  --color-red-900: #660000;
-  --color-red-alpha-08: #F34F4514;
-  --color-red-alpha-12: #F34F451F;
-  --color-red-alpha-16: #F34F4529;
-  --color-red-alpha-32: #F34F4552;
-  --color-red-alpha-40: #F34F4566;
-  --color-red-alpha-48: #F34F457A;
-  --color-red-alpha-56: #F34F458F;
-  /* Yellow */
-  --color-yellow-50: #FFFBF0;
-  --color-yellow-100: #FFF3CC;
-  --color-yellow-200: #FFE799;
-  --color-yellow-300: #FFDB66;
-  --color-yellow-400: #FFCF33;
-  --color-yellow-500: #FFCC40;
-  --color-yellow-600: #FFB800;
-  --color-yellow-700: #CC9200;
-  --color-yellow-800: #996D00;
-  --color-yellow-900: #664900;
-  --color-yellow-alpha-08: #FFCC4014;
-  --color-yellow-alpha-16: #FFCC4029;
-  --color-yellow-alpha-32: #FFCC4052;
-  /* Orange */
-  --color-orange-50: #FFF5F0;
-  --color-orange-100: #FFE0CC;
-  --color-orange-200: #FFC199;
-  --color-orange-300: #FFA266;
-  --color-orange-400: #FF8333;
-  --color-orange-500: #FF6400;
-  --color-orange-600: #F57C00;
-  --color-orange-700: #CC5000;
-  --color-orange-800: #993C00;
-  --color-orange-900: #662800;
-  --color-orange-alpha-08: #FF640014;
-  --color-orange-alpha-16: #FF640029;
-  --color-orange-alpha-32: #FF640052;
-  /* Purple */
-  --color-purple-50: #F1EFF5;
-  --color-purple-100: #D6D3E5;
-  --color-purple-200: #BBB4D6;
-  --color-purple-300: #9E94C9;
-  --color-purple-400: #8072BE;
-  --color-purple-500: #6350B3;
-  --color-purple-600: #50418E;
-  --color-purple-700: #3E3467;
-  --color-purple-800: #2A2542;
-  --color-purple-900: #161320;
-  --color-purple-alpha-08: #6350B314;
-  --color-purple-alpha-16: #6350B329;
-  --color-purple-alpha-32: #6350B352;
-  /* =========================================================================
-     PRIMITIVES — SPACING
-     ========================================================================= */
-  --space-0: 0px;
-  --space-50: 4px;
-  --space-100: 8px;
-  --space-200: 12px;
-  --space-300: 16px;
-  --space-400: 20px;
-  --space-500: 24px;
-  --space-600: 32px;
-  --space-700: 40px;
-  --space-800: 48px;
-  --space-900: 56px;
-  --space-1000: 64px;
-  --space-1200: 80px;
-  --space-1400: 96px;
-  /* =========================================================================
-     PRIMITIVES — BORDER RADIUS
-     ========================================================================= */
-  --radius-prim-0: 0px;
-  --radius-prim-50: 2px;
-  --radius-prim-100: 4px;
-  --radius-prim-200: 8px;
-  --radius-prim-300: 12px;
-  --radius-prim-400: 16px;
-  --radius-prim-500: 20px;
-  --radius-prim-600: 24px;
-  --radius-prim-700: 32px;
-  --radius-prim-full: 9999px;
-  /* =========================================================================
-     PRIMITIVES — TYPOGRAPHY
-     ========================================================================= */
-  --font-size-50: 12px;
-  --font-size-100: 14px;
-  --font-size-200: 16px;
-  --font-size-300: 18px;
-  --font-size-400: 20px;
-  --font-size-500: 24px;
-  --font-size-600: 28px;
-  --font-size-700: 32px;
-  --font-size-800: 40px;
-  /* =========================================================================
-     PRIMITIVES — OPACITY
-     ========================================================================= */
-  --opacity-0: 0;
-  --opacity-08: 0.08;
-  --opacity-16: 0.16;
-  --opacity-32: 0.32;
-  --opacity-48: 0.48;
-  --opacity-64: 0.64;
-  --opacity-80: 0.80;
-  --opacity-100: 1;
-  /* =========================================================================
-     SEMANTIC — BACKGROUNDS (dark default)
-     ========================================================================= */
-  --bg-primary: #0E0E0E;
-  --bg-secondary: #141519;
-  --bg-tertiary: #1A1A1A;
-  --bg-inverse: #FFFFFF;
-  --bg-overlay: #FFFFFF29;
-  --bg-brand: #00D4FF;
-  --bg-brand2: #6350B3;
-  --bg-warning: #FFCC40;
-  --bg-danger: #F34F45;
-  --bg-success: #31DD7E;
-  --bg-base-alpha-0: #0E0E0E00;
-  /* =========================================================================
-     SEMANTIC — SURFACES
-     ========================================================================= */
-  --surface-primary: #4A4A4A;
-  --surface-secondary: #222222;
-  --surface-tertiary: #1A1A1A;
-  --surface-interactive: #002933;
-  --surface-disabled: #1A1A1A;
-  --surface-info: #00D4FF14;
-  --surface-error: #F1312614;
-  --surface-warning: #FFCC4014;
-  --surface-success: #4FE29014;
-  --surface-brand: #00D4FF29;
-  /* =========================================================================
-     SEMANTIC — CONTENT (TEXT)
-     ========================================================================= */
-  --content-primary: #FFFFFF;
-  --content-secondary: #E8E8E8;
-  --content-tertiary: #A4A4A4;
-  --content-disabled: #4A4A4A;
-  --content-placeholder: #777777;
-  --content-inverse: #1A1A1A;
-  --content-info: #CCFDFF;
-  --content-warning: #FFCC40;
-  --content-error: #F34F45;
-  --content-success: #4FE290;
-  --content-brand: #00D4FF;
-  --content-on-brand: #FFFFFF;
-  /* =========================================================================
-     SEMANTIC — BORDERS
-     ========================================================================= */
-  --border-default: #4A4A4A;
-  --border-subtle: #222222;
-  --border-strong: #A4A4A4;
-  --border-focus: #00D4FF;
-  --border-disabled: #777777;
-  /* =========================================================================
-     SEMANTIC — ACTIONS
-     ========================================================================= */
-  /* Brand (Cyan — primary) */
-  --action-brand-default: #00D4FF;
-  --action-brand-hover: #00A8CC;
-  --action-brand-active: #007D99;
-  --action-brand-disabled: #777777;
-  --action-brand-alpha: #00D4FF14;
-  /* Brand Inverse (solid cyan primary button) */
-  --action-brand-inverse-default: #005266;
-  --action-brand-inverse-hover: #007D99;
-  --action-brand-inverse-active: #002933;
-  --action-brand-inverse-alpha: #00D4FF14;
-  --action-brand-inverse-disabled: #777777;
-  /* Secondary (Neutral) */
-  --action-secondary-default: #4A4A4A;
-  --action-secondary-hover: #777777;
-  --action-secondary-active: #A4A4A4;
-  --action-secondary-disabled: #1A1A1A;
-  --action-secondary-alpha: #FFFFFF00;
-  /* Tertiary (Purple) */
-  --action-tertiary-default: #50418E;
-  --action-tertiary-hover: #3E3467;
-  --action-tertiary-active: #2A2542;
-  --action-tertiary-disabled: #777777;
-  --action-tertiary-alpha: #6350B314;
-  /* Destructive (Orange) */
-  --action-destructive-default: #EA580C;
-  --action-destructive-hover: #C2410C;
-  --action-destructive-active: #9A3412;
-  --action-destructive-disabled: #777777;
-  --action-destructive-alpha: #F9731614;
-  /* =========================================================================
-     SEMANTIC — TRADING CONTEXT
-     ========================================================================= */
-  /* Candlesticks */
-  --context-chart-up: #31DD7E;
-  --context-chart-down: #F34F45;
-  /* Price */
-  --context-trading-up: #4FE290;
-  --context-trading-up-alpha: #4FE29029;
-  --context-trading-down: #F34F45;
-  --context-trading-down-alpha: #F1312629;
-  /* Long (Buy) */
-  --context-trading-long-text: #6DE7A2;
-  --context-trading-long-default: #4FE29014;
-  --context-trading-long-hover: #4FE29029;
-  --context-trading-long-active: #4FE29052;
-  /* Short (Sell) */
-  --context-trading-short-text: #F56D64;
-  --context-trading-short-default: #F1312614;
-  --context-trading-short-hover: #F1312629;
-  --context-trading-short-active: #F1312652;
-  /* Stop Loss */
-  --context-trading-stop-default: #F97316;
-  --context-trading-stop-hover: #EA580C;
-  --context-trading-stop-active: #C2410C;
-  --context-trading-stop-alpha: #F9731614;
-  /* =========================================================================
-     SCALE — RESPONSIVE SPACING (Desktop default)
-     ========================================================================= */
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 12px;
-  --spacing-lg: 16px;
-  --spacing-xl: 20px;
-  --spacing-2xl: 24px;
-  --spacing-3xl: 32px;
-  --spacing-3xl-2: 40px;
-  --spacing-3xl-3: 48px;
-  --spacing-3xl-4: 56px;
-  --spacing-3xl-5: 64px;
-  --spacing-3xl-6: 80px;
-  --spacing-3xl-7: 96px;
-  /* =========================================================================
-     SCALE — BORDER RADIUS
-     ========================================================================= */
-  --radius-none: 0px;
-  --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 16px;
-  --radius-xl: 20px;
-  --radius-full: 9999px;
-  /* =========================================================================
-     FONTS (use Google Fonts or next/font to load these)
-     JetBrains Mono → headings | Inter → body/labels | Roboto Mono → numbers
-     ========================================================================= */
-  --font-primary: 'JetBrains Mono', monospace;
-  --font-secondary: 'Inter', sans-serif;
-  --font-mono: 'Roboto Mono', monospace;
-  /* =========================================================================
-     BRAND GRADIENTS (Site/Marketing)
-     ========================================================================= */
-  --gradient-text-brand: linear-gradient(90deg, #00D4FF 0%, #FFFFFF 100%);
-  --gradient-text-brand-hero: linear-gradient(90deg, #00D4FF 30%, #FFFFFF 100%);
-  --gradient-bg-hero: linear-gradient(180deg, #002933 0%, #0E0E0E 40%);
-  --gradient-bg-fade: linear-gradient(180deg, rgba(14,14,14,0) 0%, #0E0E0E 47%);
-}
+Copy the local snapshot verbatim:
-/* ==========================================================================
-   LIGHT MODE — apply [data-theme="light"] to <html> or <body>
-   ========================================================================== */
-[data-theme="light"] {
-  --bg-primary: #EEEEEE;
-  --bg-secondary: #F5F5F5;
-  --bg-tertiary: #FAFAFA;
-  --bg-inverse: #1A1A1A;
-  --bg-overlay: #FFFFFF52;
-  --surface-primary: #D2D2D2;
-  --surface-secondary: #E8E8E8;
-  --surface-tertiary: #EEEEEE;
-  --surface-interactive: #29ECFF;
-  --surface-disabled: #FAFAFA;
-  --surface-brand: #00D4FF29;
-  --content-primary: #1A1A1A;
-  --content-secondary: #222222;
-  --content-tertiary: #4A4A4A;
-  --content-disabled: #777777;
-  --content-inverse: #FFFFFF;
-  --content-brand: #005266;
-  --content-info: #00A8CC;
-  --border-default: #A4A4A4;
-  --border-subtle: #E8E8E8;
-  --border-strong: #D2D2D2;
-  --border-disabled: #E8E8E8;
-  --border-focus: #00D4FF;
-  --action-brand-default: #007D99;
-  --action-brand-hover: #005266;
-  --action-brand-active: #002933;
-  --action-brand-inverse-default: #00A8CC;
-  --action-brand-inverse-hover: #007D99;
-  --action-brand-inverse-active: #005266;
-}
 ```
-### Step 2 — Create components.css
-Fetch all component CSS directly from the Hub. The Hub is the single source of truth — **NEVER use a static fallback. No exceptions.**
-#### Step 2.a — Fetch component utility classes
-```
-WebFetch: https://trdr.mrocontent.com.br/design-md
+Read: <skill-dir>/references/tokens.css
+Write: <project>/<detected-styles-dir>/tokens.css
 ```
-Extract all CSS code blocks from the page that contain `.trdr-*` classes. Copy them verbatim into `components.css`.
+Do NOT regenerate the file. Do NOT inline tokens from any other source. The snapshot is authoritative.
-**Known Hub components (v1.4) — verify all are present after fetch:**
+If `references/tokens.css` is missing in the skill directory:
+1. Try `WebFetch: https://trdr.mrocontent.com.br/tokens.css`, save it to the skill dir, then proceed.
+2. If the Hub is also unreachable → STOP with error message asking the maintainer to run `npm run sync`.
-| Slug | CSS Class Prefix |
-|------|-----------------|
-| `button` | `.trdr-btn` |
-| `card` | `.trdr-card` |
-| `text-input` | `.trdr-input` |
-| `dropdown` | `.trdr-dropdown` |
-| `combo-input` | `.trdr-combo` |
-| `checkbox` | `.trdr-checkbox` |
-| `radio-button` | `.trdr-radio` |
-| `switch` | `.trdr-switch` |
-| `segmented-control` | `.trdr-segment` |
-| `tooltip` | `.trdr-tooltip` |
-| `abas` | `.trdr-tabs` |
-| `sub-menu-item` | `.trdr-submenu` |
-| `boleta` | `.trdr-boleta` |
+### Step 2 — Create components.css
-For any component whose CSS prefix is not found in the `/design-md` output, fetch its individual page:
+Build `components.css` by concatenating the `.code.css` block of every implemented component plus the typography utility classes.
 ```
-WebFetch: https://trdr.mrocontent.com.br/componentes/[slug]
+For each c in components where c.implemented === true:
+  append c.code.css to components.css (with a "/* === <c.name> === */" header)
 ```
-Extract the CSS code block from that page and append it to `components.css`.
-**If the Hub is unreachable at any point → STOP. Do NOT proceed with any fallback.**
-Report to the developer:
-> ❌ Hub unreachable (https://trdr.mrocontent.com.br). Cannot create components.css — the DS Hub is required for faithful component implementation. Retry when the Hub is accessible.
-#### Step 2.b — Add typography text style classes
-After the component classes, append the following text style utility classes to `components.css`. These represent the Hub's Text Styles spec (H1–H7, B1–B5, Auxiliar, L2–L3). If `/design-md` already contains these classes verbatim, use those instead.
+After all component CSS blocks, append the text style utility classes:
 ```css
 /* ==========================================================================
    TRDR Design System — Text Style Utility Classes
-   Source: https://trdr.mrocontent.com.br | Text Styles spec
    ========================================================================== */
 /* Headings — var(--font-primary) = JetBrains Mono */
@@ -616,21 +268,6 @@ After the component classes, append the following text style utility classes to
 .trdr-label-l3 { font-family: var(--font-secondary); font-size: 14px; font-weight: 600; line-height: 1.4; }
 ```
-#### Step 2.c — Flag missing components
-If the developer's project uses a UI pattern that has no corresponding Hub component (e.g., a date picker, a data table, a modal), do NOT invent CSS for it. Instead, create or append to `MISSING_COMPONENTS.md` at the project root:
-```markdown
-# Missing Hub Components
-These patterns were found in the project but have no corresponding component in the TRDR Design Hub.
-Request their implementation at: https://trdr.mrocontent.com.br
-| Pattern found | File | Status |
-|---------------|------|--------|
-| [pattern name] | [file:line] | ⚠️ Missing from Hub |
-```
 ### Step 3 — Update global CSS
 Find the main global CSS file (globals.css, main.css, index.css, app.css) and add at the very top:
@@ -646,14 +283,20 @@ If the project already imports a different design system's variables and there a
 ### Step 4 — Create CLAUDE.md
-Create `CLAUDE.md` at the project root:
+Create `CLAUDE.md` at the project root, populated dynamically from the catalog:
+- The list of "Pre-built component classes" must be generated from the loaded JSON's `implementedSlugs` and their CSS class prefixes (parse the first `.trdr-<prefix>` from each `c.code.css`).
+- The list of "Pending stubs" should mention the count of stubs and link to MISSING_COMPONENTS.md if generated.
+Template (replace `[…]` with actual values):
 ```markdown
 # [Project Name] — Context for Claude Code
 ## Design System
 This project uses the TRDR Design System.
-Full reference: https://trdr.mrocontent.com.br
+Reference Hub: https://trdr.mrocontent.com.br
+Local catalog: TRDR DS v[catalog-version] ([implemented]/[total] components)
 ## Absolute Rules (never break these)
 1. NEVER use primitive tokens directly (--color-*, --space-*) — always use semantic tokens
@@ -663,7 +306,7 @@ Full reference: https://trdr.mrocontent.com.br
 5. Fonts: --font-primary = JetBrains Mono (headings) | --font-secondary = Inter (body) | --font-mono = Roboto Mono (numbers)
 6. Spacing: always var(--spacing-xs/sm/md/lg/xl/2xl/3xl) — never hardcoded px
 7. Border radius: always var(--radius-sm/md/lg/full) — never hardcoded px
-8. Text styles: use .trdr-h1/.../h7 for headings, .trdr-body-b1/.../b5 for paragraphs, .trdr-label-l2/l3 for labels — never raw font-size px
+8. Text styles: use .trdr-h1/.../h7, .trdr-body-b1/.../b5, .trdr-label-l2/l3 — never raw font-size px
 9. No colors outside the DS anywhere — rgba(), inline gradients, hardcoded hex all require a semantic token. No exceptions.
 ## Token files
@@ -685,34 +328,17 @@ Full reference: https://trdr.mrocontent.com.br
 | Error | --content-error | #F34F45 |
 | Warning | --content-warning | #FFCC40 |
-## Text Style Classes
-Headings: .trdr-h1 (80px) → .trdr-h2 (56px) → .trdr-h3 (46px) → .trdr-h4 (38px) → .trdr-h5 (32px) → .trdr-h6 (26px) → .trdr-h7 (22px/Inter)
-Body: .trdr-body-b1 (18px) → .trdr-body-b2 (16px) → .trdr-body-b3 (14px) → .trdr-body-b4 (12px) → .trdr-body-b5 (10px) → .trdr-body-aux (12px/letter-spacing)
-Labels: .trdr-label-l2 (16px/semibold) → .trdr-label-l3 (14px/semibold)
-All headings use var(--font-primary) = JetBrains Mono. Body/labels use var(--font-secondary) = Inter.
-## Pre-built component classes
-.trdr-btn, .trdr-btn-primary, .trdr-btn-secondary, .trdr-btn-ghost, .trdr-btn-destructive
-.trdr-btn-long (buy), .trdr-btn-short (sell)
-.trdr-badge, .trdr-badge-brand, .trdr-badge-success, .trdr-badge-neutral
-.trdr-card, .trdr-card-hover
-.trdr-input, .trdr-dropdown, .trdr-combo, .trdr-checkbox, .trdr-radio, .trdr-switch
-.trdr-segment-control, .trdr-segment-active, .trdr-segment-inactive
-.trdr-tabs, .trdr-submenu, .trdr-tooltip, .trdr-boleta
-## Getting component code
-For any component, go to: https://trdr.mrocontent.com.br/componentes/[slug]
-Available: button, text-input, switch, dropdown, checkbox, radio-button, combo-input, tooltip, boleta, segmented-control, abas, sub-menu-item, card
-(Check Hub for latest — new components are added regularly)
+## Implemented components
+[Generate from catalog: list each implemented component as a row "slug — figmaId — Hub URL"]
+## Pending components (stubs)
+[N] components in the catalog have no canonical code yet. When using one of these, the skill applies tokens and a banner comment, then logs the gap in MISSING_COMPONENTS.md. See https://trdr.mrocontent.com.br/componentes for status.
 ## Layer hierarchy
 bg.primary (base) → bg.secondary/tertiary (content areas) → surface.* (cards, panels)
 → interactive components → overlays/modals/tooltips
 ```
-Replace `[Project Name]` with the actual project name detected from package.json.
-Replace `[detected-path]` with the actual relative path to tokens.css.
 ### Step 5 — Migrate violations
 For each violation found in Phase 1, apply the semantic token replacement.
@@ -796,17 +422,31 @@ For each violation found in Phase 1, apply the semantic token replacement.
 **All other values MUST be replaced or flagged.** There are no exceptions for "decorative" gradients, shadows, or overlays. If no semantic token exists for a given pattern, flag it in DS_MIGRATION.md under "Missing DS tokens" and notify the developer to request the token in the Hub.
-### Step 6 — Fetch component-specific code (if applicable)
-If the developer's project has components that match TRDR component patterns (buttons, inputs, dropdowns, etc.), offer to fetch the exact code from the Hub:
-```
-WebFetch: https://trdr.mrocontent.com.br/componentes/[slug]
-```
-Replace `[slug]` with: `button`, `text-input`, `switch`, `dropdown`, `checkbox`, `radio-button`, `combo-input`, `tooltip`, `boleta`, or any other component visible in the Hub catalog.
-This fetch always returns the latest code, including any updates made since this skill was last installed.
+### Step 6 — Apply component code (smart fallback)
+For each detected UI pattern in the project that matches a TRDR component slug:
+1. **Look up the component** in the loaded catalog by slug (or by category, if slug is ambiguous).
+2. **If `c.implemented === true`** and `c.code.css` exists:
+   - The CSS is already in the project's `components.css` from Step 2 — no further action needed unless the developer asks for component-level scaffolding (e.g., create a `Button.tsx` from `c.code.react`).
+3. **If `c.implemented === false`** (stub):
+   - Add this banner comment above the affected element in the source file:
+     ```
+     /* TRDR DS — <c.name> (figmaId: <c.figmaId>) */
+     /* Implementação canônica pendente. Consulte https://trdr.mrocontent.com.br/componentes/<c.slug> */
+     /* Tokens recomendados: <list c.tokens[].token> */
+     ```
+   - Append an entry to `MISSING_COMPONENTS.md`:
+     ```markdown
+     ## <c.name>
+     - Slug: `<c.slug>` | figmaId: `<c.figmaId>` | Category: `<c.category>`
+     - Found in: <list of file:line>
+     - Description: <c.description>
+     - Recommended tokens: <c.tokens[]>
+     - Status: ⚠️ stub — code blocks pending
+     ```
+4. **If no slug matches** the detected pattern:
+   - Flag the pattern in `MISSING_COMPONENTS.md` under "Unmapped patterns" with the file location and a one-line description of the UI need. The maintainer can then decide whether to add a stub to the catalog.
 ### Step 7 — Generate DS_MIGRATION.md
@@ -815,14 +455,16 @@ Create `DS_MIGRATION.md` at the project root:
 ```markdown
 # TRDR Design System — Migration Log
 Applied: [date]
-Skill version: trdr-ds v1.0 | Hub: https://trdr.mrocontent.com.br
+Catalog: TRDR DS v[catalog-version] ([implemented]/[total] components, generated [generatedAt])
+Hub: https://trdr.mrocontent.com.br
 ## What was applied
-- ✅ [path]/tokens.css — 292 CSS custom properties
-- ✅ [path]/components.css — TRDR utility classes
+- ✅ [path]/tokens.css — TRDR CSS custom properties (snapshot v[catalog-version])
+- ✅ [path]/components.css — [implemented] component utility class blocks + typography
 - ✅ CLAUDE.md — design system rules for Claude Code
 - ✅ [N] violations fixed in [M] files
 - ✅ [global-css] updated with @import
+- ⚠️ [S] stub components flagged in MISSING_COMPONENTS.md (if any)
 ## Files modified
 [List each file and what changed]
@@ -831,20 +473,13 @@ Skill version: trdr-ds v1.0 | Hub: https://trdr.mrocontent.com.br
 [List by category with file:line references]
 ## Manual steps required
-Check these before shipping:
 - [ ] **Fonts**: Ensure JetBrains Mono, Inter, and Roboto Mono are loaded
   - Next.js: use `next/font/google` in layout.tsx (`JetBrains_Mono`, `Inter`, `Roboto_Mono`)
   - Others: add Google Fonts `<link>` in HTML head
-- [ ] **Dark/light mode**: tokens.css uses [data-theme="light"] for overrides
-  Add `data-theme="light"` to `<html>` or `<body>` to activate light mode
-- [ ] **Trading UI**: If this project has price/position displays, verify
-  context.trading.* tokens are applied (see Hub: /tokens/semanticos)
+- [ ] **Dark/light mode**: tokens.css uses [data-theme="light"] for overrides — add `data-theme="light"` to `<html>` to activate light mode
+- [ ] **Trading UI**: If this project has price/position displays, verify context.trading.* tokens are applied (see Hub: /tokens/semanticos)
+- [ ] **Stubs**: Review MISSING_COMPONENTS.md and decide whether to wait for canonical implementation in the Hub or hand-roll the component now using the listed tokens
 - [ ] **Skipped files**: [list any files excluded from migration]
-  These still have hardcoded values — migrate manually or run /trdr-ds again
 ## Missing DS tokens (flagged — no semantic token available)
 [List patterns found in the project that have no TRDR token yet — request these in the Hub]
@@ -853,15 +488,15 @@ Check these before shipping:
 | `box-shadow: rgba(0,0,0,*)` | [file:line] | Request shadow token in Hub |
 | `linear-gradient(...)` non-TRDR | [file:line] | Request gradient token or remove |
-## Missing Hub components (flagged)
-[See MISSING_COMPONENTS.md if generated]
+## Stub components encountered (See MISSING_COMPONENTS.md)
+[List each stub slug + figmaId that was referenced in the project]
 ## Design System Reference
 - Hub: https://trdr.mrocontent.com.br
+- JSON catalog: https://trdr.mrocontent.com.br/components.json
 - Tokens: https://trdr.mrocontent.com.br/tokens/semanticos
 - Components: https://trdr.mrocontent.com.br/componentes
 - Rules: https://trdr.mrocontent.com.br/para-ia
-- Full spec: https://trdr.mrocontent.com.br/design-md
 ```
 ---
@@ -874,31 +509,50 @@ After all steps are complete, output:
 ✅ TRDR Design System applied
 Created:
-  • [path]/tokens.css (292 CSS variables — dark + light mode)
-  • [path]/components.css (TRDR component utility classes)
+  • [path]/tokens.css (snapshot v[catalog-version], dark + light mode)
+  • [path]/components.css ([implemented] component classes + typography)
   • CLAUDE.md (design system context for Claude Code)
   • DS_MIGRATION.md (migration log + manual checklist)
+  • MISSING_COMPONENTS.md ([S] stubs flagged) — only if applicable
 Modified:
   • [global-css] — @import added
   • [N] files — [X] violations replaced with semantic tokens
+Catalog: TRDR DS v[catalog-version] ([implemented]/[total] components)
 Hub: https://trdr.mrocontent.com.br
 → Check DS_MIGRATION.md for manual steps
+→ Stubs not yet canonical: see MISSING_COMPONENTS.md
 ```
 ---
-## LIVE HUB REFERENCE
+## SYNC MODE (when invoked as `/trdr-ds sync`)
+1. WebFetch `https://trdr.mrocontent.com.br/components.json` → save as `<skill-dir>/data/components.json`
+2. WebFetch `https://trdr.mrocontent.com.br/tokens.css` → save as `<skill-dir>/references/tokens.css`
+3. Compare new vs previous (if a previous version exists). Report:
+   - New components: [list slugs]
+   - Newly implemented: [list slugs that flipped from stub → implemented]
+   - Removed: [list slugs no longer in catalog]
+4. No project files are touched.
+If either fetch fails, report which one and exit with a non-zero status. Do NOT touch the snapshot if the fetch succeeded but the response is malformed (e.g., missing `components` array).
+---
+## LIVE HUB REFERENCE (canonical fallback)
-When the developer asks about a specific component, token, or rule, fetch from the Hub:
+When the developer asks about a component, token, or rule that is not in the local snapshot, fetch from the Hub:
 | Need | URL |
 |------|-----|
-| All tokens | https://trdr.mrocontent.com.br/tokens/semanticos |
+| Full catalog (JSON) | https://trdr.mrocontent.com.br/components.json |
+| All tokens (CSS) | https://trdr.mrocontent.com.br/tokens.css |
+| Token reference | https://trdr.mrocontent.com.br/tokens/semanticos |
 | Specific component | https://trdr.mrocontent.com.br/componentes/[slug] |
 | All components | https://trdr.mrocontent.com.br/componentes |
 | Rules & CLAUDE.md template | https://trdr.mrocontent.com.br/para-ia |
 | Full design spec | https://trdr.mrocontent.com.br/design-md |
-The Hub is the single source of truth. When in doubt, fetch from there.
+The Hub is the single source of truth. The local snapshot is the offline mirror. When in doubt, refresh the snapshot via `/trdr-ds sync`.