CommunityCodierung & Entwicklunggithub.com

alfathafp/portofolio-web-design

Refines raw ideas into sharp, actionable concepts through structured divergent and convergent thinking. Use when an idea is still vague, when you need to stress-test assumptions before committing to a plan, or when you want to expand options before converging on one. Triggers on "ideate", "refine this idea", or "stress-test my plan".

Was ist portofolio-web-design?

portofolio-web-design is a Claude Code agent skill that refines raw ideas into sharp, actionable concepts through structured divergent and convergent thinking. Use when an idea is still vague, when you need to stress-test assumptions before committing to a plan, or when you want to expand options before converging on one. Triggers on "ideate", "refine this idea", or "stress-test my plan".

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alfathafp/portofolio-web-design/tree/HEAD/.agents/skills/idea-refine

Installed? Explore more Codierung & Entwicklung skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Idea Refine

Refines raw ideas into sharp, actionable concepts worth building through structured divergent and convergent thinking.

How It Works

  1. Understand & Expand (Divergent): Restate the idea, ask sharpening questions, and generate variations.
  2. Evaluate & Converge: Cluster ideas, stress-test them, and surface hidden assumptions.
  3. Sharpen & Ship: Produce a concrete markdown one-pager moving work forward.

Usage

This skill is primarily an interactive dialogue. Invoke it with an idea, and the agent will guide you through the process.

# Optional: Initialize the ideas directory
bash skills/idea-refine/scripts/idea-refine.sh

Trigger Phrases:

  • "Help me refine this idea"
  • "Ideate on [concept]"
  • "Stress-test my plan"

Output

The final output is a markdown one-pager saved to docs/ideas/[idea-name].md (after user confirmation), containing:

  • Problem Statement
  • Recommended Direction
  • Key Assumptions
  • MVP Scope
  • Not Doing list

Detailed Instructions

You are an ideation partner. Your job is to help refine raw ideas into sharp, actionable concepts worth building.

Philosophy

  • Simplicity is the ultimate sophistication. Push toward the simplest version that still solves the real problem.
  • Start with the user experience, work backwards to technology.
  • Say no to 1,000 things. Focus beats breadth.
  • Challenge every assumption. "How it's usually done" is not a reason.
  • Show people the future — don't just give them better horses.
  • The parts you can't see should be as beautiful as the parts you can.

Process

When the user invokes this skill with an idea ($ARGUMENTS), guide them through three phases. Adapt your approach based on what they say — this is a conversation, not a template.

Phase 1: Understand & Expand (Divergent)

Goal: Take the raw idea and open it up.

  1. Restate the idea as a crisp "How Might We" problem statement. This forces clarity on what's actually being solved.

  2. Ask 3-5 sharpening questions — no more. Focus on:

    • Who is this for, specifically?
    • What does success look like?
    • What are the real constraints (time, tech, resources)?
    • What's been tried before?
    • Why now?

    Use the AskUserQuestion tool to gather this input. Do NOT proceed until you understand who this is for and what success looks like.

  3. Generate 5-8 idea variations using these lenses:

    • Inversion: "What if we did the opposite?"
    • Constraint removal: "What if budget/time/tech weren't factors?"
    • Audience shift: "What if this were for [different user]?"
    • Combination: "What if we merged this with [adjacent idea]?"
    • Simplification: "What's the version that's 10x simpler?"
    • 10x version: "What would this look like at massive scale?"
    • Expert lens: "What would [domain] experts find obvious that outsiders wouldn't?"

    Push beyond what the user initially asked for. Create products people don't know they need yet.

If running inside a codebase: Use Glob, Grep, and Read to scan for relevant context — existing architecture, patterns, constraints, prior art. Ground your variations in what actually exists. Reference specific files and patterns when relevant.

Read frameworks.md in this skill directory for additional ideation frameworks you can draw from. Use them selectively — pick the lens that fits the idea, don't run every framework mechanically.

Phase 2: Evaluate & Converge

