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, seo-content for E-E-A-T-aware content reviews, 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.
What makes a Claude Code skill worth installing in 2026: 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. seo-content — content quality and E-E-A-T review
- 5. banana — AI image generation through Nano Banana
- 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 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 via the Claude plugin marketplace or by cloning the skill folder into ~/.claude/skills/impeccable/. 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 the Playwright CLI 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 (Get Stuff Done) is the project-management skill for engineers who want plans before execution but not Jira before either. It introduces a workflow file under .planning/ per project with phases, plans, and verification artifacts. Sub-commands cover the actual lifecycle: gsd-new-project initializes context, gsd-plan-phase plans a phase with goal-backward verification, gsd-execute-phase runs the plan with atomic commits, gsd-verify-work runs UAT after execution.
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. Use /gsd-fast or just regular tool calls for those. Save /gsd for work that has 3+ distinct steps and clear acceptance criteria.
4. seo-content — content quality and E-E-A-T review
The skill that pairs with everything you write for the web. /seo-content scores a page against the December 2025 Quality Rater Guidelines: Experience, Expertise, Authoritativeness, Trustworthiness. It also checks AI citation readiness — passage-level extractability, structural readability, multi-modal content, and authority signals — which matters more than traditional SEO now that AI Overviews and ChatGPT browsing surface a meaningful fraction of search traffic.
Concrete output: a numerical E-E-A-T score per dimension (out of 25 each), a citation-readiness score out of 100, 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".
Use it on every article before publishing. Use it on competitor pages to see what you have to beat. Use it on landing pages after a redesign to verify nothing important got lost.
5. banana — AI image generation through Nano Banana
/banana is the Creative Director wrapper around Google's Nano Banana image-generation model (accessed via the Gemini CLI). It handles prompt construction with a 5-component formula, applies domain modes (brand vs product), produces variations efficiently, and integrates with batch workflows.
When you need: 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 raw text-to-image because the skill applies the prompt engineering you would have written by hand anyway.
A practical pattern: generate the cover, run it through the watermark script for logo + URL + EXIF metadata, upload to your image CDN, reference in MDX. The whole pipeline is about 90 seconds end-to-end with no manual prompt tweaking.
Comparison table
| Skill | Slash command | Best for | Skip when |
|---|---|---|---|
| impeccable | /impeccable | Frontend design, UI iteration, brand-aware UI | Non-UI work |
| playwright-cli | /playwright-cli | Browser automation, visual QA, bug reproduction | Pure backend |
| gsd | /gsd | Multi-step work, planned features, atomic commits | One-line fixes |
| seo-content | /seo-content | Content review, E-E-A-T scoring, AI citation readiness | Internal-only content |
| banana | /banana | 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.
- seo-content fourth. Only needed when you are about to publish.
- banana last. Generates 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. The Anthropic plugin marketplace lists every skill currently published.
