npm - trdr-ds-install - Versions diffs - 1.9.0 → 2.0.0 - Mend

trdr-ds-install 1.9.0 → 2.0.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 (44) hide show

package/plugins/trdr-design-system/skills/trdr-ds/phases/final.md ADDED Viewed

@@ -0,0 +1,209 @@
+# Sub-fase D: Final
+> **When to load this file:** During the Final sprint, or `/trdr-ds final`.
+> **Prerequisites:** `DS_ANALYSIS.md` + `DS_PROGRESS.md` must exist.
+> **Output:** Logos replaced, SVG icons → Material Icons, inline styles eliminated, DS_MIGRATION.md generated.
+---
+## Before starting
+1. Read `DS_ANALYSIS.md` — ONLY `## Logo Audit` section
+2. Read `DS_PROGRESS.md` — current state
+3. Update DS_PROGRESS.md: `Sub-fase D: Final — IN_PROGRESS`
+---
+## Step 6.5 — Replace wrong logos
+### Step 6.5a — Replace SVG files
+Load official logo: `Read: <skill-dir>/references/logo-trdr.svg`
+If missing: STOP with `Logo reference missing. Run npx trdr-ds-install@latest.`
+For each `logoAudit.wrong`: overwrite with official logo content.
+If no logo found + `public/` exists: write to `public/logo-trdr.svg`.
+If no logo + no `public/`: log in DS_MIGRATION.md.
+Never modify `logoAudit.correct` files.
+### Step 6.5b — Fix logo usage in HTML/JSX/Vue (Category K)
+**Plain HTML:**
+- `<span>TRDR</span>` as logo → `<img src="logo-trdr.svg" alt="TRDR" height="[N]">`
+- Wrong img src → update to `"logo-trdr.svg"`
+**React/Next.js:**
+- Wrong import → `import LogoTrdr from './logo-trdr.svg'`
+- `<Image src="[wrong]">` → `<Image src="/logo-trdr.svg" alt="TRDR" />`
+- `<span>TRDR</span>` → `<Image src="/logo-trdr.svg" alt="TRDR" height={24} width={105} />`
+**Vue:** Similar — update `:src` or replace span.
+Update DS_PROGRESS.md: `- [x] logos — [N] SVG replaced, [M] HTML usages fixed`
+---
+## Step 6.6 — Replace inline SVG icons with icon library
+### Step 6.6a — Detect and install icon library
+| Framework | Library | Action if missing |
+|---|---|---|
+| Plain HTML | Material Icons CDN | Add `<link>` to `<head>` |
+| React/Next.js | @mui/icons-material | Suggest `npm install` (do NOT auto-install) |
+| Vue | CDN | Add `<link>` to template |
+CDN link:
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+```
+### Step 6.6b — Add icon CSS helpers (plain HTML/Vue CDN only)
+Add to main CSS:
+```css
+.material-icons { font-size: 20px; display: inline-flex; align-items: center; color: inherit; user-select: none; }
+.mi-2xs { font-size: 12px; }
+.mi-xs  { font-size: 14px; }
+.mi-sm  { font-size: 16px; }
+.mi-lg  { font-size: 24px; }
+.mi-xl  { font-size: 28px; }
+.mi-2xl { font-size: 32px; }
+```
+### Step 6.6c — Add icon color classes
+```css
+.icon-brand   { color: var(--content-brand); }
+.icon-success { color: var(--context-trading-up); }
+.icon-error   { color: var(--content-error); }
+.icon-warning { color: var(--content-warning); }
+.icon-dim     { color: var(--content-disabled); }
+.icon-muted   { color: var(--content-tertiary); }
+```
+### Step 6.6c-2 — Measure original SVG dimensions
+For EACH inline SVG:
+1. Check `width`/`height` attributes → use width
+2. If none: check `viewBox` → use 4th value
+3. If none: check CSS for container size
+4. If undetermined: assume 20px + add TODO comment
+**Size class mapping:**
+| Size | Class | Notes |
+|---|---|---|
+| 12px | `.mi-2xs` | |
+| 14px | `.mi-xs` | |
+| 16px | `.mi-sm` | |
+| 18px | `style="font-size:18px"` | Non-standard |
+| 20px | *(default)* | No class needed |
+| 22px | `style="font-size:22px"` | Non-standard |
+| 24px | `.mi-lg` | |
+| 28px | `.mi-xl` | |
+| 32px | `.mi-2xl` | |
+| Other | `style="font-size:Npx"` | Exact preservation |
+### Step 6.6d — Map SVG content to icon names
+| SVG shape | Material Icon |
+|---|---|
+| Magnifying glass | `search` |
+| X/close | `close` |
+| Left arrow | `chevron_left` |
+| Right arrow | `chevron_right` |
+| Play triangle | `play_arrow` |
+| Padlock | `lock` |
+| Checkmark | `check` |
+| Star | `star` |
+| Hamburger | `menu` |
+| Plus | `add` |
+| Warning triangle | `warning` |
+| Info circle | `info` |
+| Bell | `notifications` |
+| Person | `person` |
+| Gear | `settings` |
+| Trash | `delete` |
+| Pencil | `edit` |
+Unmappable: leave TODO comment + document in DS_MIGRATION.md.
+### Step 6.6e — Replace by framework
+| Framework | Standard size | Non-standard size |
+|---|---|---|
+| Plain HTML | `<span class="material-icons {sizeClass}">name</span>` | `<span class="material-icons" style="font-size:{N}px">name</span>` |
+| React (CDN) | `<span className="material-icons {sizeClass}">name</span>` | `<span className="material-icons" style={{fontSize:{N}}}>name</span>` |
+| React (@mui) | `<IconName sx={{ fontSize: {size} }} />` (omit sx if 24px) | Same |
+| Vue | `<span class="material-icons {sizeClass}">name</span>` | Same as HTML |
+**Color: ALWAYS via CSS class, NEVER inline style.**
+---
+## Step 6.7 — Eliminate inline styles (Category I)
+> Note: Most I violations should already be fixed in Sub-fase B. This step catches any remaining.
+**New utility classes** go in the project's main CSS (NOT tokens.css or components.css):
+```css
+/* === Project utilities (added by TRDR DS migration) === */
+.text-brand { color: var(--content-brand); }
+/* ... */
+```
+---
+## Step 7 — Generate DS_MIGRATION.md
+Read `<skill-dir>/templates/ds-migration.md` for the template.
+Write `DS_MIGRATION.md` at project root with:
+- What was applied (files created, violations fixed)
+- Files modified
+- Manual steps required (fonts, dark/light mode, trading UI, stubs, MUI caveats)
+- Missing DS tokens
+- Stub components
+Update DS_PROGRESS.md:
+```
+Sub-fase D: Final — COMPLETE
+Status: COMPLETE
+Completed: [ISO datetime]
+```
+---
+## Execution Summary
+```
+TRDR Design System applied
+Created:
+  [path]/tokens.css
+  [path]/components.css
+  CLAUDE.md
+  DS_ANALYSIS.md + DS_PROGRESS.md + SPRINT_PLAN.md
+  DS_MIGRATION.md
+  MISSING_COMPONENTS.md (if applicable)
+Modified:
+  [global-css] — @import
+  [N] files — [X] violations fixed
+Catalog: TRDR DS v[version] ([impl]/[total] components)
+Hub: https://trdr.mrocontent.com.br
+-> Check DS_MIGRATION.md for manual steps
+-> Backup: trdr-ds/backup-{timestamp} — para desfazer: /trdr-ds rollback
+-> Algo deu errado? /trdr-ds report
+```
+---
+## Execution Log
+After EVERY modification, append to DS_PROGRESS.md `## Execution Log`:
+```
+| [datetime] | D | [action] | [file] | [details] |
+```

