trdr-ds-install 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trdr-ds-install",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Installs the TRDR Design System skill for Claude Code",
   "bin": {
     "trdr-ds-install": "./bin/install.js"

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

@@ -89,6 +89,42 @@ Flag any gradient that doesn't reference a TRDR gradient token (`var(--gradient-
 **H — Hardcoded font-size in px** (should use .trdr-h* / .trdr-body-* text style classes):
 Search: `font-size:\s*\d+px` in CSS/SCSS files (skip tokens.css itself)
 
+### Step 3.5 — Detect component replacement candidates
+
+Scan the project for UI patterns that indicate elements replaceable by TRDR implemented components.
+
+**Scope:** `*.tsx, *.jsx, *.ts, *.js, *.html, *.vue` — exclude `node_modules/, .next/, dist/, build/, out/`.
+
+Use Grep (not Bash grep) to search for the patterns below. Group patterns from the same slug into a single call.
+
+**Pattern table per TRDR implemented component:**
+
+| Slug | Search patterns |
+|------|----------------|
+| `button` | `<button`, `<Button`, `type="submit"`, `type="button"`, `role="button"` |
+| `text-input` | `<input`, `<TextInput`, `<textarea`, `type="text"`, `type="email"`, `type="password"`, `type="search"` |
+| `checkbox` | `type="checkbox"`, `<Checkbox`, `\.checkbox` |
+| `radio-button` | `type="radio"`, `<RadioButton`, `<Radio[^B]` |
+| `switch` | `<Switch`, `role="switch"`, `\.toggle`, `\.switch` |
+| `dropdown` | `<select`, `<Select`, `<Dropdown`, `role="listbox"`, `role="combobox"` |
+| `combo-input` | `<ComboInput`, `combo.{0,10}input` |
+| `tooltip` | `<Tooltip`, `role="tooltip"`, `data-tooltip` |
+| `abas` | `<Tabs`, `role="tablist"`, `role="tab"`, `\.tabs` |
+| `segmented-control` | `<SegmentedControl`, `\.segmented`, `segment.{0,15}control` |
+| `sub-menu-item` | `<MenuItem`, `<SubMenu`, `\.menu-item`, `\.submenu` |
+| `card` | `<Card`, `\.card`, `<article` |
+| `boleta` | `<Boleta`, `boleta` |
+| `janela` | `<Janela`, `trading.{0,10}window` |
+
+**Rules:**
+- For each slug, count the distinct files that matched (not total lines) — one file counts as one occurrence.
+- Discard matches in test files (`*.test.*`, `*.spec.*`) — those don't count as UI usage.
+- Store results as a list of `{ slug, files: ["path:line", ...] }` — used in Step 5 and Phase 2 Step 6.
+- If a slug has zero matches, omit it from the replacement candidates list.
+- `title=""` attribute is too noisy — do NOT use it for tooltip detection; prefer `<Tooltip` / `role="tooltip"` / `data-tooltip`.
+
+**Output:** `replacementCandidates[]` — passed to Step 5 template and Phase 2 Step 6.
+
 ### Step 4 — Load component catalog (offline-first)
 
 Read the local snapshot from the skill directory:
@@ -180,13 +216,21 @@ Output the following report and **do not proceed** until the developer explicitl
 | Hardcoded font-size | N | `font-size: 22px` in card.css:99 |
 
 ### TRDR COMPONENTS REFERENCED IN PROJECT:
-[Cross-reference detected UI patterns with the catalog]
-
-| Slug | Status | Project usage |
-|------|--------|---------------|
-| button | ✅ implemented | 6 occurrences in Button.tsx, Header.tsx |
-| modal | ⚠️ stub (figmaId 1234:5) | 2 occurrences in Modal.tsx — will receive token guidance, not full code |
-| (other) | ... | ... |
+(Candidatos detectados no Step 3.5 — substituição recomendada)
+
+| Componente | Status no catálogo | Arquivos detectados |
+|------------|--------------------|---------------------|
+[For each entry in replacementCandidates[], look up the slug in the loaded catalog:]
+[If c.implemented === true:]
+| [c.name] | ✅ implementado | [list of file:line from Step 3.5] |
+[If c.implemented === false:]
+| [c.name] | ⚠️ stub (figmaId [c.figmaId]) | [list of file:line] — receberá banner comment |
+[If replacementCandidates is empty:]
+| — | Nenhum candidato detectado | — |
+
+> **Implementados:** o CSS já estará em `components.css` após a Fase 2 — o dev só precisa trocar as classes.
+> **Stubs:** receberão banner comment com tokens recomendados + entrada em `MISSING_COMPONENTS.md`.
+> **Não listados aqui:** componentes específicos da TRDR (boleta, janela) — verificar manualmente se o projeto os usa.
 
 ### SCOPE ESTIMATE: [Small / Medium / Large]
 Small = <10 violations | Medium = 10–50 | Large = 50+
@@ -424,7 +468,7 @@ For each violation found in Phase 1, apply the semantic token replacement.
 
 ### Step 6 — Apply component code (smart fallback)
 
-For each detected UI pattern in the project that matches a TRDR component slug:
+Use the `replacementCandidates[]` list built in Phase 1 Step 3.5. For each entry:
 
 1. **Look up the component** in the loaded catalog by slug (or by category, if slug is ambiguous).
 2. **If `c.implemented === true`** and `c.code.css` exists: