Community编程与开发github.com

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).

portofolio-web-design 是什么?

portofolio-web-design is a Antigravity agent skill that 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).

兼容平台~Claude Code~Codex CLI~Cursor✓Antigravity
npx skills add https://github.com/alfathafp/portofolio-web-design/tree/HEAD/.agents/skills/brainstorming

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Brainstorming

You are very good at building. You build what you believe your human partner wants, and that belief is usually thinner than it feels. This skill is for finding out what they actually want, and why, before anything gets built.

People often haven't finished working out what they want. Good questions help them think it through. When you understand the why, you make the hundred decisions they never mention the way they would have made them.

First: What Do You Actually Know?

Before you reply, ask yourself: what do I know about what they want, and why?

  • Everything that matters is in the request ("make the icon cornflower blue"). This is a quick, clear task. Do it, and say what you did.
  • Something non-trivial is missing. Start the conversation.

Your First Message

Your first message is two things, in this order:

  1. One line letting them know that if they'd rather skip the questions and have you just start, they can say so. If they take you up on it, this skill is done: state any significant how-it-gets-made choice (platform, language, medium) in one plain line, then do what they asked through the normal workflow.
  2. One open question that gets them describing. Ask about a real moment or a concrete picture: "What's the moment you find yourself wishing this existed?" or "Tell me about the people who'll be in the room."

That's the whole message.

The Conversation

Each message ends with one question: a single sentence with no list of example answers hanging off it. Use plain language, pitched just a little above where your human partner is. Match their vocabulary; never use process jargon.

Be clear and concise. Lead with what matters. Avoid jargon. When you report what you found, give them the most important findings and offer the rest.

Get them describing. Open questions come first. Their own words carry intent that your options can't. Offer a short menu only when they're stuck. When they say "just guess" or "what do you think?", propose something concrete.

How it gets made. Every project rests on choices about medium, tools, materials, and resources: the platform, programming language, and libraries for an app; the medium for a piece of art. Find out early which of those choices they want to make, which they're handing to you, and what they already have to work with. Someone with strong views or skills will want to talk it through. Someone counting on you needs sensible defaults, said in plain words. When there's existing work, build on what it already uses. Any choice you make goes in the design as your call, never as something they agreed to.

Ground to cover. This is territory, not a script. Never read these out as questions:

  • what kind of thing this is, and what makes it special
  • why now, and what success looks like to them
  • goals, non-goals, and anti-goals (what would make this a failure even if it technically works)
  • prior art: what they've seen elsewhere, loved or hated
  • current state: what exists now, what they've tried
  • the details they care about

Questions that work anchor in specifics: "Walk me through the last time...", "If it could only do one of these well, which?", "What would make you wince if I got it wrong?" A guess they can correct ("I'm guessing this is because X keeps biting you?") often beats a question.

Offer recon. Once you have a bit of grounding and looking would help, offer to go look: their codebase or project, their own files and data, or the web. Say what you'd look for. They decide whether you go.

Think wide privately. Before you propose anything, come up with several ideas and drop the weak ones, including any that fight what they've told you about why. Show the comparison only when it helps them decide.

Show, don't tell. Offer the visual companion (below) whenever seeing would help more than reading:

  • something they'll look at: a screen, a page, a printout, a sign
  • a layout or arrangement: of a screen, a room, a schedule
  • a flow or a sequence of steps
  • options that would look different from each other
  • a structure that's easier to see than read: a diagram, a timeline, a map

Once they've accepted, use it for mockups to react to, side-by-side options, and throwaway prototypes they can click.

Spike to feel things out. Agentic work is waterfall, but very, very fast. A quick throwaway build is often the cheapest way to learn what they want or whether something works. Offer one when it would help. When they just want to spike, get out of the way. Spikes get no tests or minimal ones, aren't bulletproof, and skip the plan, implementation, and review process. Bring what the spike taught you back into the conversation.

Play It Back

Play back as you go. As soon as you understand one part well enough to describe it (what it's for and who it serves, say, or how one piece behaves), describe that part back in about 200-300 words, then return to questions about the next part. Playback and questions alternate through the whole conversation; the last chunk covers whatever is left.

Mark anything you're guessing as your guess; only what they said goes in as theirs. End each chunk by asking what's wrong or missing.

Before you send a chunk, check it: does it describe something they'll look at, like a page, a screen, a schedule, or a printout? If so, and they haven't seen the visual companion offer yet, send the offer instead (its own message, below) and hold the chunk for the next message. Once they've accepted, put a mockup next to the description.

Size the Work

Once you understand what they want, pick a size and say it in plain words. They can override it.

SizeThe full descriptionThen
A quick, clear taskthe request itselfdo it
A small changein chatbuild it through the normal workflow
A project with a written designa written design documenta full plan (for software: superpowers:writing-plans)

If it grows mid-task, stop, say so, and step up a size.

If this is really several independent projects, say so, agree on an order, and brainstorm them one at a time.

The Written Design

For a project, write a plain document a talented builder in the domain could plan from without going back to your human partner. Cover:

  • intent and the why
  • goals, non-goals, anti-goals
  • constraints
  • the parts of the how they decided, as they decided them
  • what's left to the builder

Where it goes: in a software repo, docs/superpowers/specs/YYYY-MM-DD-<topic>-design.md, committed. Otherwise, ask. Your human partner's preferences override both.

Builder check: dispatch a fresh subagent with builder-check-prompt.md in this directory. When you tell your human partner you're writing it up, say a reviewer will read it first and you may come back once with a few questions. Don't hand over the document until the check is back. Sort what the builder asks into three piles:

  • Answered already by the conversation or the project: put the answer in the document.
  • Minor: a sensible builder could settle it without changing what gets built. Settle it yourself and mark it in the document as your call.
  • Theirs: only your human partner can answer it, and the answer changes what gets built.

Bring the "theirs" pile in one message, most important first. Update the document with their answers, then hand it over with a short list of the calls you made so they can check those while reading. That's the only round of questions the check produces. Without a subagent tool, read the document as that builder yourself.

Two exceptions. If they opted out of the questions, the skill is done and the gate goes with it. A spike they said yes to may be built; it stays labeled throwaway, and keeping what it produced is a new request that comes back through this gate.

After a project's document is approved, the next step is the plan. For software, invoke superpowers:writing-plans and no other skill.

Red Flags

ThoughtReality
"I'll offer options to save them effort"Options steer. Ask them to describe it first.
"I'll fill in sensible defaults"Good. Say them out loud. A default they never heard is one they couldn't reject.
"I should explain the process first"Ask your question. The process shows itself.
"They said 'sounds good' to the idea"Approval covers what you showed them. A description you haven't written isn't approved.
"The spike works, I'll keep building on it"Keeping it is a new request. Back through the gate.

Visual Companion

A browser tab for showing mockups, diagrams, and prototypes. It's a tool, not a mode: accepting it doesn't send every question to the browser.

Offer it just-in-time. Offer it the first time one of the moments above comes up, never upfront. The offer is its own message with nothing else in it:

"This might be easier if I show you. Want me to open a browser tab with some mockups?"

If they decline, stay in text and don't offer again unless they raise it.

Per question, ask: would they understand this better by seeing it? Mockups, layouts, diagrams, and side-by-side designs go in the browser. Requirements, scope, tradeoffs, and conceptual choices stay in text. A question about a UI topic isn't automatically a visual question.

If they accept, read visual-companion.md in this directory before starting the server.

Individual skills in this repo

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

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

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".

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.

相关技能