Masterclass framework for brainstorming web development projects and page designs. Outlines structural phases for concept, UX flow, styling aesthetics, technical architecture, and SEO.
SkillScore95Maintained
Automatic
◆Product Management pack
Last verified 8/12/2026
What it changes
Passed 21 of 22 test cases with the skill, and 19 of 22 without it.
Without skill86%
With skill95%
Checks it passed that the model alone missed
Presents only the initial Phase 1 questions to begin the interactive dialogue incrementally.
Initiates step 1 by asking discovery questions rather than generating a complete full-project specification immediately.
Asks questions exclusively for Phase 1 without presenting questions or content for Phases 2 through 6 in the initial response.
3 fixed18 passed either way0 still failing1 broke
Pass-rate lift
+9 pp
Tokens
+29%
Agent turns
0%
Response time
-37%
Model gemini-3.6-flashMeasured 8/12/2026v121 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 3
Prompt
I want to start brainstorming a community board website for local gardeners. Please give me the interactive questionnaire prompt to kick off our discovery session.
What was checked, without and with the skill
Checked
Without skill
With skill
Presents only the initial Phase 1 questions to begin the interactive dialogue incrementally.
Missed
Passed
case-12 · gemini-3.6-flash · 8/12/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md136 linessingle file
Web Project Brainstorming
Overview
This skill provides a structured, masterclass-level framework for brainstorming web projects, web applications, or individual page designs at their inception. It guides developers and designers through scoping the core product concept, mapping user flows, defining visual styling aesthetics, selecting the technical stack, and planning for search engine optimization (SEO) and performance.
When to Use This Skill
Use at the start of any new web development project or page redesign.
Use when scoping feature sets, user roles, and interaction patterns for web applications.
Use when establishing design systems, color tokens, and layout guidelines.
Use when evaluating tech stacks (e.g., Next.js vs. Vanilla JS, CSS Grid vs. Tailwind).
How It Works
Execute web project brainstorming sequentially across six structured phases. Ask the user questions one phase at a time to maintain focus and ensure thorough alignment.
Phase 1: Core Concept & Scoping
Define the product's primary value proposition and scope:
Target Audience: Who is using the website or application?
Core Value: What problem does it solve for users?
Key Features: What are the top 3–5 mandatory features?
Phase 2: User Experience (UX) & Information Architecture
Map how users navigate and interact:
Page Hierarchy: What is the sitemap and page structure?
User Journeys: What step-by-step flows do users take to complete key goals?
Responsive Layout: Is the interface mobile-first, desktop-first, or balanced?
Phase 3: Visual Styling & Design System
Establish the visual guidelines and aesthetic parameters:
Design Aesthetic: Modern, minimalist, brutalist, glassmorphism, or luxury?
Color Palette: What are the primary, secondary, and accent colors? (Prefer tailorable HSL/RGB models over static color keywords).
Typography: Which Google Fonts or system fonts fit the theme? (e.g., Inter, Outfit, Syne).
Interactive States: How do hovers, clicks, transitions, and loading states behave?
Phase 4: Technical Stack & Architecture
Select the technologies and integration systems:
Frontend Framework: React, Next.js, Vite, Astro, Svelte, or Vanilla HTML/JS?
Styling Method: Vanilla CSS, Tailwind CSS, or CSS Modules?