npm - whiteport-design-studio - Versions diffs - 0.2.2 → 0.3.0 - Mend

whiteport-design-studio 0.2.2 → 0.3.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 (582) hide show

package/src/workflows/_agent-dialogs/steps/step-01-initialize-dialog.md DELETED Viewed

@@ -1,244 +0,0 @@
-# Step 1: Initialize Dialog
-## CONTEXT
-This is the first step of the Agent Dialog Workflow. Before creating a new dialog, we first check for any existing pending dialogs.
----
-## CHECK FOR EXISTING DIALOGS
-⚠️ **IMPORTANT: Always check for pending dialogs before creating a new one.**
-<action>
-**Scan for existing dialogs:**
-1. Check if `{output_folder}/_progress/agent-dialogs/` exists
-2. If it exists, scan all subdirectories for dialog files (*-dialog.md)
-3. Read the Meta section of each dialog file
-4. Identify dialogs where:
-   - Status = "Not Started" OR "In Progress"
-   - Agent matches the current agent (if known)
-</action>
-<conditional>
-**If pending dialogs found:**
-Present them to the user:
-```
-📋 **Found {N} pending dialog(s):**
-| # | Date | Agent | Feature | Status |
-|---|------|-------|---------|--------|
-| 1 | {date} | {agent} | {feature} | {status} |
-**Options:**
-[A] Continue existing dialog #{N}
-[B] Create a new dialog (existing ones remain pending)
-Choice:
-```
-If user chooses an existing dialog:
-- Load that dialog file
-- Check the Steps Overview table for next incomplete step
-- Continue from there
-If user chooses to create new:
-- Continue to SELECT DIALOG TYPE below
-</conditional>
-<conditional>
-**If no pending dialogs found OR {output_folder}/_progress/agent-dialogs/ doesn't exist:**
-Continue to SELECT DIALOG TYPE below.
-</conditional>
----
-## SELECT DIALOG TYPE
-<ask>**What type of work is this?**
-| Type | Icon | Use When |
-|------|------|----------|
-| **[A] Prototype Implementation** | 🔧 | Building UI from specifications |
-| **[B] Bug Fix** | 🐛 | Fixing issues and defects |
-| **[C] Design Exploration** | 🎨 | Exploring visual/UX directions |
-| **[D] Capture** | 💾 | Saving ideas for later |
-| **[E] Generic** | 📋 | Anything else |
-Type:</ask>
-<action>
-Store dialog_type and select appropriate template:
-- A → templates/dialog-types/prototype-implementation.template.md
-- B → templates/dialog-types/bug-fix.template.md
-- C → templates/dialog-types/design-exploration.template.md
-- D → templates/dialog-capture.template.md
-- E → templates/dialog.template.md
-</action>
----
-## GATHER INFORMATION
-<ask>**What feature or implementation are we working on?**
-Examples:
-- "Booking details drawer"
-- "User authentication refactor"
-- "Calendar scroll fix"
-Feature name:</ask>
-<action>Store feature_name and generate feature_slug (lowercase, hyphenated)</action>
-<ask>**Which specification(s) are relevant?**
-Provide the path to the specification file(s) this implementation is based on.
-Specification path:</ask>
-<action>Store spec_path</action>
-<ask>**What agent persona should execute this work?**
-Examples:
-- "Freya (UX Designer)" — For UI implementation
-- "Dev Agent" — For backend work
-- "Full Stack" — For end-to-end features
-Agent:</ask>
-<action>Store agent_name</action>
----
-## CREATE FOLDER STRUCTURE
-<action>
-**Create dialog folder:**
-Path: `{output_folder}/_progress/agent-dialogs/{date}-{agent_slug}-{feature_slug}/`
-Where:
-- `{date}` = Today's date in YYYY-MM-DD format
-- `{agent_slug}` = Agent name, lowercase (e.g., "freya", "saga", "dev")
-- `{feature_slug}` = Feature name, lowercase, hyphenated
-**Examples:**
-- `2026-01-23-freya-booking-details-overlay/`
-- `2026-01-23-saga-course-workflow-integration/`
-- `2026-01-23-dev-calendar-scroll-fix/`
-**Create subfolders:**
-- `steps/` — For step instruction files
-</action>
----
-## CREATE DIALOG FILE
-<action>
-**Create main dialog file:**
-File: `{output_folder}/_progress/agent-dialogs/{date}-{agent_slug}-{feature_slug}/{date}-{agent_slug}-{feature_slug}-dialog.md`
-**Use template from:** Selected dialog type template (see SELECT DIALOG TYPE step above)
-**Fill in:**
-- Date: Today's date
-- Agent: {agent_name}
-- Feature: {feature_name}
-- Specification: Link to {spec_path}
-- Status: "In Progress"
-</action>
----
-## GATHER SETUP CONTEXT
-<action>
-**Read the specification file(s)** to understand:
-- What needs to be implemented
-- What already exists
-- Technical requirements
-</action>
-<ask>**What's the tech stack for this project?**
-Example: "React 19, Next.js 15, TypeScript, Tailwind CSS, Supabase"
-Tech stack:</ask>
-<action>Store tech_stack</action>
-<ask>**What files are relevant to this implementation?**
-List the key files that will be modified or referenced.
-Relevant files:</ask>
-<action>Store relevant_files</action>
-<ask>**Are there any existing patterns to follow?**
-Describe component structure, styling approach, state management, etc.
-Patterns:</ask>
-<action>Store patterns</action>
----
-## UPDATE DIALOG FILE
-<action>
-**Fill in Setup Context section:**
-- Project Context (tech stack)
-- Relevant Files (table)
-- Existing Patterns
-- Current State (what exists)
-**Fill in Purpose:**
-- 1-3 sentences describing what this dialog accomplishes
-</action>
----
-## COMPLETION
-<output>
-✅ **Dialog initialized!**
-**Created:**
-- Folder: `{output_folder}/_progress/agent-dialogs/{date}-{agent_slug}-{feature_slug}/`
-- Dialog file: `{date}-{agent_slug}-{feature_slug}-dialog.md`
-- Steps folder: `steps/`
-**Next:** Proceed to Step 2 to analyze scope and create step breakdown.
-[A] Continue to Step 2: Analyze Scope
-[B] Review the dialog file first
-[C] Add more setup context
-Choice:
-</output>
----
-## ROUTING
-<action>
-Based on user choice:
-- [A] → Load and execute step-02-analyze-scope.md
-- [B] → Show the dialog file contents
-- [C] → Ask for additional context to add
-</action>
----
-_Agent Dialog Workflow — Step 1: Initialize Dialog_