package/plugins/trdr-design-system/skills/trdr-ds/phases/foundation.md ADDED Viewed

@@ -0,0 +1,195 @@
+# Sub-fase A: Foundation
+> **When to load this file:** During Sprint 1 (Foundation), or when invoked with `/trdr-ds foundation`.
+> **Prerequisites:** `DS_ANALYSIS.md` must exist at project root.
+> **Output:** tokens.css, components.css, CLAUDE.md, @imports in global CSS, MUI theme (if applicable).
+---
+## Before starting
+1. Read `DS_ANALYSIS.md` from project root — only the `## Project` section
+2. Read `DS_PROGRESS.md` from project root
+3. Update `DS_PROGRESS.md`: set `Sub-fase A: Foundation — IN_PROGRESS`
+---
+## Step 0.5 — Git backup (safety net)
+**Step 0.5a — Check git status:**
+```bash
+git rev-parse --is-inside-work-tree 2>/dev/null
+```
+If NOT a git repo:
+```
+Este projeto nao tem repositorio git. Um backup automatico nao e possivel sem git.
+- "git init" — inicializar repositorio git e criar backup
+- "continuar sem backup" — prosseguir sem safety net (irreversivel)
+```
+STOP. Wait for reply. If "git init": `git init` + `git add -A` + commit. If "continuar": set `Backup branch: NONE (user opted out)`.
+**Step 0.5b — Check existing backup:**
+```bash
+git branch --list "trdr-ds/backup-*"
+```
+If exists: offer "manter" (keep + create new) or "substituir" (delete old). STOP.
+**Step 0.5c — Create backup branch:**
+1. `git branch --show-current` → save as `originalBranch`
+2. Generate: `trdr-ds/backup-{YYYY-MM-DD-HHmmss}`
+3. Check uncommitted: `git status --porcelain` → stash if needed
+4. `git branch trdr-ds/backup-{timestamp}`
+5. Pop stash if created
+6. Update DS_PROGRESS.md with backup and original branch
+7. Output: `Backup criado: branch trdr-ds/backup-{timestamp}`
+---
+## Step 1 — Create tokens.css
+Copy local snapshot verbatim:
+```
+Read: <skill-dir>/references/tokens.css
+Write: <project>/<detected-styles-dir>/tokens.css
+```
+Do NOT regenerate. The snapshot is authoritative.
+If `references/tokens.css` missing: try WebFetch `https://trdr.mrocontent.com.br/tokens.css`. If Hub unreachable: STOP with error.
+Update DS_PROGRESS.md: `- [x] tokens.css — [path] ([datetime])`
+---
+## Step 2 — Create components.css
+Build by concatenating CSS blocks from implemented components + typography classes.
+**Procedure:**
+1. Read `<skill-dir>/data/index.json` — get list of implemented slugs
+2. For each implemented slug:
+   - Read `<skill-dir>/data/components/<slug>.json`
+   - Extract `code.css` block
+   - Append with header: `/* === <name> === */`
+3. After all components, append text style utility classes:
+```css
+/* ==========================================================================
+   TRDR Design System — Text Style Utility Classes
+   ========================================================================== */
+/* Headings — var(--font-primary) = JetBrains Mono */
+.trdr-h1 { font-family: var(--font-primary); font-size: 80px; font-weight: 500; line-height: 1.1; }
+.trdr-h2 { font-family: var(--font-primary); font-size: 56px; font-weight: 500; line-height: 1.1; }
+.trdr-h3 { font-family: var(--font-primary); font-size: 46px; font-weight: 700; line-height: 1.15; }
+.trdr-h4 { font-family: var(--font-primary); font-size: 38px; font-weight: 500; line-height: 1.15; }
+.trdr-h5 { font-family: var(--font-primary); font-size: 32px; font-weight: 500; line-height: 1.2; }
+.trdr-h6 { font-family: var(--font-primary); font-size: 26px; font-weight: 500; line-height: 1.2; }
+.trdr-h7 { font-family: var(--font-secondary); font-size: 22px; font-weight: 600; line-height: 1.3; }
+/* Body — var(--font-secondary) = Inter */
+.trdr-body-b1  { font-family: var(--font-secondary); font-size: 18px; font-weight: 400; line-height: 1.6; }
+.trdr-body-b2  { font-family: var(--font-secondary); font-size: 16px; font-weight: 500; line-height: 1.5; }
+.trdr-body-b3  { font-family: var(--font-secondary); font-size: 14px; font-weight: 400; line-height: 1.5; }
+.trdr-body-b4  { font-family: var(--font-secondary); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; }
+.trdr-body-b5  { font-family: var(--font-secondary); font-size: 10px; font-weight: 400; line-height: 1.4; }
+.trdr-body-aux { font-family: var(--font-secondary); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.24px; }
+/* Labels — var(--font-secondary) = Inter */
+.trdr-label-lg { font-family: var(--font-secondary); font-size: 16px; font-weight: 600; line-height: 1.4; }
+.trdr-label-l2 { font-family: var(--font-secondary); font-size: 16px; font-weight: 600; line-height: 1.4; }
+.trdr-label-l3 { font-family: var(--font-secondary); font-size: 14px; font-weight: 600; line-height: 1.4; }
+/* Mono — var(--font-mono) = Roboto Mono */
+.trdr-mono { font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.04em; }
+```
+Update DS_PROGRESS.md: `- [x] components.css — [path] ([datetime])`
+---
+## Step 3 — Update global CSS
+Find the main global CSS file and add at the very top:
+```css
+@import './tokens.css';
+@import './components.css';
+```
+Adjust relative path. Warn developer if naming conflicts exist.
+Update DS_PROGRESS.md: `- [x] @import — [global-css-file] ([datetime])`
+---
+## Step 4 — Create CLAUDE.md
+Read `<skill-dir>/templates/claude-md.md` for the template.
+Generate CLAUDE.md at project root with:
+- DS rules reference
+- Token files location
+- Quick reference table (most used tokens)
+- Implemented components list (from index.json)
+- Pending stubs count
+- Icon rules, logo rules, inline style rules
+- MUI section (if `stylingMode === 'mui'`)
+Update DS_PROGRESS.md: `- [x] CLAUDE.md ([datetime])`
+---
+## Step 5 — MUI theme (only when `stylingMode === 'mui'`)
+**Step 5a — Ensure tokens.css is imported** (done in Step 3).
+**Step 5b — Create/update MUI theme file:**
+If `themeFilePath` exists: READ entire file, preserve non-DS customizations.
+If not: create at `src/theme.ts`.
+Generate theme with DS token references. Read `<skill-dir>/data/mappings.json` for the palette/typography/shape mapping tables.
+Key mappings:
+- `palette.primary.main` → `'var(--action-brand-default)'`
+- `palette.background.default` → `'var(--bg-primary)'`
+- `palette.text.primary` → `'var(--content-primary)'`
+- `typography.fontFamily` → `'var(--font-secondary)'`
+- `typography.h1-h6` → `'var(--font-primary)'` with correct sizes
+- `shape.borderRadius` → `8` (numeric, maps to --radius-md)
+**MUI + CSS var() caveat:**
+- MUI v6+: add `cssVariables: true` to `createTheme()`
+- MUI v5/v7 without cssVariables: provide ALL palette variants explicitly
+Update DS_PROGRESS.md: `- [x] MUI theme — [themeFilePath] ([datetime])`
+---
+## Completion
+Update DS_PROGRESS.md: `Sub-fase A: Foundation — COMPLETE`
+Output:
+```
+Sub-fase A completa — tokens.css, components.css, CLAUDE.md e @import criados.
+[If MUI: + MUI theme criado/atualizado.]
+Proximo: Sub-fase B — Violations ([N] arquivos em [M] lotes)
+- "continuar" / "continue" — iniciar Sub-fase B
+- "parar" / "stop" — salvar progresso e parar
+- "nao funcionou" / "report" — reportar problema
+```
+**STOP. Wait for reply.**
+---
+## Execution Log
+After EVERY file creation or modification, append to DS_PROGRESS.md `## Execution Log`:
+```
+| [ISO datetime] | A | [CREATE/MODIFY] | [file path] | [details] |
+```

