Five Claude Code skills that turn the assistant from a chat tool into a development environment: impeccable for production-grade frontend design, playwright-cli for browser automation and visual QA, gsd for project planning with atomic commits, claude-seo for content and SEO review, and banana for AI image generation through the Gemini Nano Banana model. I have been installing these on every new machine I set up for a year now, and they have changed what I expect a "code assistant" to do. Each one ships as a discoverable skill file in .claude/skills/ or ~/.claude/skills/ and gets invoked with a / slash command.
One thing to know up front about those commands: a skill installed on its own is invoked as /skill-name, but a skill that ships inside a plugin is namespaced as /plugin-name:skill-name. The commands below assume the standalone install for each skill; if you install one as part of a larger plugin, expect the namespaced form.
What makes a Claude Code skill worth installing: it does one job well, the slash command is memorable, it composes with other skills, and it has clear opinions baked in rather than asking you twenty questions before doing anything. The five below all meet that bar.
Jump to:
- 1. impeccable — production-grade frontend design
- 2. playwright-cli — browser automation and visual QA
- 3. gsd — project planning with atomic commits
- 4. claude-seo — content quality and SEO review
- 5. banana — AI image generation through Nano Banana
- A note on trust
- Comparison table
- Install order: which to set up first
- FAQ
1. impeccable — production-grade frontend design
The skill that taught me to expect Claude to actually design interfaces, not just hand back vague Tailwind suggestions. /impeccable is the work of Paul Bakaus, and it builds directly on Anthropic's own frontend-design skill, sharpening it into a full design system. It loads two project context files (PRODUCT.md and DESIGN.md) and applies shared design laws — OKLCH colors, no #000, line-length caps, rhythm-driven spacing, an "AI slop" reject list — before producing any code. It has sub-commands for every step of a real design workflow: shape plans the UX before writing code, craft builds end-to-end, polish runs a final quality pass, bolder amplifies bland output, quieter tones down loud output, live lets you click elements in the browser and generate variants.
The reason it stands out: most "design with AI" skills generate plausible-but-derivative output that screams "this is from a model". Impeccable explicitly tries to avoid that by listing the patterns it refuses (gradient text, glassmorphism cliches, the hero-metric template, identical card grids) and forcing the assistant to think through register, color strategy, and reflex-reject aesthetic lanes before committing.
Install it with npx skills add pbakaus/impeccable, which auto-detects your setup and places the files correctly. Then /impeccable craft a settings page and watch it shape first, build second.
2. playwright-cli — browser automation and visual QA
The skill I reach for whenever I am building or reviewing a frontend. /playwright-cli wraps Playwright, Microsoft's browser-automation framework, in a discoverable interface for the assistant: open a URL, take a snapshot of the page (which is an accessibility tree, not raw HTML — much cheaper than reading source), click elements by their reference IDs, fill forms, screenshot specific elements, capture console messages, capture network requests.
What you actually use it for, day to day:
- Visual regression testing. Open the local dev URL, screenshot a component, edit the CSS, screenshot again, compare.
- Reproducing user-reported bugs. Open the production URL, click through the flow, capture the failing console message verbatim.
- End-to-end demos. Record a multi-step flow on the live site for a PR description without firing up the recording tool you keep meaning to learn.
Compared to giving the assistant raw HTML, the snapshot mode is dramatically cheaper in tokens and dramatically more reliable in identifying the actual interactive elements (button vs span-styled-as-button). It is the single skill I would refuse to work without.
3. gsd — project planning with atomic commits
/gsd is short for Get Shit Done, a spec-driven development system for Claude Code built by TÂCHES. It is project management for engineers who want plans before execution but not Jira before either. It introduces a workflow folder under .planning/ per project with phases, plans, and verification artifacts, and it installs as a family of gsd-* commands rather than one monolith: /gsd-new-project initializes context, /gsd-plan-phase plans a phase with goal-backward verification, /gsd-execute-phase runs the plan with atomic commits. The repo lists the full command set, including the discuss, debug, and review phases.
Where it earns its keep: anything where the assistant might otherwise drift mid-task — adding a feature that spans 5 files, refactoring something that touches a shared component, debugging a flaky test. Without a plan, the assistant tends to lose the thread halfway and produce a result that "looks complete" but skips two of the requirements. With /gsd-plan-phase first, every phase has a written acceptance bar and the execute step has to satisfy it.
The trade-off is overhead: for a one-line bug fix this is overkill. Skip the planning commands and use regular tool calls for those. Save the gsd-* workflow for work that has 3+ distinct steps and clear acceptance criteria.
4. claude-seo — content quality and SEO review
The skill suite that pairs with everything you publish for the web. claude-seo is built by Daniel Agrici and it is genuinely a suite: 25 sub-skills and 18 sub-agents covering technical SEO, E-E-A-T content review, schema, GEO/AEO for AI search, local SEO, e-commerce SEO, and reporting. You do not invoke one big command; you invoke the sub-skill you need — /seo-content to score a page on Experience, Expertise, Authoritativeness, and Trustworthiness, /seo-audit for a full-site pass, /seo-technical for crawlability and Core Web Vitals, /seo-schema for structured data.
Concrete output from a content review: a numerical E-E-A-T score per dimension, an AI-citation-readiness score, and a prioritized list of fixes. The fixes are practical: "add a publication date here", "your byline should have a credentialed bio link", "this 800-word paragraph needs a 134-167 word self-contained answer block above the fold". That last part matters more every month, now that AI Overviews and ChatGPT browsing surface a real fraction of search traffic.
Use it on every article before publishing, on competitor pages to see what you have to beat, and on landing pages after a redesign to verify nothing important got lost.
5. banana — AI image generation through Nano Banana
/banana is the skill that closes the loop: once a post is written, it needs a cover image. The skill is banana-claude, also by Daniel Agrici — so two of the five skills here come from the same author, which is part of why claude-seo and banana compose so cleanly. It is a Creative Director wrapper around Google's Nano Banana image-generation model (Nano Banana is the model; you reach it through the Gemini CLI). The skill handles prompt construction with a structured formula, applies domain modes (brand vs product), produces variations efficiently, and integrates with batch workflows.
When you need it: cover images for blog posts, hero illustrations for landing pages, OG card images, internal diagrams, mood-board explorations. The output is consistently more on-brief than running the raw model, because the skill applies the prompt engineering you would have written by hand anyway.
A practical pattern: generate the cover, run it through a compose script for the text panel, logo, URL, and EXIF metadata, upload to your image CDN, reference it in MDX. The whole pipeline is about 90 seconds end-to-end with no manual prompt tweaking.
A note on trust
One habit worth keeping before you install any of this. A Claude Code skill is not just a markdown prompt — a skill can bundle helper scripts and have the assistant run shell commands or touch files as part of its workflow. That is exactly what makes these five powerful, and it is also why a third-party skill deserves a look before it runs. Open the SKILL.md and any bundled scripts, see what commands and file operations it actually performs, and prefer skills whose source you can read. This matters most for the skills that automate browsers, generate and upload images, or plan and execute multi-file changes — which is to say, most of this list.
Comparison table
| Skill | Slash command | Built by | Best for | Skip when |
|---|---|---|---|---|
| impeccable | /impeccable | Paul Bakaus | Frontend design, UI iteration, brand-aware UI | Non-UI work |
| playwright-cli | /playwright-cli | wraps Microsoft's Playwright | Browser automation, visual QA, bug reproduction | Pure backend |
| gsd | /gsd-* commands | TÂCHES | Multi-step work, planned features, atomic commits | One-line fixes |
| claude-seo | /seo-content, /seo-audit, ... | Daniel Agrici | Content review, E-E-A-T scoring, technical SEO | Internal-only content |
| banana | /banana | Daniel Agrici | Cover images, illustrations, OG cards | Photo-realistic stock |
Install order: which to set up first
If you are setting up Claude Code on a new machine, install in this order:
- gsd first. It changes how you plan. Every other skill composes better when there's a plan file in
.planning/. - playwright-cli second. You will reach for it within an hour of doing any frontend work. The snapshot model is dramatically cheaper than reading raw HTML.
- impeccable third. Pairs with playwright-cli — design, screenshot, critique, iterate.
- claude-seo fourth. Needed when you are about to publish.
- banana last. Generates the assets you will use in the published content.
You do not need to install all five at once. Start with one or two, get comfortable with the slash commands, then add the others as natural use cases come up.
What to do next
For the surrounding tools that pair naturally with these skills:
- Top 5 MCP Servers Every Developer Should Try in 2026 covers the Model Context Protocol servers that extend Claude Code with file access, GitHub, databases, and browser control — orthogonal to skills but compose with them.
- The Regex Cheat Sheet is the syntax reference you will reach for whenever
/seo-contentor/playwright-clineed to extract patterns from page output. - The MySQL Cheat Sheet is the SQL reference for the database side of any AI workflow.
External references: the official Claude Code documentation is the canonical install and configuration guide. Claude Code supports official, community, and custom plugin marketplaces — the plugin and marketplace documentation explains how to add a marketplace and install from it, which is how several of the skills above are distributed.
