2.9 KiB

Raw Blame History

Assessment Step 1: Scan Existing Components

Purpose: Find all components in design system that match the current component type.

Input: Component type (e.g., "Button")

Output: List of matching components with basic info

Step 1: Read Design System Folder

Scan design system components: - Read all files in `D-Design-System/components/` - Parse component type from each file - Filter by matching type

Example:

Current component: Button

Scanning D-Design-System/components/...
- button.md → Type: Button ✓ Match
- input-field.md → Type: Input Field ✗ No match
- card.md → Type: Card ✗ No match

Step 2: Extract Component Metadata

For each matching component, extract: - Component ID (e.g., `btn-001`) - Variants (e.g., primary, secondary, ghost) - States (e.g., default, hover, active, disabled) - Key styling attributes - Usage count (how many pages use it)

Example:

Button [btn-001]:
  variants: [primary, secondary, ghost]
  states: [default, hover, active, disabled]
  styling:
    size: medium
    color: blue
    shape: rounded
  used_in: 3 pages

Step 3: Build Candidate List

Present matching components:

🔍 Found 1 existing Button component:

**Button [btn-001]**
- Variants: primary, secondary, ghost
- States: default, hover, active, disabled
- Size: medium
- Color: blue
- Shape: rounded
- Used in: 3 pages (login, signup, dashboard)

If multiple matches:

🔍 Found 2 existing Button components:

**Button [btn-001]** - Primary action button
- Variants: primary, secondary
- Used in: 5 pages

**Icon Button [btn-002]** - Icon-only button
- Variants: small, medium, large
- Used in: 8 pages

Step 4: Pass to Next Step

Pass candidate list to comparison step: - Component IDs - Full metadata - Current component specification

Next: 02-compare-attributes.md

Edge Cases

No matching components found:

✓ No existing Button components in design system.

This will be the first Button component.

Route to: operations/create-new-component.md

Design system empty:

✓ Design system is empty.

This will be the first component.

Route to: operations/initialize-design-system.md

Multiple type matches:

🔍 Found 2 Button-type components:

I'll compare your new button to both to find the best match.

Continue to comparison for each candidate

Output Format

For next step:

{
  "current_component": {
    "type": "Button",
    "specification": {...}
  },
  "candidates": [
    {
      "id": "btn-001",
      "variants": ["primary", "secondary", "ghost"],
      "states": ["default", "hover", "active", "disabled"],
      "styling": {...},
      "usage_count": 3,
      "used_in": ["login", "signup", "dashboard"]
    }
  ]
}

This step just scans and lists. Comparison happens in the next step.

2.9 KiB Raw Blame History