Top 10 Claude Code Skills
for Vibe-Coding
Vibe-coding works until it doesn't — until the landing page looks AI-generic, the copy reads like ChatGPT, the codebase rots after week 4. These 10 skills patch each failure mode. Stack them and you keep velocity at month 3, not just week 1.
All work in Claude Code, Cursor, Codex, Windsurf — the SKILL.md format is portable. Each entry: what it does, why vibe-coders specifically need it, install command, an example invocation.
Don't install all 10. Start with these 3 and you cover 80% of the vibe-coding workflow:
- 1. Frontend Design (Anthropic) — Stops AI-generic output. Cheapest credibility upgrade.
- 2. Superpowers (brainstorming + TDD) — Brainstorming before code, tests as safety net.
- 3. Stop Slop — Final pass for any prose you ship. Removes the AI tells.
/plugin install frontend-design@claude-plugins-official /plugin install superpowers@claude-plugins-official git clone https://github.com/hardikpandya/stop-slop.git mkdir -p ~/.claude/skills/stop-slop && cp -r stop-slop/* ~/.claude/skills/stop-slop/
Not sure where you fit? Find your row, install those skills first. Add more later as projects grow.
| You are | Main goal | Install |
|---|---|---|
| Solo founder building landing pages | Pages that don't scream AI | Frontend Design + UI/UX Pro Max + Stop Slop |
| Vibe-coder shipping a SaaS prototype | Stable iteration past week 1 | Brainstorming + TDD + /simplify |
| Indie marketer / growth | Content + CRO + retention | Marketing Skills (Corey Haines) + Stop Slop + Prompt Engineer |
| Designer learning to ship code | First production component | Frontend Design + UI/UX Pro Max + Code Reviewer |
| Anyone running long Claude sessions | Multi-hour sessions stay coherent | Context Engineering + Brainstorming + /simplify |
Vibe-coding = building software by chatting with an AI in plain English instead of typing code line-by-line. The term was coined by Andrej Karpathy in early 2025 and mainstreamed when Claude Code, Cursor, and Codex CLI made it production-viable. You direct intent, the agent writes implementation.
- 1. Looks generic — AI defaults to gray-on-gray. Fix: frontend-design + ui-ux-pro-max.
- 2. Reads like AI — copy has tells. Fix: stop-slop + marketing skills.
- 3. Codebase rots — every chat adds inconsistency. Fix: /simplify + TDD + code-reviewer.
- 4. You lose context — Claude forgets earlier decisions. Fix: context-engineering + brainstorming up-front.
Each of the 10 skills below patches at least one of these. The 4 starred (★) are mandatory; the rest are situational.
Two paths.
# Browse all skills claude plugin search # Install by name claude plugin install frontend-design@anthropic claude plugin install marketingskills@coreyhaines31
# Clone any SKILL.md directly mkdir -p ~/.claude/skills/stop-slop curl -L https://raw.githubusercontent.com/hardikpandya/stop-slop/main/SKILL.md \ -o ~/.claude/skills/stop-slop/SKILL.md
List loaded skills: claude skill list. See what fired in the current chat: /skills.
Gives Claude a real design philosophy before it touches any code: bold aesthetic decisions, distinctive typography, intentional color palettes, animations that feel earned. Stops the assistant from defaulting to gray-card-on-gray-background AI-generic.
The single biggest reason vibe-coded landing pages look like AI did them: no design intent. This skill is the cheapest fix — install once and every page Claude builds gets a non-generic look. By far the most-installed Claude skill of 2026.
- →Pages stop looking 'AI-generated' — no more gray-card grids
- →Typography choices feel intentional, not Tailwind-default
- →Color palettes have contrast + purpose, not random hex spam
- →Animations earn their place — no decorative motion noise
- →Brand-consistent output across components without you describing the brand 10x
- 1Install once, forget. Skill auto-loads when Claude detects UI work. No per-prompt invocation needed in most cases.
- 2Describe the vibe in 3 words. 'Editorial, dense, technical'. Skill maps adjectives to typography + color + density decisions.
- 3Let it pick first, then constrain. Look at the first attempt. Push back on what's off ('less brutalist, more elegant') rather than micromanaging tokens.
- 4Lock the design system early. After 2-3 components, ask Claude to extract design tokens (colors, spacing, font sizes) into a file. Reference for all future components.
/plugin install frontend-design@claude-plugins-official
"Build me a hero section for a QA tools site. Use the frontend-design skill — bold typography, real contrast, one purposeful animation. Not card-grid AI default."
"Use frontend-design + ui-ux-pro-max. Build me 3 hero variants for a B2B SaaS targeting QA leads. Editorial tone, dark mode primary. Extract design tokens (colors, spacing, type scale) into design-tokens.ts so the rest of the site can use them."
Catalog of 50+ styles, 161 color palettes, 57 font pairings, 161 product-type patterns, 99 UX guidelines, 25 chart types — across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, RN, Flutter, Tailwind, shadcn/ui, HTML/CSS). Claude searches it before making design decisions.
When you say 'build me a SaaS dashboard', the assistant otherwise picks at random. This skill gives it a database of which palette × typography × layout actually works for dashboards specifically. Integrates with shadcn/ui MCP for live component lookup.
- →Product-type-aware decisions: dashboards look like dashboards, landings like landings
- →Palette + font pairings that actually go together (curated, not random)
- →Stack-aware output: ask for React/shadcn and you get real shadcn components, not lookalikes
- →Accessibility baked in — contrast ratios, focus states, ARIA from the catalog
- →Chart type recommendations match the data (no pie charts for time series)
- 1State the product type explicitly. 'B2B SaaS admin panel' vs 'consumer landing' vs 'portfolio' — different patterns fire. Vague briefs get generic output.
- 2Constrain the style ahead. Tell it what NOT to use (neumorphism, brutalism, claymorphism). Catalog has 50+ styles; without filters it picks randomly.
- 3Let it propose 2-3 palette + font combos. Skill returns options with rationale ('this palette suits B2B because…'). Pick one before generating components.
- 4Generate components with the chosen system. Now ask for buttons, modals, tables. Skill enforces consistency with the picked palette.
- 5Use the UX guidelines for review. After UI is built, ask 'review this against your 99 UX guidelines'. Catches accessibility + interaction issues.
/plugin marketplace add ui-ux-pro-max-skill/ui-ux-pro-max /plugin install ui-ux-pro-max@ui-ux-pro-max-skill
"Use ui-ux-pro-max. I'm building an admin panel for a small-team SaaS. Pick a palette + font pairing + layout pattern that fits a B2B audience. Don't use neumorphism."
"Use ui-ux-pro-max. Product: e-commerce checkout for fashion. Stack: Next.js + shadcn/ui. Propose 3 palette + font combos with rationale. After I pick one, generate: button (4 variants), input + form, cart drawer, order summary. Then run UX guidelines review on all components."
Before any creative work — features, designs, copy — Claude asks clarifying questions about intent and constraints instead of jumping to one solution. Surfaces tradeoffs explicitly.
Vibe-coding fails fastest when you give a one-liner and accept the first answer. This skill forces the conversation that a designer-friend would have with you. Output: a thought-through brief, not a guessed implementation.
- →Fewer 'wrong feature shipped' — alignment happens in chat, not after a 2-hour build
- →Spec is written for you — chat output = the brief you can save
- →Tradeoffs surfaced explicitly — 2-3 options with rationale, not 1 guess
- →Token savings — 5 min of questions prevents 30 min of regenerating
- →You learn faster — Claude asks the questions a senior would ask
- 1Describe the goal in 1 sentence. Resist over-specifying. Brainstorming's job is to surface what you forgot. 'Build a landing page for X' is enough.
- 2Answer Claude's questions honestly. Audience, primary action, what's out of scope, budget, vibe. The questions ARE the value.
- 3Push back on the questions. If a question feels off, say why. Skill adapts — that's how it surfaces YOUR constraints, not generic ones.
- 4Get the 2-3 options. Claude proposes approaches with tradeoffs. Pick one, or ask for a 4th.
- 5Hand to execution skill. Pass the brief to frontend-design, ui-ux-pro-max, or marketing skills — they execute on what brainstorming produced.
/plugin install superpowers@claude-plugins-official
"Let's brainstorm a landing page for my freelance Playwright consulting. Help me figure out positioning, primary CTA, and what NOT to include before I tell you to design it."
"Brainstorm: should I add a free tier to my SaaS? Help me think through pricing psychology, fraud risk, conversion funnel impact, support cost. What's the data I'd need to decide? What's the smallest experiment to run first?"
41 SKILL.md files covering CRO, copywriting, SEO, analytics, paid acquisition, retention, product marketing, sales enablement, growth engineering. The foundation skill (product-marketing) creates a shared context document every other skill reads.
Vibe-coding usually means founder-as-everything. You build the product, you write the copy, you do the SEO. This bundle is your in-house marketing team in a skill pack. v1.2.0+ ships /ai-seo (content for ChatGPT / Perplexity / Google AI Overviews), /churn-prevention, /ad-creative.
✓ What you get (5) · ▸ How to use (5 steps)
- →Consistent positioning across every page, email, ad — no '4 different versions of who we are'
- →AI-search-friendly content via /ai-seo (ChatGPT, Perplexity, Google AI Overviews cite you)
- →Churn prevention sequences without hiring a retention specialist
- →CRO reviews on landing pages catch leaky funnels
- →Marketing-team-level output without a marketing team
- 1Run /product-marketing FIRST. Creates a shared context doc. Every other skill in the bundle reads from it. Without this step, output is generic.
- 2Fill in the context honestly. Skill asks: what's the product, who's it for, who are competitors, what's your positioning. Be specific — vague answers = vague output.
- 3Pick the right skill for the job. /ai-seo for content, /churn-prevention for retention, /ad-creative for paid, /copywriting for emails. Don't try them all at once.
- 4Always reference the product context. Every prompt: 'use my product-marketing context'. Skip this and you get generic copy that ignores your positioning.
- 5Run stop-slop after. Marketing skills draft strongly, but the AI-tells still appear. Always finish the pipeline with stop-slop.
# Easiest — CLI: npx skills add coreyhaines31/marketingskills # Or Claude Code plugin: /plugin marketplace add coreyhaines31/marketingskills /plugin install marketing-skills
"Use the product-marketing skill to create my product context document. Ask me questions to fill it out."
"Use /ai-seo to draft a pillar page for 'Claude Code for QA'. Read my product-marketing context. Target keyword + 5 supporting queries. Make it citation-friendly for ChatGPT and Perplexity (clear claims, source links)."
Removes AI tells from prose: filler phrases, throat-clearing openers, binary contrasts ('it's not X — it's Y'), passive voice. 7 core rules + a pre-publish checklist.
AI-written copy reads the same on every site — and the audience can tell. This skill makes output sound like a human wrote it on Tuesday morning. The cheapest credibility upgrade you'll buy this year (it's free).
✓ What you get (5) · ▸ How to use (5 steps)
- →Landing copy that doesn't trigger 'this is AI' instinct in 2 seconds
- →Higher email open + reply rates — no robotic openers
- →About / mission pages sound personal, not corporate-AI
- →Saves 30+ min of manual edit per long piece
- →Removes 7 named AI tells (filler, throat-clearing, passive, binary contrasts, hedge, jargon, repetition)
- 1Draft normally. Let Claude or you produce a first draft. Don't worry about tone yet — speed first, polish later.
- 2Invoke stop-slop on the draft. Tell it what to PRESERVE (numbers, names, specific claims) so it doesn't over-edit.
- 3Review the diff. Skill shows what it cut + why. If it removed something meaningful, say 'keep the line about X'.
- 4Run the 7-point checklist. Final pass: 'it's not X — it's Y'? 'In essence'? 'Comprehensive'? Strip every instance.
- 5Read aloud before shipping. If you'd never say it out loud, neither should the page.
# stop-slop is a standalone SKILL.md (no marketplace entry yet) git clone https://github.com/hardikpandya/stop-slop.git mkdir -p ~/.claude/skills/stop-slop cp -r stop-slop/* ~/.claude/skills/stop-slop/
# After Claude drafts About page copy "Use stop-slop on the About page draft. Preserve the structure and personality, cut the AI tells."
"Use stop-slop on landing/page.tsx. Three sections to polish: hero headline, value props, FAQ. Keep the 4 USP numbers verbatim. Cut anything that sounds like LinkedIn thought-leadership."
Reviews and rewrites your prompts to be specific, structured, tool-aware. Adds missing constraints (format, length, refusal conditions), removes ambiguity, splits into XML sections when needed.
Vibe-coding is prompt-driven development. Your skill ceiling = prompt quality. This skill teaches Claude to upgrade your prompts in-flight — you keep typing casual, output stays tight.
✓ What you get (5) · ▸ How to use (5 steps)
- →Prompts produce consistent output across runs (no 'works once, fails next')
- →20-40% token cost savings — explicit constraints stop over-generation
- →Easier to debug — when output is wrong, you know which constraint was violated
- →Build a library of refined prompts → save as /commands or skills
- →Learn prompt patterns by watching the skill rewrite yours
- 1Bring your messy prompt. The one that produced inconsistent results. Messier = better learning material.
- 2Let prompt-engineer diagnose. Surfaces: ambiguous terms, missing format spec, unbounded length, conflicting instructions, implicit assumptions.
- 3Review the rewrite. Look at the structure: XML sections, explicit constraints, refusal conditions. Adjust tone if too formal.
- 4A/B test on 3-5 inputs. Run old vs new prompt on real samples. Compare consistency, not just one output.
- 5Save what works. Drop refined prompt into ~/.claude/commands/<name>.md or create a SKILL.md. Don't lose the refinement.
# Easiest: npx prompt-architect install # Or browse the marketplace: /plugin # (search "prompt-architect" or "prompt-engineer" and pick top-rated)
"Use prompt-engineer to improve this: 'build me an onboarding flow that doesn't suck'. Tell me what's missing and propose a better version."
"Use prompt-engineer to design a prompt for a GitHub Action running on every PR. Goal: write a 1-paragraph release-note draft from the diff. Constraints: must complete in <30s, no jargon, refuse if no user-facing changes detected. Output as commit-style sentence."
After implementation, Claude becomes a senior reviewer checking: logic errors, security issues, performance traps, style consistency, missing tests. Returns structured findings instead of 'looks good'.
Vibe-coding usually means no one else reads the code. This is your second pair of eyes — catches XSS, leaked API keys, n+1 queries, missing error handling before prod. Cheap insurance.
✓ What you get (5) · ▸ How to use (5 steps)
- →Catches leaked secrets / hardcoded API keys before commit (real incident-stopper)
- →XSS / injection / auth bypass flagged before deploy
- →Performance traps surfaced (n+1, missing indexes, unbounded queries)
- →Structured output: severity + file:line + suggested fix
- →~2 hours/week saved on rewrites + bug-chasing
- 1Build the feature first. Don't pre-clean. Reviewer needs real code with real problems to find them.
- 2Name focus areas explicitly. 'security', 'performance', 'error handling'. Without focus, output is generic. Be specific to your worry.
- 3Triage findings by severity. Critical first (security, data loss). Major (UX-breaking). Minor (style). Don't blindly apply minors — they may be subjective.
- 4Apply or defer per item. Critical → fix now. Major → fix this PR. Minor → backlog or skip. Justify deferral so you remember.
- 5Re-review after fixes. Second pass should be clean. New findings = your fix introduced problems.
/plugin install code-review@claude-plugins-official # Then on any PR branch: /code-review
# After Claude builds a feature "Use code-reviewer on the auth flow I just built. Focus on security and edge cases. Be brutal."
"Use code-reviewer on the entire app/ directory. Group findings by: 1) security/secrets, 2) data leaks/PII, 3) performance traps, 4) missing error handling. Output as a markdown report ranked by severity. Skip style nits."
After a feature or fix, spawns 3 parallel review agents — code-reuse scanner, quality reviewer, efficiency reviewer. Aggregates findings, then applies the fixes. One command, multiple perspectives, real cleanup.
Vibe-coded codebases grow fast and messy. Run /simplify periodically to: extract repeated patterns into helpers, normalize naming, remove dead code, collapse duplicated components. Stops 'every file is different' rot.
✓ What you get (5) · ▸ How to use (5 steps)
- →Duplicated patterns collapsed into helpers automatically
- →Bundle size shrinks 10-30% on typical UI codebases
- →Naming + structure becomes consistent across files
- →Dead code removed without manual hunting
- →All in one command — no per-file babysitting
- 1Finish the feature first. /simplify on incomplete code = wrong refactors. Wait until feature works end-to-end.
- 2Run scoped, not global. /simplify components/landing/ is faster + safer than whole-repo. Iterate per area.
- 3Review the proposed changes. Three agents agree → high-confidence. Two of three → review carefully. One vote → likely false positive, skip.
- 4Test after applying. Always run the suite / dev server after /simplify. Refactors can break behavior even when types pass.
- 5Commit /simplify separately. Don't bundle with feature work. Makes review + rollback trivial.
Already available — just type /simplify
# After scaffolding a new page /simplify # Or scoped to a folder /simplify components/landing/
# After a feature, in this exact order /simplify components/cart/ /verify components/cart/ # confirms it still works git commit -m "refactor: simplify cart components"
Teaches Claude to manage 5 context layers — Identity, Capability, Knowledge, Memory, Observation — and compress proactively when nearing token limits. Mitigates 'lost in the middle' on long sessions.
Vibe-coding sessions are long. Build a feature, iterate UX, add tests, write copy — 4 hours later Claude confidently uses a component name from turn 3 that no longer exists. This skill makes Claude treat its own context as a managed resource.
✓ What you get (5) · ▸ How to use (5 steps)
- →4-hour+ sessions stay coherent — no 'I forgot we renamed that' moments
- →30%+ token savings on long sessions — compression keeps cost down
- →Design tokens / brand voice stay stable across the session
- →Cross-file references stay accurate (Claude actually remembers what it touched)
- →Critical for full-day vibe-build sessions
- 1Define identity at session start. 'You are my design+code partner for this project.' Identity = persistent role across turns.
- 2Pre-load knowledge. Drop in: design tokens, brand guidelines, existing component library. Skill stores them as referenceable knowledge.
- 3Pin memory (your voice + style). Coding style, naming conventions, your design preferences. Skill keeps this stable through compressions.
- 4Set compression cadence. Default 20 turns. Skill compresses old observations into a summary, keeps identity/knowledge/memory intact.
- 5Watch for drift. If Claude repeats itself or contradicts earlier output, compression is too aggressive. Tune cadence up to 30.
/plugin marketplace add muratcankoylan/Agent-Skills-for-Context-Engineering /plugin install context-engineering@context-engineering-marketplace
"Use context-engineering. Identity = my AI design partner. Knowledge = these design tokens + my brand. Memory = my voice. Compress observations after every 20 turns."
"Use context-engineering. Identity = founder + designer. Knowledge = product spec (file ref), design-tokens.ts, competitor positioning doc. Memory = my voice, my one-line product description, my 3 anti-patterns. Compress every 30 turns. Preserve numeric metrics + brand colors verbatim."
Forces Claude to write a failing test before any implementation code, then make it pass, then refactor. Locks the assistant into red-green-refactor instead of code-first-and-pray.
Counter-intuitive pick, but: vibe-coding without tests means every iteration risks breaking the last one. With TDD, Claude has a safety net — change anything, the tests tell you what shipped wrong. Bigger win: you keep velocity at week 6, not just week 1.
✓ What you get (5) · ▸ How to use (5 steps)
- →~3 hours/week saved (survey) — but the real win is sustained velocity
- →Refactors are safe — green tests guard every change
- →Fewer 'I broke the last feature' moments
- →Living spec — tests document what each piece does
- →Confidence to ship more, fix more, change more — no fear of breakage
- 1Start small — one feature. Don't try to TDD-convert the whole project. Pick the next feature you'd build anyway.
- 2Brief Claude with the interface. What's the function / route / component supposed to do, from outside? Tests test this, not internals.
- 3Approve the test list before code. Claude proposes tests (empty state, invalid input, network fail, success). Add/remove before any code is written.
- 4Red → Green → Refactor cycle. Watch Claude make the test fail, then write minimal code to pass, then ask to refactor with tests green.
- 5Run tests every change after. Whenever you (or Claude) touch the code, run the suite. First time a regression is caught = you convert to TDD forever.
/plugin install superpowers@claude-plugins-official
"Use TDD to add the email-capture form. Test the empty state, invalid email, network failure, success. Then build the minimum that passes."
"Use TDD on the pricing-page-A/B-test feature. First: Playwright test asserting variant B shows the new pricing card on >50% of visits. Run (must fail). Then add the variant logic + tracking. Re-run. Refactor: extract A/B helper for future tests."
Real productivity is in the chains.
Landing page from scratch
When: New product, new page, no prior context.
1. brainstorming (positioning) → 2. marketingskills /product-marketing → 3. frontend-design + ui-ux-pro-max (visual) → 4. code-reviewer → 5. stop-slop (copy)
Iterate on a vibe-coded prototype
When: Coming back to a project after a week.
1. context-engineering (load prior context) → 2. brainstorming (what to change) → 3. TDD (lock current behavior) → 4. implement → 5. /simplify
Marketing batch (weekly)
When: Recurring content production.
1. marketingskills /ai-seo (pillar topic) → 2. draft → 3. stop-slop → 4. publish
Frontend-design alone changes whether a landing page converts. Stop-slop changes whether the copy gets read. Together:¹
Numbers are typical ranges from public CRO reports, not guarantees. Your mileage varies with audience + traffic source.
What does 'vibe-coding' actually mean in 2026?
Vibe-coding = building software (websites, apps, automations) by chatting with an AI assistant in plain English instead of writing code line-by-line. You direct intent, the AI writes implementation. Term coined by Andrej Karpathy in early 2025; mainstreamed when Claude Code, Cursor, and Codex CLI made it production-viable. Skills + MCP make it actually durable, not just toy.
I'm not technical. Can I use these skills without coding?
Mostly yes. frontend-design, ui-ux-pro-max, marketingskills, and stop-slop need zero coding knowledge — they shape what Claude writes for you. code-reviewer and TDD do require you to understand the difference between 'test passed' and 'code shipped'; if you have an AI partner doing the explanations, you can learn as you go.
What's the minimum starter set?
If you can only install 3 right now: frontend-design (so it doesn't look generic), brainstorming (so you don't waste tokens on the wrong feature), stop-slop (so the copy doesn't read like ChatGPT). Add the rest as projects grow.
Will these skills work in Cursor / Windsurf / Codex too?
Yes, if the skill ships in the open SKILL.md format. Most do. Anthropic-bundled slash commands like /simplify and /batch are Claude Code only.
¹ Install counts and adoption labels are aggregated from public 2026 community surveys (Agensi, Composio, Developers Digest) and marketplace metadata. ROI lift ranges come from public CRO reports, not from controlled experiments on your specific traffic. Treat all numbers as directional, not promises. Verify the current install command in each linked repo before relying on it — marketplace names and skill versions evolve.