Top 20 Claude Code Skills for Web and App Builds

The practical, ranked field guide to the Claude Code Skills that actually ship websites and apps in 2026.

Anthropic's public skills repository crossed 153,000 GitHub stars in eight months, and a single official skill (frontend-design) has been installed into more than a quarter of a million projects - GitHub: anthropics/skills. That number is the clearest signal of a quiet shift: the unit of progress in AI coding stopped being the prompt and became the Skill, a small folder of reusable instructions that teaches Claude Code how to do a specific job well, every time, without you re-explaining it.

But here is the problem: most "best Claude Code skills" lists are noise. They mix dead repos, renamed projects, and skills that never existed. For someone building a real website or app, the question is narrower and harder: which skills measurably improve the thing you ship, which are beginner-safe, which are officially backed, and which are quietly abandoned. This guide answers that with a verified, weighted ranking rather than a popularity contest.

This guide breaks down exactly what a Claude Code Skill is, the 20 skills that matter most for building websites and apps in 2026 (each verified against a real source), the scoring method behind the ranking, what it costs to run them, where they fail, and how AI agents are pushing the whole practice forward. It is written for founders and product people, not only engineers, so the mechanics are explained plainly before the deep dives begin.

Contents

1. What a Claude Code Skill actually is
2. Why skills rewired website and app building in 2026
3. How we ranked the top 20 (criteria and weights)
4. The top 20 Claude Code skills (master scoring table)
5. Design and frontend skills
6. Build and component skills
7. Backend, data, and auth skills
8. Payments and deployment skills
9. Quality: testing, performance, SEO, and security
10. Workflow and asset skills
11. How to install and combine skills into a stack
12. Pricing: what running these skills actually costs
13. Where skills fail and what their limits are
14. How AI agents are changing the build
15. The bottom line: choosing your skill stack

1. What a Claude Code Skill actually is

The fastest way to misunderstand the 2026 Claude Code ecosystem is to treat a Skill as a fancy prompt. It is not. A Skill is a folder on disk that contains a single required file, SKILL.md, plus any number of optional scripts, templates, and reference documents. Anthropic's own engineering write-up defines it precisely: a skill is a directory containing a SKILL.md file that "must start with YAML frontmatter that contains some required metadata: name and description" - Anthropic Engineering. That description field is the load-bearing part, because Claude reads it to decide, on its own, whether the skill is relevant to your request.

The reason this matters for building software is progressive disclosure. Unlike a CLAUDE.md file, which sits in context permanently and eats tokens whether you need it or not, a skill costs roughly a hundred tokens until it is invoked, then loads its full instructions only when the task calls for it. This is what lets a single Claude Code install carry dozens of specialized skills without drowning in context. The model treats the collection like a table of contents and pulls the right chapter on demand.

The official anatomy of a skill is worth seeing once, because every entry in this guide follows it.

A minimal skill is genuinely one folder and one file. The frontmatter carries the metadata; the Markdown body carries the instructions Claude follows once triggered.

---
name: deploy-checklist
description: Use when shipping a web app to production. Runs the pre-deploy checks, env validation, and smoke test before any deploy.
---

## Steps
1. Verify environment variables are set
2. Run the test suite and the build
3. Smoke-test the production URL after deploy

Skills launched in October 2025 across Claude Code, Claude.ai, and the Claude API as an open, portable standard, and the format has since been adopted well beyond Anthropic - Claude blog. The key field rules are simple enough for a non-engineer to respect: name is lowercase letters, numbers, and hyphens (max 64 characters), and description is plain prose (max 1024 characters) that states both what the skill does and when to use it. Claude Code adds extra optional fields on top, including allowed-tools (what the skill may do without asking), model and effort overrides, and a context: fork flag that runs the skill in an isolated sub-agent. That last detail connects skills to the wider Claude Code architecture, which the next section unpacks.

The practical takeaway is that a skill is infrastructure, not a conversation. You install it once, it lives in your project or your home directory, and from then on Claude reaches for it automatically. That permanence is exactly why choosing the right twenty matters. If you are coming to this fresh, our companion walkthrough on Claude Code as a 2026 website builder covers the base tool before skills enter the picture.

2. Why skills rewired website and app building in 2026

To understand why skills changed building, start from first principles rather than from the hype. A website or app is not "code." It is a set of outcomes: a page that loads fast, a checkout that charges a card, a login that does not leak data, a layout that does not look like every other AI-generated site. The bottleneck in shipping those outcomes with an AI agent was never the model's raw ability to write a function. It was the model's lack of durable, situated knowledge: the specific conventions of shadcn/ui, the exact way Supabase row-level security should be written, the difference between a Core Web Vitals score that passes and one that fails. Skills are the mechanism that injects that situated knowledge at the precise moment it is needed.

This reframes the whole question. When intelligence becomes cheap and abundant, the scarce input is not reasoning, it is correct context delivered just in time. A general model asked to "build a pricing page" will produce something plausible and generic. The same model with a frontend-design skill commits to a real aesthetic before writing a line, and the same model with a shadcn skill installs the right components instead of hand-rolling brittle ones. The skill does not make the model smarter. It makes the model's intelligence land on the correct target. That is the structural reason a thin folder of Markdown can move output quality more than a model upgrade.

The talk above, delivered by two Anthropic researchers, makes the argument bluntly: the leverage in 2026 is not in building ever more elaborate agents, it is in giving a capable agent the right skills. For builders, the implication is concrete. Your competitive edge is less about which model you run (most serious builds default to the same flagship) and more about which skill stack you have assembled around it. We explored the same dynamic from the company-building angle in our guide to building software with AI, and the pattern holds: the model is the commodity, the assembled context is the product.

There is also a distribution story that makes skills feel different from older plugin systems. Because a skill is just a folder, it travels. It commits to a git repo, ships inside a plugin, syncs across machines, and works the same in Claude Code, Claude.ai, and the API. That portability is why an ecosystem formed so fast: official Anthropic skills, vendor skills from Supabase and Stripe and Vercel, and a long tail of community skills, all speaking the same SKILL.md dialect. The result is that a non-technical founder can assemble a build stack that, two years ago, would have required a small engineering team to encode.

It helps to be precise about what changed versus what stayed the same, because the hype tends to blur it. The model's underlying capability is broadly the same whether or not a skill is loaded; what changes is the hit rate on tasks where the right answer depends on a convention the model could plausibly get wrong. Building a generic form is a task most models handle without help. Building a form that uses the exact validation pattern your component library expects, with the accessibility attributes your audit will demand, is a task where a skill turns a coin-flip into a near-certainty. Multiply that across the dozens of convention-dependent decisions in a real build and the aggregate quality difference is large, even though no single decision was beyond the model. This is why skills feel less like a feature and more like the difference between a confident amateur and a seasoned professional doing the same job. For a broader view of where this sits in a modern stack, see our breakdown of the AI-native company tech stack.

3. How we ranked the top 20 (criteria and weights)

A ranking is only as honest as its method, so here is the method in full before any skill is named. Every candidate was first verified against a real, citable source (a GitHub repository, official docs, or a vendor page). Skills that could not be confirmed to exist under the claimed name were dropped, no matter how often they appeared in other lists. From the verified pool, each surviving skill was scored on four criteria chosen from first principles for one specific audience: a founder or product person building a website or app, who cares about the result more than the craft.

The four criteria and their weights are deliberately few, because fewer criteria leave room for real justification in each cell rather than a wall of numbers. Build Impact carries the most weight because the entire point is to improve the shipped product. Beginner-Friendliness is weighted heavily because the audience is not assumed to be a senior engineer who can debug a broken skill. Reliability and Backing captures whether an official Anthropic or vendor team maintains it, which matters enormously when you cannot fix it yourself. Versatility rewards skills that help across many projects rather than one narrow niche.

The exact weighting is below, and every score in the master table is justified inline with the real data point behind it.

Each skill is scored zero to ten per criterion, and the final score is the weighted average rounded to one decimal place. The table is sorted by final score, highest first, with ties broken alphabetically. One honest caveat belongs here: scores reflect fit for a non-technical builder shipping a real product, not absolute technical sophistication. A deeply powerful but expert-only skill scores lower on Beginner-Friendliness by design, and that is the point. If your priorities differ, read the per-cell justifications and re-weigh in your head.

A final note on what is excluded. Anthropic's own autonomous company builder, Founden, runs Claude Code headless under the hood to assemble entire companies, but it is not itself a Claude Code skill, so it does not appear in the ranked table. It is discussed later as the abstraction-up alternative for people who want the outcome of this entire skill stack without operating Claude Code at all. The table ranks skills; Founden is a different layer.

4. The top 20 Claude Code skills (master scoring table)

The table below is the heart of this guide. It ranks all twenty verified skills on a single 0 to 10 scale so you can compare an official design skill against a vendor backend skill against a community quality skill at a glance, which split category tables would hide. The Category column tells you where each one sits in the build lifecycle, and every criterion cell carries the score plus the concrete reason behind it. Read it top to bottom once, then jump to the deep-dive section for whichever rows matter to your build.

A quick read of the shape of this table tells you something real about the ecosystem. The top of the list is dominated by official Anthropic skills and first-party vendor skills, because for a non-technical builder, "someone competent maintains this" is worth almost as much as raw capability. The community skills that crack the upper half (web-quality-skills and superpowers) earn it through unusual breadth or an unusually credible author. And the spread is narrow, from 6.35 to 9.60, which is itself a finding: there is no junk in a verified top 20, only different shapes of usefulness. The chart below visualizes the leaders.

5. Design and frontend skills

Design is where AI builds most visibly succeed or fail, so it is where the highest-impact skills live. The reason is structural: a non-technical founder cannot easily judge whether the database schema is sound, but they can instantly tell that a landing page looks like every other AI-generated site, all the same Inter font and purple-on-white gradient. Closing that gap is the single fastest way to make an AI-built product feel credible, which is why the top of our ranking is a design skill.

