Design exploration through guided dialogue — iterative questioning, trade-off analysis, design doc output
Guides design brainstorming through iterative questioning, trade-off analysis, and structured document creation.
npx claudepluginhub jugrajsingh/skillgardenThis skill is limited to using the following tools:
Explore design ideas through iterative questioning, trade-off analysis, and structured design doc output.
$ARGUMENTS = feature idea or problem statement.
If $ARGUMENTS is empty, ask:
AskUserQuestion:
question: "What would you like to brainstorm?"
header: "Brainstorm Topic"
options:
- label: "New feature"
description: "Design a new capability from scratch"
- label: "Architecture decision"
description: "Evaluate structural approaches for a system concern"
- label: "Refactor strategy"
description: "Plan how to restructure existing code"
- label: "Problem decomposition"
description: "Break down a complex problem into manageable parts"
Gather context before asking questions:
git log -5 --oneline
ls docs/plans/ 2>/dev/null
Read README.md (or README) if it exists for project context.
Scan docs/plans/ for any existing design docs related to the topic. If a relevant design already exists, mention it and ask whether to extend or start fresh.
Ask up to 3 clarifying questions, one at a time, using AskUserQuestion with multiple-choice options where possible.
Question 1 — Who benefits:
AskUserQuestion:
question: "Who is the primary user or beneficiary of this?"
header: "Target User"
options:
- label: "End users"
description: "People using the product directly"
- label: "Developers"
description: "Engineers working on the codebase"
- label: "Operations"
description: "Team managing deployment and infrastructure"
- label: "Other"
description: "Describe in your response"
Question 2 — Constraints:
AskUserQuestion:
question: "What constraints should we consider?"
header: "Constraints"
options:
- label: "Must integrate with existing system"
description: "Cannot rewrite or replace current components"
- label: "Performance-critical"
description: "Latency, throughput, or resource limits matter"
- label: "Time-boxed"
description: "Must ship within a fixed timeframe"
- label: "No major constraints"
description: "Greenfield or flexible scope"
Question 3 — Scope:
AskUserQuestion:
question: "What scope feels right for a first iteration?"
header: "Scope"
options:
- label: "Minimal — proof of concept"
description: "Smallest version that validates the idea"
- label: "Focused — single use case"
description: "One complete workflow end-to-end"
- label: "Broad — multiple use cases"
description: "Cover the main scenarios from the start"
Skip questions whose answers are already clear from $ARGUMENTS or project context.
Based on answers, propose 2-3 approaches with trade-offs.
Present via AskUserQuestion:
AskUserQuestion:
question: "Which approach resonates most? We can refine from there."
header: "Proposed Approaches"
options:
- label: "{APPROACH_1_NAME}"
description: "{1-sentence summary}. Pro: {benefit}. Con: {drawback}"
- label: "{APPROACH_2_NAME}"
description: "{1-sentence summary}. Pro: {benefit}. Con: {drawback}"
- label: "{APPROACH_3_NAME}"
description: "{1-sentence summary}. Pro: {benefit}. Con: {drawback}"
Each approach should be meaningfully different, not minor variations.
Refine the selected approach. Up to 3 iteration rounds.
Each round:
After each round, offer:
AskUserQuestion:
question: "How does this look?"
header: "Design Check"
options:
- label: "Looks good — write it up"
description: "Converge on this design and generate the doc"
- label: "Needs refinement"
description: "I have feedback or concerns to address"
- label: "Start over with different approach"
description: "Switch to a different approach from Step 3"
If "Looks good" is selected, proceed to Step 5. If "Start over" is selected, return to Step 3.
Generate a slug from the feature name (lowercase, hyphenated, max 5 words).
mkdir -p docs/plans
Create docs/plans/{SLUG}-design.md with:
# Design: {TITLE}
**Date:** {TODAY}
**Status:** proposal
## Overview
{ 2-3 sentence summary of the feature and chosen approach }
## Goals
- { what this design achieves }
- { measurable outcomes where possible }
## Non-Goals
- { explicitly out of scope items }
- { things this design does NOT address }
## Approach
{ detailed description of the chosen approach }
### Key Decisions
- { decision 1 }: { rationale }
- { decision 2 }: { rationale }
## Trade-offs Considered
| Option | Pros | Cons | Verdict |
|--------|------|------|---------|
| {APPROACH_1} | {pros} | {cons} | {chosen/rejected} |
| {APPROACH_2} | {pros} | {cons} | {chosen/rejected} |
## Open Questions
- { unresolved question 1 }
- { unresolved question 2 }
Keep design docs under 200 lines.
AskUserQuestion:
question: "What would you like to do next?"
header: "Next Steps"
options:
- label: "Create worktree"
description: "Set up isolated branch for this feature"
- label: "Create implementation plan"
description: "Decompose into tasks with 3-file persistence"
- label: "Done for now"
description: "Save design doc and stop here"
planner:worktrees skill, passing the slug as branch nameplanner:planning skill, passing the design doc pathExpert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.