trdr-ds-install 1.0.2 → 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 (6) hide show
  1. package/README.md +61 -17
  2. package/package.json +7 -1
  3. package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md +247 -571
  4. package/plugins/trdr-design-system/skills/trdr-ds/data/components.json +1165 -0
  5. package/plugins/trdr-design-system/skills/trdr-ds/references/rules.md +16 -3
  6. package/plugins/trdr-design-system/skills/trdr-ds/references/tokens.css +399 -0
package/plugins/trdr-design-system/skills/trdr-ds/SKILL.md CHANGED
@@ -1,20 +1,38 @@
1
1
  ---
2
2
  name: trdr-ds
3
- 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.
3
+ 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.
4
4
  user-invocable: true
5
- argument-hint: "[analyze|apply]"
5
+ argument-hint: "[analyze|apply|sync]"
6
6
  allowed-tools: [Read, Glob, Grep, Edit, Write, Bash, WebFetch]
7
7
  ---
8
8
 
9
- 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**.
9
+ 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**.
10
+
11
+ This skill ships with two **offline-first snapshots** of the Hub:
12
+
13
+ - `references/tokens.css` — all TRDR CSS variables (dark + light mode), copied verbatim from the Hub
14
+ - `data/components.json` — full component catalog (implemented + stubs), with code blocks for everything `implemented: true`
15
+
16
+ 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).
10
17
 
11
18
  Execute in two clearly separated phases: **PHASE 1: ANALYZE → PHASE 2: EXECUTE (only after approval)**.
12
19
 
13
20
  ---
14
21
 
