Build a Website With Claude Code: 8 Free Skills to Go Live (2026)

Hi, this is Darius. Claude can put together a working website in ten minutes, and then it sits on your laptop. A page on your screen still needs logins, payments, testing and a real address before anyone can use it.

These are the 8 free skills I’d use to build a website with Claude Code and get it live, in the order you need them, from the plan to your own domain. Seven of them have over 1.7 million installs between them on skills.sh. Each section covers what the skill does, an example, the cost and its main limitation.

Watch the full video: Claude Code Website: 8 Free Skills From Idea to Live Site · 12:06

How popular are the skills to build a website with Claude Code?

Install counts show which skills people rely on. Agent Browser and Brainstorming lead, and the official Supabase and Stripe skills are the safest picks for logins and payments.

Step 1 · Plan

1. Brainstorming: agree on the site before any code

294.5K GitHub stars384K installsMITFree

A one-line request like “make me a website” leaves Claude to guess the audience, the pages and what every button does.

Brainstorming is part of Superpowers, the plugin by Jesse Vincent, and it makes Claude settle those questions with you first.

What it does

• It asks one question per message, often multiple choice, until it knows the purpose of the site and how you will judge success.
• For a new project it lays out two or three approaches with their trade-offs and recommends one.
• It writes the agreed design into a spec file and removes features you don’t need.
• Nothing gets built until you approve the spec.

/plugin install superpowers@claude-plugins-official

Step 2 · Make it look premium

2. scroll-craft: scroll-driven sites that stand out

2.9K GitHub starsNew: Aug 2026MITFree (optional paid video generation)

Most AI-built sites share the same six sections, so visitors have seen your page before they finish scrolling it.

scroll-craft by Nate Herk builds sites where scrolling drives the story.

What it does

• Video scrubs frame by frame as you scroll, sections pin while their point plays out and headlines assemble line by line.
• Each build uses one of eight page layouts and must include one signature interaction found on no other site.
• A fingerprint check makes each new build differ from your previous ones on at least four of six points.
• A headless browser then checks every scroll position and flags dead scroll and text too faint to read.

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

Want the design side in more depth? My guide to Claude Code design skills covers eight more.

Step 3 · Logins and data

3. Supabase: accounts and a database done safely

2.7K GitHub stars305K installsMITFree plan available

Sign-ups, saved data and uploads are where quickly built sites tend to fail.

The Supabase skill is the official one from Supabase, the open source database that also handles logins and file storage.

What it does

• Before writing code, it checks Supabase’s changelog, because the tools change often.
• Row level security goes on for every table, so users can only read their own data.
• A security checklist covers traps such as a secret key that ends up in the browser.
• After each change it runs a test query to confirm the change works.

npx skills add https://github.com/supabase/agent-skills --skill supabase

Step 4 · Payments

4. Stripe Best Practices: checkout and subscriptions without costly mistakes

1.9K GitHub stars27K installsMITFree (Stripe fees apply)

A small error in payment code costs real money, either yours or your customer’s.

Stripe Best Practices is Stripe’s own skill for building payments.

What it does

• It chooses the right Stripe product: Checkout for one-time payments, Billing for subscriptions and Stripe Tax for sales tax and VAT.
• For keys, it recommends a restricted key with only the permissions your site needs, in place of your full secret key.
• Webhooks are always part of the setup, so an order is fulfilled only after Stripe confirms the payment.
• Without a Stripe account, it can create a test sandbox so you can try the whole checkout first.

npx skills add https://github.com/stripe/ai --skill stripe-best-practices

Step 5 · Test

5. Agent Browser: Claude clicks through your site like a visitor

43.5K GitHub stars939K installsApache-2.0Free

You test your own site the way you built it, so you miss the bugs a first-time visitor finds in a minute.

Agent Browser from Vercel gives Claude a fast browser of its own, and its dogfood mode tests a site the way a real visitor would.

What it does

• You give it one link. It works through the menu, clicks buttons, fills forms, opens popups and tries empty or wrong input.
• It watches the browser console for errors that never show on screen.
• Each bug gets evidence: a screenshot for something visible, and a video at human speed plus numbered steps for a broken flow.
• Everything goes into one report, with the most serious issues first.

npm i -g agent-browser && agent-browser install
npx skills add https://github.com/vercel-labs/agent-browser

Step 6 · Security

6. Security and Hardening: close the gaps before launch day

100.6K GitHub stars (pack)50K installsMITFree

A site built in a hurry can go live with secret keys sitting in its code.

Security and Hardening comes from Addy Osmani, a former director at Google.

What it does

• It starts with a threat model: who might attack the site and where untrusted data enters it.
• Its rules come in three tiers. Always: validate input, hash passwords, set security headers and audit packages before each release. Ask first: changes to logins or rate limits. Never: commit secrets, keep login tokens where the browser can read them or show error details to visitors.
• It covers the OWASP Top 10, the standard list of web attacks.

npx skills add https://github.com/addyosmani/agent-skills --skill security-and-hardening

For a paid tool that focuses on site security, see my Soteria review.

Step 7 · Speed and SEO

7. Web Quality Audit: a Lighthouse audit with fixes in order

2.9K GitHub stars29K installsMITFree

A slow page loses visitors before it loads, and you won’t notice it on a fast laptop.

Web Quality Audit, also from Addy Osmani, measures your site the way Google does.

What it does

• It runs a live Lighthouse audit across performance, accessibility, SEO, best practices and how well AI assistants can read and use the page.
• It checks the three Core Web Vitals: main content in under 2.5 seconds, a response to clicks in under 200 milliseconds and a layout that doesn’t jump while loading.
• Critical and high issues get fixed before launch, and the checks run again to confirm each fix.

npx skills add https://github.com/addyosmani/web-quality-skills --skill web-quality-audit

Step 8 · Go live

8. GoLive: hosting, database, domain, email and payments in one run

1.2K GitHub starsNew: Sept 2026MITFree (your own provider accounts)

Putting a site online means hosting, a database, a domain, email and payments: five dashboards and a lot of copied keys.

GoLive is an open source skill from the developer mikehasa that connects all of it on your own accounts.

What it does

• It keeps the tools your project already uses and asks where to host, for example Vercel or Netlify.
• Before touching anything, you see a plan of what it will create, where, and what it costs, and nothing happens until you approve.
• Then it deploys, moves your keys across without printing them in the chat, and checks what works.
• Supported services today: Supabase or Neon for the database, Porkbun or GoDaddy for the domain, Resend for email and Stripe in test mode. A teardown command removes only what it created.

npx skills add https://github.com/mikehasa/golive-skill --skill golive --global

Need hosting first? I tested a budget host in my Hostley review.

How to install the skills you need to build a website with Claude Code

You can install every skill here without typing commands yourself:

1. Open Claude Code in the desktop app, the terminal or your code editor.
2. Type Install this skill: and paste the skill’s GitHub link from this article.
3. Claude downloads it and tells you how to use it. Start a new chat so the skill loads.
4. Ask for the job in plain English, for example “plan a booking site for a yoga studio”.

Each section above also shows the exact command if you prefer to install it yourself. Every skill here runs inside Claude Code, the tool you use to build a website with Claude Code.

Frequently asked questions