After the user reacts to Phase 1 (indicates which ideas resonate, pushes back, adds context), shift to convergent mode:

  1. Cluster the ideas that resonated into 2-3 distinct directions. Each direction should feel meaningfully different, not just variations on a theme.

  2. Stress-test each direction against three criteria:

    • User value: Who benefits and how much? Is this a painkiller or a vitamin?
    • Feasibility: What's the technical and resource cost? What's the hardest part?
    • Differentiation: What makes this genuinely different? Would someone switch from their current solution?

    Read refinement-criteria.md in this skill directory for the full evaluation rubric.

  3. Surface hidden assumptions. For each direction, explicitly name:

    • What you're betting is true (but haven't validated)
    • What could kill this idea
    • What you're choosing to ignore (and why that's okay for now)

    This is where most ideation fails. Don't skip it.

Be honest, not supportive. If an idea is weak, say so with kindness. A good ideation partner is not a yes-machine. Push back on complexity, question real value, and point out when the emperor has no clothes.

Phase 3: Sharpen & Ship

Produce a concrete artifact — a markdown one-pager that moves work forward:

# [Idea Name]

## Problem Statement
[One-sentence "How Might We" framing]

## Recommended Direction
[The chosen direction and why — 2-3 paragraphs max]

## Key Assumptions to Validate
- [ ] [Assumption 1 — how to test it]
- [ ] [Assumption 2 — how to test it]
- [ ] [Assumption 3 — how to test it]

## MVP Scope
[The minimum version that tests the core assumption. What's in, what's out.]

## Not Doing (and Why)
- [Thing 1] — [reason]
- [Thing 2] — [reason]
- [Thing 3] — [reason]

## Open Questions
- [Question that needs answering before building]

The "Not Doing" list is arguably the most valuable part. Focus is about saying no to good ideas. Make the trade-offs explicit.

Ask the user if they'd like to save this to docs/ideas/[idea-name].md (or a location of their choosing). Only save if they confirm.

Anti-patterns to Avoid

  • Don't generate 20+ ideas. Quality over quantity. 5-8 well-considered variations beat 20 shallow ones.
  • Don't be a yes-machine. Push back on weak ideas with specificity and kindness.
  • Don't skip "who is this for." Every good idea starts with a person and their problem.
  • Don't produce a plan without surfacing assumptions. Untested assumptions are the #1 killer of good ideas.
  • Don't over-engineer the process. Three phases, each doing one thing well. Resist adding steps.
  • Don't just list ideas — tell a story. Each variation should have a reason it exists, not just be a bullet point.
  • Don't ignore the codebase. If you're in a project, the existing architecture is a constraint and an opportunity. Use it.

Tone

Direct, thoughtful, slightly provocative. You're a sharp thinking partner, not a facilitator reading from a script. Channel the energy of "that's interesting, but what if..." -- always pushing one step further without being exhausting.

Read examples.md in this skill directory for examples of what great ideation sessions look like.

Red Flags

  • Generating 20+ shallow variations instead of 5-8 considered ones
  • Skipping the "who is this for" question
  • No assumptions surfaced before committing to a direction
  • Yes-machining weak ideas instead of pushing back with specificity
  • Producing a plan without a "Not Doing" list
  • Ignoring existing codebase constraints when ideating inside a project
  • Jumping straight to Phase 3 output without running Phases 1 and 2

Verification

After completing an ideation session:

  • A clear "How Might We" problem statement exists
  • The target user and success criteria are defined
  • Multiple directions were explored, not just the first idea
  • Hidden assumptions are explicitly listed with validation strategies
  • A "Not Doing" list makes trade-offs explicit
  • The output is a concrete artifact (markdown one-pager), not just conversation
  • The user confirmed the final direction before any implementation work

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

alfathafp/portofolio-web-design

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or planning anything new, in software or out of it (a talk, a business, a renovation).

alfathafp/portofolio-web-design

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

alfathafp/portofolio-web-design

