Brainstorm and scope web projects with structured phases

Web Project Brainstorming walks a new web project through six structured phases, asking one phase's questions at a time rather than dumping all of them at once: Core Concept & Scoping (target audience, core value, 3-5 mandatory features), UX & Information Architecture (sitemap, user journeys, mobile-first/desktop-first/balanced layout), Visual Styling & Design System (aesthetic direction, HSL/RGB color tokens preferred over static keywords, typography, interactive states), Technical Stack & Architecture (frontend framework, styling method, backend/data layer, state management), SEO/Accessibility/Performance (title tags, ARIA, lazy loading, SSR, CDN), and MVP Scope & Project Phases (what's absolutely required to deploy versus nice-to-have Phase 2 enhancements).

Use it at the start of any new web project or page redesign, when scoping feature sets and interaction patterns, when establishing a design system, or when evaluating tech-stack tradeoffs like Next.js versus vanilla JS or CSS Grid versus Tailwind. It covers conceptual mapping, architecture, and feature planning only - it does not replace writing implementation code or system configuration, and its output should be treated as a flexible blueprint refined as real technical constraints surface during development.

Each phase has a fixed question set (e.g. Phase 3 asks for design aesthetic - modern, minimalist, brutalist, glassmorphism, luxury - color palette, typography, and hover/click/transition states), delivered via an interactive questionnaire template phase by phase. Once all six are answered, the skill assembles a markdown "Project Blueprint" document with one numbered section per phase - value proposition and key features, sitemap and primary user flow, color tokens as HSL values and font choices, framework/styling/database selections, SEO title structure and performance strategy, and an explicit MVP-versus-Phase-2 roadmap.

### 3. Styling & Aesthetics
- **Color Tokens**: Background: `hsl(222, 47%, 11%)`, Accent: `hsl(217, 91%, 60%)`
- **Typography**: Inter (Body), Outfit (Headings)

During the Phase 4 architecture discussion, it flags security requirements early - SSL certificates, CORS policy, secure authentication storage, environment-variable protection - and explicitly never stores actual API tokens, passwords, or credentials in the blueprint document itself. Its own best practices push toward proposing logical defaults (responsive Tailwind/CSS Grid, standard semantic HTML) when the user is unsure, planning a correct semantic heading hierarchy from the start, and documenting explicit non-goals to prevent scope creep - naming Phase 6 discipline specifically as the fix for a project that expands before an MVP ships, and Phase 2's responsive-pattern planning as the fix for mobile design getting ignored until too late.

Developers and designers kicking off a new web project or page redesign who want a complete, documented blueprint - concept, UX, visual system, tech stack, SEO/performance plan, and a disciplined MVP scope - built through a focused, one-phase-at-a-time conversation instead of an unstructured requirements dump.