frontend-design (rank 1) is Anthropic's official answer to "AI slop." Rather than letting Claude default to a safe, generic aesthetic, the skill forces it to commit to a specific, bold direction (editorial, brutalist, retro-futuristic, luxury, playful) and then enforce that choice across typography, color, motion, and backgrounds. It is distributed as an official plugin and is the most-installed web-relevant skill in the ecosystem - GitHub: anthropics/claude-code frontend-design. You install it from inside Claude Code by opening the /plugin menu, adding Anthropic's official marketplace, and enabling frontend-design, after which it auto-invokes on any UI work. Best for: every website or app where first impressions decide whether anyone stays.

The mechanism behind why this skill works is worth understanding, because it generalizes. Left to its own defaults, a model optimizes for the safest, most average-looking output, since the average is what minimizes obvious mistakes across its training. The trouble is that the average is exactly what reads as generic, and generic is what makes an AI-built product feel cheap. The frontend-design skill intervenes before generation, forcing a commitment to a specific point of view, and a committed point of view is what humans read as taste. Concretely, asking plain Claude for a landing page tends to yield a white background, a sans-serif heading, a three-column feature grid, and a gradient button, the visual equivalent of a stock photo. The same request with frontend-design active yields a page that has actually decided to be something, with type, color, and motion chosen to reinforce that decision. The skill does not add design talent the model lacks; it removes the regression-to-the-mean that was suppressing the talent the model already had.

shadcn/ui skill (rank 5) solves a different design problem: component correctness. shadcn/ui is the de facto standard component system for modern React, and the official skill injects live knowledge of it into Claude, auto-detecting your framework, Tailwind version, path aliases, and already-installed components from components.json - shadcn docs: Skills. The companion shadcn MCP server lets Claude actually search registries and install components by name, so "add a dialog, a data table, and a pricing section" becomes real, wired-up code instead of a guess - shadcn docs: MCP. Best for: any React and Tailwind build, which is most of them.

The remaining design skills trade official backing for reach and speed. tailwind-skill (rank 19) teaches Claude to build production-grade Tailwind UIs component by component against a consistent, token-driven, accessible philosophy, with dark mode treated as default rather than an afterthought - GitHub: firedev/tailwind-skill. shadcnblocks-skill (rank 18) gives Claude knowledge of roughly 1,300 prebuilt shadcn blocks and over a thousand components, so it can compose a hero, a dashboard, or an ecommerce checkout from production sections rather than generating each from scratch, though it requires a paid ShadcnBlocks key - GitHub: masonjames/shadcnblocks-skill. And Claude Design Skillstack (rank 20) is a 22-skill bundle for the immersive end of the web, covering Three.js, GSAP, React Three Fiber, and Framer Motion for animated and 3D experiences - GitHub: freshtechbro/claudedesignskills.

Taken together, these five skills form a design ladder. Start with frontend-design to set the aesthetic, lean on the shadcn skills to assemble real components fast, reach for tailwind-skill when you want fine control of the system, and only add the 3D stack when the brief genuinely calls for motion. The mistake to avoid is stacking all five on a simple marketing site, where they fight each other; pick the one or two that match the brief. If your goal is a richly interactive brand experience specifically, our guide to building a virtual world for your brand goes deeper on that niche.

6. Build and component skills

Once the look is settled, the next layer of skills concerns assembling the actual application: the multi-file structure, the components, and the integrations that turn a design into something that runs. This is where Claude Code stops being a chat box that returns snippets and starts behaving like a builder that produces a coherent project. The skills here are about scaffolding correctly rather than decorating.

web-artifacts-builder (rank 2) is the workhorse. It is an official Anthropic skill that guides Claude to build complex, multi-file web artifacts using React, Tailwind CSS, and shadcn/ui, assembling a real frontend instead of a single throwaway HTML file - GitHub: anthropics/skills web-artifacts-builder. The distinction matters more than it sounds. Most AI tools return a self-contained demo that looks fine in isolation and collapses the moment you try to extend it. This skill biases Claude toward the file structure, component boundaries, and conventions of a maintainable app, which is the difference between a prototype you throw away and a codebase you grow. Best for: any serious web app frontend you intend to keep.

skill-creator (rank 12) is the meta-skill that lets you build the rest. It is Anthropic's official scaffolding and evaluation workflow for authoring new skills: it generates the SKILL.md, helps tune the all-important description so Claude triggers it at the right moments, and runs an evaluation loop that tests and grades the skill against examples - GitHub: anthropics/skills skill-creator. For a founder, the value is leverage. The first time you find yourself re-explaining your brand voice, your component conventions, or your deploy checklist, you can have skill-creator turn that explanation into a permanent skill, after which Claude never forgets it again. Best for: codifying your own repeatable procedures.

The walkthrough below, by an Anthropic developer advocate, demonstrates the current Skill Creator end to end, including the evaluation loop that separates a skill that triggers reliably from one that never fires.

mcp-server-dev (rank 14) rounds out the build layer by teaching Claude to build the connectors your app needs. It is an official Anthropic plugin of skills for creating Model Context Protocol servers, routing by use case across building a server, adding interactive UI widgets, and packaging local servers as installable bundles - GitHub: anthropics/claude-plugins-official mcp-server-dev. This is more advanced than the rest of this section, and most founders will not touch it early. But the moment your app needs to expose its own capabilities to other AI tools, or pull from a service that has no off-the-shelf integration, this is the skill that builds the bridge. Best for: products that need custom integrations or want to be consumable by other agents.

