# TheSkillVault

> A free library of Agent Skills (SKILL.md) and ready-to-paste prompts for vibe coding: building, debugging, designing and launching websites and apps with an AI assistant. Every skill is plain markdown that works in any AI chat, and the library is also available over a REST API and an MCP server.

Skills follow the open Agent Skills format (YAML front matter + markdown). TheSkillVault's own skills are CC BY 4.0; imported skills keep their original licence (MIT, Apache-2.0, CC0) and name their source. Search: https://theskillvault.ai/api/skills?q=<query>. MCP (Streamable HTTP): https://theskillvault.ai/mcp (Server Card: https://theskillvault.ai/mcp/server-card). Full text of every skill: https://theskillvault.ai/llms-full.txt.

## Frontend

- [add-analytics-and-privacy-policy](https://theskillvault.ai/api/skills/add-analytics-and-privacy-policy/raw): Adds privacy-friendly visitor analytics and a plain-English privacy page covering contact-form data, analytics and overseas providers, with Australian Privacy Principles notes. Not legal advice. Use when the user wants site analytics, visitor stats, a privacy policy or privacy page.
- [add-dark-mode-toggle](https://theskillvault.ai/api/skills/add-dark-mode-toggle/raw): Adds a light/dark/system theme toggle that persists the choice in localStorage and avoids the white flash on page load, using CSS variables or Tailwind's dark class. Use when the user asks for dark mode, a night theme, a theme switcher, or follow-the-system colour scheme.
- [add-seo-metadata-and-sitemap](https://theskillvault.ai/api/skills/add-seo-metadata-and-sitemap/raw): Adds search basics to a Next.js site, with a title and description per page, Open Graph share images, sitemap.ts, robots.ts, LocalBusiness structured data and a favicon. Use when the user wants to show up on Google, improve SEO, fix link previews, or add a sitemap or meta tags.
- [audit-accessibility-and-performance](https://theskillvault.ai/api/skills/audit-accessibility-and-performance/raw): Runs a pre-launch quality pass on a website, with WCAG 2.2 AA quick checks (alt text, headings, labels, keyboard, focus, contrast) and Core Web Vitals fixes, checked with Lighthouse. Use when the user wants their site accessible, faster, a Lighthouse audit, or a quality check before launch.
- [audit-site-seo](https://theskillvault.ai/api/skills/audit-site-seo/raw): Audits a live site's SEO and writes a ranked fix list - crawling and indexing, redirects and canonicals, titles and headings, content and search intent, Core Web Vitals, structured data and visibility in AI search answers. Use when traffic dropped, pages are not on Google, the user asks for an SEO audit or SEO health check, or wants to show up in ChatGPT and AI search.
- [build-mobile-app-with-expo](https://theskillvault.ai/api/skills/build-mobile-app-with-expo/raw): Builds an iOS and Android app with Expo and React Native - start the project the standard way, check the SDK version before any advice, install packages with npx expo install, then pick the right path for screens, navigation, dev builds or store release. Use when the user wants a mobile app, mentions Expo, React Native, Expo Go or EAS, or asks how to ship an app to the App Store.
- [build-react-form-with-validation](https://theskillvault.ai/api/skills/build-react-form-with-validation/raw): Builds an accessible React form with React Hook Form and Zod schema validation, inline error messages and a loading submit state. Use when the user wants a signup, contact, checkout or settings form, form validation, required fields, or error messages under inputs.
- [build-streaming-chat-ui](https://theskillvault.ai/api/skills/build-streaming-chat-ui/raw): Builds the chat window for an AI assistant in React - message list, input box, words appearing as they stream in, a stop button, auto-scroll, loading and error states, and safe rendering of the bot's markdown. Use when the user wants a ChatGPT-like chat interface, a chat widget for their site, or streaming AI responses shown on screen.
- [build-ui-with-shadcn](https://theskillvault.ai/api/skills/build-ui-with-shadcn/raw): Builds a React interface with shadcn/ui the way it is meant to be used - set up with the shadcn CLI, add components as editable source files, compose them into forms, dialogs and tables, check diffs before updates and keep custom changes. Use when adding shadcn/ui to a project, installing or updating shadcn components, building screens from them, or setting up a custom shadcn registry.
- [optimise-react-performance](https://theskillvault.ai/api/skills/optimise-react-performance/raw): Reviews and speeds up a React or Next.js app by fixing the problems that matter most first - data-fetch waterfalls, large client bundles, too much client JavaScript, wasted re-renders and tangled component props. Use when a React or Next.js app needs to be faster, data fetches run in a waterfall, the bundle is big, components re-render too often, or the user asks for React best practices.
- [set-up-nextjs-tailwind-site](https://theskillvault.ai/api/skills/set-up-nextjs-tailwind-site/raw): Sets up a new Next.js App Router project with Tailwind, a shared layout, header, footer, 404 page and one route per page in your website brief, then pushes it to GitHub. Use when the user wants to start a new website, create a Next.js site, or turn a page list into a working project.

## Backend

- [add-chatbot-guardrails-and-rate-limits](https://theskillvault.ai/api/skills/add-chatbot-guardrails-and-rate-limits/raw): Protects a public AI chatbot from abuse before launch - per-user and per-IP rate limits, a monthly spend cap, input and output size limits, prompt-injection-resistant system prompts, moderation, and logging without personal data. Use when the user worries about abuse or a surprise AI bill, wants to rate limit an API, or needs to stop jailbreak attempts on a chatbot.
- [add-stripe-checkout](https://theskillvault.ai/api/skills/add-stripe-checkout/raw): Adds Stripe Checkout for one-off payments or subscriptions with a server route that creates the session and a verified webhook that fulfils the order. Use when the user wants to take payments, charge cards, sell a product, add a pricing page, subscriptions, or a buy button.
- [audit-app-security](https://theskillvault.ai/api/skills/audit-app-security/raw): Audits a web app for the security holes AI-written code most often ships - leaked secrets, missing auth checks, open database rules, injection, unsafe uploads, weak headers and vulnerable packages - and fixes them in priority order. Use when the user asks for a security review or audit, worries their vibe-coded app is hackable, or wants to harden an app before going live.
- [build-ai-chatbot-api-route](https://theskillvault.ai/api/skills/build-ai-chatbot-api-route/raw): Builds the server side of an AI chatbot - one API route that keeps the model key on the server, adds a system prompt, sends the chat history to an LLM such as OpenAI, Claude or Gemini, and streams the reply back. Use when the user wants to add a chatbot or AI assistant to their app, call the OpenAI API safely, or build a GPT-style chat backend.
- [build-contact-form-with-email](https://theskillvault.ai/api/skills/build-contact-form-with-email/raw): Builds a contact form that actually emails you, with a Next.js server action, server-side Zod validation, an email API such as Resend, a spam honeypot and success and error states. Use when the user wants contact form messages delivered to their inbox, an enquiry form, or a form that sends email.
- [build-mcp-server](https://theskillvault.ai/api/skills/build-mcp-server/raw): Builds a Model Context Protocol (MCP) server that gives AI agents like Claude, Cursor or Codex tools for your API, database or files - a few well-named tools with typed inputs, clear errors, stdio or HTTP transport, and a test with the MCP Inspector. Use when the user wants to build an MCP server, expose their app or API to an AI agent, or add custom tools to Claude or Cursor.
- [design-supabase-postgres-schema](https://theskillvault.ai/api/skills/design-supabase-postgres-schema/raw): Designs and reviews a Supabase Postgres database the safe and fast way - tables and migrations through the Supabase CLI, row level security on every exposed table, fast RLS policies, the right indexes and query checks with EXPLAIN. Use when creating Supabase tables, writing RLS policies, a Supabase query is slow, or the user asks for Postgres best practices on Supabase.
- [set-up-prisma-orm](https://theskillvault.ai/api/skills/set-up-prisma-orm/raw): Sets up Prisma ORM in a Node or TypeScript app, or repairs an existing app's database connection, by detecting the Prisma version first - new apps on Prisma 8, existing Prisma 6 or 7 apps kept on their version. Use when the user wants to add Prisma, connect Postgres or MySQL with an ORM, fix a Prisma connection error, or set up prisma.config.ts.
- [set-up-supabase-auth](https://theskillvault.ai/api/skills/set-up-supabase-auth/raw): Sets up Supabase authentication (email magic link, password or Google OAuth) in a Next.js app with server-side sessions, protected routes and row level security. Use when the user wants login, sign in, sign up, user accounts, auth, or to protect pages and data per user.

## Deploy and launch

- [configure-github-actions-ci](https://theskillvault.ai/api/skills/configure-github-actions-ci/raw): Configures a GitHub Actions workflow that installs dependencies with caching, then runs lint, type-check, tests and build on every push and pull request. Use when the user wants CI, automated tests on PRs, a build pipeline, GitHub workflows, or checks before merging.
- [deploy-nextjs-to-vercel](https://theskillvault.ai/api/skills/deploy-nextjs-to-vercel/raw): Deploys a Next.js app to Vercel with environment variables, a custom domain and preview deployments per branch. Use when the user wants to ship, host, publish or go live with a Next.js or React site on Vercel, or mentions vercel deploy, production URL or domains.
- [launch-website-checklist](https://theskillvault.ai/api/skills/launch-website-checklist/raw): Takes a deployed site live on its own domain, covering DNS records, HTTPS, www redirect, security headers, Google Search Console and a final go-live checklist (links, mobile, form, 404, share preview). Use when the user wants to launch a site, connect a custom domain, or run a pre-launch checklist before going live.
- [set-up-git-guardrails-and-pre-commit](https://theskillvault.ai/api/skills/set-up-git-guardrails-and-pre-commit/raw): Sets up safety rails for AI coding agents - a hook that blocks push, reset --hard, clean -f and branch -D before the agent runs them, plus Husky and lint-staged pre-commit checks for format, typecheck and tests. Use when the user wants to stop an AI from pushing or wiping work, add pre-commit hooks, set up Husky, or block dangerous git commands.
- [set-up-git-worktrees-and-finish-branch](https://theskillvault.ai/api/skills/set-up-git-worktrees-and-finish-branch/raw): Runs a feature from start to finish in its own git worktree - check for existing isolation, create an ignored worktree, install and run baseline tests - then finishes the branch by verifying tests and offering merge, pull request or keep. Use when starting isolated feature work, running parallel agents on one repo, setting up a git worktree, or finishing and cleaning up a development branch.

## Fix errors

- [debug-cors-errors](https://theskillvault.ai/api/skills/debug-cors-errors/raw): Diagnoses and fixes CORS errors such as "No 'Access-Control-Allow-Origin' header" or failed preflight OPTIONS requests between a frontend and an API. Use when the browser console says blocked by CORS policy, fetch fails only in the browser, or cookies are not sent cross-origin.
- [debug-systematically](https://theskillvault.ai/api/skills/debug-systematically/raw): A four-phase method for any bug, failing test or strange behaviour - find the root cause first, compare with working code, test one hypothesis at a time, then fix with a failing test. Use when something is broken and you do not know why, a fix did not work, or you keep guessing at changes.
- [fix-git-conflicts](https://theskillvault.ai/api/skills/fix-git-conflicts/raw): Resolves git conflicts hunk by hunk by first reading the commits, PRs and issues behind each side, keeping both intents where they fit, then running the project's checks and completing the merge or rebase. Use when git stopped with conflicts, a rebase is stuck, there are conflict markers in files, or the user asks to resolve merge conflicts.
- [fix-react-hydration-errors](https://theskillvault.ai/api/skills/fix-react-hydration-errors/raw): Finds and fixes React and Next.js hydration mismatch errors where server-rendered HTML differs from the first client render. Use when the console shows "Hydration failed", "Text content does not match server-rendered HTML", or content flickers or changes after the page loads.
- [review-and-triage-issues](https://theskillvault.ai/api/skills/review-and-triage-issues/raw): Triages GitHub issues and outside pull requests with an AI agent - labels each as bug or enhancement, reproduces the bug, checks it is not already built or rejected, asks the missing questions and writes an agent-ready brief. Use when the user has a pile of issues to sort, bug reports to triage, wants to know what an agent can pick up, or asks to move an issue to ready-for-agent.
- [test-before-claiming-done](https://theskillvault.ai/api/skills/test-before-claiming-done/raw): Makes an AI agent prove work is finished before it says so - run the command that proves the claim, read the full output and exit code, then report what it shows. Use when the AI says done, fixed or tests pass without proof, before committing or opening a PR, or when checking a sub-agent's "success" report.
- [test-first-with-tdd](https://theskillvault.ai/api/skills/test-first-with-tdd/raw): Test-driven development in plain steps - write one small failing test, watch it fail for the right reason, write the least code to pass, then tidy up while staying green. Use when adding a feature, fixing a bug, refactoring, or when the user asks for TDD, red-green-refactor or tests first.
- [test-site-with-agent-browser](https://theskillvault.ai/api/skills/test-site-with-agent-browser/raw): Gives an AI agent a real browser from the shell with the agent-browser CLI - open a page, read its accessibility snapshot, click and fill by ref, wait, screenshot and read console errors - to check its own UI work. Use when the agent should check its own UI change in the running app, read console errors, grab a screenshot, or drive a page from the shell without writing a test file.
- [test-web-app-with-playwright](https://theskillvault.ai/api/skills/test-web-app-with-playwright/raw): Tests a local web app in a real headless browser with Playwright - start the dev server, wait for the page to load, look before you click, then script the flow and capture screenshots and console errors. Use when the user wants to check a page works, click through a flow, take a screenshot, or see browser console logs.

## Design

- [design-distinctive-frontend-ui](https://theskillvault.ai/api/skills/design-distinctive-frontend-ui/raw): Gives a new page or app screen a distinctive look instead of the generic AI-template style - ground it in the subject, plan palette, type and layout, check the plan for cliches, then build and critique. Use when a design looks generic or AI-made, the user wants a unique visual identity, or asks for bold typography and a fresh style.
- [design-landing-page-hero](https://theskillvault.ai/api/skills/design-landing-page-hero/raw): Designs a high-converting landing page hero section with a clear headline, subhead, primary call to action, social proof and product visual, then the home page sections below it (benefits, services, testimonials, FAQ, final CTA). Use when the user wants a homepage, landing page, above-the-fold section, hero banner, or a marketing page that converts.
- [design-tailwind-theme-tokens](https://theskillvault.ai/api/skills/design-tailwind-theme-tokens/raw): Designs a small design system of colour palette, typography scale, spacing and radius tokens as Tailwind theme variables so the whole UI looks consistent. Use when the user wants a colour scheme, brand colours, fonts, a style guide, design tokens, or the app looks inconsistent or ugly.
- [review-ui-against-design-guidelines](https://theskillvault.ai/api/skills/review-ui-against-design-guidelines/raw): Reviews web UI code against a practical interface checklist - interactions, forms, loading and error states, navigation, motion, layout, typography and dark mode - and reports each problem as file, line, issue and fix. Use when the user wants a UI or UX review, asks to check a page against web design guidelines, or wants the interface to feel polished and professional.

## Coding prompts

- [add-skills-from-theskillvault-prompt](https://theskillvault.ai/api/skills/add-skills-from-theskillvault-prompt/raw): A prompt that makes your AI coding agent search TheSkillVault for a ready-made skill before it starts a task, through the MCP server or the plain REST API, then load or install the best match. Use when the user asks to find a skill, wants their agent to look up skills automatically, or asks is there a skill for this task.
- [build-throwaway-prototype-prompt](https://theskillvault.ai/api/skills/build-throwaway-prototype-prompt/raw): A prompt that has the AI build a throwaway prototype to answer one design question fast - a click-through HTML demo of the logic, or 3 radically different UI variants on one page with a switcher bar. Use when the user wants to prototype an idea, try a few layouts, check if a state model feels right, or mock something up before building it properly.
- [build-with-parallel-subagents-prompt](https://theskillvault.ai/api/skills/build-with-parallel-subagents-prompt/raw): A prompt that has the lead AI agent split work into independent tasks, send each to a fresh sub-agent with a focused brief, run them in parallel, then check for conflicts and run the full test suite. Use when the user has several unrelated bugs or failing tests, wants subagent-driven development, or asks to run parallel agents on a plan.
- [review-code-prompt](https://theskillvault.ai/api/skills/review-code-prompt/raw): A prompt for a thorough code review of a diff or pull request covering bugs, security, edge cases, performance and readability, with findings ranked by severity and concrete fixes. Use when the user wants code reviewed, a PR checked, a second opinion on changes, or to find bugs before merging.
- [review-codebase-architecture-prompt](https://theskillvault.ai/api/skills/review-codebase-architecture-prompt/raw): A prompt that has the AI scan your codebase for shallow modules and tangled seams, rank "deepening" refactors that make code simpler to test and navigate, then grill you on the one you pick. Use when the user wants to improve codebase architecture, untangle messy code, plan a refactor, or make a repo easier for AI agents to work in.
- [review-plan-grill-me-prompt](https://theskillvault.ai/api/skills/review-plan-grill-me-prompt/raw): A "grill me" prompt that makes the AI interview you round by round about a plan, design or idea, with a recommended answer for every question, until nothing is left assumed. Use when the user says grill me, wants their plan stress-tested, asks to be challenged before coding, or wants requirements nailed down first.
- [write-agent-skill-prompt](https://theskillvault.ai/api/skills/write-agent-skill-prompt/raw): A prompt that has your AI agent turn a task you keep repeating into a reusable SKILL.md agent skill - clear name, a description with Use when triggers, short numbered steps, gotchas and a done check - then test that it loads. Use when the user wants to create a skill, write a SKILL.md, save a workflow for Claude Code or Cursor, or improve an existing skill.
- [write-agents-md-prompt](https://theskillvault.ai/api/skills/write-agents-md-prompt/raw): A prompt that has your AI agent write or tidy an AGENTS.md project rules file - real build, test and lint commands, code style, folder map and do-not-touch rules - so every coding agent starts with the same context. Use when the user wants an AGENTS.md, CLAUDE.md or .cursor/rules file, says the AI keeps forgetting project conventions, or onboards an agent to a repo.
- [write-commit-message-prompt](https://theskillvault.ai/api/skills/write-commit-message-prompt/raw): A prompt that turns your staged changes or a short description of them into a clear Conventional Commits message with a type, scope, imperative subject, a why-focused body and breaking-change footer. Use when the user wants a commit message written, asks how to describe their changes, or follows conventional commits.
- [write-plan-and-tickets-prompt](https://theskillvault.ai/api/skills/write-plan-and-tickets-prompt/raw): A prompt that breaks a plan or spec into small tracer-bullet tickets, each a thin end-to-end slice with its blockers listed, then has the AI work through them one at a time with tests and commits. Use when the user has a spec to turn into tickets, wants a feature split into tasks, asks for a plan-then-execute workflow, or wants issues an agent can pick up.
- [write-session-handoff-prompt](https://theskillvault.ai/api/skills/write-session-handoff-prompt/raw): A prompt that compacts a long AI coding session into a short handoff document a fresh agent can pick up from, with links instead of copies and secrets redacted. Use when the chat is getting too long, context is running out, you are switching agents or tools, or you want to pick the work up later in a new session.
- [write-terse-replies-prompt](https://theskillvault.ai/api/skills/write-terse-replies-prompt/raw): A prompt that switches your AI agent into a terse reply mode - no filler, no repeated recaps, short fragments - to cut output tokens and reading time while keeping code, commands and errors exact. Use when the user says the AI is too wordy, wants shorter answers, wants to save tokens or cost, or asks for a caveman-style brief mode.

## Writing prompts

- [review-text-clarity-prompt](https://theskillvault.ai/api/skills/review-text-clarity-prompt/raw): A prompt that edits your text for clarity, grammar, flow and tone while keeping your meaning and language, then lists the main changes so you can learn from them. Use when the user wants to proofread, fix grammar, make writing clearer, polish an email or blog post, or improve their writing.
- [write-prd-prompt](https://theskillvault.ai/api/skills/write-prd-prompt/raw): A prompt that turns a rough app or website idea into a concise product requirements document (PRD) with users, scope, user stories, data model and an MVP build plan, or a website brief with a page list and copy per page. Use when the user wants to plan an app or site, draft a spec, scope an MVP, or turn an idea into requirements before coding.

## Research prompts

- [research-competitors-prompt](https://theskillvault.ai/api/skills/research-competitors-prompt/raw): A prompt for researching the competitors and alternatives to an app idea, comparing pricing, features, reviews and gaps in a sourced table, so you can find a niche before you build. Use when the user wants competitor research, market research, to find similar apps or alternatives, or to check if an idea already exists.
- [research-fact-check-claims-prompt](https://theskillvault.ai/api/skills/research-fact-check-claims-prompt/raw): A prompt that lists every claim in a piece of writing, gives evidence for and against each with real sources, names logical fallacies, rates each claim from A to F, and sums up how far to trust it. Use when the user wants to fact-check claims, check if something is true, spot misinformation, or weigh both sides of an argument.
- [research-key-ideas-prompt](https://theskillvault.ai/api/skills/research-key-ideas-prompt/raw): A prompt that pulls the key ideas, insights, exact quotes, habits, facts, references and one-line takeaway out of a long podcast, video transcript, talk, lecture or course module. Use when the user wants the main lessons from a podcast or YouTube video, notes on a talk, or the best quotes and takeaways from a transcript.

## Marketing prompts

- [write-ad-campaign-prompt](https://theskillvault.ai/api/skills/write-ad-campaign-prompt/raw): A prompt that plans a small advertising campaign for your product - target audience, key messages and slogans, ad copy variants, channels, budget split and what to measure. Use when the user wants to advertise a product, plan paid ads on Google, Meta or TikTok, write ad copy or slogans, or promote an app or service.
- [write-launch-posts-prompt](https://theskillvault.ai/api/skills/write-launch-posts-prompt/raw): A prompt that writes launch announcements for a new app across Product Hunt, X, LinkedIn and Reddit, each in that platform's style with a hook, the benefit and a call to action, without hype. Use when the user wants to announce or launch their app, write a Product Hunt post, social media posts, or a launch tweet.

## Step-by-step paths

- [Standard Website](https://theskillvault.ai/bundles/standard-website): Build and launch a small-business website in 10 steps with Next.js, Tailwind and Vercel. Each step uses what the last one made.
- [AI Chatbot App](https://theskillvault.ai/bundles/ai-chatbot-app): Build and ship a web app with your own AI chatbot in 8 steps - a server route that keeps your key safe, a streaming chat UI, limits against abuse, browser tests and a live deploy.
- [SaaS MVP](https://theskillvault.ai/bundles/saas-mvp): Go from idea to a paid web app in 9 steps - a spec, a Next.js app, sign-in with Supabase, Stripe payments, browser tests, CI, a live deploy and launch posts.

## Optional

- [All skills, full text](https://theskillvault.ai/llms-full.txt): every published SKILL.md in one file
- [Getting started](https://theskillvault.ai/start): how to use a skill with any AI chat
- [About, licences and credits](https://theskillvault.ai/about)
- [REST API: list skills](https://theskillvault.ai/api/skills): JSON