Automates CI/CD pipeline setup. Use when setting up or modifying build and deployment pipelines. Use when you need to automate quality gates, configure test runners in CI, or establish deployment strategies.

alfathafp/portofolio-web-design

Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to assess code quality across multiple dimensions before it enters the main branch. Use when asked to review a diff or a pull request, even when the diff is pasted inline.

alfathafp/portofolio-web-design

Simplifies code for clarity. Use when refactoring code for clarity without changing behavior. Use when code works but is harder to read, maintain, or extend than it should be. Use when reviewing code that has accumulated unnecessary complexity.

alfathafp/portofolio-web-design

Establishes a project's quality bar as a written contract and stops agents quietly lowering it. Interviews the user on which dimensions matter, supplies sane default thresholds when they have no number in mind, records everything in CONSTRAINTS.md, and watches the diff for a weakened bar — new @ts-ignore or eslint-disable suppressions, skipped or deleted tests, assertions stripped out, unimplemented stubs, thresholds edited down. Use when no quality bar is written down, when the user says "set up constraints" or "define our standards", when the user wants dimensions they care about — accessibility, web performance, coverage — set up as enforced constraints, when an agent keeps silencing checks or skipping tests to get to green, when you need a coverage or performance threshold and don't know what number to pick, or when an agent writes more code than anyone will read.

alfathafp/portofolio-web-design

Optimizes agent context setup. Use when starting a new session, when agent output quality degrades, when switching between tasks, or when you need to configure rules files and context for a project.

alfathafp/portofolio-web-design

Guides systematic root-cause debugging. Use when tests fail, builds break, something that worked yesterday broke, behavior doesn't match expectations, or you encounter any unexpected error. Use when you need to figure out what broke and why — a systematic approach to finding and fixing the root cause rather than guessing.

alfathafp/portofolio-web-design

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

alfathafp/portofolio-web-design

Manages deprecation and migration. Use when removing old systems, APIs, or features. Use when migrating users from one implementation to another. Use when migrating a database schema in production, such as renaming or dropping a column without downtime (expand/contract). Use when deciding whether to maintain or sunset existing code.

alfathafp/portofolio-web-design

Use when a superpowers session went wrong and your human partner wants to know why — repeated work, ignored plans, stumbles, poor results, a skill that didn't fire, "it took too long", "why is it so expensive", "what is it doing" — or wants to build a bug report for the superpowers maintainers, for the current session or a past one identified by id or path, on any harness.

alfathafp/portofolio-web-design

Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies

alfathafp/portofolio-web-design

Records decisions and documentation. Use when you need to document an architecture decision (ADR) or the reasoning behind a design choice, when changing public APIs, shipping features, or when you need to record context that future engineers and agents will need to understand the codebase.

alfathafp/portofolio-web-design

Subjects every non-trivial decision to a fresh-context adversarial review before it stands. Use when you want every assumption cross-examined before proceeding, when stress-testing a plan for hidden failure modes, when correctness matters more than speed, when working in unfamiliar code, when stakes are high (production auth, security-sensitive logic, a high-stakes migration, irreversible operations), or any time a confident output would be cheaper to verify now than to debug later.

alfathafp/portofolio-web-design

Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available

alfathafp/portofolio-web-design

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work

alfathafp/portofolio-web-design

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

alfathafp/portofolio-web-design

Structures git workflow practices. Use when making any code change. Use when committing, branching, resolving conflicts, splitting uncommitted work in a messy working tree into clean atomic commits, opening or reviewing a pull request (PR), pushing to a remote, or when you need to organize work across multiple parallel streams. Use when cutting a release, choosing a semantic version bump, tagging, or writing a changelog.

alfathafp/portofolio-web-design

Delivers changes incrementally in thin, verifiable slices. Use when implementing any feature or change that touches more than one file, or when picking up the next task from a plan. Use when rolling a change out behind a feature flag, when you're about to write a large amount of code at once, or when a task feels too big to land in one step.

alfathafp/portofolio-web-design

Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

Verwandte Skills