package/src/workflows/_agent-dialogs/steps/step-02-analyze-scope.md DELETED Viewed

@@ -1,195 +0,0 @@
-# Step 2: Analyze Scope
-## CONTEXT
-Dialog folder is created. Now we analyze the specification to determine exactly what needs to be implemented.
----
-## READ SPECIFICATION
-<action>
-**Read the specification file(s)** referenced in the dialog file.
-Extract:
-- All features/sections to implement
-- Object IDs and their specifications
-- States and transitions
-- Translations required
-- Any open questions in the spec
-</action>
----
-## IDENTIFY SCOPE
-<ask>**What should be IN SCOPE for this implementation?**
-Based on the specification, list the features/sections to implement.
-In scope:</ask>
-<action>Store in_scope items</action>
-<ask>**What should be OUT OF SCOPE?**
-Explicitly list what we're NOT implementing (yet).
-Out of scope:</ask>
-<action>Store out_of_scope items</action>
-<ask>**Are there any dependencies?**
-What must exist before we can implement this? (Other features, data, APIs, etc.)
-Dependencies:</ask>
-<action>Store dependencies</action>
----
-## CHECK FOR ISSUES
-<action>
-**Review the specification for:**
-1. **Missing information** — Anything unclear or undefined?
-2. **Open questions** — Any unresolved decisions?
-3. **Inconsistencies** — Anything that doesn't match?
-Document any issues found.
-</action>
-<check if="issues_found">
-  <ask>**Issues found in specification:**
-  {{#each issue in issues}}
-  - {{issue}}
-  {{/each}}
-  How should we proceed?
-  [A] Continue anyway — address issues as we go
-  [B] Pause — clarify issues before proceeding
-  [C] Document issues — continue but note them
-  Choice:</ask>
-</check>
----
-## UPDATE DIALOG FILE
-<action>
-**Update the Scope section in the dialog file:**
-### In Scope
-{{#each item in in_scope}}
-- {{item}}
-{{/each}}
-### Out of Scope
-{{#each item in out_of_scope}}
-- {{item}}
-{{/each}}
-### Dependencies
-{{#each item in dependencies}}
-- {{item}}
-{{/each}}
-</action>
----
-## DETERMINE STEP BREAKDOWN
-<action>
-**Analyze the scope to identify discrete steps.**
-Guidelines:
-- Each step should accomplish ONE clear thing
-- Steps should be ~15-45 minutes of work
-- Order by dependencies (what must come first)
-- Group related changes together
-- Consider testability (each step should be verifiable)
-**Common patterns:**
-For UI features:
-1. Shell/container component
-2. Static content sections
-3. Dynamic data integration
-4. Interactive elements
-5. State transitions
-6. Edge cases / error states
-For refactoring:
-1. Create new structure
-2. Migrate piece 1
-3. Migrate piece 2
-4. Remove old structure
-5. Update imports/references
-For bug fixes:
-1. Reproduce issue
-2. Implement fix
-3. Add tests
-4. Verify fix
-</action>
-<ask>**What steps do we need?**
-Based on the scope, list the implementation steps in order.
-Example:
-1. Drawer shell component
-2. Header section
-3. Date display section
-4. Dog info section
-5. Action buttons
-6. State transitions
-Steps:</ask>
-<action>Store steps list</action>
----
-## COMPLETION
-<output>
-✅ **Scope analyzed!**
-**In Scope:** {{in_scope.length}} items
-**Out of Scope:** {{out_of_scope.length}} items
-**Dependencies:** {{dependencies.length}} items
-**Proposed Steps:**
-{{#each step in steps}}
-{{@index + 1}}. {{step}}
-{{/each}}
-**Next:** Create step files for each implementation step.
-[A] Continue to Step 3: Create Step Files
-[B] Adjust the step breakdown
-[C] Review scope again
-Choice:
-</output>
----
-## ROUTING
-<action>
-Based on user choice:
-- [A] → Load and execute step-03-create-steps.md
-- [B] → Allow user to modify steps list
-- [C] → Return to scope review
-</action>
----
-_Agent Dialog Workflow — Step 2: Analyze Scope_

package/src/workflows/_agent-dialogs/steps/step-03-create-steps.md DELETED Viewed

@@ -1,186 +0,0 @@
-# Step 3: Create Step Files
-## CONTEXT
-Scope is analyzed and steps are identified. Now we create the step files that will guide implementation.
----
-## CREATE STEP FILES
-<action>
-**For each step identified in Step 2:**
-1. Create file: `steps/{##}-{step-slug}.md`
-2. Use template from: `templates/step.template.md`
-3. Fill in all sections
-**File naming:**
-- `##` = Two-digit step number (01, 02, 03, etc.)
-- `{step-slug}` = Step name, lowercase, hyphenated
-**Example:** `steps/01-drawer-shell.md`
-</action>
----
-## STEP FILE CONTENT
-For each step file, fill in:
-### Context Section
-<action>
-Write a brief paragraph explaining:
-- What exists at this point
-- What this step adds
-- Why this step is needed
-</action>
-### Specification Reference
-<action>
-Extract the relevant section from the specification:
-- Object IDs
-- Properties and values
-- Translation keys
-- Behaviors
-</action>
-### Task Section
-<action>
-Write clear objectives:
-- What specifically to implement
-- Numbered list of 2-5 objectives
-- Concrete and actionable
-</action>
-### Files to Modify
-<action>
-Create a table listing:
-- Each file to create or modify
-- Action (Create / Modify)
-- Purpose of the change
-</action>
-### Implementation Details
-<action>
-Provide specific guidance:
-- Approach to take
-- Code patterns to follow
-- Important considerations
-- Example code if helpful
-</action>
-### Acceptance Criteria
-<action>
-Write verifiable criteria:
-- Specific outcomes to check
-- Each criterion is pass/fail
-- Include "No TypeScript errors"
-- Include "UI matches specification"
-</action>
-### Test Instructions
-<action>
-Write testing steps:
-1. How to trigger the feature
-2. What to check
-3. Expected result
-4. Edge cases to verify
-</action>
----
-## SELF-CONTAINED PRINCIPLE
-<important>
-**Each step file must be self-contained.**
-An agent with NO prior context should be able to:
-1. Read the step file
-2. Understand what to do
-3. Execute the implementation
-4. Verify it works
-If a step requires context from previous steps, include it explicitly.
-</important>
----
-## UPDATE DIALOG FILE
-<action>
-**Update the Steps Overview table:**
-| # | Step | Status | Notes |
-|---|------|--------|-------|
-{{#each step in steps}}
-| {{@index + 1}} | [{{step.name}}](steps/{{step.file}}) | 🔲 | |
-{{/each}}
-</action>
----
-## REVIEW STEP FILES
-<action>
-**Quality check each step file:**
-- [ ] Context is clear
-- [ ] Specification reference is accurate
-- [ ] Task objectives are specific
-- [ ] Files to modify are listed
-- [ ] Implementation details are helpful
-- [ ] Acceptance criteria are verifiable
-- [ ] Test instructions are complete
-</action>
----
-## COMPLETION
-<output>
-✅ **Step files created!**
-**Created {{steps.length}} step files:**
-{{#each step in steps}}
-- `steps/{{step.file}}` — {{step.name}}
-{{/each}}
-**Dialog file updated** with Steps Overview table.
-**Ready for implementation!**
----
-**Options:**
-[A] Start implementing — Execute Step 1
-[B] Review a specific step file
-[C] Modify a step file
-[D] Exit — Continue later
-Choice:
-</output>
----
-## ROUTING
-<action>
-Based on user choice:
-- [A] → Load and execute step-04-execute-steps.md (with step 1)
-- [B] → Show requested step file
-- [C] → Edit requested step file
-- [D] → End workflow, user will continue later
-</action>
----
-_Agent Dialog Workflow — Step 3: Create Step Files_