Skip to content
Ad slotPut your product on this line. It runs at the top of every page on IndieHacked.Advertise

IndieHacked
Guides

The agent skills to install before you build a web app

Seven skills from the companies behind React, Supabase and Stripe, and the one command that installs each.

Written by the IndieHacked teamAgent skills6 min read

A coding agent builds a better web app when it carries skills from the companies behind your framework, your database and your payment provider.

Start with Anthropic's frontend-design for the look, Vercel's React and design-review skills for the code, then Supabase's and Stripe's skills for the backend and the checkout.

Each installs with one command and works in Claude Code, Cursor, Codex and the other agents that read SKILL.md files.

Want your coding agent to walk you through it?Get the prompt

Why the publisher's own skill beats a prompt

A skill is a folder with a SKILL.md file: instructions and reference files an agent loads when the task calls for them. The agent keeps only each skill's name and description in mind until then, so installing a dozen costs little. When the publisher is the company that makes the library, the rules in it follow the library as it is today, which a model's training does not.

Install the skills below in the project you are building, so everyone working on it gets the same ones. Read a skill before you install it: it can carry scripts the agent runs.

For the look: frontend-design

Anthropic's frontend-design skill pushes the agent away from the template look that most generated sites share: the same fonts, the same purple gradients, the same card grids. It asks for a clear visual direction before the first component.

In Claude Code
/plugin install frontend-design@claude-plugins-official

For the code: Vercel's React skills

Vercel publishes several skills in one repository. Three matter for a web app. vercel-react-best-practices covers React and Next.js performance: how data loads, what renders on the server and what ends up in the bundle. web-design-guidelines reviews your UI code for accessibility and usability problems; it downloads its rule list from GitHub before each review. vercel-composition-patterns keeps component APIs from turning into a pile of true and false props.

All of them, or one with --skill
npx skills add vercel-labs/agent-skills
npx skills add vercel-labs/agent-skills --skill web-design-guidelines

For the database: Supabase

Supabase's repository has two skills: supabase, for its products, CLI and MCP server, and supabase-postgres-best-practices, for schema design, indexes and row level security. The second matters most on day one. A table without row level security is readable by anyone who has your public key.

Install
npx skills add supabase/agent-skills

For the checkout: Stripe

stripe-best-practices helps the agent choose between Checkout and the lower-level payment APIs, set up subscriptions and tax, and keep keys and webhooks safe. Stripe recommends its own CLI to install it; the skills CLI works too.

Either one
stripe agent setup
npx skills add https://docs.stripe.com

Where they end up

In a project, the skills CLI writes to .claude/skills/ for Claude Code; with -g it writes to ~/.claude/skills/ for every project on your machine. Cursor and GitHub Copilot read .claude/skills as well, and Codex and Gemini CLI read .agents/skills. The how-to-add guide covers each agent's folders.

Set it up with your coding agent

A prompt for Claude Code, Codex, Cursor or the agent you use. Fill in your setup at the end and it walks you through the work, one step at a time. Free with an account.

Log in to get the promptSign up

Questions founders ask

Do skills slow the agent down?

Barely. At the start of a session the agent loads each skill's name and description only, about 100 tokens a skill by Anthropic's figure. The full instructions load when a task matches the description.

Should I install every skill I can find?

No. Two skills with overlapping descriptions compete for the same tasks, and every skill you install is code you trust. Install the ones for the stack you actually use and remove the rest with npx skills remove.

Where to go next

Report an error. Spotted a factual or language mistake? .

More guides

All guides

A new guide every few days.

Weekly Unpack brings each one to your inbox. One email a week with the launches, the numbers and one founder story.

Subscribe and your account is Plus.

By subscribing you agree to our Privacy Policy.