package/plugins/trdr-design-system/skills/trdr-ds/phases/violations.md ADDED Viewed

@@ -0,0 +1,183 @@
+# Sub-fase B: Violations
+> **When to load this file:** During violation sprints, or when invoked with `/trdr-ds violations`.
+> **Prerequisites:** `DS_ANALYSIS.md` + `DS_PROGRESS.md` must exist. Sub-fase A must be COMPLETE.
+> **Also load:** `data/mappings.json` — contains all color/font/spacing/rgba/gradient mapping tables.
+> **Output:** Modified project files with violations replaced by DS tokens.
+---
+## Before starting
+1. Read `SPRINT_PLAN.md` — find current sprint (first PENDING or IN_PROGRESS)
+2. Read `DS_ANALYSIS.md` — ONLY the `## By File` entries for files in this sprint's scope
+3. Read `DS_PROGRESS.md` — current batch status
+4. Read `<skill-dir>/data/mappings.json` — load mapping tables
+5. Update DS_PROGRESS.md: set `Sub-fase B: Violations — IN_PROGRESS`
+**NEVER read the entire DS_ANALYSIS.md.** Only read violations for the files listed in the current sprint.
+---
+## Batch Processing
+Process one batch at a time. Batch assignments from DS_ANALYSIS.md Execution Plan. Max [batch_size] files per batch (default: 5).
+For each PENDING batch in DS_PROGRESS.md:
+1. Update DS_PROGRESS.md: batch → `IN_PROGRESS`
+2. For each file in the batch:
+   - Read the file
+   - Read its violations from DS_ANALYSIS.md
+   - Apply all fixes using mapping tables from `data/mappings.json`
+   - Count violations fixed
+3. Update DS_PROGRESS.md: batch → `COMPLETED` with detail table
+4. Append to Execution Log
+5. Output batch summary
+If more batches PENDING:
+```
+Lote [N] concluido — [folder/] ([files] arquivos, [fixes] violacoes corrigidas)
+Progresso: [done]/[total] lotes | [fixed] violacoes corrigidas
+Proximo: Lote [N+1] — [folder/] ([files] arquivos)
+- "continuar" — proximo lote
+- "pular [pasta]" — skip this folder
+- "parar" — salvar e parar (resume: /trdr-ds resume)
+- "tudo" / "all" — processar todos sem pausar
+- "nao funcionou" / "report" — reportar problema
+```
+**STOP. Wait for reply.**
+---
+## Violation Fix Rules
+For each violation category, apply the fix using the mapping tables in `data/mappings.json`. The key rules:
+### Category A — Hardcoded colors
+Look up the hex value in `mappings.json → colors`. Use property context:
+- `background-color` → bg/surface token
+- `color` → content token
+- `border-color` → border token
+- `accent-color` → action token
+### Category A* — SVG attribute colors
+SVG attributes do NOT support `var()`. Fix:
+- Single-color icon: `stroke="currentColor"` / `fill="currentColor"` + CSS class
+- Multi-tone: replace as Category J (inline SVG → icon library)
+- NEVER write `stroke="var(--token)"`
+### Category B — Hardcoded font-family
+Look up in `mappings.json → fonts`. System font fallbacks are removed (token defines the full stack).
+### Category C — Hardcoded spacing
+Look up in `mappings.json → spacing`. Multi-value shorthands: replace each value independently.
+- Values not in mapping (48px, 64px, 96px): **keep as-is**, flag in DS_MIGRATION.md
+- Do NOT invent tokens (no `--spacing-4xl`)
+### Category D — Primitive token usage
+Replace `var(--color-*)` and `var(--space-*)` with semantic equivalents.
+### Category F — Hardcoded rgba
+Look up in `mappings.json → rgba`. Sub-cases:
+- `rgba(0,0,0,*)` box-shadow: flag (no DS shadow token)
+- `rgba(255,255,255,0.03-0.08)`: `var(--border-subtle)` if exists
+- `rgba(255,255,255,0.10-0.20)`: `var(--surface-hover)` if exists
+- `rgba(255,255,255,.29)`: `var(--bg-overlay)`
+- Brand alpha: `var(--surface-brand)` etc.
+### Category G — Custom gradients
+Look up in `mappings.json → gradients`. Known tokens:
+- `--gradient-text-brand`: cyan→bright-cyan horizontal
+- `--gradient-bg-hero`: dark vertical fade
+- `--gradient-bg-fade`: surface to transparent
+Non-matching: flag in DS_MIGRATION.md.
+### Category H — Hardcoded font-size
+Look up in `mappings.json → fontSizes`. Two-part fix:
+**Part 1 — CSS file:** Remove font-family, font-size, font-weight, line-height (DS class provides these). Keep color, margin, padding.
+**Part 2 — HTML/JSX/Vue file:** Add DS class to the element.
+- plain-css/tailwind: `class="hero-title trdr-h2"`
+- React: `className="hero-title trdr-h2"`
+- css-modules: `composes: trdr-h2 from global;` in .module.css
+- CSS Modules local composition: add `composes` only to the BASE class, not inheriting classes
+**Exception for global selectors:** `body {}`, `html {}`, `:root {}` — REMOVE font-size entirely, do NOT add DS class to body/html.
+### Category I — Inline styles
+Decision tree:
+1. Dynamic image URL → keep
+2. CSS custom property → keep
+3. animation-delay → convert to `style="--delay: Xs"` + CSS var
+4. background-size alongside background-image → move to CSS
+5. Design token value → create CSS class with token, add class to element
+**Conditional/ternary styles:** Create state CSS classes (active/inactive) with semantic tokens. Replace `style={{}}` with `className={condition ? 'cls-a' : 'cls-b'}`.
+**Trading up/down ternary:** Use `--context-trading-up/down`, NOT `--content-success/error`.
+### Category I.2 — Dynamic DOM style assignment
+- CASE 1 (hover): Convert to CSS `:hover` rule. Remove onMouseEnter/onMouseLeave handlers.
+- CASE 2 (state-driven): Replace hardcoded value with `var(--token)`.
+- Priority: always prefer CASE 1.
+### Categories L, M, N — MUI-only
+**L (theme file):** Replace hardcoded values with `'var(--token)'`. Process in FIRST violation batch.
+**M (sx props):** Replace hardcoded colors/spacing/fonts/radius with token references.
+- Keep theme references as-is (theme already has DS tokens)
+- Keep layout-only sx (display, flex, grid, position)
+- Conditional sx: replace both branches
+**N (styled() calls):** Replace hardcoded values with `'var(--token)'`. Preserve theme-based logic.
+### Tailwind arbitrary values (when `stylingMode: tailwind`)
+Pattern: `bg-[#hex]`, `text-[#hex]`, `border-[#hex]` etc.
+Fix priority:
+1. DS class exists → replace with DS class
+2. No DS class, color maps to token → `bg-[var(--bg-tertiary)]`
+3. No token match → flag in DS_MIGRATION.md
+---
+## Do NOT replace
+- Hex in binary image files
+- SVG external files (flag only)
+- Values in commented-out code
+**All other values MUST be replaced or flagged.**
+---
+## Completion
+When ALL batches are COMPLETED/SKIPPED:
+Update DS_PROGRESS.md: `Sub-fase B: Violations — COMPLETE`
+```
+Sub-fase B completa — [total_fixed] violacoes corrigidas em [total_files] arquivos.
+Proximo: Sub-fase C — Components ([N] candidatos)
+- "continuar" — iniciar Sub-fase C
+- "parar" — salvar e parar
+- "nao funcionou" / "report" — reportar problema
+```
+**STOP. Wait for reply.**
+---
+## Execution Log
+After EVERY file modification, append to DS_PROGRESS.md `## Execution Log`:
+```
+| [ISO datetime] | B | MODIFY | [file path] | [N] violations fixed: A([n]), C([n]), ... |
+```
+Add unfixable patterns to `## Padroes Sem Token` section.

