@sarjallab09/figma-intelligence 1.1.0 → 1.2.0

package/figma-bridge-plugin/knowledge-hub/uspec-references/structure-spec.md

@@ -1,165 +0,0 @@
-# Structure Spec Reference
-
-Generate dimensional properties documentation — spacing, padding, heights, widths, and gaps across size and density variants.
-
-## What This Spec Produces
-
-1. **Dimension tables** — Organized by component section (container, leading, labels, trailing)
-2. **Size/density columns** — Values shown across all variants so engineers see how dimensions change
-3. **Token references** — Values linked to design tokens when bound to variables
-4. **Composition mapping** — How parent sizes map to sub-component sizes
-
----
-
-## Step-by-Step Pipeline
-
-### Phase 1: Identify Dimensional Axes
-
-Determine which variant axes and variable modes affect dimensions:
-
-**Common dimensional axes:**
-- **Size**: Large, Medium, Small, XSmall → changes heights, padding, icon sizes, font sizes
-- **Density**: Compact, Default, Spacious → changes vertical padding, gaps
-- **Shape**: Rounded, Square, Pill → changes border-radius (not spacing, but sometimes affects padding)
-
-Read from two sources:
-1. Variant axes from component set variants
-2. Variable mode collections (density, size often come from variable modes)
-
-### Phase 2: Extract Measurements (Deterministic)
-
-For each dimensional variant combination, measure the component:
-
-```
-// For each size/density variant:
-get_node_dimensions(instance_id) → {
-  width, height,
-  paddingTop, paddingBottom, paddingLeft, paddingRight,
-  itemSpacing,        // gap between children in auto-layout
-  counterAxisSpacing, // gap in the cross-axis (if wrap)
-  borderRadius,
-  strokeWeight
-}
-```
-
-Traverse child layers and measure each section:
-```
-Container
-├── Leading Content → width, height, gap from label section
-│   └── Icon/Avatar → width, height
-├── Label Section → vertical layout
-│   ├── Primary Label → fontSize, lineHeight
-│   ├── Secondary Label → fontSize, lineHeight
-│   └── Gap between labels
-├── Trailing Content → width, height
-│   └── Icon/Button → width, height
-└── Internal gaps between all sections
-```
-
-**Token resolution**: For each measured value, check if it's bound to a variable:
-```
-get_bound_variables(node_id, "paddingLeft") → "spacing/component/md" (16)
-get_bound_variables(node_id, "height") → "sizing/button/lg" (56)
-```
-
-Report as: `token-name (resolved-value)` e.g., `spacing-md (16)` or just the raw number if hardcoded.
-
-### Phase 3: Plan Documentation Sections (AI Reasoning)
-
-Group measurements into logical sections based on the component's structure:
-
-| Section | What to Document |
-|---------|-----------------|
-| **Container** | Height, min-width, max-width, border-radius, stroke-weight |
-| **Padding** | Top, bottom, left, right (or horizontal/vertical if symmetric) |
-| **Internal Gaps** | Spacing between leading→labels, labels→trailing, label→sublabel |
-| **Leading Content** | Icon/avatar dimensions, gap from content |
-| **Labels** | Font sizes, line heights (note: these may go in a Typography spec instead) |
-| **Trailing Content** | Button/icon dimensions, gap from content |
-| **Touch Target** | Minimum touch area if different from visual bounds |
-
-**Section planning rules:**
-- Only create sections for parts that exist in the component
-- If a section has identical values across all variants, collapse it into a single-column note
-- If values vary across density but not size (or vice versa), use the varying axis as columns
-- Add a "Design Intent" note for non-obvious values (e.g., "Min-width ensures the button is tappable even with a single character label")
-
-### Phase 4: Render the Documentation Frame
-
-```
-Main Frame (1440px wide, auto-layout vertical, padding 60px, gap 40px)
-├── Header Section
-│   ├── Title: "[Component Name] — Structure" (24px bold)
-│   └── Subtitle: "Dimensions, spacing, and padding reference" (14px, #6B7280)
-│
-├── Section: "Container"
-│   ├── Section Header (18px bold)
-│   └── Table:
-│       Header: Property | Large | Medium | Small | XSmall
-│       Row: Height | sizing-lg (56) | sizing-md (48) | sizing-sm (40) | sizing-xs (32)
-│       Row: Border Radius | radius-md (8) | radius-md (8) | radius-sm (6) | radius-sm (6)
-│       Row: Stroke | 1 | 1 | 1 | 1
-│
-├── Section: "Padding"
-│   └── Table:
-│       Header: Property | Large | Medium | Small | XSmall
-│       Row: Horizontal | spacing-lg (24) | spacing-md (16) | spacing-sm (12) | spacing-xs (8)
-│       Row: Vertical | spacing-md (16) | spacing-sm (12) | spacing-xs (8) | spacing-2xs (4)
-│
-├── Section: "Leading Content"
-│   └── Table:
-│       Header: Property | Large | Medium | Small | XSmall
-│       Row: Icon Size | 24 | 24 | 20 | 16
-│       Row: Gap to Labels | spacing-sm (12) | spacing-sm (12) | spacing-xs (8) | spacing-xs (8)
-│
-├── Section: "Composition Mapping" (if component contains sub-components with their own sizes)
-│   └── Table:
-│       Header: Parent Size | Icon Size | Badge Size
-│       Row: Large | Medium | Small
-│       Row: Medium | Small | XSmall
-│       Row: Small | XSmall | —
-│
-└── Notes Section (optional)
-    └── Design intent notes, edge cases, responsive behavior
-```
-
-**Table formatting for structure specs:**
-- Values with tokens: Show as `token-name (value)` e.g., `spacing-md (16)`
-- Hardcoded values: Show as plain number e.g., `16`
-- Units: Always in pixels (px), but omit the "px" suffix in tables for cleanliness
-- Identical values across columns: Show the value (don't use "—" for same values in structure specs; engineers need explicit numbers)
-
-### Phase 5: Validate
-
-Checklist:
-- [ ] All size/density variants are represented as columns
-- [ ] Container dimensions are documented (height, width constraints, border-radius)
-- [ ] Padding values are documented (all four sides or horizontal/vertical)
-- [ ] Internal gaps between sections are documented
-- [ ] Sub-component dimensions are documented
-- [ ] Token names match actual Figma variable names
-- [ ] Resolved values match actual measured pixel values
-- [ ] Composition mapping exists for nested size relationships
-
----
-
-## Density vs. Size
-
-**Size** changes the overall scale: heights, icon dimensions, padding, font sizes, and minimum widths all change together.
-
-**Density** changes only vertical rhythm: vertical padding and gaps change, but heights, icon sizes, and horizontal values stay the same.
-
-If both axes exist, render size as primary columns and density as separate table sections:
-```
-## Container — Default Density
-Property | Large | Medium | Small
-Height   | 56    | 48     | 40
-
-## Container — Compact Density
-Property | Large | Medium | Small
-Height   | 48    | 40     | 32
-
-## Container — Spacious Density
-Property | Large | Medium | Small
-Height   | 64    | 56     | 48
-```

package/figma-bridge-plugin/perplexity-runner.js

@@ -1,188 +0,0 @@
-#!/usr/bin/env node
-/**
- * perplexity-runner.js — Streams a chat response from the Perplexity API.
- * Emits the same event shape as chat-runner.js so bridge-relay can use either.
- *
- * Perplexity is a research-only provider (chat mode only, no Figma tool execution).
- */
-
-const https = require("https");
-const { EventEmitter } = require("events");
-
-// Perplexity model IDs — all are search-grounded
-const MODEL_MAP = {
-  "sonar":               "sonar",
-  "sonar-pro":           "sonar-pro",
-  "sonar-reasoning":     "sonar-reasoning",
-  "sonar-reasoning-pro": "sonar-reasoning-pro",
-};
-
-const SYSTEM_PROMPT = `You are a research assistant embedded in a Figma design plugin. Help users research design patterns, UI/UX best practices, accessibility guidelines, competitive analysis, typography, color theory, design systems, and any other topics. Provide thorough, well-sourced answers. Be concise but comprehensive.`;
-
-/**
- * Convert the plugin's conversation array to OpenAI-format messages.
- */
-function buildMessages(systemPrompt, conversation, userMessage) {
-  const messages = [{ role: "system", content: systemPrompt }];
-
-  if (Array.isArray(conversation)) {
-    for (const entry of conversation) {
-      if (!entry || !entry.text) continue;
-      if (entry.role === "user" || entry.role === "assistant") {
-        messages.push({ role: entry.role, content: entry.text });
-      }
-    }
-  }
-
-  messages.push({ role: "user", content: userMessage });
-  return messages;
-}
-
-/**
- * Spawn a Perplexity streaming chat request.
- * Returns an EventEmitter-like object with a .kill() method.
- */
-function runPerplexity({ message, attachments, conversation, requestId, apiKey, model, onEvent }) {
-  const emitter = new EventEmitter();
-
-  // Process text attachments inline
-  let extraText = "";
-  for (const att of (attachments || [])) {
-    if (!att?.data) continue;
-    if (att.isImage) {
-      const label = att.name || "image";
-      extraText += `\n\n[Image attached: ${label}] (image analysis not available with Perplexity)`;
-    } else {
-      const label = att.name ? `\n\n--- Attached: ${att.name} ---\n` : "\n\n--- Attached file ---\n";
-      extraText += label + att.data;
-    }
-  }
-
-  const userText = ((message || "").trim() || "Help me with my research.") + extraText;
-  const resolvedModel = MODEL_MAP[model] || "sonar-pro";
-  const messages = buildMessages(SYSTEM_PROMPT, conversation, userText);
-
-  const bodyObj = {
-    model: resolvedModel,
-    stream: true,
-    messages,
-  };
-  const body = JSON.stringify(bodyObj);
-
-  let aborted = false;
-  let req = null;
-
-  // Emit phase indicator
-  onEvent({ type: "phase_start", id: requestId, phase: `Researching · ${resolvedModel}` });
-
-  function abort() {
-    aborted = true;
-    if (req) { try { req.destroy(); } catch {} }
-    emitter.emit("close", null);
-  }
-
-  try {
-    req = https.request(
-      {
-        hostname: "api.perplexity.ai",
-        path: "/chat/completions",
-        method: "POST",
-        headers: {
-          "Content-Type":   "application/json",
-          "Authorization":  `Bearer ${apiKey}`,
-          "Content-Length":  Buffer.byteLength(body),
-        },
-      },
-      (res) => {
-        if (res.statusCode !== 200) {
-          let errBody = "";
-          res.on("data", (d) => { errBody += d.toString(); });
-          res.on("end", () => {
-            let msg = errBody;
-            try { msg = JSON.parse(errBody).error?.message || errBody; } catch {}
-            onEvent({ type: "error", id: requestId, error: `Perplexity: ${msg}` });
-            onEvent({ type: "done",  id: requestId, fullText: "" });
-            emitter.emit("close", 1);
-          });
-          return;
-        }
-
-        let buffer = "";
-        let fullText = "";
-        let previousText = "";
-        let citations = null;
-
-        res.on("data", (chunk) => {
-          if (aborted) return;
-          buffer += chunk.toString();
-          const lines = buffer.split("\n");
-          buffer = lines.pop() || "";
-
-          for (const line of lines) {
-            if (!line.startsWith("data: ")) continue;
-            const data = line.slice(6).trim();
-
-            // OpenAI-compatible sentinel
-            if (data === "[DONE]") continue;
-
-            try {
-              const parsed = JSON.parse(data);
-
-              // Extract citations if present (usually in the final chunk)
-              if (parsed.citations && Array.isArray(parsed.citations)) {
-                citations = parsed.citations;
-              }
-
-              // Perplexity sends cumulative content — diff to get delta
-              const content = parsed.choices?.[0]?.delta?.content;
-              if (content) {
-                fullText += content;
-                onEvent({ type: "text_delta", id: requestId, delta: content });
-              }
-            } catch {}
-          }
-        });
-
-        res.on("end", () => {
-          if (!aborted) {
-            // Emit citations if present
-            if (citations && citations.length > 0) {
-              onEvent({ type: "citations", id: requestId, urls: citations });
-            }
-            onEvent({ type: "done", id: requestId, fullText });
-          }
-          emitter.emit("close", 0);
-        });
-
-        res.on("error", (err) => {
-          if (!aborted) {
-            onEvent({ type: "error", id: requestId, error: `Perplexity stream error: ${err.message}` });
-            onEvent({ type: "done",  id: requestId, fullText: "" });
-          }
-          emitter.emit("close", 1);
-        });
-      }
-    );
-
-    req.on("error", (err) => {
-      if (!aborted) {
-        onEvent({ type: "error", id: requestId, error: `Perplexity connection error: ${err.message}` });
-        onEvent({ type: "done",  id: requestId, fullText: "" });
-      }
-      emitter.emit("close", 1);
-    });
-
-    req.write(body);
-    req.end();
-
-  } catch (err) {
-    onEvent({ type: "error", id: requestId, error: `Perplexity error: ${err.message}` });
-    onEvent({ type: "done",  id: requestId, fullText: "" });
-    emitter.emit("close", 1);
-  }
-
-  emitter.kill = abort;
-  return emitter;
-}
-
-module.exports = { runPerplexity };

package/figma-bridge-plugin/references/SKILL.md

@@ -1,178 +0,0 @@
----
-name: component-doc-generator
-description: >
-  Generate comprehensive design system component documentation directly in Figma.
-  Produces anatomy annotations, API specs, property exhibits, color token mapping,
-  structure/spacing specs, and accessibility (screen reader) specs — all rendered
-  as structured frames in your Figma file via Figma MCP. Use this skill whenever
-  someone asks to document a component, create component specs, generate design
-  system documentation, annotate a component's anatomy, map color tokens, document
-  spacing/structure, create accessibility specs, or produce any form of component
-  specification in Figma. Also trigger when users mention "component docs", "spec
-  pages", "design handoff docs", "anatomy markers", "API table", "property overview",
-  "color annotation", "structure spec", "screen reader spec", or "a11y spec".
-  Works with Figma Intelligence MCP via the bridge-relay.
----
-
-# Component Documentation Generator
-
-Generate production-quality design system component documentation directly in Figma — anatomy, API, properties, color tokens, structure, and screen reader specs.
-
-## Overview
-
-This skill connects to your Figma file through Figma Intelligence MCP (via the bridge-relay local server), extracts component data programmatically, applies AI reasoning for classification and semantics, and renders structured documentation frames directly in your Figma file.
-
-**The pipeline for every spec type follows the same pattern:**
-1. **Extract** — Read component layers, properties, variables, and styles from Figma via MCP
-2. **Classify & Enrich** — AI determines element roles, semantic meaning, and documentation strategy
-3. **Import Template** — Pull the documentation template from your library (or create frames from scratch)
-4. **Render** — Build the spec: fill text fields, create instances, place markers, build tables
-5. **Validate** — Capture screenshot, check completeness, fix issues (up to 3 iterations)
-
-## Prerequisites
-
-- **Figma Intelligence MCP connected** — Via the bridge-relay local server
-- **A Figma component link** — The URL to a component set or standalone component
-- **Template library** (optional but recommended) — A published Figma library with documentation templates
-
-Before running any spec, verify the Figma MCP connection by asking the agent to check Figma status or list pages.
-
-## Available Spec Types
-
-| Command | What It Generates |
-|---------|-------------------|
-| `create-anatomy` | Numbered markers on each element + attribute table with semantic notes |
-| `create-api` | Property tables with values, defaults, required/optional, configuration examples |
-| `create-property` | Visual exhibits for variant axes, boolean toggles, variable modes, child properties |
-| `create-color` | Design token mapping for every element across states and variants |
-| `create-structure` | Dimensions, spacing, padding tables across size/density variants |
-| `create-screen-reader` | VoiceOver, TalkBack, and ARIA accessibility specs per platform |
-
-## How to Invoke
-
-Paste a Figma component link and specify the spec type. Add context about the component for richer output.
-
-```
-create-anatomy https://www.figma.com/design/FILE_KEY/File-Name?node-id=XX:YY
-
-This is a text field with a leading icon, label, placeholder text, 
-helper text, and a trailing clear button. It has enabled, focused, 
-error, and disabled states.
-```
-
-**Optional destination**: Place the spec in a different file or page:
-```
-Destination: https://www.figma.com/design/OTHER_KEY/Docs?node-id=0-1
-```
-
-## Reading Reference Files
-
-Before generating any spec, read the appropriate reference file for detailed instructions:
-
-| Spec Type | Reference File |
-|-----------|---------------|
-| Anatomy | `references/anatomy-spec.md` |
-| API | `references/api-spec.md` |
-| Properties | `references/property-spec.md` |
-| Color Annotation | `references/color-spec.md` |
-| Structure | `references/structure-spec.md` |
-| Screen Reader | `references/screen-reader-spec.md` |
-
-**Always read the reference file before starting.** Each contains the exact extraction steps, classification logic, rendering instructions, and validation checklist for that spec type.
-
-## General Rendering Rules (Apply to ALL Spec Types)
-
-### Frame & Layout Standards
-- Documentation frame width: **1440px** (standard Figma doc width)
-- Use **auto-layout** for all sections (vertical, spacing 24–40px between sections)
-- Section headers: **24px bold**, body text: **14px regular**, table text: **13px**
-- Use your design system's font family if configured; fall back to Inter
-- Background: white (#FFFFFF); text: near-black (#1A1A1A)
-- Section dividers: 1px line, #E5E5E5
-
-### Marker Standards (Anatomy & Color)
-- Marker circles: **24px diameter**, fill **#D946EF** (pink/magenta), white text, 13px bold
-- Connector lines: 1px stroke, same pink color, from marker center to element edge
-- Markers numbered sequentially starting at 1
-- Place markers outside the component artwork, connected by leader lines
-
-### Table Standards
-- Header row: **#F3F4F6** background, 13px bold text
-- Body rows: alternating white / **#FAFAFA**
-- Cell padding: 8px horizontal, 6px vertical
-- Border: 1px #E5E5E5
-
-### Instance Rendering
-- When showing component instances as artwork, set them to the exact variant/state needed
-- Make hidden boolean elements visible by toggling component properties (not raw visibility)
-- Label hidden elements as "(hidden)" in tables
-
-### Validation Loop
-After rendering each spec:
-1. Capture a screenshot of the output frame
-2. Check: Are all sections present? Are markers aligned? Are tables complete?
-3. If issues found, fix them automatically
-4. Repeat up to **3 times** maximum
-5. Report completion to the user
-
-## Figma MCP Operations Reference
-
-These are the key MCP operations used across all spec types. The exact tool names depend on your MCP provider.
-
-### Reading Component Data
-```
-// Get component children and properties
-get_node_children(node_id)
-get_component_property_definitions(node_id)
-get_variant_properties(node_id)
-
-// Get styles, fills, variables
-get_node_styles(node_id)
-get_node_fills(node_id)
-get_bound_variables(node_id)
-get_variable_collection(collection_id)
-
-// Get dimensions
-get_node_dimensions(node_id)  // returns width, height, padding, gaps
-```
-
-### Writing to Figma
-```
-// Create frames and text
-create_frame(parent_id, name, width, height, layout_mode)
-create_text(parent_id, content, font_size, font_weight)
-
-// Create instances
-create_instance(component_key, parent_id)
-set_component_properties(instance_id, properties)
-
-// Drawing markers
-create_ellipse(parent_id, x, y, diameter, fill_color)
-create_line(parent_id, start_x, start_y, end_x, end_y, stroke_color)
-
-// Import from library
-import_component_by_key(template_key)
-detach_instance(instance_id)
-```
-
-### Screenshots
-```
-capture_screenshot(node_id)  // for validation
-```
-
-## Tips for Best Results
-
-1. **Use component sets** — Skills expect a component set (dashed-border container) or standalone component, not an instance
-2. **Name your layers** — Layer names become element labels. "Leading Icon" beats "Frame 47"
-3. **Describe all states** — The agent can't infer states not visible in the current frame
-4. **Mention sub-components** — If your component nests other components, describe their configuration
-5. **Specify defaults** — Tell the agent which values are the default configuration
-6. **List interactive states** — enabled, hover, pressed, disabled, focused, selected, loading
-7. **Describe variable modes** — If properties are controlled by Figma variable collections, name them
-
-## Error Handling
-
-- If MCP connection fails: Ask the user to verify their Figma MCP setup and Desktop Bridge plugin
-- If component not found: Verify the node-id in the Figma link is correct
-- If template import fails: Fall back to creating frames from scratch (no template dependency)
-- If rendering is incomplete after 3 validation attempts: Report what was completed and what needs manual adjustment

package/figma-bridge-plugin/references/anatomy-spec.md

@@ -1,159 +0,0 @@
-# Anatomy Spec Reference
-
-Generate numbered anatomy annotations with attribute tables directly in Figma.
-
-## What This Spec Produces
-
-1. **Component artwork** — A default-variant instance with all hidden elements made visible
-2. **Numbered markers** — Pink circles (24px, #D946EF) with connector lines pointing to each element
-3. **Attribute table** — 4 columns: Number, Type (instance/text/shape icon), Element Name, Semantic Notes
-4. **Per-child sections** — Nested component instances get their own markers and tables
-5. **Cross-references** — Composition table notes link to per-child sections ("See X anatomy section")
-
----
-
-## Step-by-Step Pipeline
-
-### Phase 1: Extract Component Data
-
-1. Parse the Figma link to get `file_key` and `node_id`
-2. Read the component set or standalone component:
-   ```
-   get_node(file_key, node_id)
-   get_component_property_definitions(node_id)
-   ```
-3. Get the **default variant** (first child of the component set, or the component itself if standalone)
-4. Traverse all child layers recursively and collect:
-   - `name` — Layer name
-   - `type` — INSTANCE, TEXT, RECTANGLE, ELLIPSE, VECTOR, FRAME, GROUP, LINE
-   - `visible` — Whether the element is visible in the default state
-   - `componentPropertyReferences` — Which boolean property controls this element's visibility
-   - `characters` — Text content (for TEXT nodes)
-   - `componentId` — If an INSTANCE, the component it references
-
-5. For each INSTANCE child, resolve to its source component and check if it has meaningful internal structure (more than 1 visible child layer). If yes, mark it as a **per-child candidate**.
-
-6. **Filter out utility sub-components**: Skip elements whose resolved component name matches: `Spacer`, `Divider`, `Separator`, `Gap`, `Padding`. These have no meaningful anatomy to document.
-
-### Phase 2: Classify Each Element (AI Reasoning)
-
-For each collected element, determine its **role**:
-
-| Role | Description | Example |
-|------|-------------|---------|
-| `content-element` | Displays user-facing content | Label text, avatar image |
-| `optional-slot` | Controlled by a boolean toggle, can be hidden | Leading icon, trailing button |
-| `fixed-sub-component` | Always present nested instance | Icon component, badge |
-| `structural` | Layout container, not meaningful to document | Auto-layout wrapper frame |
-| `decorative` | Visual-only, no semantic meaning | Background shape, shadow layer |
-
-**Classification rules:**
-- If element has a `componentPropertyReference` to a boolean → `optional-slot`
-- If element is an INSTANCE with ≥2 meaningful children → `fixed-sub-component` or per-child candidate
-- If element is a FRAME/GROUP with only auto-layout purpose → `structural` (skip from table)
-- If element name starts with "." or is named "Background", "Shadow", "Overlay" → `decorative` (skip)
-- Everything else → `content-element`
-
-**Write semantic notes for each non-skipped element:**
-- For optional slots: "Optional. Controlled by [boolean-name] toggle. Hidden by default." or "Visible by default."
-- For content elements: Describe the element's purpose in the component context
-- For fixed sub-components: "Fixed sub-component. See [Name] anatomy section." (if per-child exists)
-- For instance swap slots: "Swappable. Accepts [list of allowed instances]."
-
-### Phase 3: Determine Per-Child Sections
-
-A nested instance warrants its own per-child section when:
-- It has ≥3 internal child layers (not counting structural wrappers)
-- It is NOT a utility component (Spacer, Divider, etc.)
-- It has its own configurable properties (booleans, variants)
-
-For qualifying per-child instances, repeat Phase 1 and Phase 2 on the nested component.
-
-**Collapsing identical siblings**: If the same component appears N times consecutively (e.g., 5 star icons), collapse into a single row with "(xN)" suffix.
-
-### Phase 4: Make Hidden Elements Visible
-
-For the artwork instance, unhide all hidden optional elements **through component properties**:
-```
-// DO THIS (property-aware unhide):
-set_component_properties(instance_id, { "Show Leading Icon": true, "Show Badge": true })
-
-// DO NOT DO THIS (raw visibility override):
-set_visibility(child_node_id, true)  // WRONG — breaks component property binding
-```
-
-This ensures the artwork shows the complete anatomy with all optional elements visible, while maintaining proper component property bindings.
-
-### Phase 5: Render the Documentation Frame
-
-#### Create the main frame
-```
-Main Frame (1440px wide, auto-layout vertical, padding 60px, gap 40px)
-├── Header Section
-│   ├── Title: "[Component Name] — Anatomy" (24px bold)
-│   └── Subtitle: "Component structure and element inventory" (14px, #6B7280)
-├── Artwork + Markers Section (horizontal layout)
-│   ├── Component Instance (all hidden elements visible)
-│   └── Marker Layer (positioned absolutely relative to artwork)
-├── Attribute Table
-│   ├── Header Row: # | Type | Element | Notes
-│   └── Body Rows: One per non-skipped element
-├── Per-Child Section 1 (if applicable)
-│   ├── Section Header: "[Child Name] Anatomy"
-│   ├── Child Artwork + Markers
-│   └── Child Attribute Table
-└── Per-Child Section N...
-```
-
-#### Place markers
-For each element in the attribute table:
-1. Get the element's absolute position and bounds within the artwork
-2. Create a marker circle (24px, #D946EF fill, white number text)
-3. Position the marker **outside** the component artwork (to the left, right, top, or bottom — whichever has the most space)
-4. Draw a 1px connector line from the marker center to the nearest edge of the element
-5. Avoid overlapping markers — distribute them evenly with ≥8px gaps
-
-#### Build the attribute table
-| Column | Width | Content |
-|--------|-------|---------|
-| # | 48px | Sequential number matching the marker |
-| Type | 48px | Icon indicator: 🔲 for instance, 📝 for text, ⬡ for shape/vector |
-| Element | 200px | Layer name. Append "(hidden)" if element is not visible in default state |
-| Notes | Fill remaining | Semantic notes from Phase 2 classification |
-
-### Phase 6: Validate
-
-1. Capture a screenshot of the completed frame
-2. Check against this checklist:
-   - [ ] All non-structural, non-decorative elements have a marker
-   - [ ] Marker numbers match table row numbers
-   - [ ] No markers overlap each other
-   - [ ] Connector lines point to the correct elements
-   - [ ] Hidden elements are labeled "(hidden)" in the table
-   - [ ] Per-child sections exist for qualifying nested instances
-   - [ ] Cross-references in the main table link to per-child sections
-3. Fix any issues found
-4. Repeat up to 3 times
-
----
-
-## Example Output Structure
-
-For a **Text Field** component with: Container, Leading Icon (optional), Label, Input Area, Placeholder Text, Helper Text (optional), Trailing Clear Button (optional):
-
-**Main Attribute Table:**
-| # | Type | Element | Notes |
-|---|------|---------|-------|
-| 1 | 🔲 | Container | Root frame. Auto-layout horizontal with nested vertical sections. |
-| 2 | 🔲 | Leading Icon (hidden) | Optional. Controlled by "Show Leading Icon" toggle. Hidden by default. |
-| 3 | 📝 | Label | Required. Displays the field's label text above the input area. |
-| 4 | 📝 | Input Text | Content element. Displays user-entered text or placeholder. |
-| 5 | 📝 | Placeholder Text | Content element. Visible when Input Text is empty. |
-| 6 | 📝 | Helper Text (hidden) | Optional. Controlled by "Show Helper" toggle. Provides guidance below the input. |
-| 7 | 🔲 | Clear Button (hidden) | Optional. Controlled by "Show Clear" toggle. See Clear Button anatomy section. |
-
-**Per-child: Clear Button Anatomy:**
-| # | Type | Element | Notes |
-|---|------|---------|-------|
-| 1 | 🔲 | Icon | Fixed sub-component. Displays the clear/close icon. |
-| 2 | ⬡ | Hit Area | Touch target overlay. 44x44px minimum for accessibility compliance. |