15
- ## PHASE 1: ANALYSIS (run automatically on invocation)
22
+ ## Argument behaviour
23
+
24
+ | Arg | Behaviour |
25
+ |-----|-----------|
26
+ | `analyze` *(default when none given)* | Run Phase 1 only — produce a migration plan, do not modify any project file |
27
+ | `apply` | Run Phase 1 + Phase 2 |
28
+ | `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. |
29
+ | `--latest` *(modifier on `analyze` or `apply`)* | Same as `sync` first, then continue normally |
30
+
31
+ ---
32
+
33
+ ## PHASE 1: ANALYSIS (default behaviour on invocation)
16
34
 
17
- Scan the project and produce a structured migration plan. Do NOT modify any files yet.
35
+ Scan the project and produce a structured migration plan. Do NOT modify any project files yet.
18
36
 
19
37
  ### Step 1 — Detect framework
20
38
 
@@ -61,16 +79,66 @@ Search: `var\(--color-|var\(--space-` in CSS/SCSS/component files
61
79
  **E — Missing tokens.css**:
62
80
  Check if `tokens.css` already exists in the project and if it's imported in the global CSS.
63
81
 
64
- ### Step 4 — Fetch latest component list from Hub
82
+ **F — Hardcoded rgba colors** (should use DS semantic tokens or be flagged):
83
+ Search: `rgba\(` in CSS/SCSS/HTML files (excluding node_modules, vendor)
84
+
85
+ **G — Custom gradients (non-TRDR)** (should use var(--gradient-*) tokens):
86
+ Search: `linear-gradient|radial-gradient` in CSS/SCSS/HTML files
87
+ Flag any gradient that doesn't reference a TRDR gradient token (`var(--gradient-*)`)
88
+
89
+ **H — Hardcoded font-size in px** (should use .trdr-h* / .trdr-body-* text style classes):
90
+ Search: `font-size:\s*\d+px` in CSS/SCSS files (skip tokens.css itself)
91
+
92
+ ### Step 4 — Load component catalog (offline-first)
93
+
94
+ Read the local snapshot from the skill directory:
65
95
 
66
- Fetch the component catalog to know what's currently available:
67
96
  ```
68
- WebFetch: https://trdr.mrocontent.com.br/componentes
97
+ Read: <skill-dir>/data/components.json
69
98
  ```
70
99
 
71
- From the page, note which components are marked as "Implementado" (they have code blocks ready to use).
100
+ Where `<skill-dir>` is either `~/.claude/skills/trdr-ds/` or `<project>/.claude/skills/trdr-ds/`. Try both.
101
+
102
+ Expected JSON shape:
103
+ ```json
104
+ {
105
+ "version": "1.0",
106
+ "generatedAt": "2026-05-08T...",
107
+ "total": 60,
108
+ "implemented": 13,
109
+ "categories": { "formulario": "Formulário / Controles", ... },
110
+ "components": [
111
+ {
112
+ "slug": "button", "name": "Button", "figmaId": "1318:749",
113
+ "category": "formulario", "description": "...",
114
+ "implemented": true,
115
+ "props": [...], "dimensions": [...], "tokens": [...],
116
+ "code": { "html": "...", "css": "...", "react": "...", "prompt": "..." }
117
+ },
118
+ {
119
+ "slug": "modal", "name": "Modal", "figmaId": "...",
120
+ "category": "modal", "description": "...",
121
+ "implemented": false,
122
+ "tokens": [{ "property": "background", "token": "--surface-secondary", "value": "#222" }, ...]
123
+ }
124
+ ]
125
+ }
126
+ ```
72
127
 
73
- ### Step 5 — Present the Migration Plan and STOP
128
+ If `--latest` was passed (or argument is `sync`), first fetch the canonical JSON:
129
+ ```
130
+ WebFetch: https://trdr.mrocontent.com.br/components.json
131
+ ```
132
+ And overwrite `data/components.json` in the skill directory before continuing.
133
+
134
+ If both the local snapshot and the Hub fail → STOP with:
135
+ > ❌ 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.
136
+
137
+ Use the loaded data throughout the rest of the workflow. Track:
138
+ - `implementedSlugs` = list of `c.slug` where `c.implemented === true`
139
+ - `stubSlugs` = list of `c.slug` where `c.implemented !== true`
140
+
141
+ ### Step 5 — Present the migration plan and STOP
74
142
 
75
143
  Output the following report and **do not proceed** until the developer explicitly approves:
76
144
 
@@ -78,7 +146,8 @@ Output the following report and **do not proceed** until the developer explicitl
78
146
  ## TRDR Design System — Migration Plan
79
147
 
80
148
  ### Project: [framework] | [language] | [styling approach]
81
- ### Hub: https://trdr.mrocontent.com.br
149
+ ### Catalog: TRDR DS v[version] (generated [generatedAt])
150
+ ### Coverage: [implemented]/[total] components implemented
82
151
 
83
152
  ---
84
153
 
@@ -88,9 +157,10 @@ Output the following report and **do not proceed** until the developer explicitl
88
157
  ---
89
158
 
90
159
  ### FILES TO CREATE:
91
- - [ ] `[detected-styles-dir]/tokens.css` — 292 TRDR CSS custom properties (dark + light mode)
160
+ - [ ] `[detected-styles-dir]/tokens.css` — TRDR CSS custom properties (dark + light mode)
92
161
  - [ ] `[detected-styles-dir]/components.css` — TRDR utility classes (.trdr-btn, .trdr-card, etc.)
93
162
  - [ ] `CLAUDE.md` (project root) — design system rules for Claude Code
163
+ - [ ] `MISSING_COMPONENTS.md` (only if stubs are referenced) — pending implementations
94
164
 
95
165
  ### FILES TO MODIFY:
96
166
  - [ ] `[global-css-file]` — add @import for tokens.css and components.css
@@ -105,10 +175,18 @@ Output the following report and **do not proceed** until the developer explicitl
105
175
  | Hardcoded fonts | N | `font-family: Inter` in globals.css:8 |
106
176
  | Hardcoded spacing | N | `padding: 16px` in Card.css:22 |
107
177
  | Primitive token use | N | `var(--color-blue-600)` in Badge.css:31 |
178
+ | Hardcoded rgba | N | `background: rgba(0,0,0,.3)` in card.css:88 |
179
+ | Custom gradients | N | `linear-gradient(135deg, #FF6B6B...)` in header:24 |
180
+ | Hardcoded font-size | N | `font-size: 22px` in card.css:99 |
181
+
182
+ ### TRDR COMPONENTS REFERENCED IN PROJECT:
183
+ [Cross-reference detected UI patterns with the catalog]
108
184
 
109
- ### TRDR COMPONENTS AVAILABLE (from Hub):
110
- [List implemented components from the Hub catalog — these have ready-to-use code]
111
- e.g.: Button, TextInput, Switch, Dropdown, Checkbox, RadioButton, ComboInput, Tooltip
185
+ | Slug | Status | Project usage |
186
+ |------|--------|---------------|
187
+ | button | ✅ implemented | 6 occurrences in Button.tsx, Header.tsx |
188
+ | modal | ⚠️ stub (figmaId 1234:5) | 2 occurrences in Modal.tsx — will receive token guidance, not full code |
189
+ | (other) | ... | ... |
112
190
 
113
191
  ### SCOPE ESTIMATE: [Small / Medium / Large]
114
192
  Small = <10 violations | Medium = 10–50 | Large = 50+
@@ -126,6 +204,7 @@ Small = <10 violations | Medium = 10–50 | Large = 50+
126
204
  - `"Apply, skip [file or directory]"` — proceed but exclude specific paths
127
205
  - `"Only tokens"` — only create tokens.css, components.css, and CLAUDE.md (no violation fixes)
128
206
  - `"Change [detail]"` — adjust a specific part of the plan before executing
207
+ - `"Sync first"` — pull the latest catalog from the Hub before applying
129
208
  ```
130
209
 
131
210
  **STOP HERE. Wait for explicit developer approval before Phase 2.**
@@ -138,529 +217,57 @@ Execute in order. Report progress after each major step.
138
217
 
139
218
  ### Step 1 — Create tokens.css
140
219
 
141
- Create `tokens.css` in the detected styles directory with this content:
220
+ Copy the local snapshot verbatim:
142
221
 
143
- ```css
144
- /* ==========================================================================
145
- TRDR Design System — CSS Variables
146
- Source: designtokens.md v1.4 | https://trdr.mrocontent.com.br
147
- DO NOT edit manually — update via the TRDR Design Hub
148
- ========================================================================== */
222
+ ```
223
+ Read: <skill-dir>/references/tokens.css
224
+ Write: <project>/<detected-styles-dir>/tokens.css
225
+ ```
149
226
 
150
- :root {
151
-
152
- /* =========================================================================
153
- PRIMITIVES — COLORS (never use directly in UI — use semantic tokens)
154
- ========================================================================= */
155
-
156
- /* Brand Cyan (formerly Blue) */
157
- --color-blue-50: #E6FEFF;
158
- --color-blue-100: #CCFDFF;
159
- --color-blue-200: #99F9FF;
160
- --color-blue-300: #5CF3FF;
161
- --color-blue-400: #29ECFF;
162
- --color-blue-500: #00D4FF;
163
- --color-blue-600: #00A8CC;
164
- --color-blue-700: #007D99;
165
- --color-blue-800: #005266;
166
- --color-blue-900: #002933;
167
- --color-blue-alpha-08: #00D4FF14;
168
- --color-blue-alpha-16: #00D4FF29;
169
- --color-blue-alpha-32: #00D4FF52;
170
-
171
- /* Neutral */
172
- --color-neutral-0: #FFFFFF;
173
- --color-neutral-50: #FAFAFA;
174
- --color-neutral-100: #EEEEEE;
175
- --color-neutral-200: #E8E8E8;
176
- --color-neutral-300: #D2D2D2;
177
- --color-neutral-400: #BCBCBC;
178
- --color-neutral-500: #A4A4A4;
179
- --color-neutral-600: #777777;
180
- --color-neutral-700: #4A4A4A;
181
- --color-neutral-800: #222222;
182
- --color-neutral-900: #1A1A1A;
183
- --color-neutral-1000: #141519;
184
- --color-neutral-1200: #0E0E0E;
185
-
186
- /* Green */
187
- --color-green-50: #F0FFF7;
188
- --color-green-100: #CCFFDF;
189
- --color-green-200: #99FFBF;
190
- --color-green-300: #66FFA0;
191
- --color-green-400: #33FF80;
192
- --color-green-500: #00FF60;
193
- --color-green-600: #31DD7E;
194
- --color-green-700: #00CC4D;
195
- --color-green-800: #009933;
196
- --color-green-900: #00661F;
197
- --color-green-alpha-08: #4FE29014;
198
- --color-green-alpha-12: #4FE2901F;
199
- --color-green-alpha-16: #4FE29029;
200
- --color-green-alpha-32: #4FE29052;
201
- --color-green-alpha-40: #4FE29066;
202
- --color-green-alpha-48: #4FE2907A;
203
- --color-green-alpha-56: #4FE2908F;
204
-
205
- /* Red */
206
- --color-red-50: #FFF0F0;
207
- --color-red-100: #FFCCCC;
208
- --color-red-200: #FF9999;
209
- --color-red-300: #FF6666;
210
- --color-red-400: #FF3333;
211
- --color-red-500: #FF0000;
212
- --color-red-600: #F34F45;
213
- --color-red-700: #CC0000;
214
- --color-red-800: #990000;
215
- --color-red-900: #660000;
216
- --color-red-alpha-08: #F34F4514;
217
- --color-red-alpha-12: #F34F451F;
218
- --color-red-alpha-16: #F34F4529;
219
- --color-red-alpha-32: #F34F4552;
220
- --color-red-alpha-40: #F34F4566;
221
- --color-red-alpha-48: #F34F457A;
222
- --color-red-alpha-56: #F34F458F;
223
-
224
- /* Yellow */
225
- --color-yellow-50: #FFFBF0;
226
- --color-yellow-100: #FFF3CC;
227
- --color-yellow-200: #FFE799;
228
- --color-yellow-300: #FFDB66;
229
- --color-yellow-400: #FFCF33;
230
- --color-yellow-500: #FFCC40;
231
- --color-yellow-600: #FFB800;
232
- --color-yellow-700: #CC9200;
233
- --color-yellow-800: #996D00;
234
- --color-yellow-900: #664900;
235
- --color-yellow-alpha-08: #FFCC4014;
236
- --color-yellow-alpha-16: #FFCC4029;
237
- --color-yellow-alpha-32: #FFCC4052;
238
-
239
- /* Orange */
240
- --color-orange-50: #FFF5F0;
241
- --color-orange-100: #FFE0CC;
242
- --color-orange-200: #FFC199;
243
- --color-orange-300: #FFA266;
244
- --color-orange-400: #FF8333;
245
- --color-orange-500: #FF6400;
246
- --color-orange-600: #F57C00;
247
- --color-orange-700: #CC5000;
248
- --color-orange-800: #993C00;
249
- --color-orange-900: #662800;
250
- --color-orange-alpha-08: #FF640014;
251
- --color-orange-alpha-16: #FF640029;
252
- --color-orange-alpha-32: #FF640052;
253
-
254
- /* Purple */
255
- --color-purple-50: #F1EFF5;
256
- --color-purple-100: #D6D3E5;
257
- --color-purple-200: #BBB4D6;
258
- --color-purple-300: #9E94C9;
259
- --color-purple-400: #8072BE;
260
- --color-purple-500: #6350B3;
261
- --color-purple-600: #50418E;
262
- --color-purple-700: #3E3467;
263
- --color-purple-800: #2A2542;
264
- --color-purple-900: #161320;
265
- --color-purple-alpha-08: #6350B314;
266
- --color-purple-alpha-16: #6350B329;
267
- --color-purple-alpha-32: #6350B352;
268
-
269
- /* =========================================================================
270
- PRIMITIVES — SPACING
271
- ========================================================================= */
272
- --space-0: 0px;
273
- --space-50: 4px;
274
- --space-100: 8px;
275
- --space-200: 12px;
276
- --space-300: 16px;
277
- --space-400: 20px;
278
- --space-500: 24px;
279
- --space-600: 32px;
280
- --space-700: 40px;
281
- --space-800: 48px;
282
- --space-900: 56px;
283
- --space-1000: 64px;
284
- --space-1200: 80px;
285
- --space-1400: 96px;
286
-
287
- /* =========================================================================
288
- PRIMITIVES — BORDER RADIUS
289
- ========================================================================= */
290
- --radius-prim-0: 0px;
291
- --radius-prim-50: 2px;
292
- --radius-prim-100: 4px;
293
- --radius-prim-200: 8px;
294
- --radius-prim-300: 12px;
295
- --radius-prim-400: 16px;
296
- --radius-prim-500: 20px;
297
- --radius-prim-600: 24px;
298
- --radius-prim-700: 32px;
299
- --radius-prim-full: 9999px;
300
-
301
- /* =========================================================================
302
- PRIMITIVES — TYPOGRAPHY
303
- ========================================================================= */
304
- --font-size-50: 12px;
305
- --font-size-100: 14px;
306
- --font-size-200: 16px;
307
- --font-size-300: 18px;
308
- --font-size-400: 20px;
309
- --font-size-500: 24px;
310
- --font-size-600: 28px;
311
- --font-size-700: 32px;
312
- --font-size-800: 40px;
313
-
314
- /* =========================================================================
315
- PRIMITIVES — OPACITY
316
- ========================================================================= */
317
- --opacity-0: 0;
318
- --opacity-08: 0.08;
319
- --opacity-16: 0.16;
320
- --opacity-32: 0.32;
321
- --opacity-48: 0.48;
322
- --opacity-64: 0.64;
323
- --opacity-80: 0.80;
324
- --opacity-100: 1;
325
-
326
- /* =========================================================================
327
- SEMANTIC — BACKGROUNDS (dark default)
328
- ========================================================================= */
329
- --bg-primary: #0E0E0E;
330
- --bg-secondary: #141519;
331
- --bg-tertiary: #1A1A1A;
332
- --bg-inverse: #FFFFFF;
333
- --bg-overlay: #FFFFFF29;
334
- --bg-brand: #00D4FF;
335
- --bg-brand2: #6350B3;
336
- --bg-warning: #FFCC40;
337
- --bg-danger: #F34F45;
338
- --bg-success: #31DD7E;
339
- --bg-base-alpha-0: #0E0E0E00;
340
-
341
- /* =========================================================================
342
- SEMANTIC — SURFACES
343
- ========================================================================= */
344
- --surface-primary: #4A4A4A;
345
- --surface-secondary: #222222;
346
- --surface-tertiary: #1A1A1A;
347
- --surface-interactive: #002933;
348
- --surface-disabled: #1A1A1A;
349
- --surface-info: #00D4FF14;
350
- --surface-error: #F1312614;
351
- --surface-warning: #FFCC4014;
352
- --surface-success: #4FE29014;
353
- --surface-brand: #00D4FF29;
354
-
355
- /* =========================================================================
356
- SEMANTIC — CONTENT (TEXT)
357
- ========================================================================= */
358
- --content-primary: #FFFFFF;
359
- --content-secondary: #E8E8E8;
360
- --content-tertiary: #A4A4A4;
361
- --content-disabled: #4A4A4A;
362
- --content-placeholder: #777777;
363
- --content-inverse: #1A1A1A;
364
- --content-info: #CCFDFF;
365
- --content-warning: #FFCC40;
366
- --content-error: #F34F45;
367
- --content-success: #4FE290;
368
- --content-brand: #00D4FF;
369
- --content-on-brand: #FFFFFF;
370
-
371
- /* =========================================================================
372
- SEMANTIC — BORDERS
373
- ========================================================================= */
374
- --border-default: #4A4A4A;
375
- --border-subtle: #222222;
376
- --border-strong: #A4A4A4;
377
- --border-focus: #00D4FF;
378
- --border-disabled: #777777;
379
-
380
- /* =========================================================================
381
- SEMANTIC — ACTIONS
382
- ========================================================================= */
383
-
384
- /* Brand (Cyan — primary) */
385
- --action-brand-default: #00D4FF;
386
- --action-brand-hover: #00A8CC;
387
- --action-brand-active: #007D99;
388
- --action-brand-disabled: #777777;
389
- --action-brand-alpha: #00D4FF14;
390
-
391
- /* Brand Inverse (solid cyan primary button) */
392
- --action-brand-inverse-default: #005266;
393
- --action-brand-inverse-hover: #007D99;
394
- --action-brand-inverse-active: #002933;
395
- --action-brand-inverse-alpha: #00D4FF14;
396
- --action-brand-inverse-disabled: #777777;
397
-
398
- /* Secondary (Neutral) */
399
- --action-secondary-default: #4A4A4A;
400
- --action-secondary-hover: #777777;
401
- --action-secondary-active: #A4A4A4;
402
- --action-secondary-disabled: #1A1A1A;
403
- --action-secondary-alpha: #FFFFFF00;
404
-
405
- /* Tertiary (Purple) */
406
- --action-tertiary-default: #50418E;
407
- --action-tertiary-hover: #3E3467;
408
- --action-tertiary-active: #2A2542;
409
- --action-tertiary-disabled: #777777;
410
- --action-tertiary-alpha: #6350B314;
411
-
412
- /* Destructive (Orange) */
413
- --action-destructive-default: #EA580C;
414
- --action-destructive-hover: #C2410C;
415
- --action-destructive-active: #9A3412;
416
- --action-destructive-disabled: #777777;
417
- --action-destructive-alpha: #F9731614;
418
-
419
- /* =========================================================================
420
- SEMANTIC — TRADING CONTEXT
421
- ========================================================================= */
422
-
423
- /* Candlesticks */
424
- --context-chart-up: #31DD7E;
425
- --context-chart-down: #F34F45;
426
-
427
- /* Price */
428
- --context-trading-up: #4FE290;
429
- --context-trading-up-alpha: #4FE29029;
430
- --context-trading-down: #F34F45;
431
- --context-trading-down-alpha: #F1312629;
432
-
433
- /* Long (Buy) */
434
- --context-trading-long-text: #6DE7A2;
435
- --context-trading-long-default: #4FE29014;
436
- --context-trading-long-hover: #4FE29029;
437
- --context-trading-long-active: #4FE29052;
438
-
439
- /* Short (Sell) */
440
- --context-trading-short-text: #F56D64;
441
- --context-trading-short-default: #F1312614;
442
- --context-trading-short-hover: #F1312629;
443
- --context-trading-short-active: #F1312652;
444
-
445
- /* Stop Loss */
446
- --context-trading-stop-default: #F97316;
447
- --context-trading-stop-hover: #EA580C;
448
- --context-trading-stop-active: #C2410C;
449
- --context-trading-stop-alpha: #F9731614;
450
-
451
- /* =========================================================================
452
- SCALE — RESPONSIVE SPACING (Desktop default)
453
- ========================================================================= */
454
- --spacing-xs: 4px;
455
- --spacing-sm: 8px;
456
- --spacing-md: 12px;
457
- --spacing-lg: 16px;
458
- --spacing-xl: 20px;
459
- --spacing-2xl: 24px;
460
- --spacing-3xl: 32px;
461
- --spacing-3xl-2: 40px;
462
- --spacing-3xl-3: 48px;
463
- --spacing-3xl-4: 56px;
464
- --spacing-3xl-5: 64px;
465
- --spacing-3xl-6: 80px;
466
- --spacing-3xl-7: 96px;
467
-
468
- /* =========================================================================
469
- SCALE — BORDER RADIUS
470
- ========================================================================= */
471
- --radius-none: 0px;
472
- --radius-xs: 2px;
473
- --radius-sm: 4px;
474
- --radius-md: 8px;
475
- --radius-lg: 16px;
476
- --radius-xl: 20px;
477
- --radius-full: 9999px;
478
-
479
- /* =========================================================================
480
- FONTS (use Google Fonts or next/font to load these)
481
- JetBrains Mono → headings | Inter → body/labels | Roboto Mono → numbers
482
- ========================================================================= */
483
- --font-primary: 'JetBrains Mono', monospace;
484
- --font-secondary: 'Inter', sans-serif;
485
- --font-mono: 'Roboto Mono', monospace;
486
-
487
- /* =========================================================================
488
- BRAND GRADIENTS (Site/Marketing)
489
- ========================================================================= */
490
- --gradient-text-brand: linear-gradient(90deg, #00D4FF 0%, #FFFFFF 100%);
491
- --gradient-text-brand-hero: linear-gradient(90deg, #00D4FF 30%, #FFFFFF 100%);
492
- --gradient-bg-hero: linear-gradient(180deg, #002933 0%, #0E0E0E 40%);
493
- --gradient-bg-fade: linear-gradient(180deg, rgba(14,14,14,0) 0%, #0E0E0E 47%);
494
- }
227
+ Do NOT regenerate the file. Do NOT inline tokens from any other source. The snapshot is authoritative.
495
228
 
496
- /* ==========================================================================
497
- LIGHT MODE — apply [data-theme="light"] to <html> or <body>
498
- ========================================================================== */
499
- [data-theme="light"] {
500
- --bg-primary: #EEEEEE;
501
- --bg-secondary: #F5F5F5;
502
- --bg-tertiary: #FAFAFA;
503
- --bg-inverse: #1A1A1A;
504
- --bg-overlay: #FFFFFF52;
505
- --surface-primary: #D2D2D2;
506
- --surface-secondary: #E8E8E8;
507
- --surface-tertiary: #EEEEEE;
508
- --surface-interactive: #29ECFF;
509
- --surface-disabled: #FAFAFA;
510
- --surface-brand: #00D4FF29;
511
- --content-primary: #1A1A1A;
512
- --content-secondary: #222222;
513
- --content-tertiary: #4A4A4A;
514
- --content-disabled: #777777;
515
- --content-inverse: #FFFFFF;
516
- --content-brand: #005266;
517
- --content-info: #00A8CC;
518
- --border-default: #A4A4A4;
519
- --border-subtle: #E8E8E8;
520
- --border-strong: #D2D2D2;
521
- --border-disabled: #E8E8E8;
522
- --border-focus: #00D4FF;
523
- --action-brand-default: #007D99;
524
- --action-brand-hover: #005266;
525
- --action-brand-active: #002933;
526
- --action-brand-inverse-default: #00A8CC;
527
- --action-brand-inverse-hover: #007D99;
528
- --action-brand-inverse-active: #005266;
529
- }
530
- ```
229
+ If `references/tokens.css` is missing in the skill directory:
230
+ 1. Try `WebFetch: https://trdr.mrocontent.com.br/tokens.css`, save it to the skill dir, then proceed.
231
+ 2. If the Hub is also unreachable → STOP with error message asking the maintainer to run `npm run sync`.
531
232
 
532
233
  ### Step 2 — Create components.css
533
234
 
534
- Create `components.css` in the same directory as tokens.css. Fetch the latest version from the Hub:
235
+ Build `components.css` by concatenating the `.code.css` block of every implemented component plus the typography utility classes.
535
236
 
536
237
  ```
537
- WebFetch: https://trdr.mrocontent.com.br/design-md
238
+ For each c in components where c.implemented === true:
239
+ append c.code.css to components.css (with a "/* === <c.name> === */" header)
538
240
  ```
539
241
 
540
- Extract the component utility classes section (`.trdr-*` classes). This fetch always gets the most up-to-date classes, including any new components added to the Hub since the last skill update.
541
-
542
- If the Hub is unreachable, use this baseline (contains all components as of skill version 1.0):
242
+ After all component CSS blocks, append the text style utility classes:
543
243
 
544
244
  ```css
545
245
  /* ==========================================================================
546
- TRDR Design Hub — Component utility classes
547
- Always fetch latest from: https://trdr.mrocontent.com.br
246
+ TRDR Design System — Text Style Utility Classes
548
247
  ========================================================================== */
549
248
 
550
- /* Card */
551
- .trdr-card {
552
- background-color: var(--bg-secondary);
553
- border: 1px solid var(--border-subtle);
554
- border-radius: var(--radius-md);
555
- padding: var(--spacing-2xl);
556
- }
557
- .trdr-card-hover {
558
- background-color: var(--bg-secondary);
559
- border: 1px solid var(--border-subtle);
560
- border-radius: var(--radius-md);
561
- padding: var(--spacing-2xl);
562
- transition: border-color 0.15s ease, background-color 0.15s ease;
563
- }
564
- .trdr-card-hover:hover {
565
- border-color: var(--border-default);
566
- background-color: var(--bg-tertiary);
567
- }
568
-
569
- /* Gradient text */
570
- .trdr-gradient-text {
571
- background: linear-gradient(90deg, var(--action-brand-default) 30%, #FFFFFF 100%);
572
- -webkit-background-clip: text;
573
- -webkit-text-fill-color: transparent;
574
- background-clip: text;
575
- }
576
-
577
- /* Buttons */
578
- .trdr-btn {
579
- display: inline-flex;
580
- align-items: center;
581
- justify-content: center;
582
- gap: var(--spacing-xs);
583
- height: 24px;
584
- padding: 0 var(--spacing-sm);
585
- border-radius: var(--radius-md);
586
- font-family: var(--font-secondary);
587
- font-size: 14px;
588
- font-weight: 600;
589
- line-height: 1;
590
- white-space: nowrap;
591
- transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
592
- cursor: pointer;
593
- border: none;
594
- text-decoration: none;
595
- }
596
- .trdr-btn-lg { height: 32px; padding: 0 var(--spacing-md); font-size: 14px; }
597
-
598
- .trdr-btn-primary { background-color: var(--action-brand-inverse-default); color: var(--content-primary); border: 0.5px solid var(--action-brand-inverse-default); }
599
- .trdr-btn-primary:hover { background-color: var(--action-brand-inverse-hover); border-color: var(--action-brand-inverse-hover); }
600
- .trdr-btn-primary:active { background-color: var(--action-brand-inverse-active); }
601
- .trdr-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
602
-
603
- .trdr-btn-secondary { background-color: var(--action-secondary-default); color: var(--content-primary); }
604
- .trdr-btn-secondary:hover { background-color: var(--action-secondary-hover); }
605
- .trdr-btn-secondary:active { background-color: var(--action-secondary-active); }
606
- .trdr-btn-secondary:disabled { background-color: var(--action-secondary-disabled); color: var(--content-disabled); cursor: not-allowed; }
607
-
608
- .trdr-btn-ghost { background-color: transparent; color: var(--content-secondary); border: 1px solid var(--border-default); }
609
- .trdr-btn-ghost:hover { background-color: var(--surface-secondary); border-color: var(--border-strong); color: var(--content-primary); }
610
- .trdr-btn-ghost:active { background-color: var(--surface-primary); }
611
- .trdr-btn-ghost:disabled { color: var(--content-disabled); border-color: var(--border-disabled); cursor: not-allowed; opacity: 0.5; }
612
-
613
- .trdr-btn-destructive { background-color: var(--action-destructive-default); color: var(--content-primary); }
614
- .trdr-btn-destructive:hover { background-color: var(--action-destructive-hover); }
615
- .trdr-btn-destructive:active { background-color: var(--action-destructive-active); }
616
-
617
- .trdr-btn-link { background-color: transparent; color: var(--content-brand); padding-left: 0; padding-right: 0; }
618
- .trdr-btn-link:hover { color: var(--action-brand-hover); text-decoration: underline; }
619
-
620
- .trdr-btn-long { background-color: var(--context-trading-long-default); color: var(--context-trading-long-text); min-width: 80px; }
621
- .trdr-btn-long:hover { background-color: var(--context-trading-long-hover); }
622
- .trdr-btn-long:active { background-color: var(--context-trading-long-active); }
623
-
624
- .trdr-btn-short { background-color: var(--context-trading-short-default); color: var(--context-trading-short-text); min-width: 80px; }
625
- .trdr-btn-short:hover { background-color: var(--context-trading-short-hover); }
626
- .trdr-btn-short:active { background-color: var(--context-trading-short-active); }
627
-
628
- /* Badge */
629
- .trdr-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; border-radius: 5px; font-family: var(--font-secondary); font-size: 12px; font-weight: 500; white-space: nowrap; }
630
- .trdr-badge-brand { background-color: var(--surface-brand); color: var(--content-brand); border: 1px solid var(--border-subtle); }
631
- .trdr-badge-success { background-color: var(--surface-success); color: var(--content-success); border: 1px solid var(--border-subtle); }
632
- .trdr-badge-neutral { background-color: var(--surface-secondary); color: var(--content-tertiary); border: 1px solid var(--border-subtle); }
633
- .trdr-badge-warning { background-color: var(--surface-warning); color: var(--content-warning); }
634
-
635
- /* Segmented control */
636
- .trdr-segment-control { display: inline-flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
637
- .trdr-segment { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--spacing-lg); font-family: var(--font-secondary); font-size: 14px; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
638
- .trdr-segment-active { background-color: var(--action-brand-inverse-default); color: var(--content-primary); }
639
- .trdr-segment-inactive { background-color: var(--surface-secondary); color: var(--content-tertiary); }
640
- .trdr-segment-inactive:hover { color: var(--content-secondary); }
641
-
642
- /* Input */
643
- .trdr-input { width: 100%; height: 36px; padding: 0 var(--spacing-md); background-color: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--content-primary); font-family: var(--font-secondary); font-size: 13px; outline: none; transition: border-color 0.15s ease; }
644
- .trdr-input::placeholder { color: var(--content-tertiary); }
645
- .trdr-input:focus { border-color: var(--border-focus); }
646
-
647
- /* Table */
648
- .trdr-table { width: 100%; border-collapse: collapse; }
649
- .trdr-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--content-tertiary); padding: var(--spacing-sm) var(--spacing-lg); border-bottom: 1px solid var(--border-subtle); }
650
- .trdr-table td { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--content-secondary); vertical-align: middle; }
651
- .trdr-table tr:last-child td { border-bottom: none; }
652
- .trdr-table tr:hover td { background-color: var(--bg-tertiary); }
653
-
654
- /* Divider */
655
- .trdr-divider { width: 100%; height: 1px; background-color: var(--border-subtle); margin: var(--spacing-2xl) 0; }
656
-
657
- /* Section headings */
658
- .trdr-section-title { font-family: var(--font-primary); font-size: 24px; font-weight: 500; color: var(--content-primary); margin-bottom: var(--spacing-sm); }
659
- .trdr-section-subtitle { font-size: 14px; color: var(--content-tertiary); margin-bottom: var(--spacing-3xl); line-height: 1.5; }
249
+ /* Headings — var(--font-primary) = JetBrains Mono */
250
+ .trdr-h1 { font-family: var(--font-primary); font-size: 80px; font-weight: 500; line-height: 1.1; }
251
+ .trdr-h2 { font-family: var(--font-primary); font-size: 56px; font-weight: 500; line-height: 1.1; }
252
+ .trdr-h3 { font-family: var(--font-primary); font-size: 46px; font-weight: 700; line-height: 1.15; }
253
+ .trdr-h4 { font-family: var(--font-primary); font-size: 38px; font-weight: 500; line-height: 1.15; }
254
+ .trdr-h5 { font-family: var(--font-primary); font-size: 32px; font-weight: 500; line-height: 1.2; }
255
+ .trdr-h6 { font-family: var(--font-primary); font-size: 26px; font-weight: 500; line-height: 1.2; }
256
+ .trdr-h7 { font-family: var(--font-secondary); font-size: 22px; font-weight: 600; line-height: 1.3; }
257
+
258
+ /* Body — var(--font-secondary) = Inter */
259
+ .trdr-body-b1 { font-family: var(--font-secondary); font-size: 18px; font-weight: 400; line-height: 1.6; }
260
+ .trdr-body-b2 { font-family: var(--font-secondary); font-size: 16px; font-weight: 500; line-height: 1.5; }
261
+ .trdr-body-b3 { font-family: var(--font-secondary); font-size: 14px; font-weight: 400; line-height: 1.5; }
262
+ .trdr-body-b4 { font-family: var(--font-secondary); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; }
263
+ .trdr-body-b5 { font-family: var(--font-secondary); font-size: 10px; font-weight: 400; line-height: 1.4; }
264
+ .trdr-body-aux { font-family: var(--font-secondary); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.24px; }
265
+
266
+ /* Labels — var(--font-secondary) = Inter */
267
+ .trdr-label-l2 { font-family: var(--font-secondary); font-size: 16px; font-weight: 600; line-height: 1.4; }
268
+ .trdr-label-l3 { font-family: var(--font-secondary); font-size: 14px; font-weight: 600; line-height: 1.4; }
660
269
  ```
661
270
 
662
- > **Note for new components:** As new components are added to the Hub, their CSS classes will appear in the Hub's designtokens.md and component pages. Always fetch from the Hub when you need a component that isn't in this baseline.
663
-
664
271
  ### Step 3 — Update global CSS
665
272
 
666
273
  Find the main global CSS file (globals.css, main.css, index.css, app.css) and add at the very top:
@@ -676,14 +283,20 @@ If the project already imports a different design system's variables and there a
676
283
 
677
284
  ### Step 4 — Create CLAUDE.md
678
285
 
679
- Create `CLAUDE.md` at the project root:
286
+ Create `CLAUDE.md` at the project root, populated dynamically from the catalog:
287
+
288
+ - 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`).
289
+ - The list of "Pending stubs" should mention the count of stubs and link to MISSING_COMPONENTS.md if generated.
290
+
291
+ Template (replace `[…]` with actual values):
680
292
 
681
293
  ```markdown
682
294
  # [Project Name] — Context for Claude Code
683
295
 
684
296
  ## Design System
685
297
  This project uses the TRDR Design System.
686
- Full reference: https://trdr.mrocontent.com.br
298
+ Reference Hub: https://trdr.mrocontent.com.br
299
+ Local catalog: TRDR DS v[catalog-version] ([implemented]/[total] components)
687
300
 
688
301
  ## Absolute Rules (never break these)
689
302
  1. NEVER use primitive tokens directly (--color-*, --space-*) — always use semantic tokens
@@ -693,6 +306,8 @@ Full reference: https://trdr.mrocontent.com.br
693
306
  5. Fonts: --font-primary = JetBrains Mono (headings) | --font-secondary = Inter (body) | --font-mono = Roboto Mono (numbers)
694
307
  6. Spacing: always var(--spacing-xs/sm/md/lg/xl/2xl/3xl) — never hardcoded px
695
308
  7. Border radius: always var(--radius-sm/md/lg/full) — never hardcoded px
309
+ 8. Text styles: use .trdr-h1/.../h7, .trdr-body-b1/.../b5, .trdr-label-l2/l3 — never raw font-size px
310
+ 9. No colors outside the DS anywhere — rgba(), inline gradients, hardcoded hex all require a semantic token. No exceptions.
696
311
 
697
312
  ## Token files
698
313
  - Tokens: [detected-path]/tokens.css
@@ -713,28 +328,17 @@ Full reference: https://trdr.mrocontent.com.br
713
328
  | Error | --content-error | #F34F45 |
714
329
  | Warning | --content-warning | #FFCC40 |
715
330
 
716
- ## Pre-built component classes
717
- .trdr-btn, .trdr-btn-primary, .trdr-btn-secondary, .trdr-btn-ghost, .trdr-btn-destructive
718
- .trdr-btn-long (buy), .trdr-btn-short (sell)
719
- .trdr-badge, .trdr-badge-brand, .trdr-badge-success, .trdr-badge-neutral
720
- .trdr-card, .trdr-card-hover
721
- .trdr-input
722
- .trdr-table
723
- .trdr-segment-control, .trdr-segment-active, .trdr-segment-inactive
331
+ ## Implemented components
332
+ [Generate from catalog: list each implemented component as a row "slug — figmaId — Hub URL"]
724
333
 
725
- ## Getting component code
726
- For any component, go to: https://trdr.mrocontent.com.br/componentes/[slug]
727
- Available: button, text-input, switch, dropdown, checkbox, radio-button, combo-input, tooltip, boleta
728
- (Check Hub for latest — new components are added regularly)
334
+ ## Pending components (stubs)
335
+ [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.
729
336
 
730
337
  ## Layer hierarchy
731
338
  bg.primary (base) → bg.secondary/tertiary (content areas) → surface.* (cards, panels)
732
339
  → interactive components → overlays/modals/tooltips
733
340
  ```
734
341
 
735
- Replace `[Project Name]` with the actual project name detected from package.json.
736
- Replace `[detected-path]` with the actual relative path to tokens.css.
737
-
738
342
  ### Step 5 — Migrate violations
739
343
 
740
344
  For each violation found in Phase 1, apply the semantic token replacement.
@@ -779,22 +383,70 @@ For each violation found in Phase 1, apply the semantic token replacement.
779
383
 
780
384
  **Ambiguous colors:** Use property context to decide — `background-color` → bg/surface token, `color` → content token, `border-color` → border token.
781
385
 
386
+ **rgba() mapping:**
387
+ | Hardcoded pattern | Context | Replace with |
388
+ |-------------------|---------|-------------|
389
+ | `rgba(0,0,0,*)` | box-shadow | No TRDR shadow token exists → flag in DS_MIGRATION.md as "Missing shadow token" |
390
+ | `rgba(255,255,255,.29)` approx | overlay/backdrop | `var(--bg-overlay)` |
391
+ | `rgba(255,255,255,*)` other | overlay | flag in DS_MIGRATION.md |
392
+ | Any other `rgba(N,N,N,*)` | various | Map to nearest semantic alpha token (--surface-brand, --surface-info, --action-*-alpha, etc.) or flag |
393
+
394
+ **Gradient mapping:**
395
+ | Pattern | Replace with |
396
+ |---------|-------------|
397
+ | `linear-gradient(...)` using only TRDR brand colors | `var(--gradient-text-brand)`, `var(--gradient-bg-hero)`, or `var(--gradient-bg-fade)` as appropriate |
398
+ | `linear-gradient(...)` using any non-DS colors | Flag in DS_MIGRATION.md as non-compliant — developer must decide: remove, replace with a TRDR gradient token, or add a new token to the Hub |
399
+ | Gradient inside SVG data URI embedded in CSS | Flag in DS_MIGRATION.md |
400
+
401
+ **Font-size mapping:**
402
+ | Hardcoded value | Replace with |
403
+ |----------------|-------------|
404
+ | `font-size: 80px` | Add `.trdr-h1` class to the element; remove the rule |
405
+ | `font-size: 56px` | `.trdr-h2` class |
406
+ | `font-size: 46px` | `.trdr-h3` class |
407
+ | `font-size: 38px` | `.trdr-h4` class |
408
+ | `font-size: 32px` | `.trdr-h5` class |
409
+ | `font-size: 26px` | `.trdr-h6` class |
410
+ | `font-size: 22px` | `.trdr-h7` class |
411
+ | `font-size: 18px` | `.trdr-body-b1` class |
412
+ | `font-size: 16px` | `.trdr-body-b2` or `.trdr-label-l2` (check weight context) |
413
+ | `font-size: 14px` | `.trdr-body-b3` or `.trdr-label-l3` (check weight context) |
414
+ | `font-size: 12px` | `.trdr-body-b4` or `.trdr-body-aux` (check letter-spacing) |
415
+ | `font-size: 10px` | `.trdr-body-b5` class |
416
+ | `font-size: [other px]` | Nearest text style class — flag in DS_MIGRATION.md if no match |
417
+
782
418
  **Do NOT replace:**
783
- - Hex values inside SVG paths or image files
784
- - Values in third-party library overrides where the semantic token would break the library layout
419
+ - Hex values inside binary image files (PNG, JPG, GIF)
420
+ - SVG external files — flag them in DS_MIGRATION.md but do not auto-edit
785
421
  - Values in commented-out code
786
422
 
787
- ### Step 6 — Fetch component-specific code (if applicable)
788
-
789
- 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:
790
-
791
- ```
792
- WebFetch: https://trdr.mrocontent.com.br/componentes/[slug]
793
- ```
794
-
795
- Replace `[slug]` with: `button`, `text-input`, `switch`, `dropdown`, `checkbox`, `radio-button`, `combo-input`, `tooltip`, `boleta`, or any other component visible in the Hub catalog.
796
-
797
- This fetch always returns the latest code, including any updates made since this skill was last installed.
423
+ **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.
424
+
425
+ ### Step 6 — Apply component code (smart fallback)
426
+
427
+ For each detected UI pattern in the project that matches a TRDR component slug:
428
+
429
+ 1. **Look up the component** in the loaded catalog by slug (or by category, if slug is ambiguous).
430
+ 2. **If `c.implemented === true`** and `c.code.css` exists:
431
+ - 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`).
432
+ 3. **If `c.implemented === false`** (stub):
433
+ - Add this banner comment above the affected element in the source file:
434
+ ```
435
+ /* TRDR DS — <c.name> (figmaId: <c.figmaId>) */
436
+ /* Implementação canônica pendente. Consulte https://trdr.mrocontent.com.br/componentes/<c.slug> */
437
+ /* Tokens recomendados: <list c.tokens[].token> */
438
+ ```
439
+ - Append an entry to `MISSING_COMPONENTS.md`:
440
+ ```markdown
441
+ ## <c.name>
442
+ - Slug: `<c.slug>` | figmaId: `<c.figmaId>` | Category: `<c.category>`
443
+ - Found in: <list of file:line>
444
+ - Description: <c.description>
445
+ - Recommended tokens: <c.tokens[]>
446
+ - Status: ⚠️ stub — code blocks pending
447
+ ```
448
+ 4. **If no slug matches** the detected pattern:
449
+ - 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.
798
450
 
799
451
  ### Step 7 — Generate DS_MIGRATION.md
800
452
 
@@ -803,14 +455,16 @@ Create `DS_MIGRATION.md` at the project root:
803
455
  ```markdown
804
456
  # TRDR Design System — Migration Log
805
457
  Applied: [date]
806
- Skill version: trdr-ds v1.0 | Hub: https://trdr.mrocontent.com.br
458
+ Catalog: TRDR DS v[catalog-version] ([implemented]/[total] components, generated [generatedAt])
459
+ Hub: https://trdr.mrocontent.com.br
807
460
 
808
461
  ## What was applied
809
- - ✅ [path]/tokens.css — 292 CSS custom properties
810
- - ✅ [path]/components.css — TRDR utility classes
462
+ - ✅ [path]/tokens.css — TRDR CSS custom properties (snapshot v[catalog-version])
463
+ - ✅ [path]/components.css — [implemented] component utility class blocks + typography
811
464
  - ✅ CLAUDE.md — design system rules for Claude Code
812
465
  - ✅ [N] violations fixed in [M] files
813
466
  - ✅ [global-css] updated with @import
467
+ - ⚠️ [S] stub components flagged in MISSING_COMPONENTS.md (if any)
814
468
 
815
469
  ## Files modified
816
470
  [List each file and what changed]
@@ -819,27 +473,30 @@ Skill version: trdr-ds v1.0 | Hub: https://trdr.mrocontent.com.br
819
473
  [List by category with file:line references]
820
474
 
821
475
  ## Manual steps required
822
- Check these before shipping:
823
-
824
476
  - [ ] **Fonts**: Ensure JetBrains Mono, Inter, and Roboto Mono are loaded
825
477
  - Next.js: use `next/font/google` in layout.tsx (`JetBrains_Mono`, `Inter`, `Roboto_Mono`)
826
478
  - Others: add Google Fonts `<link>` in HTML head
827
-
828
- - [ ] **Dark/light mode**: tokens.css uses [data-theme="light"] for overrides
829
- Add `data-theme="light"` to `<html>` or `<body>` to activate light mode
830
-
831
- - [ ] **Trading UI**: If this project has price/position displays, verify
832
- context.trading.* tokens are applied (see Hub: /tokens/semanticos)
833
-
479
+ - [ ] **Dark/light mode**: tokens.css uses [data-theme="light"] for overrides — add `data-theme="light"` to `<html>` to activate light mode
480
+ - [ ] **Trading UI**: If this project has price/position displays, verify context.trading.* tokens are applied (see Hub: /tokens/semanticos)
481
+ - [ ] **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
834
482
  - [ ] **Skipped files**: [list any files excluded from migration]
835
- These still have hardcoded values — migrate manually or run /trdr-ds again
483
+
484
+ ## Missing DS tokens (flagged — no semantic token available)
485
+ [List patterns found in the project that have no TRDR token yet — request these in the Hub]
486
+ | Pattern | File | Suggestion |
487
+ |---------|------|-----------|
488
+ | `box-shadow: rgba(0,0,0,*)` | [file:line] | Request shadow token in Hub |
489
+ | `linear-gradient(...)` non-TRDR | [file:line] | Request gradient token or remove |
490
+
491
+ ## Stub components encountered (See MISSING_COMPONENTS.md)
492
+ [List each stub slug + figmaId that was referenced in the project]
836
493
 
837
494
  ## Design System Reference
838
495
  - Hub: https://trdr.mrocontent.com.br
496
+ - JSON catalog: https://trdr.mrocontent.com.br/components.json
839
497
  - Tokens: https://trdr.mrocontent.com.br/tokens/semanticos
840
498
  - Components: https://trdr.mrocontent.com.br/componentes
841
499
  - Rules: https://trdr.mrocontent.com.br/para-ia
842
- - Full spec: https://trdr.mrocontent.com.br/design-md
843
500
  ```
844
501
 
845
502
  ---
@@ -852,31 +509,50 @@ After all steps are complete, output:
852
509
  ✅ TRDR Design System applied
853
510
 
854
511
  Created:
855
- • [path]/tokens.css (292 CSS variables — dark + light mode)
856
- • [path]/components.css (TRDR component utility classes)
512
+ • [path]/tokens.css (snapshot v[catalog-version], dark + light mode)
513
+ • [path]/components.css ([implemented] component classes + typography)
857
514
  • CLAUDE.md (design system context for Claude Code)
858
515
  • DS_MIGRATION.md (migration log + manual checklist)
516
+ • MISSING_COMPONENTS.md ([S] stubs flagged) — only if applicable
859
517
 
860
518
  Modified:
861
519
  • [global-css] — @import added
862
520
  • [N] files — [X] violations replaced with semantic tokens
863
521
 
522
+ Catalog: TRDR DS v[catalog-version] ([implemented]/[total] components)
864
523
  Hub: https://trdr.mrocontent.com.br
865
524
  → Check DS_MIGRATION.md for manual steps
525
+ → Stubs not yet canonical: see MISSING_COMPONENTS.md
866
526
  ```
867
527
 
868
528
  ---
869
529
 
870
- ## LIVE HUB REFERENCE
530
+ ## SYNC MODE (when invoked as `/trdr-ds sync`)
531
+
532
+ 1. WebFetch `https://trdr.mrocontent.com.br/components.json` → save as `<skill-dir>/data/components.json`
533
+ 2. WebFetch `https://trdr.mrocontent.com.br/tokens.css` → save as `<skill-dir>/references/tokens.css`
534
+ 3. Compare new vs previous (if a previous version exists). Report:
535
+ - New components: [list slugs]
536
+ - Newly implemented: [list slugs that flipped from stub → implemented]
537
+ - Removed: [list slugs no longer in catalog]
538
+ 4. No project files are touched.
539
+
540
+ 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).
541
+
542
+ ---
543
+
544
+ ## LIVE HUB REFERENCE (canonical fallback)
871
545
 
872
- When the developer asks about a specific component, token, or rule, fetch from the Hub:
546
+ When the developer asks about a component, token, or rule that is not in the local snapshot, fetch from the Hub:
873
547
 
874
548
  | Need | URL |
875
549
  |------|-----|
876
- | All tokens | https://trdr.mrocontent.com.br/tokens/semanticos |
550
+ | Full catalog (JSON) | https://trdr.mrocontent.com.br/components.json |
551
+ | All tokens (CSS) | https://trdr.mrocontent.com.br/tokens.css |
552
+ | Token reference | https://trdr.mrocontent.com.br/tokens/semanticos |
877
553
  | Specific component | https://trdr.mrocontent.com.br/componentes/[slug] |
878
554
  | All components | https://trdr.mrocontent.com.br/componentes |
879
555
  | Rules & CLAUDE.md template | https://trdr.mrocontent.com.br/para-ia |
880
556
  | Full design spec | https://trdr.mrocontent.com.br/design-md |
881
557
 
882
- The Hub is the single source of truth. When in doubt, fetch from there.
558
+ 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`.