The throughline of this section is that build skills are about structure and reuse, not flash. They are the least glamorous skills in the guide and among the most consequential, because a well-structured project is the difference between an app you can hand to a developer later and one that has to be rebuilt. For the bigger picture of turning a description into a running app, our guide on how to build an app with AI sets the surrounding workflow.

7. Backend, data, and auth skills

The backend is where AI builds quietly go wrong, because the failures are invisible until they are catastrophic. A misconfigured row-level security policy or a leaky auth flow does not show up in a screenshot; it shows up when someone reads another user's data. This is precisely why a vendor-maintained skill that encodes the correct patterns is worth so much: it moves the hardest, highest-stakes part of the build onto rails laid by the people who built the platform.

Supabase Agent Skills (rank 4) is the strongest example and the highest-ranked backend skill here. It is an official, open-source skill from Supabase that teaches the agent to build correctly on the platform: proper row-level security and security policies, sane JWT and metadata handling, schema management that favors direct edits over migration sprawl, and the conventions Supabase actually recommends - GitHub: supabase/agent-skills. Paired with the official Supabase MCP server, which exposes around thirty tools to run SQL, design tables, and generate TypeScript types, it lets a non-technical founder stand up a real, secure backend by describing what the app needs - Supabase: MCP server. Best for: most app backends, especially anything with user accounts and per-user data. For a wider comparison of the options, see our guide to the best databases for your product.

Convex skill (rank 17) takes a different philosophy. Convex is a reactive backend where data updates flow to the UI in real time without you wiring up subscriptions, and the official skill bundles guidance for schema design, real-time features, auth, file storage, and scheduled jobs - GitHub: get-convex/convex-backend-skill. The trade-off versus Supabase is concreteness versus reactivity: Supabase gives you a familiar Postgres world, while Convex gives you live data as a default at the cost of a more opinionated model. Best for: apps where real-time state (collaboration, dashboards, presence) is the core experience rather than a nice-to-have.

Authentication deserves its own dedicated skill because it is the part founders most often get wrong and least often notice. Clerk MCP (rank 16) is the official Clerk server that feeds Claude up-to-date Clerk SDK snippets and implementation patterns for authentication flows, organizations, and framework-specific examples tuned for modern stacks like Next.js - Clerk docs: MCP server. The reason a dedicated auth skill beats letting the model improvise is that auth APIs change frequently, and a model working from training data will confidently write last year's pattern. A live skill keeps it current. Best for: any app that needs login, especially with teams or organizations.

A concrete example makes the stakes vivid. The single most common security mistake in AI-built apps is a row-level security policy that reads correctly to a non-expert but is subtly too permissive, for instance a rule that lets any authenticated user read a table when it should only let users read their own rows. To a founder reviewing the result, both versions look identical: the app works, the data loads, the demo is flawless. The difference only surfaces when a curious or malicious user changes an identifier in a request and finds themselves looking at someone else's data. A vendor skill like Supabase Agent Skills exists precisely to encode the correct policy shape so the model writes the narrow rule by default rather than the permissive one. It does not eliminate the need for review, but it shifts the default from "probably wrong in a way you cannot see" to "probably right in a way the platform's own team endorsed." That shift is the whole value proposition of an official backend skill.

The honest framing for this section is that backend skills lower risk more than they raise ceiling. They will not make your product more ambitious; they will stop it from shipping a quiet security hole. For a non-technical builder, that is arguably the most valuable thing a skill can do, because it covers exactly the part you cannot inspect yourself. One discipline still applies: even with a great backend skill, ask Claude to explain its security model back to you in plain language before you ship. A skill that gets it right ninety-five percent of the time still needs a human to notice the other five.

8. Payments and deployment skills

Two things separate a real product from a demo: it can take money, and it is actually live on the internet. Both used to be multi-step chores full of dashboards and config files. Skills collapse them into described intent, and because both touch the outside world (real charges, real domains), the official vendor skills here carry outsized weight. You do not want a community guess in the path between a customer's card and your account.

Stripe (rank 7) anchors the payments side. The official Stripe MCP server gives the agent structured, secure access to the Stripe API plus Stripe's own knowledge base, so Claude can create customers, products, prices, subscriptions, and payment intents through described intent rather than hand-written API calls - Stripe docs: MCP. Complementary community billing skills add implementation guidance for the full lifecycle (checkout sessions, recurring billing, usage-based metering, and Stripe Connect) with an emphasis on doing it safely. The reason payments rank high on Build Impact but lower on Versatility is simple: when you need them they are the revenue path, and when you do not they are dead weight. Best for: any product that charges customers. For the broader landscape, our guide to the best payment platforms for your business compares the options around Stripe.

Vercel MCP (rank 6) owns the deployment slot for most modern web apps. It is Vercel's official remote MCP, connected over OAuth, with tools to search Vercel docs, manage teams and projects, trigger and inspect deployments, set environment variables, and attach domains - Vercel docs: Vercel MCP. The leverage is that "deploy this and point my domain at it" becomes a sentence rather than a checklist, and crucially, Claude can read back deployment logs to diagnose a failed build instead of leaving you staring at a red error. Best for: anything hosted on Vercel, which is a large share of Next.js and React apps. Netlify ships a comparable official MCP for teams on that platform - GitHub: netlify/netlify-mcp.