package/plugins/trdr-design-system/skills/trdr-ds/templates/claude-md.md ADDED Viewed

@@ -0,0 +1,88 @@
+# Template: CLAUDE.md (project root)
+> Generate at project root during Sub-fase A (Step 4).
+> Replace all `[bracketed]` values with actual data from catalog + analysis.
+```markdown
+# [Project Name] — Context for Claude Code
+## Design System
+This project uses the TRDR Design System.
+Reference Hub: https://trdr.mrocontent.com.br
+Local catalog: TRDR DS v[catalog-version] ([implemented]/[total] components)
+## Absolute Rules (never break these)
+1. NEVER use primitive tokens directly (--color-*, --space-*) — always use semantic tokens
+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 (#005266) for filled buttons
+5. Fonts: --font-primary = JetBrains Mono (headings) | --font-secondary = Inter (body) | --font-mono = Roboto Mono (numbers)
+6. Spacing: always var(--spacing-xs/sm/md/lg/xl/2xl/3xl) — never hardcoded px
+7. Border radius: always var(--radius-sm/md/lg/full) — never hardcoded px
+8. Text styles: use .trdr-h1/.../h7, .trdr-body-b1/.../b5, .trdr-label-l2/l3 — never raw font-size px
+9. No colors outside the DS anywhere — rgba(), inline gradients, hardcoded hex all require a semantic token
+## 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 |
+| Brand (text/icon) | --content-brand | #00A8CC |
+| Primary button | --action-brand-inverse-default | #005266 |
+| Border | --border-default | #4A4A4A |
+| Focus ring | --border-focus | #00D4FF |
+| Success | --content-success | #4FE290 |
+| Error | --content-error | #F34F45 |
+| Warning | --content-warning | #FFCC40 |
+## Implemented components
+[Generate from catalog: slug — figmaId — Hub URL]
+## Pending components (stubs)
+[N] components have no canonical code yet. See MISSING_COMPONENTS.md.
+## Layer hierarchy
+bg.primary (base) → bg.secondary/tertiary (content areas) → surface.* (cards, panels)
+→ interactive components → overlays/modals/tooltips
+## Inline Styles
+- NUNCA usar style="" ou style={{}} com propriedades de design
+- Excecao: background-image: url(...) para imagens dinamicas
+- Excecao: style="--css-var: valor" para CSS custom properties
+- Para animation-delay: style="--delay: Xs" + CSS animation-delay: var(--delay, 0s)
+## Icones
+- HTML/Vue: <span class="material-icons mi-sm">nome</span> via Google Fonts CDN
+- React: <NomeIcon /> via @mui/icons-material
+- Cor: SEMPRE via classe CSS com token DS (.icon-brand, .icon-success, .icon-dim)
+- Tamanho: .mi-2xs(12px), .mi-xs(14px), .mi-sm(16px), default(20px), .mi-lg(24px), .mi-xl(28px), .mi-2xl(32px)
+- NUNCA usar <svg> inline para icones
+- NUNCA usar style="" para cor de icones
+## Logo
+- HTML: <img src="logo-trdr.svg" alt="TRDR" height="24">
+- Next.js: <Image src="/logo-trdr.svg" alt="TRDR" width={105} height={41} />
+- NUNCA usar texto ("TRDR" em <span>) como logo
+```
+## MUI Section (add only when stylingMode === 'mui')
+```markdown
+## MUI Theme Integration
+This project uses Material UI with TRDR DS tokens integrated via the theme.
+### Rules
+1. NEVER hardcode colors in palette, sx props, or styleOverrides — always use var(--token)
+2. Theme file ([themeFilePath]) is the single source for MUI component styling
+3. New MUI components: check for styleOverride in theme. If none, add one with DS tokens.
+4. sx props: acceptable for layout (padding, margin, display, flex) with DS spacing tokens. NOT for colors/fonts/borders.
+5. styled(MuiComponent): use 'var(--token)' for all design values
+6. Typography: use MUI variants (h1-h6, body1, body2) — mapped to TRDR DS text styles in theme
+7. tokens.css is the source of truth — theme references tokens via var(--token) strings
+```