Anti-Hallucination Requirement
Read: .claude/skills/shared/anti-hallucination-protocol.md
Read: references/confidence-scoring-guide.md
Every claimed match MUST have grep-verified evidence. HALT if confidence <85% — show candidates, never fabricate.
Workflow
Step 1: Load Component Index
Full scan (rebuild entire index):
node .claude/skills/find-component/scripts/generate-component-index.cjs
Incremental (only re-scan git-changed component files):
node .claude/skills/find-component/scripts/generate-component-index.cjs --git-changes
Then read:
Read: docs/component-index.json
When to use which mode:
-
--git-changes — fast update after editing components (merges into existing index)
-
No flag — full rebuild when index missing, stale, or after major refactors
-
Fallback: live grep if index unavailable
Step 2: Extract Visual Signals from Screenshot
Read: references/visual-signal-extraction.md
Read the screenshot. Extract 6 signal types (text, BEM, Material, layout, color, data shape). List each signal with what you ACTUALLY see — never infer.
Step 3: Bottom-Up Component Search
Read: references/component-matching-protocol.md
-
Reusable components first — match signals against platform-core/ and libs/ components
-
Domain components — match against shared/components/
-
Page component — find parent that composes matched children
-
If no reusable match → search page templates directly
Step 4: Score Confidence
Read: references/confidence-scoring-guide.md
-
≥85% (≥2 grep-verified signals) → report as confirmed match
-
<85% → show top candidates with per-signal breakdown, ask user
Step 5: Build Component Relationship Graph
Output Mermaid diagram:
graph TD A[PageComponent] --> B[ChildComponent1] A --> C[ChildComponent2] B --> D[SharedComponent]
Verify each edge by reading actual template HTML. Never infer from imports alone.
Step 6: Report
Output: matched components, file paths (TS/HTML/SCSS), confidence %, Mermaid graph, and any unresolved ambiguities.
Integration — Pre-Scout Activation (IMPORTANT)
When a screenshot is pasted with UI-related intent (fix, update, find, debug), this skill runs BEFORE /scout in any workflow. It narrows the search scope so scout is targeted.
Auto-activation priority: /find-component → /scout → remaining workflow steps
Applies to: bugfix , feature , refactor , fix-ui , verification workflows. Output (matched file paths + component graph) feeds directly into scout/investigate steps.