Cloudflare skills and MCP (rank 15) cover the edge and serverless end of deployment. Cloudflare's official skills plugin bundles its managed remote MCP servers with contextual guidance for Workers, Durable Objects, the Agents SDK, Wrangler, and web performance, so Claude can build and deploy serverless backends and edge functions directly - Cloudflare docs: MCP servers. For serverless Postgres specifically, the official Neon MCP adds branch-based database workflows where schema changes are made on a branch and merged, which is a meaningfully safer pattern for a non-expert - Neon docs: MCP server. Best for: builds that live on the edge or need globally distributed compute.

The pattern across payments and deployment is that official vendor skills are non-negotiable here. The cost of a community skill getting a checkout flow or a domain configuration subtly wrong is measured in lost revenue or downtime, not a quick fix. This is the one part of the stack where "who maintains it" should outrank "how clever is it" every time. A useful tangent: many of these vendors also expose their full capability set as integrations, which we map in our roundup of the top integrations for your online business.

9. Quality: testing, performance, SEO, and security

The gap between a build that demos well and a build that survives contact with real users is quality, and quality is exactly the work humans skip when they are moving fast. This is the most underrated category of skills, because an AI agent will happily declare a feature "done" the moment the code compiles, with no idea whether the button actually works, the page loads in time, or the form is reachable by a screen reader. Quality skills give Claude the ability to check its own work, which is the difference between confident output and correct output.

webapp-testing (rank 3) is the most important skill most builders have never heard of. It is an official Anthropic skill that uses Playwright to interact with and test a running web app in plain English: it clicks elements, checks states, captures screenshots, reads browser and console logs, and runs the frontend and backend together, doing reconnaissance before it acts - GitHub: anthropics/skills webapp-testing. The reason it ranks third overall is that it closes the agent's biggest blind spot: without it, Claude writes a feature and assumes it works; with it, Claude opens the app, tries the feature, sees the JavaScript error, and fixes it before you ever see the bug. Best for: any web app, full stop.

web-quality-skills (rank 10) brings the auditor's eye. Authored by Addy Osmani, a well-known web performance figure at Google, this community suite runs a comprehensive review across performance, accessibility, SEO, and best practices, backed by Lighthouse-style audits, with dedicated sub-skills for Core Web Vitals (with explicit thresholds like LCP at or under 2.5 seconds), SEO crawlability and structured data, and WCAG accessibility - GitHub: addyosmani/web-quality-skills. It is the rare community skill that cracks the upper half of the ranking, on the strength of breadth and an unusually credible author. Best for: every website that needs to be fast, findable, and usable. For accessibility specifically, dedicated bundles like a11y-specialist-skills enforce WCAG 2.2 in finer detail - GitHub: masuP9/a11y-specialist-skills.

Security and debugging close the loop. claude-code-security-review (rank 8) is Anthropic's AI security reviewer, shipping both a GitHub Action for context-aware semantic analysis of pull requests and the built-in /security-review slash command that scans changes for common vulnerabilities before they merge - GitHub: anthropics/claude-code-security-review. chrome-devtools-mcp (rank 11) lets Claude drive a live Chrome instance to record performance traces, analyze network requests, and read console messages with source-mapped stack traces, which turns "the page is slow" into a concrete, fixable diagnosis - GitHub: anthropics/claude-plugins-official. Best for: catching the defects and exposures that screenshots hide.

The economics of the test-and-fix loop are worth spelling out, because they explain why quality skills pay for themselves. Without webapp-testing, the loop is human-in-the-middle: Claude writes a feature, declares it done, you open the app, find the broken state, describe it back, and Claude fixes it. Every round trip costs your attention and your time, which are the scarcest resources in a build. With the skill active, Claude runs that loop itself in a single turn, opening the app, observing the failure in the console, and correcting it before the result ever reaches you. The token cost of that internal loop is real but small against the cost of your interrupted attention, and the quality difference is large, because the model catches the failures it would otherwise have shipped with full confidence. The pattern repeats across the quality skills: each one moves a check that a human used to perform into the agent's own loop, which is the only way a non-technical builder can hold a professional quality bar without a QA engineer.

The first-principles case for loading up on quality skills is that they convert Claude from an optimist into a skeptic about its own work, and a skeptical builder ships fewer bugs. The cost is a slower loop, since testing and auditing take real tokens and time. The right move is to make webapp-testing and security-review standing parts of your stack and to run the full quality suite before any meaningful launch, not on every tiny change. The chart below makes the strongest single argument for skills over heavier alternatives: how little context a skill consumes at rest.

10. Workflow and asset skills

The last category is the connective tissue: skills that govern how the whole build proceeds, and skills that produce the surrounding assets a real product needs. These are easy to overlook because they do not map to a single feature, but they are what keep a long build coherent and what turn a bare app into something a business can actually use and present.

