siesa-agents 2.1.90 → 2.1.91

package/siesa-agents/wds/data/agent-guides/freya/content-creation.md

@@ -0,0 +1,270 @@
+# Freya's Content Creation Guide
+
+**When to load:** Before creating strategic content (headlines, features, text sections)
+
+---
+
+## Core Principle
+
+**Content is strategic, not decorative.** Every word should trigger user psychology and serve business goals.
+
+---
+
+## Content Creation Workshop
+
+**Use the Content Creation Workshop for:**
+- ✅ Headlines and subheadlines
+- ✅ Hero sections and value propositions
+- ✅ Feature descriptions and benefits
+- ✅ Call-to-action messaging
+- ✅ Page sections (entire blocks)
+
+**NOT for:**
+- ❌ Field labels ("Email", "Password")
+- ❌ Button text ("Submit", "Cancel")
+- ❌ Error messages ("Invalid email format")
+- ❌ UI microcopy (that's Tone of Voice territory)
+
+---
+
+## When to Suggest the Workshop
+
+### Signs User Needs It
+- Creating content without strategic context
+- Asking "What should this headline say?"
+- Struggling with messaging
+- Content feels generic or weak
+- Multiple content pieces to create
+
+### How to Suggest (Natural, Not Pushy)
+> "This headline is important - it hooks Problem Aware users. Want to use the Content Creation Workshop to ensure it triggers the right psychology? Takes 10-15 minutes but makes content way more effective."
+
+**Let them decide.** Some users prefer quick mode, others want depth.
+
+---
+
+## Quick Mode vs Workshop Mode
+
+### Quick Mode
+**When:**
+- Simple, straightforward content
+- User is experienced with WDS
+- Context is crystal clear
+- Time is tight
+
+**Process:**
+1. Load Trigger Map for context
+2. Consider Customer Awareness
+3. Apply Golden Circle (WHY → HOW → WHAT)
+4. Generate options
+5. Explain rationale
+
+---
+
+### Workshop Mode
+**When:**
+- Critical content (hero, main CTA)
+- User wants strategic depth
+- Multiple frameworks apply
+- Content is complex
+
+**Process:**
+Load: `skill:wds-6-asset-generation`
+
+**6-Step Framework:**
+1. Define purpose & success criteria
+2. Load Trigger Map context
+3. Apply Customer Awareness strategy
+4. Filter with Action Mapping
+5. Frame with Badass Users
+6. Structure with Golden Circle
+7. Generate content
+
+---
+
+## The 6-Model Framework
+
+### 1. Content Purpose
+**"What job does this content do?"**
+
+- Convince Problem Aware users that speed matters
+- Reassure anxious users about security
+- Trigger desire to feel professional
+
+**Must be specific and measurable.**
+
+---
+
+### 2. Trigger Map
+**Strategic foundation**
+
+- Business Goal: What are we trying to achieve?
+- User: Who are we serving?
+- Driving Forces: What motivates them? (positive + negative)
+- Solution: What triggers these forces?
+
+**Informs** which psychology to trigger.
+
+---
+
+### 3. Customer Awareness Cycle
+**Content strategy - language & focus**
+
+Where user is → Where we want them:
+
+- **Unaware → Problem Aware:** Educate on problem
+- **Problem → Solution Aware:** Show solutions exist
+- **Solution → Product Aware:** Differentiate your solution
+- **Product → Most Aware:** Remove friction, show proof
+- **Most Aware:** Maintain, deepen relationship
+
+**Determines** what language they can understand.
+
+---
+
+### 4. Action Mapping
+**Content filter - relevance**
+
+For EVERY content element: **"What action does this enable?"**
+
+- ❌ "Nice to know" → Remove it
+- ✅ "Need to do" → Keep and strengthen
+
+**Strips** fluff, focuses on user actions.
+
+---
+
+### 5. Kathy Sierra Badass Users
+**Content tone & frame**
+
+Frame content around user becoming capable:
+
+- Show transformation (current → badass state)
+- Reduce cognitive load
+- Create "aha moments"
+- Make them feel smart, not overwhelmed
+
+**Makes** users feel empowered, not intimidated.
+
+---
+
+### 6. Golden Circle
+**Structural order**
+
+Always structure: **WHY → HOW → WHAT**
+
+```
+Headline (WHY): Stop losing clients to slow proposals
+Subhead (HOW): AI-powered templates deliver in minutes
+Features (WHAT): 10K templates, smart pricing, e-signatures
+```
+
+**Gives** content persuasive flow.
+
+---
+
+## How the Models Work Together
+
+**Think of them as lenses, not sequential steps:**
+
+1. **Trigger Map** = Which driving force to trigger?
+2. **Customer Awareness** = What language can they understand?
+3. **Golden Circle** = In what order should I present?
+4. **Action Mapping** = Is this enabling action?
+5. **Badass Users** = Does this make them feel capable?
+6. **Content Purpose** = Does it achieve its job?
+
+**AI synthesizes all six** to produce optimal content.
+
+---
+
+## Content Purpose Examples
+
+### Good (Specific & Measurable)
+- "Convince Problem Aware users that proposal speed matters more than perfection"
+- "Reassure Product Aware users about data security concerns"
+- "Trigger Solution Aware users' desire to feel like industry experts"
+
+### Bad (Vague)
+- "Make users want the product"
+- "Explain features"
+- "Sound professional"
+
+**Test:** Can someone else determine if the content succeeded?
+
+---
+
+## Model Priority Matrix
+
+**Different content types prioritize different models:**
+
+### Landing Page Hero
+- Customer Awareness: ⭐⭐⭐
+- Golden Circle: ⭐⭐⭐
+- Badass Users: ⭐⭐
+- Action Mapping: ⭐
+- Trigger Map: Always loaded
+- Content Purpose: Always defined
+
+### Feature Description
+- Action Mapping: ⭐⭐⭐
+- Badass Users: ⭐⭐⭐
+- Customer Awareness: ⭐⭐
+- Golden Circle: ⭐
+- Trigger Map: Always loaded
+- Content Purpose: Always defined
+
+### Error Messages
+**Don't use workshop** - Use Tone of Voice instead
+
+---
+
+## Tone of Voice vs Strategic Content
+
+### Tone of Voice (Product-Wide)
+- Field labels: "Email address"
+- Button text: "Get started"
+- Error messages: "Please enter a valid email"
+- Success messages: "Profile updated!"
+
+**Defined once** in Product Brief, applied everywhere.
+
+---
+
+### Strategic Content (Context-Specific)
+- Headlines: "Stop losing clients to slow proposals"
+- Value propositions: "AI-powered templates that close deals faster"
+- Feature benefits: "Create stunning proposals in minutes, not hours"
+
+**Created with workshop**, varies by context.
+
+---
+
+## Quick Reference
+
+**Before creating any strategic content:**
+
+1. **Define purpose** - What job does this do?
+2. **Load Trigger Map** - Which driving forces?
+3. **Check awareness** - Where are users?
+4. **Apply Golden Circle** - WHY → HOW → WHAT
+5. **Filter with Action** - Does it enable action?
+6. **Frame as empowering** - Make them feel capable
+7. **Validate** - Does it achieve its purpose?
+
+---
+
+## Related Resources
+
+- **Asset Generation:** `skill:wds-6-asset-generation`
+- **Content Purpose Guide:** `../../docs/method/content-purpose-guide.md`
+- **Tone of Voice Guide:** `../../docs/method/tone-of-voice-guide.md`
+- **Customer Awareness Cycle:** `../../docs/models/customer-awareness-cycle.md`
+- **Golden Circle:** `../../docs/models/golden-circle.md`
+- **Action Mapping:** `../../docs/models/action-mapping.md`
+- **Kathy Sierra Badass Users:** `../../docs/models/kathy-sierra-badass-users.md`
+
+---
+
+*Every word is a strategic choice. Content triggers psychology.*
+

package/siesa-agents/wds/data/agent-guides/freya/design-system.md

@@ -0,0 +1,333 @@
+# Freya's Design System Guide
+
+**When to load:** When Phase 7 (Design System) is enabled and component questions arise
+
+---
+
+## Core Principle
+
+**Design systems grow organically - discover components through actual work, never create speculatively.**
+
+---
+
+## Three Design System Modes
+
+### Mode A: No Design System
+**What it means:**
+- All components stay page-specific
+- No component extraction
+- AI/dev team handles consistency
+- Faster for simple projects
+
+**When this workflow doesn't run:**
+- Phase 7 is disabled
+- Components reference page context only
+
+**Agent behavior:**
+- Create components as page-specific
+- Use clear, descriptive class names
+- No need to think about reusability
+
+---
+
+### Mode B: Custom Figma Design System
+**What it means:**
+- Designer defines components in Figma
+- Components extracted as discovered during Phase 4
+- Figma MCP endpoints for integration
+- Component IDs link spec ↔ Figma
+
+**Workflow:**
+1. Designer creates component in Figma
+2. Component discovered during page design
+3. Agent links to Figma via Component ID
+4. Specification references Figma source
+
+**See:** `../../workflows/wds-6-asset-generation/workflow-figma.md`
+
+---
+
+### Mode C: Component Library Design System
+**What it means:**
+- Uses shadcn/Radix/similar library
+- Library chosen during setup
+- Components mapped to library defaults
+- Variants customized as needed
+
+**Workflow:**
+1. Component needed during page design
+2. Check if library has it (button, input, card, etc.)
+3. Map to library component
+4. Document customizations (if any)
+
+---
+
+## The Design System Router
+
+**Runs automatically during Phase 4 component specification**
+
+**For each component:**
+1. Check: Design system enabled? (Mode B or C)
+2. If NO → Create page-specific, continue
+3. If YES → Call design-system-router.md
+
+**Router asks:**
+- Is this component new?
+- Is there a similar component?
+- Should we create new or use/extend existing?
+
+**See:** `../../workflows/wds-7-design-system/design-system-router.md`
+
+---
+
+## Never Create Components Speculatively
+
+### ❌ Wrong Approach
+"Let me create a full component library upfront..."
+
+**Why bad:**
+- You don't know what you'll actually need
+- Over-engineering
+- Wasted effort on unused components
+
+---
+
+### ✅ Right Approach
+"I'm designing the landing page hero... oh, I need a button."
+
+**Process:**
+1. Design the button for this specific page
+2. When another page needs a button → Opportunity!
+3. Assess: Similar enough to extract?
+4. Extract to Design System if makes sense
+
+**Result:** Components emerge from real needs.
+
+---
+
+## Opportunity/Risk Assessment
+
+**When similar component exists, run assessment:**
+
+**See:** `../../workflows/wds-7-design-system/assessment/`
+
+**7 Micro-Steps:**
+1. Scan existing components
+2. Compare attributes (visual, behavior, states)
+3. Calculate similarity score
+4. Identify opportunities (reuse, consistency)
+5. Identify risks (divergence, complexity)
+6. Present decision to designer
+7. Execute decision
+
+**Outcomes:**
+- **Use existing** - Component is close enough
+- **Create variant** - Extend existing with new state
+- **Create new** - Too different, warrants separate component
+- **Update existing** - Existing is too narrow, expand it
+
+---
+
+## Foundation First
+
+**Before any components:**
+
+### 1. Design Tokens
+```
+Design tokens = the DNA of your design system
+
+Colors:
+- Primary, secondary, accent
+- Neutral scale (50-900)
+- Semantic (success, warning, error, info)
+
+Typography:
+- Font families
+- Font scales (h1-h6, body, caption)
+- Font weights
+- Line heights
+
+Spacing:
+- Spacing scale (xs, sm, md, lg, xl)
+- Layout scales
+
+Effects:
+- Border radius scale
+- Shadow scale
+- Transitions
+```
+
+**Why first:** Tokens ensure consistency across all components.
+
+---
+
+### 2. Atomic Design Structure
+
+**Organize from simple → complex:**
+
+```
+atoms/
+├── button.md
+├── input.md
+├── label.md
+├── icon.md
+└── badge.md
+
+molecules/
+├── form-field.md (label + input + error)
+├── card.md (container + content)
+└── search-box.md (input + button + icon)
+
+organisms/
+├── header.md (logo + nav + search + user-menu)
+├── feature-section.md (headline + cards + cta)
+└── form.md (multiple form-fields + submit)
+```
+
+**Why this structure:** Clear dependencies, easy to understand, scales well.
+
+---
+
+## Component Operations
+
+**See:** `../../workflows/wds-7-design-system/operations/`
+
+### 1. Initialize Design System
+**First component triggers auto-initialization**
+- Creates folder structure
+- Creates design-tokens.md
+- Creates component-library-config.md (if Mode C)
+
+### 2. Create New Component
+- Defines component specification
+- Assigns Component ID
+- Documents states and variants
+- Notes where used
+
+### 3. Add Variant
+- Extends existing component
+- Documents variant trigger
+- Updates component spec
+
+### 4. Update Component
+- Modifies existing definition
+- Increments version
+- Documents change rationale
+
+---
+
+## Component Specification Template
+
+```markdown
+# [Component Name] [COMP-001]
+
+**Type:** [Atom|Molecule|Organism]
+**Library:** [shadcn Button|Custom|N/A]
+**Figma:** [Link if Mode B]
+
+## Purpose
+[What job does this component do?]
+
+## Variants
+- variant-name: [When to use]
+- variant-name: [When to use]
+
+## States
+- default
+- hover
+- active
+- disabled
+- loading (if applicable)
+- error (if applicable)
+
+## Props/Attributes
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| size | sm\|md\|lg | md | Button size |
+| variant | primary\|secondary | primary | Visual style |
+
+## Styling
+[Design tokens or Figma reference]
+
+## Used In
+- [Page name] ([Component purpose in context])
+- [Page name] ([Component purpose in context])
+
+## Version History
+- v1.0.0 (2024-01-01): Initial creation
+```
+
+---
+
+## Integration with Phase 4
+
+**Phase 4 (UX Design) → Phase 7 (Design System) flow:**
+
+```
+User creates page specification
+├── Component 1: Button
+│   ├── Check: Design system enabled?
+│   ├── YES → Router checks existing components
+│   ├── Similar button found → Opportunity/Risk Assessment
+│   └── Decision: Use existing primary button variant
+├── Component 2: Input
+│   ├── Check: Design system enabled?
+│   ├── YES → Router checks existing components
+│   ├── No similar input → Create new
+│   └── Add to Design System
+└── Component 3: Custom illustration
+    ├── Check: Design system enabled?
+    └── NO extraction (one-off asset)
+```
+
+**Result:**
+- Page spec contains references + page-specific content
+- Design System contains component definitions
+- Clean separation maintained
+
+---
+
+## Common Mistakes
+
+### ❌ Creating Library Before Designing
+"Let me make 50 components upfront..."
+- **Instead:** Design pages, extract components as needed
+
+### ❌ Over-Abstracting Too Early
+"This button might need 10 variants someday..."
+- **Instead:** Start simple, add variants when actually needed
+
+### ❌ Forcing Reuse
+"I'll make this work even though it's awkward..."
+- **Instead:** Sometimes a new component is better than a forced variant
+
+### ❌ No Design Tokens
+"I'll define colors per component..."
+- **Instead:** Tokens first, components second
+
+---
+
+## Quality Checklist
+
+Before marking a component "complete":
+
+- [ ] **Clear purpose** - What job does it do?
+- [ ] **Design tokens** - Uses tokens, not hard-coded values?
+- [ ] **All states** - Default, hover, active, disabled documented?
+- [ ] **Variants** - Each variant has clear use case?
+- [ ] **Reusability** - Can be used in multiple contexts?
+- [ ] **Documentation** - Specification is complete?
+- [ ] **Examples** - Shows where it's actually used?
+
+---
+
+## Related Resources
+
+- **Phase 7 Workflow:** `../../workflows/wds-7-design-system/`
+- **Figma Integration:** `../../workflows/wds-6-asset-generation/workflow-figma.md`
+- **Shared Knowledge:** `../design-system/` (tokens, naming, states, validation, boundaries)
+
+---
+
+*Components emerge from real needs. Design systems grow organically.*
+