npm - whiteport-design-studio - Versions diffs - 0.1.0 → 0.2.0 - Mend

whiteport-design-studio 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1282) hide show

package/src/workflows/4-ux-design/object-types/object-router.md DELETED Viewed

@@ -1,349 +0,0 @@
-# Object Type Router
-**Goal:** Intelligently analyze object, suggest interpretation, and route to appropriate specification instructions
----
-## STEP 1: TEXT ELEMENT DETECTION
-<output>**Analyzing object from sketch...**</output>
-<action>Apply text detection rules from `TEXT-DETECTION-PRIORITY.md`:
-- Look for horizontal line PAIRS (2 lines together = text marker)
-- Single lines alone = decorative elements (dividers, borders)
-- Count pairs to determine number of text lines
-  </action>
-<check if="horizontal_lines_detected">
-  <output>**✓ TEXT ELEMENT DETECTED**
-  I see horizontal line pairs in the sketch - this is text content.
-  **Quick Detection:**
-  - **{{pair_count}} line pairs** → {{pair_count}} lines of text
-  - Routing to text analysis for detailed specification...
-  </output>
-  <action>Route immediately to `object-types/templates/heading-text.md`</action>
-  <action>Pass detected pairs to heading-text.md for analysis using SKETCH-TEXT-ANALYSIS-GUIDE.md</action>
-  **→ Loading text-specific instructions...**
-  > **Reference:** Text detection rules in `TEXT-DETECTION-PRIORITY.md`, analysis methodology in `SKETCH-TEXT-ANALYSIS-GUIDE.md`
-</check>
----
-## STEP 2: OTHER OBJECT ANALYSIS
-<check if="not_text_element">
-<action>Examine object characteristics:
-- Visual appearance (shape, style, position)
-- Context (what's around it, where in form/page)
-- Interactive indicators (buttons, inputs, links)
-- Container indicators (boxes, cards, modals)
-- Media indicators (image placeholders, video frames)
-  </action>
-<output>**My interpretation:**
-**This looks like a {{suggested_object_type}}.**
-Based on what I see:
-- {{observation_1}}
-- {{observation_2}}
-- {{observation_3}}
-{{#if is_text_element}}
-**Text Analysis from Sketch:**
-- **{{line_count}} lines of text** (horizontal bar groups)
-- **Line thickness:** {{thickness}} → ~{{estimated_font_size}} font
-- **Line spacing:** {{spacing}} → ~{{estimated_line_height}} line-height
-- **Alignment:** {{detected_alignment}}
-- **Content capacity:** ~{{total_chars}} characters ({{chars_per_line}} per line)
-  {{/if}}
-**I think this {{component_name}}:**
-- {{suggested_purpose}}
-- {{suggested_interaction}}
-- {{suggested_result}}
-{{#if is_text_element}}
-**Content should be:** {{content_guidance}} ({{line_count}} lines, ~{{total_chars}} characters)
-{{/if}}
-**Does this match your intent?**</output>
-<ask>1. **Yes** - That's correct 2. **Close** - Similar but let me clarify 3. **No** - It's actually something different
-Choice [1/2/3]:</ask>
----
-## HANDLE USER RESPONSE
-<check if="choice == 1">
-  <output>✅ Great! Proceeding with {{suggested_object_type}} documentation.</output>
-  <action>Store confirmed_object_type</action>
-  <action>Store confirmed_purpose</action>
-  <action>Route to appropriate object-type file</action>
-</check>
-<check if="choice == 2">
-  <ask>**What should I adjust in my interpretation?**
-  Please clarify:</ask>
-  <action>Listen to clarification</action>
-  <action>Adjust interpretation</action>
-  <output>**Updated interpretation:**
-  This {{adjusted_object_type}}:
-  - {{adjusted_purpose}}
-  Correct now?</output>
-  <action>Once confirmed, route to appropriate object-type file</action>
-</check>
-<check if="choice == 3">
-  <ask>**What is this object?**
-  Please describe what it is and what it does:</ask>
-  <action>Listen to user description</action>
-  <action>Determine correct object type</action>
-  <output>**Got it!** This is a {{corrected_object_type}}.
-  I'll document it accordingly.</output>
-  <action>Route to appropriate object-type file</action>
-</check>
----
-## STEP 3: ROUTE TO OBJECT-SPECIFIC INSTRUCTIONS
-<action>Based on confirmed object type, load appropriate instruction file:
-**TEXT ELEMENTS (DETECTED FIRST):**
-- Horizontal line groups → `object-types/templates/heading-text.md`
-  - Handles: Headings (H1-H6), Paragraphs, Labels, Captions
-  - Includes: Sketch text analysis, character capacity, content guidance
-**INTERACTIVE ELEMENTS:**
-- **Button shapes** → `object-types/templates/button.md`
-- **Input fields** → `object-types/templates/text-input.md`
-- **Textarea boxes** → `object-types/textarea.md`
-- **Dropdown indicators** → `object-types/select-dropdown.md`
-- **Checkbox squares** → `object-types/checkbox.md`
-- **Radio circles** → `object-types/radio-button.md`
-- **Toggle switches** → `object-types/toggle-switch.md`
-- **Underlined text/arrows** → `object-types/templates/link.md`
-**MEDIA ELEMENTS:**
-- **Image placeholders (X or box)** → `object-types/templates/image.md`
-- **Video frame** → `object-types/video.md`
-**CONTAINER ELEMENTS:**
-- **Card/box container** → `object-types/card.md`
-- **Overlay/popup** → `object-types/modal-dialog.md`
-- **Grid/rows** → `object-types/table.md`
-- **Bullet/numbered items** → `object-types/list.md`
-**NAVIGATION ELEMENTS:**
-- **Menu/tabs** → `object-types/navigation.md`
-**STATUS ELEMENTS:**
-- **Small circle/pill** → `object-types/badge.md`
-- **Banner/box with icon** → `object-types/alert-toast.md`
-- **Bar/spinner** → `object-types/progress.md`
-**CUSTOM:**
-- **Unique component** → `object-types/custom-component.md`
-  </action>
-</check>
----
-## AFTER OBJECT DOCUMENTATION
-<action>After object-specific instructions complete, return here</action>
-<output>✅ **{{object_name}} documented!**</output>
-<ask>**More objects in this section?**
-Looking at the sketch, I can see {{describe_remaining_objects}}.
-Should I analyze the next object?
-1. **Yes** - Continue with next object
-2. **No** - Section complete
-Choice [1/2]:</ask>
-<check if="choice == 1">
-  <action>Loop back to top for next object analysis</action>
-</check>
-<check if="choice == 2">
-  <output>✅ Section complete!</output>
-  <action>Return to 4c-03</action>
-</check>
----
-## INTERPRETATION EXAMPLES
-**Example 1: Button**
-```
-My interpretation:
-This looks like a PRIMARY BUTTON.
-Based on what I see:
-- Prominent placement at bottom of form
-- Bright blue background (primary color)
-- White text saying "Save Profile"
-- Located after all form fields
-I think this "Save Profile Button":
-- Saves the form data to the database
-- Updates the user's profile information
-- Shows loading state during save
-- Navigates to profile view on success
-Does this match your intent?
-```
-**Example 2: Text/Heading with Placeholder Lines**
-```
-My interpretation:
-This looks like a HEADING (H2).
-Based on what I see:
-- Located at top of section, center-aligned
-- Group of 2 horizontal bars (text placeholders)
-- Thick lines suggesting larger font
-- Positioned above body content
-Text Analysis from Sketch:
-- 2 lines of text (2 horizontal bar groups)
-- Line thickness: 3px → ~28-32px font size
-- Line spacing: 3px between lines → ~1.3 line-height
-- Alignment: Center
-- Content capacity: ~50-60 characters (25-30 per line)
-I think this "Section Heading":
-- Introduces the content section
-- Draws attention to key message
-- Should be brief and impactful
-Content should be: Brief heading, 2 short lines (2 lines, ~50-60 characters)
-Does this match your intent?
-```
-**Example 3: Body Text with Multiple Lines**
-```
-My interpretation:
-This looks like BODY TEXT / PARAGRAPH.
-Based on what I see:
-- Below heading in main content area
-- Group of 5 thin horizontal bars
-- Left-aligned
-- Comfortable spacing between lines
-Text Analysis from Sketch:
-- 5 lines of text (5 horizontal bar groups)
-- Line thickness: 1px → ~16px font size
-- Line spacing: 3px between lines → ~1.5 line-height
-- Alignment: Left
-- Content capacity: ~300-350 characters (60-70 per line)
-I think this "Description Paragraph":
-- Explains the feature or product
-- Provides detailed information
-- Engages the user
-Content should be: Full paragraph (5 lines, ~300-350 characters)
-Does this match your intent?
-```
-**Example 3: Link**
-```
-My interpretation:
-This looks like a TEXT LINK.
-Based on what I see:
-- Underlined text saying "Forgot password?"
-- Positioned below password field
-- Smaller, less prominent than submit button
-- Typical recovery flow placement
-I think this "Forgot Password Link":
-- Navigates to password reset flow
-- Opens in same window
-- For users who can't remember password
-- Common authentication pattern
-Does this match your intent?
-```
----
-## KEY PRINCIPLES
-**✅ Agent demonstrates intelligence**
-- Analyzes visual and contextual clues
-- Makes informed suggestions
-- Shows reasoning process
-**✅ Trust-the-agent approach**
-- Agent interprets, user confirms
-- Not procedural checkbox selection
-- Collaborative intelligence
-**✅ Efficient workflow**
-- Quick confirmation when correct
-- Easy correction when needed
-- Natural conversation flow
-**✅ Context-aware**
-- Understands form flow
-- Recognizes UI patterns
-- Applies common sense
----
-**Return to 4c-03 after documentation complete**

package/src/workflows/4-ux-design/object-types/templates/button.md DELETED Viewed

@@ -1,345 +0,0 @@
-# Object Type: Button
-**Goal:** Document button component with complete specification
----
-## BUTTON IDENTIFICATION
-<output>**Documenting button: {{button_description}}**</output>
----
-## OBJECT ID
-<action>Generate Object ID using format:
-`{page}-{section}-{element}-button`
-Example: `signin-form-submit-button`
-</action>
-<output>**Object ID:** `{{generated_object_id}}`</output>
----
-## BUTTON TYPE
-<ask>**What type of button is this?**
-1. **Primary** - Main action (e.g., Submit, Save, Continue)
-2. **Secondary** - Alternative action (e.g., Cancel, Back)
-3. **Tertiary/Text** - Low priority (e.g., Skip, Learn More)
-4. **Destructive** - Dangerous action (e.g., Delete, Remove)
-5. **Icon Button** - Icon only, no text
-6. **Link Button** - Styled as button but navigates
-Choice [1-6]:</ask>
-<action>Store button_type</action>
----
-## DESIGN SYSTEM COMPONENT
-{{#if design_system_enabled}}
-<ask>**Design System component:**
-1. **Use existing component** - From your component library
-2. **Create new component** - Add this to the Design System
-3. **Page-specific only** - Not a reusable component
-Choice [1/2/3]:</ask>
-<check if="choice == 1">
-  <ask>**Which existing component?**
-From your component library:
-{{list_available_button_components}}
-Component name:</ask>
-<action>Store design_system_component</action>
-<action>Store component_status = "existing"</action>
-</check>
-<check if="choice == 2">
-  <ask>**New component name:**
-  Suggested: `Button-{{button_type}}`
-  Component name:</ask>
-  <action>Store design_system_component</action>
-  <action>Store component_status = "new"</action>
-  <action>Mark for Design System addition in Phase 5</action>
-  <output>✅ This button will be added to your Design System in Phase 5.</output>
-</check>
-<check if="choice == 3">
-  <action>Store component_status = "page-specific"</action>
-</check>
-{{else}}
-<action>Store component_status = "page-specific"</action>
-{{/if}}
----
-## BUTTON CONTENT
-<ask>**Button text in all languages:**
-{{#each language}}
-- **{{language}}:**
-  {{/each}}
-  </ask>
-<action>Store button_text for each language</action>
-<ask>**Does the button have an icon?**
-1. Yes - Icon before text
-2. Yes - Icon after text
-3. Yes - Icon only (no text)
-4. No - Text only
-Choice [1-4]:</ask>
-<check if="has_icon">
-  <ask>**Icon name/type:** (e.g., arrow-right, check, trash)</ask>
-  <action>Store icon_name and icon_position</action>
-</check>
----
-## BUTTON STATES
-<output>**Let's define all button states.**</output>
-<ask>**For each state, describe the appearance:**
-**Default state:**
-- Background color:
-- Text color:
-- Border:
-**Hover state:**
-- Background color:
-- Text color:
-- Border:
-- Other changes (shadow, scale, etc.):
-**Active/Pressed state:**
-- Background color:
-- Text color:
-- Visual feedback:
-**Disabled state:**
-- Background color:
-- Text color:
-- Cursor:
-- Why disabled:
-**Loading state** (if applicable):
-- Show spinner: yes/no
-- Loading text (in all languages):
-- Disable other actions: yes/no
-  </ask>
-<action>Store state definitions for all states</action>
----
-## BUTTON INTERACTION
-<ask>**What happens when user clicks this button?**
-Describe the complete flow:
-1. User clicks...
-2. Button changes to... (state)
-3. System does... (action/API call)
-4. If success...
-5. If error...
-6. User sees... (result)
-7. Navigate to... (if applicable)
-   </ask>
-<action>Store interaction_flow</action>
----
-## VALIDATION & REQUIREMENTS
-<ask>**Any requirements before button can be clicked?**
-- Form validation needed: yes/no
-- Required fields must be filled: yes/no
-- User must be authenticated: yes/no
-- Other prerequisites:
-  </ask>
-<action>Store prerequisites</action>
----
-## GENERATE BUTTON SPECIFICATION
-<action>Generate button specification using format:
-```markdown
-### {{button_name}}
-**Object ID:** `{{object_id}}`
-**Type:** {{button_type}}
-{{#if design_system_enabled}}
-**Design System Component:** {{design_system_component}}
-**Figma Component:** {{figma_component_name}}
-{{/if}}
-**Content:**
-{{#each language}}
-- **{{language}}:** {{button_text}}
-  {{/each}}
-{{#if has_icon}}
-**Icon:** {{icon_name}} ({{icon_position}})
-{{/if}}
-**States:**
-_Default:_
-- Background: {{default_bg}}
-- Text: {{default_text}}
-- Border: {{default_border}}
-_Hover:_
-- Background: {{hover_bg}}
-- Text: {{hover_text}}
-- Changes: {{hover_changes}}
-_Active:_
-- Background: {{active_bg}}
-- Text: {{active_text}}
-- Feedback: {{active_feedback}}
-_Disabled:_
-- Background: {{disabled_bg}}
-- Text: {{disabled_text}}
-- Cursor: not-allowed
-- When: {{disabled_condition}}
-{{#if has_loading_state}}
-_Loading:_
-- Spinner: visible
-- Text: {{loading_text}}
-- Actions: disabled
-  {{/if}}
-**Interaction:**
-1. {{interaction_step_1}}
-2. {{interaction_step_2}}
-   ...
-{{#if has_prerequisites}}
-**Requirements:**
-- {{prerequisite_list}}
-  {{/if}}
-```
-</action>
-<output>✅ **Button documented!**
-Specification added to page document.</output>
----
-## EXAMPLE OUTPUT
-```markdown
-### Submit Button
-**Object ID:** `signin-form-submit-button`
-**Type:** Primary
-**Design System Component:** primary-button-large
-**Figma Component:** Button/Primary/Large
-**Content:**
-- **English:** Sign In
-- **Swedish:** Logga In
-**Icon:** None
-**States:**
-_Default:_
-- Background: #0066CC (primary blue)
-- Text: #FFFFFF (white)
-- Border: none
-- Border-radius: 8px
-- Padding: 12px 24px
-_Hover:_
-- Background: #0052A3 (darker blue)
-- Text: #FFFFFF
-- Changes: slight shadow (0 2px 8px rgba(0,0,0,0.15))
-_Active:_
-- Background: #003D7A (even darker)
-- Text: #FFFFFF
-- Feedback: scale(0.98), shadow removed
-_Disabled:_
-- Background: #CCCCCC (gray)
-- Text: #666666 (dark gray)
-- Opacity: 0.6
-- Cursor: not-allowed
-- When: Form validation fails or during submission
-_Loading:_
-- Spinner: visible (white, 16px)
-- Text (EN): "Signing in..."
-- Text (SV): "Loggar in..."
-- Actions: All form interactions disabled
-**Interaction:**
-1. User clicks button
-2. Button enters loading state (spinner shows)
-3. Validate all form fields
-4. If validation fails: show field errors, exit loading
-5. If validation passes: POST to /api/auth/signin
-6. On API success: redirect to /dashboard
-7. On API error: show error message above form, exit loading state
-**Requirements:**
-- Email field must contain valid email
-- Password field must not be empty
-- No existing submission in progress
-```
----
-**Return to 4c-03 to continue with next object**