superpowers (rank 13) is the most influential community skill framework of the cycle. Created by Jesse Vincent, it is an agentic skills system bundling more than twenty battle-tested skills plus commands like /brainstorm, /write-plan, and /execute-plan, a skills-search discovery tool, and a meta-skill that pushes Claude to actually follow disciplined engineering loops (plan first, test-driven development, code review) instead of charging ahead - GitHub: obra/superpowers-marketplace. It was credible enough to be accepted into Anthropic's official marketplace. The value for a founder is that it stops a big build from going off the rails halfway through, which is the single most common failure mode of long AI coding sessions. Best for: any nontrivial project where coherence over many steps matters more than speed.

The comparable verification-first toolkit ClaudeKit ships thirty-five skills across a six-phase workflow with two dozen specialized subagents for code review, testing, database design, and security audit, and is worth knowing if superpowers does not fit your taste - GitHub: duthaho/claudekit. Both belong to a wider movement of "engineering discipline as a skill," and which one you pick matters less than picking one. An undisciplined agent on a large build is the fastest path to a tangle that no one, human or AI, can safely change later.

Document skills (rank 9) cover the assets side. Anthropic's official PDF, DOCX, PPTX, and XLSX skills are the same production document-creation skills that run inside Claude.ai, letting Claude generate and edit real Word documents, PDFs, slide decks, and spreadsheets - GitHub: anthropics/skills. They rank ninth despite being peripheral to the app's own code, because the business around the app needs these constantly: an investor deck, a pricing PDF, a data export, a contract. For a founder building a company rather than just a feature, generating these from the same conversation that builds the product is a real compounding convenience. Best for: the business assets that surround the build.

The unifying insight across workflow and asset skills is that a build is more than its code. It is a process that has to stay coherent and a set of outputs that have to look professional, and both benefit from being encoded as skills rather than improvised each time. This is also the layer where the gap between "operating Claude Code yourself" and "having a system operate it for you" becomes most visible, which leads directly to how you actually assemble and run a stack.

11. How to install and combine skills into a stack

Knowing the best skills is useless without knowing how they reach your machine, and the install model is where Claude Code is genuinely beginner-friendly. There are four places a skill can live, and they differ only in scope. A personal skill sits in ~/.claude/skills/<name>/SKILL.md and is available across all your projects. A project skill sits in .claude/skills/<name>/SKILL.md inside a repo and travels with that repo through git. A plugin bundles skills (often with subagents and MCP servers) and installs through a marketplace. And enterprise skills are deployed centrally by an admin. Higher-scoped names win on collision, so a project skill overrides a personal one of the same name.

Creating a personal skill by hand takes two commands, which is worth seeing because it demystifies the whole system.

mkdir -p ~/.claude/skills/deploy-checklist
cat > ~/.claude/skills/deploy-checklist/SKILL.md << 'EOF'
---
description: Use before any production deploy. Runs env checks, build, and a post-deploy smoke test.
---

## Steps
1. Verify all environment variables are present
2. Run the test suite, then the production build
3. After deploy, load the live URL and confirm it renders
EOF

