trdr-ds-install 1.0.0

package/README.md

@@ -0,0 +1,67 @@
+# trdr-plugins
+
+TRDR company plugins for Claude Code.
+
+## Installation (one-time, per developer)
+
+```bash
+npx trdr-ds-install@latest
+```
+
+This installs the `trdr-ds` skill into `~/.claude/skills/` — available in all your projects.
+
+For project-scoped install (goes into `.claude/skills/` in the current directory):
+
+```bash
+npx trdr-ds-install@latest --project
+```
+
+After installing, **restart Claude Code** to activate the skill.
+
+## Updating
+
+Same command. The `@latest` flag bypasses npm cache and always fetches the newest version:
+
+```bash
+npx trdr-ds-install@latest
+```
+
+## Available skills
+
+### `/trdr-ds` — TRDR Design System
+
+Applies the TRDR Design System to any project in two phases:
+
+1. **Analysis** — scans the project, finds violations, presents a migration plan
+2. **Execution** — after approval, creates tokens.css, components.css, CLAUDE.md, and fixes violations
+
+Component data is always fetched live from the Design Hub at **https://trdr.mrocontent.com.br**, so new components added to the Hub are automatically available.
+
+**Usage:** Run `/trdr-ds` in any project after installing.
+
+## For maintainers (Mauro)
+
+To push an update to all developers:
+
+```bash
+# 1. Edit the skill
+# plugins/trdr-design-system/skills/trdr-ds/SKILL.md
+# plugins/trdr-design-system/skills/trdr-ds/references/rules.md
+
+# 2. Commit and push
+git add . && git commit -m "..." && git push
+
+# 3. Publish to npm (bumps patch version automatically)
+npm version patch && npm publish
+```
+
+Developers get the update on their next `npx trdr-ds-install@latest` run.
+
+## Design Hub
+
+https://trdr.mrocontent.com.br
+
+- Tokens: /tokens/semanticos
+- Components: /componentes
+- Rules: /para-ia
+- Full spec: /design-md

package/bin/install.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs   = require('fs');
+const path = require('path');
+const os   = require('os');
+
+const args      = process.argv.slice(2);
+const isProject = args.includes('--project');
+
+const base = isProject
+  ? path.join(process.cwd(), '.claude', 'skills')
+  : path.join(os.homedir(), '.claude', 'skills');
+
+const dest = path.join(base, 'trdr-ds');
+const src  = path.join(__dirname, '..', 'plugins', 'trdr-design-system', 'skills', 'trdr-ds');
+
+if (!fs.existsSync(src)) {
+  console.error('Erro: arquivos da skill não encontrados em', src);
+  process.exit(1);
+}
+
+fs.cpSync(src, dest, { recursive: true, force: true });
+
+const scope = isProject ? 'project (.claude/skills/)' : 'user (~/.claude/skills/)';
+console.log('');
+console.log('✓ trdr-ds skill instalada com sucesso!');
+console.log('  Escopo: ' + scope);
+console.log('  Local:  ' + dest);
+console.log('');
+console.log('  Reinicie o Claude Code para ativar.');
+console.log('  Em qualquer projeto, use /trdr-ds para aplicar o Design System TRDR.');
+console.log('');

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "trdr-ds-install",
+  "version": "1.0.0",
+  "description": "Installs the TRDR Design System skill for Claude Code",
+  "bin": {
+    "trdr-ds-install": "./bin/install.js"
+  },
+  "files": [
+    "bin/",
+    "plugins/trdr-design-system/skills/"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mrofernandes/trdr-plugins.git"
+  },
+  "author": "Mauro Fernandes <mrocontent@gmail.com>",
+  "license": "MIT"
+}

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

