> ## Documentation Index
> Fetch the complete documentation index at: https://docs.weventures.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Discovery Phase

> Before you prompt - understand your project requirements thoroughly

# 🔍 Discovery Phase - Before You Prompt

<Warning>
  **Critical:** Never skip the discovery phase. Understanding your project requirements thoroughly will save countless hours of development time and prevent major refactoring later.
</Warning>

<Tabs>
  <Tab title="📋 Project Brief">
    <Card title="Essential Questions Checklist" icon="clipboard-check">
      Before writing any prompt, answer these fundamental questions:
    </Card>

    <AccordionGroup>
      <Accordion title="Platform Type & Audience">
        **Public or Private Platform?**
        • Public: Needs SEO, performance optimization, public APIs
        • Private/Internal: Focus on security, authentication, role-based access

        **Target Audience Demographics**
        • Age range and technical proficiency
        • Geographic location (affects hosting, compliance)
        • Expected user volume (affects architecture)

        **Device Usage Patterns**
        • Mobile-first, desktop-first, or equal priority?
        • Native app requirements or PWA sufficient?
        • Offline functionality needed?
      </Accordion>

      <Accordion title="Localization & Accessibility">
        **Language Requirements**
        • English only or multi-language?
        • RTL support (Arabic, Hebrew, Persian)?
        • Date/time/currency formatting needs

        **Accessibility Standards**
        • WCAG 2.1 AA or AAA compliance?
        • Screen reader optimization priority
        • Keyboard navigation requirements

        **Regional Compliance**
        • GDPR (Europe)
        • CCPA (California)
        • Other regional data protection laws
      </Accordion>

      <Accordion title="Content Management">
        **Content Update Frequency**
        • Static content (rarely changes)
        • Dynamic content (frequent updates)
        • Real-time content (live data)

        **Content Editors**
        • Technical team only
        • Marketing/content team
        • End users (user-generated content)

        **CMS Requirements**
        • Full CMS (Strapi, Sanity, Contentful)
        • Headless CMS integration
        • Simple admin panel
        • Git-based content management
      </Accordion>

      <Accordion title="User Management">
        **Authentication Methods**
        • Email/password
        • Social logins (Google, Facebook, GitHub)
        • SSO/SAML for enterprise
        • Passwordless/Magic links
        • Two-factor authentication

        **User Roles & Permissions**
        • Simple (user/admin)
        • Complex (multiple roles with granular permissions)
        • Team/organization structures
        • Invitation systems

        **User Data Management**
        • Profile customization needs
        • Data export requirements (GDPR)
        • Account deletion workflows
        • Data retention policies
      </Accordion>

      <Accordion title="Technical Requirements">
        **Performance Targets**
        • Page load time requirements
        • Lighthouse score targets
        • Concurrent user expectations
        • API response time SLAs

        **Integration Needs**
        • Third-party APIs
        • Payment processing
        • Email services
        • Analytics platforms
        • CRM systems

        **Security Requirements**
        • Data encryption standards
        • PCI compliance (for payments)
        • Healthcare compliance (HIPAA)
        • Financial compliance (SOC 2)
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="🎨 Design System Discovery">
    <Steps>
      <Step title="Gather Brand Assets">
        <Card title="Brand Guidelines Checklist">
          * Logo files (SVG, PNG in multiple sizes)
          * Color palette (primary, secondary, semantic colors)
          * Typography guidelines (font families, sizes, weights)
          * Spacing system (8px grid, 4px grid, custom)
          * Icon style (outlined, filled, custom set)
          * Imagery style (photography, illustration, abstract)
          * Motion principles (timing, easing functions)
        </Card>
      </Step>

      <Step title="UI Inspiration Research">
        <Info>
          Browse these resources to gather UI patterns and inspiration for your project
        </Info>

        <CardGroup cols={2}>
          <Card title="Component Libraries" icon="layer-group">
            * **21st.dev** - Modern component patterns
            * **Aceternity UI** - Animated components
            * **Tailwind UI** - Professional templates
            * **shadcn/ui** - Radix-based components
            * **HeroUI** - Data-heavy interfaces
          </Card>

          <Card title="Design Inspiration" icon="palette">
            * **Dribbble** - Creative designs
            * **Behance** - Complete case studies
            * **Awwwards** - Award-winning sites
            * **Mobbin** - Mobile patterns
            * **Page Flows** - User flow examples
            * **UI Garage** - Categorized patterns
          </Card>
        </CardGroup>
      </Step>

      <Step title="Create Moodboard">
        <CodeGroup>
          ```text Moodboard Structure theme={null}
          Create a moodboard with:

          1. Color Exploration
             - Primary palette options
             - Accent colors
             - Semantic colors (success, warning, error)

          2. Typography Samples
             - Header styles
             - Body text options
             - Special use cases

          3. Component Examples
             - Buttons and CTAs
             - Cards and containers
             - Forms and inputs
             - Navigation patterns

          4. Interaction Patterns
             - Hover states
             - Loading animations
             - Transitions
             - Micro-interactions
          ```

          ```text Reference Collection theme={null}
          Collect 5-10 references for each:

          - Homepage layouts
          - Dashboard designs
          - Form interfaces
          - Data tables
          - Mobile navigation
          - Error states
          - Empty states
          - Success feedback
          ```
        </CodeGroup>
      </Step>

      <Step title="Define Design Tokens">
        ```typescript theme={null}
        // design-tokens.ts
        export const tokens = {
          colors: {
            primary: {
              50: '#f0f9ff',
              500: '#3b82f6',
              900: '#1e3a8a'
            },
            semantic: {
              success: '#10b981',
              warning: '#f59e0b',
              error: '#ef4444',
              info: '#3b82f6'
            }
          },
          spacing: {
            xs: '0.5rem',  // 8px
            sm: '1rem',    // 16px
            md: '1.5rem',  // 24px
            lg: '2rem',    // 32px
            xl: '3rem',    // 48px
          },
          typography: {
            fontFamily: {
              sans: ['Inter', 'system-ui'],
              mono: ['Fira Code', 'monospace']
            },
            fontSize: {
              xs: '0.75rem',
              sm: '0.875rem',
              base: '1rem',
              lg: '1.125rem',
              xl: '1.25rem',
              '2xl': '1.5rem',
              '3xl': '1.875rem',
              '4xl': '2.25rem',
            }
          },
          animation: {
            duration: {
              fast: '150ms',
              normal: '250ms',
              slow: '350ms'
            },
            easing: {
              default: 'cubic-bezier(0.4, 0, 0.2, 1)',
              bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
            }
          }
        }
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="🗺️ User Journey Mapping">
    <Card title="User Flow Documentation" icon="route">
      Map out complete user journeys before implementation
    </Card>

    <AccordionGroup>
      <Accordion title="Primary User Flows">
        <Steps>
          <Step title="Onboarding Flow">
            ```mermaid theme={null}
            graph TD
              A[Landing Page] --> B{New User?}
              B -->|Yes| C[Sign Up]
              B -->|No| D[Sign In]
              C --> E[Email Verification]
              E --> F[Profile Setup]
              F --> G[Onboarding Tour]
              G --> H[Dashboard]
              D --> H
            ```
          </Step>

          <Step title="Core Feature Flow">
            Document each major feature:

            * Entry points
            * Decision points
            * Success paths
            * Error handling
            * Exit points
          </Step>

          <Step title="Admin Workflows">
            Document admin-specific workflows:
            • Content management paths
            • User management flows
            • Settings and configuration
            • Analytics and reporting
          </Step>
        </Steps>
      </Accordion>

      <Accordion title="Edge Cases & Error Flows">
        <Warning>
          Document how the system handles errors and edge cases
        </Warning>

        Common scenarios to document:
        • Network failures
        • Invalid data
        • Expired sessions
        • Payment failures
        • Rate limiting
        • Maintenance mode
      </Accordion>

      <Accordion title="Permission Matrices">
        | Feature             | Guest | User | Admin | Super Admin |
        | ------------------- | ----- | ---- | ----- | ----------- |
        | View Public Content | ✅     | ✅    | ✅     | ✅           |
        | Edit Own Profile    | ❌     | ✅    | ✅     | ✅           |
        | Manage Users        | ❌     | ❌    | ✅     | ✅           |
        | System Settings     | ❌     | ❌    | ❌     | ✅           |
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="📊 Technical Discovery">
    <Card title="Architecture Planning" icon="sitemap">
      Define technical requirements before implementation
    </Card>

    <CodeGroup>
      ```text Data Requirements theme={null}
      Analyze data needs:

      1. Data Volume
         - Number of records expected
         - Growth projections
         - Storage requirements

      2. Data Relationships
         - One-to-one
         - One-to-many
         - Many-to-many
         - Hierarchical

      3. Real-time Requirements
         - Live updates needed?
         - Collaboration features?
         - Notification systems?

      4. Search & Filtering
         - Full-text search
         - Faceted search
         - Complex filtering
         - Sorting requirements
      ```

      ```text Performance Budget theme={null}
      Set performance targets:

      Metrics:
      - First Contentful Paint: < 1.2s
      - Time to Interactive: < 3.5s
      - Cumulative Layout Shift: < 0.1
      - JavaScript Bundle: < 200KB

      Optimization Strategy:
      - Code splitting
      - Lazy loading
      - Image optimization
      - Caching strategy
      - CDN configuration
      ```

      ```text Scaling Considerations theme={null}
      Plan for growth:

      1. User Scale
         - Current: 100 users
         - 6 months: 1,000 users
         - 1 year: 10,000 users

      2. Data Scale
         - Current: 1GB
         - 6 months: 10GB
         - 1 year: 100GB

      3. Traffic Patterns
         - Peak hours
         - Seasonal variations
         - Geographic distribution
      ```
    </CodeGroup>
  </Tab>
</Tabs>

***

<Card title="Next Step" icon="arrow-right" href="/ai-development/prompting/planning">
  With discovery complete, proceed to create your planning documents (claude.md and plan.md) →
</Card>