Most builders, though, will install skills from marketplaces rather than write them, and the flow is a menu, not a config file. Inside Claude Code you open /plugin, add a marketplace if it is not already present (for example Anthropic's official one, or a community marketplace like obra/superpowers-marketplace), and enable the plugin, after which its skills auto-load. Official document and example skills install the same way from Anthropic's published marketplace. The image below shows the equivalent capabilities interface in Claude.ai, where skills are simply toggled on.

The combining is where judgment comes in, and the principle is restraint. You do not want all twenty skills loaded at once; you want a lifecycle stack of five to eight that cover design, build, backend, deploy, and quality, plus whatever your product specifically needs (payments if you charge, auth if you have logins, 3D if you are immersive). A sensible default stack for a typical web app is frontend-design, web-artifacts-builder, the shadcn skill, a backend skill like Supabase, a deploy skill like Vercel, and the quality pair of webapp-testing and security-review. The diagram below maps that stack to the build lifecycle.

There is, of course, a higher level of abstraction than assembling and operating this stack yourself, and it is worth naming honestly. Founden runs Claude Code headless behind a single conversation and assembles the whole company (website, customer app, admin dashboard, billing, and database) from a description, applying a curated skill set on your behalf so you never open a terminal - Founden. It is the right choice when you want the outcome of this entire skill stack without becoming the person who maintains it, the same way a managed platform is the right choice when you would rather not run your own servers. Operating Claude Code with your own hand-picked skills gives you maximum control; abstracting it away gives you speed and removes the operating burden. Neither is wrong; they are different points on the same line, and our piece on what software is left to build digs into why that line keeps moving up.

12. Pricing: what running these skills actually costs

Here is the part most skill lists skip: the skills themselves are free, but running them is not. A Claude Code skill is just a folder of Markdown, so there is no license fee and no per-skill charge. What you pay for is the model tokens the skill consumes when it loads and acts, drawn from your Claude subscription or your API balance. This is the crucial mental model: a skill does not add a line item, it changes how many tokens a task burns, usually by making the work more thorough.

The subscription tiers that include Claude Code access are straightforward. Claude Pro is $20 per month, Claude Max comes in a $100 per month tier (often called 5x) and a $200 per month tier (20x), with the higher tiers buying proportionally more Claude Code usage before limits bite - Claude pricing. Over 2026 Anthropic moved Claude Code toward usage-based credits for heavier and programmatic use, so sustained, agent-driven building is increasingly metered at API rates rather than bundled flat. The practical guidance is unchanged regardless: light builders live comfortably on Pro, and anyone running multi-skill agentic sessions for hours a day will want a Max tier or an API arrangement.

For builders who use the API directly, the per-token prices of the models Claude Code runs are the real cost driver, and they vary widely by model. The chart below shows the current published rates per million tokens.

The model you run matters as much as the skills you load, because cost scales directly with it. Claude Opus 4.8 is the agentic default in Claude Code, at $5 per million input and $25 per million output tokens, and it is the right call for most serious building because its long-horizon reliability reduces the number of correction cycles - Anthropic: Claude Opus 4.8. Claude Sonnet 4.6 at $3 and $15 is the value option for high-volume, less demanding work, and Claude Haiku 4.5 at $1 and $5 is for fast, simple tasks. Claude Fable 5, Anthropic's most capable model at $10 and $50, is reserved for the hardest long-horizon problems where correctness dwarfs cost. Our deep dives on Claude Opus 4.8 and Claude Fable 5 cover the trade-offs in detail.

A worked example grounds these abstractions. Suppose you spend a focused afternoon building a small SaaS dashboard: design with frontend-design, scaffold with web-artifacts-builder, wire a Supabase backend, add Stripe checkout, deploy to Vercel, and run the quality skills before launch. On Opus 4.8, a session like that might consume a few million tokens once you account for the model reading files, loading skills, writing and rewriting code, and running tests, which lands somewhere in the single-digit dollars to low tens of dollars for the afternoon, heavily softened by prompt caching on the repeated context. Do that most days and you are in the low hundreds of dollars a month, which is the figure most active multi-skill builders converge on. The mental model that keeps this in check is simple: cost scales with how much the agent reads and rewrites, so a tight, well-scoped session with a clear goal is dramatically cheaper than an open-ended one where the agent thrashes. Skills help here too, because a skill that gets the answer right the first time avoids the expensive correction cycles that dominate a sloppy session's bill.

Two cost levers are worth internalizing. First, skills with model and effort overrides let you run cheap models for cheap tasks: a documentation skill can pin Haiku while your main session stays on Opus, which the frontmatter supports directly. Second, prompt caching means repeated context (the same skill instructions, the same project files) is billed at a fraction of full price on subsequent calls, so a long session is far cheaper than its raw token count suggests. The honest bottom line is that an active multi-skill builder typically spends in the low hundreds of dollars a month, which is trivial against the alternative of a contract developer and substantial against the expectation of a flat $20 subscription. Budget for the middle.

13. Where skills fail and what their limits are

A guide that only sells the upside is not useful, so here is the unsentimental view of where skills break down. The first and most common failure is the description that never triggers. Because Claude decides whether to load a skill by reading its description, a vague or poorly written description means the skill silently does nothing, and you never get an error, you just get generic output as if the skill were not installed. This is why skill-creator's evaluation loop exists and why the official skills feel reliable while many community skills feel flaky: the difference is often description quality, not capability.

The second failure mode is over-installation. Loading twenty skills does not make Claude twenty times better; it makes the model's decision about which skill to use harder and occasionally wrong, and it bloats the context with descriptions competing for attention. More subtly, two skills with overlapping or contradictory guidance (a frontend-design skill that wants brutalism and a component skill that defaults to soft rounded cards) can produce incoherent output. The discipline is the same as in real engineering: a small, deliberate stack beats a maximal one. If output quality drops after you add a skill, the right instinct is to remove something, not add more.

The third limit is trust and verification on the parts you cannot inspect. A non-technical founder can see that a page looks wrong but cannot see that a row-level security policy is subtly permissive, and a skill that is right ninety-five percent of the time still produces a real vulnerability the other five. This is not an argument against skills; it is an argument for pairing them with the quality skills in section nine and for asking Claude to explain security-sensitive work back in plain language. Community skills compound this risk: a solo-maintained skill can go stale, encode an outdated API pattern, or simply be abandoned, which is exactly why our ranking weighted official and vendor backing so heavily.

The fourth limit is structural and worth stating plainly: skills make a capable agent more reliable, they do not make an incapable one capable. A skill cannot teach Claude a genuinely novel architecture it has never seen; it can only steer the knowledge the model already has toward the right target. For genuinely new technical territory (a custom rendering engine, an unusual protocol, a research-grade algorithm), you are back to careful human direction, and the skill is a helper rather than a substitute. The practical tell is whether the work resembles something the model has plausibly seen many times, in which case a skill sharpens it, or something genuinely novel, in which case no amount of situated context conjures expertise that the underlying model does not possess. Most website and app building falls firmly in the first category, which is exactly why this skill ecosystem is so effective for it, but the honest builder keeps the distinction in mind so that the rare genuinely hard problem gets the human attention it actually needs. Knowing this boundary keeps expectations honest and prevents the disappointment that comes from treating a skill as a magic wand. For the realistic shape of what AI can and cannot build today, our analysis of building software with AI is the companion read.

14. How AI agents are changing the build

The deeper story of 2026 is not the individual skills, it is what happens when skills, subagents, and agents compose into a system that builds with minimal human turns. To see where this goes, separate the three primitives, because conflating them is the most common confusion in the space. A skill is reusable instructions that load on demand. A subagent is an isolated Claude instance with its own context window, spawned for a focused sub-task. An MCP server is a running program that exposes external tools and data. A skill can invoke a subagent and reference MCP tools; a plugin can bundle all three. The diagram below makes the distinctions concrete.

The first-order effect is that building is becoming a supervisory activity. Instead of writing code, you describe outcomes and review results, with skills ensuring each step follows known-good patterns and quality skills catching the failures. The role of the human shifts from author to editor and director, which is precisely why a non-technical founder can now ship something a small team used to be required for. This is the same structural shift that earlier waves of abstraction produced, from assembly to high-level languages to frameworks, except the abstraction is now the natural-language description itself.

The second-order effect, already visible, is whole-system assembly from a description. When the skill ecosystem covers design, build, backend, payments, deploy, and quality, an orchestrating agent can chain them into a complete product with the human acting as approver at key gates rather than operator at every step. This is the bet behind autonomous company builders: that the right curated skill stack, driven by a capable model under an orchestration layer, can produce not just a feature but an operating business. It is also why the model choice and the skill choice increasingly matter more than any individual prompt, a theme we trace across our AI website builders market map and our ranking of the top AI app builders.

The third-order effect is competitive and worth pressure-testing rather than asserting. The naive conclusion is "skills commoditize building, so building is worthless," and that is almost certainly wrong, the same way cheaper electricity did not make electrical products worthless. When the cost of assembling a competent build collapses, the scarce, valuable inputs move elsewhere: to taste (which aesthetic, which features), to distribution (who finds the product), and to the proprietary skills and processes a team encodes that others cannot easily copy. The opportunity is not in resisting the commoditization of assembly; it is in owning the layers that assembly cannot replicate. Anthropic's own engineers have argued, repeatedly and publicly, that the winners will be those who build the best skills, not those who avoid the trend. The companies building skill libraries today are building a durable asset, not a disposable convenience.

It is worth grounding this in who is actually building at this layer. Yuma Heymans (@yumahey), who built HeroHunt.ai into one of the first autonomous AI recruiters and now leads Founden, has spent years on exactly this problem of turning a capable agent into a reliable operator through situated context rather than raw model power, which is the same principle that makes a humble SKILL.md outperform a clever prompt. The practitioners pushing this forward tend to share that conviction: leverage comes from the skills you encode, not the cleverness of any single instruction.

15. The bottom line: choosing your skill stack

Strip away the rankings and the takeaway is a decision framework, not a shopping list. Start from your build's actual needs, not from the top of the table. If you are shipping a marketing site, the design and quality skills are everything and the payments and auth skills are noise; if you are building a SaaS product, the backend, auth, payments, and quality skills are the spine and the 3D skills are a distraction. The single most common mistake is installing impressive-sounding skills that your specific product never needs, which adds cost and confusion for zero benefit.

For most builders, a default stack of six covers ninety percent of the work: frontend-design for the look, web-artifacts-builder plus the shadcn skill for the build, a backend skill (Supabase for most, Convex if real-time is core), a deploy skill (Vercel for most, Cloudflare for the edge), and the quality pair of webapp-testing and security-review. Add Stripe the moment you charge money, add an auth skill like Clerk the moment you have logins, and add the document skills when the business around the product needs decks and PDFs. Reach for superpowers or ClaudeKit once a build grows large enough that coherence over many steps becomes the binding constraint. That is a complete, verified, mostly official stack that a non-technical founder can run.

The deeper decision is one level up: how much of this do you want to operate yourself. Running Claude Code with a hand-picked skill stack gives you maximum control and the lowest direct cost, at the price of becoming the person who maintains and supervises it. Abstracting it away through an autonomous builder like Founden gives you the outcome of the whole stack without the operating burden, at the price of less granular control. Most founders should start by operating it themselves long enough to understand what good looks like, then decide whether the operating burden is worth carrying as they scale. The skills in this guide are the same either way; the only question is whose hand is on them. If you are at the earliest stage, our founder's guide to starting a company in 2026 frames where this fits in the wider journey.

What does not change is the direction. The unit of progress in AI building is now the skill, the best of them are increasingly official and free, and the leverage belongs to whoever assembles the right small stack and keeps it disciplined. The twenty skills above are the verified core of that stack as it stands in 2026. Install the six that match your build, add the specifics your product demands, pair them with the quality skills so the agent checks its own work, and you have a build capability that genuinely rivaled a small team only a year ago. The tools are here, they are cheap, and they are mostly free. The remaining variable is taste, and that has always been yours.

This guide reflects the Claude Code Skills landscape as of June 2026. Skill names, repositories, model versions, and pricing change quickly in this space; verify current details against the linked official sources before relying on them.