@@ -0,0 +1,866 @@
+---
+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.
+user-invocable: true
+argument-hint: "[analyze|apply]"
+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**.
+
+Execute in two clearly separated phases: **PHASE 1: ANALYZE → PHASE 2: EXECUTE (only after approval)**.
+
+---
+
+## PHASE 1: ANALYSIS (run automatically on invocation)
+
+Scan the project and produce a structured migration plan. Do NOT modify any files yet.
+
+### Step 1 — Detect framework
+
+Read `package.json` at the project root. Identify:
+- Framework: Next.js (version), React (CRA/Vite), Vue/Nuxt, plain HTML, other
+- Language: TypeScript or JavaScript
+- Styling: CSS Modules, Tailwind, CSS-in-JS, plain CSS, SCSS
+
+### Step 2 — Map style structure
+
+Search for all style files:
+```
+Glob: ["**/*.css", "**/*.scss"] — exclude node_modules, .next, dist, build, out
+```
+
+Identify:
+- Main global CSS file (globals.css, main.css, index.css, app.css, styles.css)
+- Whether CSS custom properties already exist (look for `:root {`)
+- Potential conflicts with TRDR prefixes: `--bg-`, `--content-`, `--action-`, `--surface-`, `--border-`, `--spacing-`, `--radius-`
+- Whether fonts (Space Grotesk, Inter, Roboto Mono) are already loaded
+
+Determine the best directory for new CSS files:
+- Next.js with `src/`: → `src/styles/`
+- Next.js without `src/`: → `styles/`
+- React CRA/Vite with `src/`: → `src/styles/` or `src/assets/`
+- Plain HTML: → `css/` or `styles/`
+
+### Step 3 — Find violations
+
+Search for TRDR rule violations across all source files (*.css, *.scss, *.tsx, *.jsx, *.ts, *.js, *.vue, *.html):
+
+**A — Hardcoded colors** (should be CSS vars):
+Search pattern: `#[0-9A-Fa-f]{3,8}` in CSS/SCSS files; `#[0-9A-Fa-f]{3,8}` in component files within style props or className strings.
+
+**B — Hardcoded font-family** (should be var(--font-primary/secondary/mono)):
+Search: `font-family.*Inter|font-family.*Space Grotesk|font-family.*Roboto Mono`
+
+**C — Hardcoded px spacing** (should be var(--spacing-*)):
+Search: `(margin|padding|gap):\s*\d+px` in CSS/SCSS
+
+**D — Primitive token usage** (should be semantic):
+Search: `var\(--color-|var\(--space-` in CSS/SCSS/component files
+
+**E — Missing tokens.css**:
+Check if `tokens.css` already exists in the project and if it's imported in the global CSS.
+
+### Step 4 — Fetch latest component list from Hub
+
+Fetch the component catalog to know what's currently available:
+```
+WebFetch: https://trdr.mrocontent.com.br/componentes
+```
+
+From the page, note which components are marked as "Implementado" (they have code blocks ready to use).
+
+### Step 5 — Present the Migration Plan and STOP
+
+Output the following report and **do not proceed** until the developer explicitly approves:
+
+```markdown
+## TRDR Design System — Migration Plan
+
+### Project: [framework] | [language] | [styling approach]
+### Hub: https://trdr.mrocontent.com.br
+
+---
+
+### Conformance score: [X]% compliant
+(Percentage of style files with zero hardcoded violations)
+
+---
+
+### FILES TO CREATE:
+- [ ] `[detected-styles-dir]/tokens.css` — 292 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
+
+### FILES TO MODIFY:
+- [ ] `[global-css-file]` — add @import for tokens.css and components.css
+[list each file with violations, e.g.:]
+- [ ] `src/components/Button.css` — 3 violations (hardcoded colors: #3D99FF, #0E0E0E, #FFFFFF)
+- [ ] `src/app/globals.css` — 2 violations (font-family: Inter)
+
+### VIOLATIONS FOUND:
+| Category | Count | Example |
+|----------|-------|---------|
+| Hardcoded colors | N | `color: #3D99FF` in Button.css:14 |
+| Hardcoded fonts | N | `font-family: Inter` in globals.css:8 |
+| Hardcoded spacing | N | `padding: 16px` in Card.css:22 |
+| Primitive token use | N | `var(--color-blue-600)` in Badge.css:31 |
+
+### 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
+
+### SCOPE ESTIMATE: [Small / Medium / Large]
+Small = <10 violations | Medium = 10–50 | Large = 50+
+
+### WHAT WILL NOT BE TOUCHED:
+- Images, SVGs, fonts files
+- node_modules/, .next/, dist/, build/, out/
+- Third-party library files
+- Any file you explicitly exclude
+
+---
+
+**Reply with one of:**
+- `"Apply"` or `"Executar"` — proceed with everything above
+- `"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
+```
+
+**STOP HERE. Wait for explicit developer approval before Phase 2.**
+
+---
+
+## PHASE 2: EXECUTION (only after explicit approval)
+
+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)
+     ========================================================================= */
+
+  /* Blue */
+  --color-blue-50: #F0F7FF;
+  --color-blue-100: #E0EEFF;
+  --color-blue-200: #C1DDFF;
+  --color-blue-300: #A2CDFF;
+  --color-blue-400: #84BFFF;
+  --color-blue-500: #65B0FF;
+  --color-blue-600: #3D99FF;
+  --color-blue-700: #1E82FF;
+  --color-blue-800: #0066FF;
+  --color-blue-900: #0052CC;
+  --color-blue-alpha-08: #0052CC14;
+  --color-blue-alpha-16: #0052CC29;
+  --color-blue-alpha-32: #0052CC52;
+
+  /* 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: #F5F0FF;
+  --color-purple-100: #E0CCFF;
+  --color-purple-200: #C199FF;
+  --color-purple-300: #A266FF;
+  --color-purple-400: #8333FF;
+  --color-purple-500: #7C4DFF;
+  --color-purple-600: #6200EA;
+  --color-purple-700: #5000CC;
+  --color-purple-800: #3C0099;
+  --color-purple-900: #280066;
+  --color-purple-alpha-08: #7C4DFF14;
+  --color-purple-alpha-16: #7C4DFF29;
+  --color-purple-alpha-32: #7C4DFF52;
+
+  /* =========================================================================
+     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: #3D99FF;
+  --bg-warning: #FFCC40;
+  --bg-danger: #F34F45;
+  --bg-success: #31DD7E;
+  --bg-base-alpha-0: rgba(14, 14, 14, 0);
+
+  /* =========================================================================
+     SEMANTIC — SURFACES
+     ========================================================================= */
+  --surface-primary: #4A4A4A;
+  --surface-secondary: #222222;
+  --surface-tertiary: #1A1A1A;
+  --surface-interactive: #0052CC;
+  --surface-disabled: #1A1A1A;
+  --surface-info: rgba(61, 153, 255, 0.08);
+  --surface-error: rgba(243, 79, 69, 0.08);
+  --surface-warning: rgba(255, 204, 64, 0.08);
+  --surface-success: rgba(79, 226, 144, 0.08);
+  --surface-brand: rgba(0, 82, 204, 0.16);
+
+  /* =========================================================================
+     SEMANTIC — CONTENT (TEXT)
+     ========================================================================= */
+  --content-primary: #FFFFFF;
+  --content-secondary: #E8E8E8;
+  --content-tertiary: #A4A4A4;
+  --content-disabled: #4A4A4A;
+  --content-inverse: #1A1A1A;
+  --content-info: #65B0FF;
+  --content-warning: #FFCC40;
+  --content-error: #F34F45;
+  --content-success: #4FE290;
+  --content-brand: #3D99FF;
+  --content-on-brand: #FFFFFF;
+
+  /* =========================================================================
+     SEMANTIC — BORDERS
+     ========================================================================= */
+  --border-default: #4A4A4A;
+  --border-subtle: #222222;
+  --border-strong: #A4A4A4;
+  --border-focus: #65B0FF;
+  --border-disabled: #777777;
+
+  /* =========================================================================
+     SEMANTIC — ACTIONS
+     ========================================================================= */
+
+  /* Brand (Blue — primary) */
+  --action-brand-default: #3D99FF;
+  --action-brand-hover: #1E82FF;
+  --action-brand-active: #0066FF;
+  --action-brand-disabled: #0052CC29;
+  --action-brand-alpha: rgba(61, 153, 255, 0.16);
+
+  /* Brand Inverse (solid blue primary button) */
+  --action-brand-inverse-default: #0066FF;
+  --action-brand-inverse-hover: #1E82FF;
+  --action-brand-inverse-active: #0052CC;
+
+  /* Secondary (Neutral) */
+  --action-secondary-default: #4A4A4A;
+  --action-secondary-hover: #777777;
+  --action-secondary-active: #A4A4A4;
+  --action-secondary-disabled: #1A1A1A;
+  --action-secondary-alpha: rgba(74, 74, 74, 0.16);
+
+  /* Tertiary (Purple) */
+  --action-tertiary-default: #7C4DFF;
+  --action-tertiary-hover: #6200EA;
+  --action-tertiary-active: #5000CC;
+  --action-tertiary-disabled: #7C4DFF29;
+
+  /* Destructive (Orange) */
+  --action-destructive-default: #F57C00;
+  --action-destructive-hover: #FF6400;
+  --action-destructive-active: #CC5000;
+  --action-destructive-disabled: #FF640014;
+
+  /* =========================================================================
+     SEMANTIC — TRADING CONTEXT
+     ========================================================================= */
+
+  /* Candlesticks */
+  --context-chart-up: #31DD7E;
+  --context-chart-down: #F34F45;
+
+  /* Price */
+  --context-trading-up: #4FE290;
+  --context-trading-down: #F34F45;
+
+  /* Long (Buy) */
+  --context-trading-long-text: #4FE290;
+  --context-trading-long-default: rgba(79, 226, 144, 0.08);
+  --context-trading-long-hover: rgba(79, 226, 144, 0.12);
+  --context-trading-long-active: rgba(79, 226, 144, 0.16);
+
+  /* Short (Sell) */
+  --context-trading-short-text: #F34F45;
+  --context-trading-short-default: rgba(243, 79, 69, 0.08);
+  --context-trading-short-hover: rgba(243, 79, 69, 0.12);
+  --context-trading-short-active: rgba(243, 79, 69, 0.16);
+
+  /* Stop Loss */
+  --context-trading-stop-default: rgba(255, 100, 0, 0.16);
+  --context-trading-stop-hover: rgba(255, 100, 0, 0.24);
+  --context-trading-stop-active: rgba(255, 100, 0, 0.32);
+  --context-trading-stop-alpha: rgba(255, 100, 0, 0.08);
+
+  /* =========================================================================
+     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)
+     Space Grotesk → headings | Inter → body/labels | Roboto Mono → numbers
+     ========================================================================= */
+  --font-primary: 'Space Grotesk', sans-serif;
+  --font-secondary: 'Inter', sans-serif;
+  --font-mono: 'Roboto Mono', monospace;
+
+  /* =========================================================================
+     BRAND GRADIENTS (Site/Marketing)
+     ========================================================================= */
+  --gradient-text-brand: linear-gradient(90deg, #3D99FF 0%, #FFFFFF 100%);
+  --gradient-text-brand-hero: linear-gradient(90deg, #3D99FF 30%, #FFFFFF 100%);
+  --gradient-bg-hero: linear-gradient(180deg, #0052CC 0%, #0E0E0E 40%);
+  --gradient-bg-fade: linear-gradient(180deg, rgba(14,14,14,0) 0%, #0E0E0E 47%);
+}
+
+/* ==========================================================================
+   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: #00000029;
+  --surface-primary: #D2D2D2;
+  --surface-secondary: #E8E8E8;
+  --surface-tertiary: #EEEEEE;
+  --surface-interactive: #84BFFF;
+  --surface-disabled: #FAFAFA;
+  --content-primary: #1A1A1A;
+  --content-secondary: #222222;
+  --content-tertiary: #4A4A4A;
+  --content-disabled: #777777;
+  --content-inverse: #FFFFFF;
+  --content-brand: #0066FF;
+  --border-default: #A4A4A4;
+  --border-subtle: #E8E8E8;
+  --border-strong: #D2D2D2;
+  --border-disabled: #E8E8E8;
+  --action-brand-default: #0066FF;
+  --action-brand-hover: #1E82FF;
+  --action-brand-active: #3D99FF;
+}
+```
+
+### Step 2 — Create components.css
+
+Create `components.css` in the same directory as tokens.css. Fetch the latest version from the Hub:
+
+```
+WebFetch: https://trdr.mrocontent.com.br/design-md
+```
+
+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.
+
+If the Hub is unreachable, use this baseline (contains all components as of skill version 1.0):
+
+```css
+/* ==========================================================================
+   TRDR Design Hub — Component utility classes
+   Always fetch latest from: https://trdr.mrocontent.com.br
+   ========================================================================== */
+
+/* Card */
+.trdr-card {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-2xl);
+}
+.trdr-card-hover {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-2xl);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+.trdr-card-hover:hover {
+  border-color: var(--border-default);
+  background-color: var(--bg-tertiary);
+}
+
+/* Gradient text */
+.trdr-gradient-text {
+  background: linear-gradient(90deg, var(--action-brand-default) 30%, #FFFFFF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Buttons */
+.trdr-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  height: 24px;
+  padding: 0 var(--spacing-sm);
+  border-radius: var(--radius-md);
+  font-family: var(--font-secondary);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+}
+.trdr-btn-lg { height: 32px; padding: 0 var(--spacing-md); font-size: 14px; }
+
+.trdr-btn-primary { background-color: var(--action-brand-inverse-default); color: var(--content-primary); border: 0.5px solid var(--action-brand-inverse-default); }
+.trdr-btn-primary:hover  { background-color: var(--action-brand-inverse-hover); border-color: var(--action-brand-inverse-hover); }
+.trdr-btn-primary:active { background-color: var(--action-brand-inverse-active); }
+.trdr-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.trdr-btn-secondary { background-color: var(--action-secondary-default); color: var(--content-primary); }
+.trdr-btn-secondary:hover  { background-color: var(--action-secondary-hover); }
+.trdr-btn-secondary:active { background-color: var(--action-secondary-active); }
+.trdr-btn-secondary:disabled { background-color: var(--action-secondary-disabled); color: var(--content-disabled); cursor: not-allowed; }
+
+.trdr-btn-ghost { background-color: transparent; color: var(--content-secondary); border: 1px solid var(--border-default); }
+.trdr-btn-ghost:hover  { background-color: var(--surface-secondary); border-color: var(--border-strong); color: var(--content-primary); }
+.trdr-btn-ghost:active { background-color: var(--surface-primary); }
+.trdr-btn-ghost:disabled { color: var(--content-disabled); border-color: var(--border-disabled); cursor: not-allowed; opacity: 0.5; }
+
+.trdr-btn-destructive { background-color: var(--action-destructive-default); color: var(--content-primary); }
+.trdr-btn-destructive:hover  { background-color: var(--action-destructive-hover); }
+.trdr-btn-destructive:active { background-color: var(--action-destructive-active); }
+
+.trdr-btn-link { background-color: transparent; color: var(--content-brand); padding-left: 0; padding-right: 0; }
+.trdr-btn-link:hover  { color: var(--action-brand-hover); text-decoration: underline; }
+
+.trdr-btn-long { background-color: var(--context-trading-long-default); color: var(--context-trading-long-text); min-width: 80px; }
+.trdr-btn-long:hover  { background-color: var(--context-trading-long-hover); }
+.trdr-btn-long:active { background-color: var(--context-trading-long-active); }
+
+.trdr-btn-short { background-color: var(--context-trading-short-default); color: var(--context-trading-short-text); min-width: 80px; }
+.trdr-btn-short:hover  { background-color: var(--context-trading-short-hover); }
+.trdr-btn-short:active { background-color: var(--context-trading-short-active); }
+
+/* Badge */
+.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; }
+.trdr-badge-brand   { background-color: var(--surface-brand); color: var(--content-brand); border: 1px solid var(--border-subtle); }
+.trdr-badge-success { background-color: var(--surface-success); color: var(--content-success); border: 1px solid var(--border-subtle); }
+.trdr-badge-neutral { background-color: var(--surface-secondary); color: var(--content-tertiary); border: 1px solid var(--border-subtle); }
+.trdr-badge-warning { background-color: var(--surface-warning); color: var(--content-warning); }
+
+/* Segmented control */
+.trdr-segment-control { display: inline-flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
+.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; }
+.trdr-segment-active   { background-color: var(--action-brand-inverse-default); color: var(--content-primary); }
+.trdr-segment-inactive { background-color: var(--surface-secondary); color: var(--content-tertiary); }
+.trdr-segment-inactive:hover { color: var(--content-secondary); }
+
+/* Input */
+.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; }
+.trdr-input::placeholder { color: var(--content-tertiary); }
+.trdr-input:focus { border-color: var(--border-focus); }
+
+/* Table */
+.trdr-table { width: 100%; border-collapse: collapse; }
+.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); }
+.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; }
+.trdr-table tr:last-child td { border-bottom: none; }
+.trdr-table tr:hover td { background-color: var(--bg-tertiary); }
+
+/* Divider */
+.trdr-divider { width: 100%; height: 1px; background-color: var(--border-subtle); margin: var(--spacing-2xl) 0; }
+
+/* Section headings */
+.trdr-section-title { font-family: var(--font-primary); font-size: 24px; font-weight: 500; color: var(--content-primary); margin-bottom: var(--spacing-sm); }
+.trdr-section-subtitle { font-size: 14px; color: var(--content-tertiary); margin-bottom: var(--spacing-3xl); line-height: 1.5; }
+```
+
+> **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.
+
+### 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:
+
+```css
+@import './tokens.css';
+@import './components.css';
+```
+
+Adjust the relative path if tokens.css is in a subdirectory.
+
+If the project already imports a different design system's variables and there are naming conflicts, warn the developer before proceeding.
+
+### Step 4 — Create CLAUDE.md
+
+Create `CLAUDE.md` at the project root:
+
+```markdown
+# [Project Name] — Context for Claude Code
+
+## Design System
+This project uses the TRDR Design System.
+Full reference: https://trdr.mrocontent.com.br
+
+## Absolute Rules (never break these)
+1. NEVER use primitive tokens directly (--color-*, --space-*) — always use semantic tokens
+2. Backgrounds: --bg-primary (#0E0E0E), --bg-secondary (#141519), --bg-tertiary (#1A1A1A)
+3. Text: --content-primary (white), --content-secondary (#E8E8E8), --content-tertiary (#A4A4A4)
+4. Primary CTA: --action-brand-inverse-default (#0066FF) for filled buttons
+5. Fonts: --font-primary = Space Grotesk (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
+
+## Token files
+- Tokens: [detected-path]/tokens.css
+- Components: [detected-path]/components.css
+
+## Quick reference — most used tokens
+| Token | CSS Variable | Value |
+|-------|-------------|-------|
+| Background | --bg-primary | #0E0E0E |
+| Surface | --surface-secondary | #222222 |
+| Text primary | --content-primary | #FFFFFF |
+| Text secondary | --content-tertiary | #A4A4A4 |
+| Primary button | --action-brand-inverse-default | #0066FF |
+| Border | --border-default | #4A4A4A |
+| Focus ring | --border-focus | #65B0FF |
+| Success | --content-success | #4FE290 |
+| Error | --content-error | #F34F45 |
+| Warning | --content-warning | #FFCC40 |
+
+## 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-table
+.trdr-segment-control, .trdr-segment-active, .trdr-segment-inactive
+
+## 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
+(Check Hub for latest — new components are added regularly)
+
+## 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.
+
+**Color mapping (hardcoded → semantic):**
+| Hardcoded value | Context | Replace with |
+|----------------|---------|-------------|
+| `#0E0E0E` | background | `var(--bg-primary)` |
+| `#141519` | background | `var(--bg-secondary)` |
+| `#1A1A1A` | background/surface | `var(--bg-tertiary)` or `var(--surface-tertiary)` |
+| `#222222` | surface/border | `var(--surface-secondary)` or `var(--border-subtle)` |
+| `#4A4A4A` | surface/border | `var(--surface-primary)` or `var(--border-default)` |
+| `#FFFFFF` | text/bg | `var(--content-primary)` or `var(--bg-inverse)` |
+| `#E8E8E8` | text | `var(--content-secondary)` |
+| `#A4A4A4` | text | `var(--content-tertiary)` |
+| `#3D99FF` | action/text | `var(--action-brand-default)` or `var(--content-brand)` |
+| `#0066FF` | button bg | `var(--action-brand-inverse-default)` |
+| `#F34F45` | error/trading | `var(--content-error)` or `var(--context-trading-down)` |
+| `#4FE290` | success/trading | `var(--content-success)` or `var(--context-trading-up)` |
+| `#FFCC40` | warning | `var(--content-warning)` |
+| `#65B0FF` | focus/info | `var(--border-focus)` or `var(--content-info)` |
+| `#F57C00` | destructive | `var(--action-destructive-default)` |
+
+**Font mapping:**
+| Hardcoded | Replace with |
+|-----------|-------------|
+| `font-family: 'Inter'` | `font-family: var(--font-secondary)` |
+| `font-family: 'Space Grotesk'` | `font-family: var(--font-primary)` |
+| `font-family: 'Roboto Mono'` | `font-family: var(--font-mono)` |
+
+**Spacing mapping:**
+| Hardcoded | Replace with |
+|-----------|-------------|
+| `4px` | `var(--spacing-xs)` |
+| `8px` | `var(--spacing-sm)` |
+| `12px` | `var(--spacing-md)` |
+| `16px` | `var(--spacing-lg)` |
+| `20px` | `var(--spacing-xl)` |
+| `24px` | `var(--spacing-2xl)` |
+| `32px` | `var(--spacing-3xl)` |
+
+**Ambiguous colors:** Use property context to decide — `background-color` → bg/surface token, `color` → content token, `border-color` → border token.
+
+**Do NOT replace:**
+- Hex values inside SVG paths or image files
+- Values in third-party library overrides where the semantic token would break the library layout
+- Values in commented-out code
+
+### 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 7 — Generate DS_MIGRATION.md
+
+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
+
+## What was applied
+- ✅ [path]/tokens.css — 292 CSS custom properties
+- ✅ [path]/components.css — TRDR utility classes
+- ✅ CLAUDE.md — design system rules for Claude Code
+- ✅ [N] violations fixed in [M] files
+- ✅ [global-css] updated with @import
+
+## Files modified
+[List each file and what changed]
+
+## Violations fixed
+[List by category with file:line references]
+
+## Manual steps required
+Check these before shipping:
+
+- [ ] **Fonts**: Ensure Space Grotesk, Inter, and Roboto Mono are loaded
+  - Next.js: use `next/font/google` in layout.tsx
+  - 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)
+  
+- [ ] **Skipped files**: [list any files excluded from migration]
+  These still have hardcoded values — migrate manually or run /trdr-ds again
+
+## Design System Reference
+- Hub: https://trdr.mrocontent.com.br
+- 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
+```
+
+---
+
+## EXECUTION SUMMARY
+
+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)
+  • CLAUDE.md (design system context for Claude Code)
+  • DS_MIGRATION.md (migration log + manual checklist)
+
+Modified:
+  • [global-css] — @import added
+  • [N] files — [X] violations replaced with semantic tokens
+
+Hub: https://trdr.mrocontent.com.br
+→ Check DS_MIGRATION.md for manual steps
+```
+
+---
+
+## LIVE HUB REFERENCE
+
+When the developer asks about a specific component, token, or rule, fetch from the Hub:
+
+| Need | URL |
+|------|-----|
+| All tokens | 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.

package/plugins/trdr-design-system/skills/trdr-ds/references/rules.md

@@ -0,0 +1,73 @@
+# TRDR Design System — 7 Regras Absolutas
+
+## Regras que nunca devem ser violadas
+
+### Regra 1 — Nunca use primitivos diretamente na UI
+Use tokens semânticos, nunca primitivos.
+- ❌ `background: #3D99FF` ou `background: var(--color-blue-600)`
+- ✅ `background: var(--action-brand-default)`
+
+### Regra 2 — Nunca use color.* ou space.* em componentes finais
+Use os equivalentes semânticos: bg.*, surface.*, content.*, scale.spacing.*
+- ❌ `color: var(--color-neutral-500)`
+- ✅ `color: var(--content-tertiary)`
+
+### Regra 3 — Números e dados financeiros → Roboto Mono
+Tabelas de preços, P&L, quantidades, qualquer dado numérico de trading.
+- `font-family: var(--font-mono)`
+
+### Regra 4 — Títulos de página e headings → Space Grotesk
+Space Grotesk é a fonte primária da marca TRDR.
+- `font-family: var(--font-primary)`
+
+### Regra 5 — Todo restante da UI → Inter
+Body text, labels, inputs, nav, tooltips — tudo que não é heading ou número.
+- `font-family: var(--font-secondary)`
+
+### Regra 6 — Espaçamentos → sempre scale.spacing.*
+Os tokens de scale respeitam variações desktop/mobile automaticamente.
+- ❌ `padding: 16px`
+- ✅ `padding: var(--spacing-lg)`
+
+### Regra 7 — Border radius → sempre scale.radius.*
+Sistema padronizado: sm=4px (inputs), md=8px (botões/cards), lg=16px (modais), full=9999px (pills/switches)
+- ❌ `border-radius: 8px`
+- ✅ `border-radius: var(--radius-md)`
+
+---
+
+## Hierarquia de camadas (z-index semântico)
+
+```
+bg.primary (fundo base)
+  └── bg.secondary / bg.tertiary (áreas de conteúdo)
+        └── surface.primary / secondary / tertiary (cards, painéis)
+              └── componentes interativos (inputs, buttons)
+                    └── overlays / modais / tooltips
+```
+
+---
+
+## Mapa de tokens por contexto de uso
+
+### Botões de ação
+| Contexto | Token | Exemplo |
+|---------|-------|---------|
+| Primário (CTA) | action.brand-inverse.* | OPERAR, Salvar, Confirmar |
+| Secundário | action.secondary.* | Cancelar, Voltar |
+| Terciário | action.tertiary.* | Ações de anotação |
+| Destrutivo | action.destructive.* | Fechar posição, Excluir |
+
+### Trading
+| Contexto | Token |
+|---------|-------|
+| Preço em alta / Compra | context.trading.up / context.trading.long.* |
+| Preço em baixa / Venda | context.trading.down / context.trading.short.* |
+| Stop Loss | context.trading.stop.* |
+| Candle verde | context.chart.candles.up |
+| Candle vermelho | context.chart.candles.down |
+
+---
+
+## Hub de Referência
+https://trdr.mrocontent.com.br/para-ia