frontend-strategy

What this skill does

# Frontend Strategy

Strategic website planning skill. Bridges the gap between "I need a website" and writing code. Produces professional strategy documents through structured discovery, then orchestrates specialist agents at defined handoff points.

**Positioning:** This skill handles the discovery and strategy phase. Hand off to the `frontend-engineer` agent when ready to build. Use `/frontend:review-design` instead if improving an existing frontend codebase.

---

## Psychology Foundation

Four principles woven into every phase and deliverable. Every recommendation must tie back to at least one.

### 1. Halo Effect - First Impressions Shape Everything

Users form an opinion about a website in ~50 milliseconds. That first impression colors judgment of everything that follows - products, services, company quality. A professional, clean hero section creates a positive halo; clutter or low-quality imagery creates a negative halo that no amount of good content below the fold can overcome.

**Application:**
- Define the "3-second halo moment" for every key landing page
- Hero section is the most important real estate - engineer it deliberately
- Ask: "What is the single feeling a visitor should have in the first 50ms?"
- Reference: Apple (full-screen product shot, single bold headline, minimalist confidence)

### 2. Cognitive Load + Cognitive Fluency - Make It Easy

Brains conserve energy. High cognitive load feels stressful and unprofessional. Cognitive fluency - things that are easy to process - gets interpreted as better, more trustworthy, higher quality. Premium websites are masterclasses in clarity: generous white space, clear visual hierarchy, simple predictable navigation.

**Application:**
- Max 7 primary navigation items (Miller's Law)
- 3-click maximum depth to any content
- Progressive disclosure - show only what's needed at each step
- One primary goal per section, clear visual hierarchy
- White space is not empty space - it's a psychological cue of confidence and exclusivity
- Reference: Hermes/Bottega Veneta (extreme white space = exclusivity), Stripe/Figma (complex products made simple)

### 3. Inclusive Design + Accessibility - Design for Every User

Premium means flawless execution for everyone. Accessible design is not an afterthought - it reduces cognitive load for all users, not just those with disabilities. High contrast, semantic HTML, keyboard navigability, and screen-reader support signal a mature, top-tier brand.

**Application:**
- WCAG AA minimum contrast ratios on all text/background combinations
- Semantic heading hierarchy (h1-h6) and landmark regions for screen readers
- All interactive elements must be keyboard-accessible with visible focus states
- Document focus order and tab sequence in the design direction phase
- Alt text strategy for images - decorative vs informative
- Reference: Gov.uk (world-class accessibility as design quality), Apple (accessibility as premium feature)

### 4. Micro-interactions + Peak-End Rule - Design the Memorable Moments

People remember experiences by their most intense points (peaks) and how they ended, not as an average of every moment. Micro-interactions create small peaks of positive emotion - a satisfying hover state, a smooth scroll transition, a gentle form confirmation. Premium websites feel alive because of these thoughtful details. They signal that the creator cared.

**Application:**
- Every page must end with a strong, intentional moment (CTA, confirmation, delight)
- Identify 3-5 "peak moments" per user journey and design them deliberately
- Confirmation/success pages are positive peaks - never treat them as afterthoughts
- Static and lifeless = cheap. Thoughtful details = premium craftsmanship
- Reference: Apple (scroll animations, menu transitions), any premium SaaS (loading states, onboarding flows)

---

## Phase 0: Client Discovery

Structured interview. Do not proceed until all questions are answered and confirmed.

### Discovery Template

```
CLIENT DISCOVERY
-------------------------------------------
Business:       [company name, industry, what they sell/do]
Objective:      [primary goal - leads, sales, awareness, portfolio, SaaS signups]
Audience:       [who, demographics, tech comfort, device preference]
Competitors:    [3-5 competitor URLs]
Tone:           [3 adjectives describing desired brand feeling]
Brand assets:   [existing brand guidelines, logo, specific colors/fonts, or "none - start fresh"]
UVP:            [unique value proposition - biggest competitive advantage]
Existing site:  [URL if redesign, "none" if new]
Budget range:   [ballpark for scope calibration]
Timeline:       [launch target]
Success metrics:[how they'll measure if the site worked]
-------------------------------------------
```

**Hard gate:** Do not proceed to Phase 1 until the user confirms all discovery answers. If answers are vague, push for specifics - especially Audience, Objective, and Success metrics. These drive every decision downstream.

---

## Phase 1: Website Brief

Compile discovery into a professional brief document. Use the `references/website-brief-template.md` template.

Sections:
- Executive summary (2-3 sentences)
- Target audience profile (demographics, goals, pain points, device behavior). For persona-style critique testing during Phase 5 review, consult `plugins/frontend/skills/frontend-css/references/personas.md` (5 archetypes: Alex impatient power user, Jordan confused first-timer, Sam accessibility-dependent, Riley stress tester, Casey distracted mobile)
- Competitor analysis (table: site, strengths, weaknesses, design quality, key takeaway)
- Value proposition (what makes this business different, stated in one sentence)
- Brand personality (3 adjectives from discovery with explanation of each)
- Technical requirements (CMS, e-commerce, integrations, performance targets)
- **Halo Moment Definition** - for the homepage and each key landing page: "In the first 50ms, the visitor should feel [X] because [Y]"
- **Scope calibration** - if budget is low (<5k), favor standard layouts and native UI components; if budget is premium (>20k), push advanced CSS interactions, WebGL, scroll-driven animations, and View Transitions

### HANDOFF: SEO Competitive Analysis

```
HANDOFF
-------------------------------
Brief:    [paste the full client discovery, unchanged]
Context:  [competitor URLs, industry, target audience]
Ask:      Analyze the SEO landscape for these competitors.
          Report: domain authority estimates, top-ranking keywords,
          content gaps, backlink strategies, and opportunities
          for the client to differentiate in search.
-------------------------------
```

Invoke `seo-specialist` agent. Incorporate findings into the competitor analysis section of the brief.

---

## Phase 2: Sitemap + User Flows

Information architecture phase. Use the `references/sitemap-template.md` template.

Sections:
- Page inventory (every page with purpose statement)
- Page hierarchy (tree format showing parent-child relationships)
- Navigation structure (primary nav, footer nav, utility nav)
- User flows (text-arrow notation for key journeys)
- Conversion funnels (entry point -> steps -> conversion)

**Cognitive Load rules:**
- Max 7 primary navigation items
- Max 3-click depth to any content
- Progressive disclosure - complex information revealed in stages
- Every page has one primary purpose and one primary CTA

### HANDOFF SEQUENCE: IA Validation -> Layout Design

**Step 1: frontend-design**

```
HANDOFF
-------------------------------
Brief:    [paste the full client discovery, unchanged]
Context:  [sitemap, page hierarchy, proposed user flows, conversion funnels]
Ask:      Validate this information architecture against the target
          audience's mental model. Review user flows for friction
          points. Optimize conversion funnels - identify drop-off
          risks and suggest improvements. Flag any IA decisions
          that increase cognitive l