TETRA2000/brainstorm

Brainstorm Skill

Parameters

• topic (required): What to brainstorm (e.g., "pricing page", "notification component")
• referenceUrls (optional): One or more website URLs to analyze for design inspiration
• scope (optional): repository or local (default: ask user)

Workflow

1. Analyze Reference Websites (if referenceUrls provided)

When the user provides reference URLs (or mentions websites they like or want to draw inspiration from):

For each reference URL:

1. Open the browser and navigate to the URL:

   playwright-cli open {url}
   

2. Take a screenshot and snapshot to capture visual design and structure:

   playwright-cli screenshot --filename=reference-{n}.png
   playwright-cli snapshot --filename=reference-{n}.yaml
   

3. Scroll through key sections to capture the full page if needed:

   playwright-cli press End
   playwright-cli screenshot --filename=reference-{n}-bottom.png
   

4. Close the browser before opening the next URL:

   playwright-cli close
   

Summarize patterns observed across the reference sites (layout patterns, color usage, typography hierarchy, spacing rhythm, component patterns) and incorporate them into the brainstorm ideas. Map observations to the project's existing theme tokens and components.

2. Gather Context

• Read docs/components.md to discover available components
• Read docs/pages.md to discover existing pages
• Read shared/references/component-registry.md for component details
• Read shared/references/tailwind-theme.md for available design tokens

3. Generate Ideas

Create 3-5 design alternatives, each containing:

• Title: Descriptive name for the idea
• Description: What it is and why it's useful
• Layout: Rough layout description (sections, arrangement)
• Components Used: Existing components from the registry
• Components Needed: New components that would need to be created
• Design Notes: Color scheme, typography, spacing suggestions using theme tokens

4. Store Brainstorm

Save the brainstorm document:

• repository → docs/brainstorms/{topic-slug}.md
• local → docs/_local/brainstorms/{topic-slug}.md

Document format:

# Brainstorm: {Topic}
Date: {date}

## Idea 1: {Title}
**Description**: ...
**Layout**: ...
**Uses**: {existing components}
**Needs**: {new components}
**Design Notes**: ...

## Idea 2: {Title}
...

5. Offer Next Steps

Ask the user which idea they'd like to pursue:

• "Would you like me to create this as a component?" → trigger /create-component
• "Would you like me to create this as a page?" → trigger /create-page

Output

Report:

1. Number of ideas generated
2. Brainstorm document saved (path)
3. Existing components referenced
4. New components suggested
5. Reference websites analyzed (if any)

Example

User: "Brainstorm ideas for a pricing page"

Generates 3-5 pricing page design alternatives using existing components and theme.

User: "Brainstorm a dashboard layout, I like how https://vercel.com/dashboard and https://railway.app look"

Captures both reference websites via playwright-cli, analyzes their layout patterns, color schemes, and component structures, then generates 3-5 dashboard ideas inspired by those references — mapped to the project's theme tokens and existing components.