Extending with other tools

This kit ships with a small core: working pages, design tokens, AI instruction files, and a handful of kit skills for things that touch the code. For everything else, the kit is meant to be extended by adding agent skills from the open registry.

The VoltAgent Awesome Agent Skills registry collects 1000+ skills published by official teams (Anthropic, Google, Stripe, Cloudflare, Vercel, Figma, etc.) and the community. Pick what you need, install it, and your AI will start using it.

Skills are reusable capabilities for AI agents. They provide procedural knowledge that helps agents accomplish specific tasks more effectively. Think of them as plugins or extensions that enhance what your AI agent can do.

How to add a skill

Every skill page tells you how to install it, but the methods differ by source. Three patterns cover almost everything.

Option 1 — Follow the skill's own page (recommended)

For skills listed on officialskills.sh, each skill page has a copy-paste install command at the top, usually starting with npx skill .... Open the page, copy the command, run it in your terminal from the project root.

For skills hosted on GitHub directly, the README of the repo tells you what to do. Or, easier: paste the GitHub link into your coding assistant and say "install this skill into our project". The AI fetches the files and drops them in the right folder. After that, ask your AI to use it for the next relevant task.

Always check the skill's own page first when an install command is offered. The instructions there are authoritative.

Option 2 — Ask your AI to install it

Paste the skill page URL into your chat:

Install this skill into our project: <skill-url>

The AI opens the page, reads the install instructions, and runs them for you. Works for both registry and GitHub skills.

Option 3 — Do it yourself by hand

When the install command fails or you want full control, drop the skill files into a folder your AI tool reads automatically.

1. Download the skill files (SKILL.md plus any scripts the skill ships with).

2. Pick a folder:

   Tool-specific (auto-pickup). Use the path your AI tool expects:

   Tool	Project skills path
   Claude Code	.claude/skills/<name>/
   Codex	.agents/skills/<name>/
   Cursor	.cursor/skills/<name>/
   Gemini CLI	.gemini/skills/<name>/
   Antigravity	.agent/skills/<name>/
   GitHub Copilot	.github/skills/<name>/
   OpenCode	.opencode/skills/<name>/
   Windsurf	.windsurf/skills/<name>/

   Generic (any tool). Keep them all in one place at the project root, for example external-skills/<name>/. In your AI chat, reference the file directly:

   I just added a new skill at external-skills/<name>/SKILL.md. Read it and use it for the next task whenever it applies.

   The AI reads the file and follows it. It will not auto-trigger the way the tool-specific path does, but it works with every AI tool, including web chat.

Pick whichever option fits. Option 1 is fastest when the skill page gives you a one-liner; option 2 is the lazy default; option 3 is the reliable fallback when the install command does not work.

Skills by what you are doing

The lists below are curated for this kit. Two or three good options per task is enough. Click a skill name to read its details on the registry.

Writing copy

When you are rewriting the landing hero, drafting service descriptions, or polishing existing copy.

• coreyhaines31/copywriting — write and rewrite landing, homepage, and ad copy
• coreyhaines31/copy-editing — refine existing copy for clarity and impact
• realkimbarrett/generic-language-killer — strip vague, corporate, AI-sounding phrasing
• blader/humanizer — remove AI-written tells from text so it reads more human

Designing pages

When you are improving the visual quality of a page or asking your AI to compose a new section.

• anthropics/frontend-design — frontend design and UI/UX guidance
• anthropics/brand-guidelines — apply brand colors and typography consistently
• garrytan/design-review — visual audit + atomic fixes with before/after screenshots
• ibelick/ui-skills — opinionated UI constraints to keep agents on track

Images and media

When you need hero images, blog graphics, or AI-generated visuals.

• openai/imagegen — generate and edit images using OpenAI's Image API
• anthropics/canvas-design — design visual art in PNG and PDF formats

SEO and analytics

When you want search traffic and visibility into who is visiting.

• coreyhaines31/seo-audit — diagnose technical and on-page SEO issues
• AgriciDaniel/claude-seo — universal SEO skill for site analysis and optimization

Bundled: the kit ships Google Analytics 4 and PostHog — set one env var each. See Analytics (Google Analytics + PostHog). For broader SEO meta tags, see agent-skills/add-seo.md.

Performance and accessibility

When you want a deeper audit than the bundled kit skills.

• addyosmani/web-quality-audit — comprehensive review across performance, a11y, SEO, best practices
• addyosmani/core-web-vitals — LCP, INP, CLS-specific tuning

The kit ships agent-skills/perf-audit.md and agent-skills/a11y-audit.md for the everyday pass. Use the above when you need depth.

Animations

When you want scroll effects, page transitions, or hero animations.

• greensock/gsap-core — core GSAP API: tweens, timelines, easing
• greensock/gsap-scrolltrigger — scroll-linked animations, pinning, scrub

Forms beyond the contact form

When the bundled contact form is not enough and you need multi-step, file uploads, or spam protection.

• Bundled file uploads: the kit ships S3-compatible storage (AWS S3, R2, DigitalOcean Spaces, Supabase Storage) behind /app/files. Turn it on in File uploads.
• netlify/netlify-forms — HTML form handling with built-in spam filtering

For wiring the existing contact form to Formspree / Basin / Web3Forms / Resend, see agent-skills/wire-contact-form.md.

For the bundled Resend contact form, Supabase auth, and newsletter contact setup checklist, see Auth and email setup.

Authentication

When you are wiring user accounts, login, sign up, or sessions.

• Bundled: the kit ships Supabase auth (email + password, magic link, Google / GitHub / Apple, password reset). Turn it on in Auth and email setup.
• Swapping to another provider? better-auth/best-practices — Better Auth integration patterns
• better-auth/create-auth — set up Better Auth from scratch

For Clerk, follow clerk.com/docs/ai directly.

Payments and billing

When you are adding paid plans, subscriptions, or checkout.

• Bundled: the kit ships Stripe billing (checkout, customer portal, invoices, webhook). Turn it on in Stripe billing setup.
• Going beyond the bundled setup: stripe/stripe-best-practices — Stripe integration best practices

Email

When you are sending transactional, marketing, or contact emails.

• For the bundled Resend contact form + auth contact sync, see Auth and email setup; for the bundled newsletter signup + broadcast, see Newsletter (Resend).
• resend/resend — send and manage emails via the Resend API
• resend/react-email — build emails with React Email components

Hosting and deploys

When you are putting the site online or moving between hosts.

• openai/vercel-deploy — Vercel deploy walkthrough
• openai/netlify-deploy — Netlify deploy walkthrough
• openai/cloudflare-deploy — Cloudflare deploy walkthrough

See also docs/deploy-and-domain.md for high-level options.

Error monitoring

When the live site has issues you need to track down.

• getsentry/sentry-react-sdk — Sentry on React Router, TanStack Router, Vite
• getsentry/sentry-fix-issues — find and fix Sentry issues with stack trace + breadcrumb context

Pattern we follow

The kit ships bundled integrations for the common ones — Supabase auth, Stripe billing, S3-compatible file uploads, Google Analytics, PostHog, and Resend (contact form + newsletter). Each is wired into the code and turns on with environment variables (see the setup pages above); until then they run in demo mode. For anything beyond that, we point at official docs and registry skills — pull what you need; do not preinstall everything.