whiteport-design-studio 0.1.0

package/src/workflows/5-design-system/assessment/01-scan-existing.md

@@ -0,0 +1,166 @@
+# 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
+
+<action>
+Scan design system components:
+- Read all files in `D-Design-System/components/`
+- Parse component type from each file
+- Filter by matching type
+</action>
+
+**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
+
+<action>
+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)
+</action>
+
+**Example:**
+
+```yaml
+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
+
+<output>
+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)
+```
+
+</output>
+
+**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
+
+<action>
+Pass candidate list to comparison step:
+- Component IDs
+- Full metadata
+- Current component specification
+</action>
+
+**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:**
+
+```json
+{
+  "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.**

package/src/workflows/5-design-system/assessment/02-compare-attributes.md

@@ -0,0 +1,287 @@
+# Assessment Step 2: Compare Attributes
+
+**Purpose:** Systematically compare current component to existing candidates.
+
+**Input:** Current component spec + candidate list
+
+**Output:** Detailed comparison of similarities and differences
+
+---
+
+## Comparison Framework
+
+**Compare across 4 dimensions:**
+
+### 1. Visual Attributes
+
+- Size (small, medium, large)
+- Shape (rounded, square, pill)
+- Color scheme
+- Typography
+- Spacing/padding
+- Border style
+
+### 2. Functional Attributes
+
+- Purpose/intent
+- User action
+- Input/output type
+- Validation rules
+- Required/optional
+
+### 3. Behavioral Attributes
+
+- States (default, hover, active, disabled, loading, error)
+- Interactions (click, hover, focus, blur)
+- Animations/transitions
+- Keyboard support
+- Accessibility
+
+### 4. Contextual Attributes
+
+- Usage pattern (where it appears)
+- Frequency (how often used)
+- Relationship to other components
+- User journey stage
+
+---
+
+## Step 1: Visual Comparison
+
+<action>
+Compare visual attributes:
+- Extract visual properties from current spec
+- Extract visual properties from candidate
+- Calculate matches and differences
+</action>
+
+**Example:**
+
+```
+Visual Comparison: Current Button vs Button [btn-001]
+
+Similarities:
+✓ Size: medium (both)
+✓ Shape: rounded (both)
+✓ Color scheme: blue primary (both)
+
+Differences:
+✗ Current: Has icon on left
+✗ btn-001: Text only
+✗ Current: Slightly larger padding
+```
+
+---
+
+## Step 2: Functional Comparison
+
+<action>
+Compare functional attributes:
+- What does it do?
+- What's the user intent?
+- What's the outcome?
+</action>
+
+**Example:**
+
+```
+Functional Comparison: Current Button vs Button [btn-001]
+
+Similarities:
+✓ Purpose: Primary action trigger
+✓ User action: Click to submit/proceed
+✓ Outcome: Form submission or navigation
+
+Differences:
+✗ Current: "Continue to next step"
+✗ btn-001: "Submit form"
+✗ Current: Navigation action
+✗ btn-001: Form submission action
+```
+
+---
+
+## Step 3: Behavioral Comparison
+
+<action>
+Compare behavioral attributes:
+- States
+- Interactions
+- Animations
+</action>
+
+**Example:**
+
+```
+Behavioral Comparison: Current Button vs Button [btn-001]
+
+Similarities:
+✓ States: default, hover, active, disabled (both)
+✓ Hover: Darkens background (both)
+✓ Disabled: Grayed out (both)
+
+Differences:
+✗ Current: Has loading state with spinner
+✗ btn-001: No loading state
+✗ Current: Icon rotates on hover
+```
+
+---
+
+## Step 4: Contextual Comparison
+
+<action>
+Compare contextual attributes:
+- Where is it used?
+- How often?
+- What's the pattern?
+</action>
+
+**Example:**
+
+```
+Contextual Comparison: Current Button vs Button [btn-001]
+
+Similarities:
+✓ Both: Primary action in forms
+✓ Both: Bottom-right of containers
+✓ Both: High-frequency usage
+
+Differences:
+✗ Current: Multi-step flow navigation
+✗ btn-001: Single-page form submission
+✗ Current: Always has "next" context
+```
+
+---
+
+## Step 5: Calculate Similarity Score
+
+<action>
+Score each dimension:
+- Visual: High/Medium/Low similarity
+- Functional: High/Medium/Low similarity
+- Behavioral: High/Medium/Low similarity
+- Contextual: High/Medium/Low similarity
+</action>
+
+**Scoring Guide:**
+
+- **High:** 80%+ attributes match
+- **Medium:** 50-79% attributes match
+- **Low:** <50% attributes match
+
+**Example:**
+
+```
+Similarity Score: Current Button vs Button [btn-001]
+
+Visual:      High (90% match)
+Functional:  Medium (60% match)
+Behavioral:  Medium (70% match)
+Contextual:  Medium (65% match)
+
+Overall:     Medium-High Similarity
+```
+
+---
+
+## Step 6: Summarize Comparison
+
+<output>
+Present comparison summary:
+
+```
+📊 Comparison: Current Button vs Button [btn-001]
+
+**Similarities:**
+✓ Visual appearance (size, shape, color)
+✓ Primary action purpose
+✓ Standard states (default, hover, active, disabled)
+✓ High-frequency usage pattern
+
+**Differences:**
+✗ Current has icon, btn-001 is text-only
+✗ Current has loading state, btn-001 doesn't
+✗ Current for navigation, btn-001 for submission
+✗ Current has icon animation
+
+**Similarity Score:** Medium-High (71%)
+```
+
+</output>
+
+---
+
+## Step 7: Pass to Next Step
+
+<action>
+Pass comparison data to similarity calculation:
+- Detailed comparison
+- Similarity scores
+- Key differences
+</action>
+
+**Next:** `03-calculate-similarity.md`
+
+---
+
+## Edge Cases
+
+**Perfect match (100%):**
+
+```
+✓ This component is identical to btn-001.
+
+This is likely the same component with different content.
+```
+
+**Recommend:** Reuse existing component
+
+**Very low similarity (<30%):**
+
+```
+✗ This component is very different from btn-001.
+
+Despite being the same type, these serve different purposes.
+```
+
+**Recommend:** Create new component
+
+**Multiple candidates:**
+
+```
+📊 Comparing to 2 candidates:
+
+Button [btn-001]: 71% similarity
+Icon Button [btn-002]: 45% similarity
+
+btn-001 is the closest match.
+```
+
+**Continue with best match**
+
+---
+
+## Output Format
+
+**For next step:**
+
+```json
+{
+  "comparison": {
+    "candidate_id": "btn-001",
+    "visual_similarity": "high",
+    "functional_similarity": "medium",
+    "behavioral_similarity": "medium",
+    "contextual_similarity": "medium",
+    "overall_score": 0.71,
+    "similarities": [...],
+    "differences": [...]
+  }
+}
+```
+
+---
+
+**This step compares systematically. Interpretation happens in the next step.**