# Claude Code in practice: skills and plugins I use daily

> How I use Claude Code skills and plugins on real projects: what a skill is, the one that builds client websites, design, code review and browser checks.

2026-10-15 · Gustavo Karsten

I build apps, websites and systems with Claude Code and Codex. What makes Claude Code productive day to day isn't the prompt I type in the moment. It's the skills and plugins that stay installed and kick in on their own when a task calls for them. Here are the Claude Code skills and Claude Code plugins I actually use, how I write my own, and what I learned getting them wrong.

## What a Claude Code skill is

A skill is a packaged set of instructions that Claude loads when the task matches it. In practice it's a folder with a `SKILL.md` file plus, when needed, scripts, templates and reference files. The file opens with a header, and two of its fields matter most: the name and the description.

The description decides whether the skill gets used. Claude reads the descriptions of every installed skill and only opens the rest of the file when your task looks like what the description says. That's why the body can be long and detailed without eating context in every conversation.

A plugin sits one level up. It bundles several skills, commands and sometimes MCP servers, and you turn the whole thing on or off in your settings.

## The skill I use most: a client website pipeline

The most useful skill I have is one I wrote myself, `site-cliente`. It takes a small business website from the client's Instagram and Google Business Profile all the way to deploy. It's the process behind the [DockPlus AI client websites](https://gustavokarsten.com/en/projects/sites-clientes).

Here's its header, shortened and translated from Portuguese:

```yaml
---
name: site-cliente
description: Full pipeline to build a quote preview site for a
  DockPlus client from their Instagram and Google Business
  Profile. Covers research, visual identity, brand book, static
  site, GitHub repo and deploy. Use whenever someone on the team
  asks for a site, a quote or a site proposal for a client [...]
  even if they only mention one part ("grab the photos from her
  insta", "do the brand book").
---
```

The body splits the work into four phases: research, brand book, site and deploy. At the end of each phase Claude stops and waits for my approval. No site goes live without my review.

A few of the rules written into it:

- **Sites that don't look alike.** Each new client must differ from the previous two on at least 5 of 9 layout axes. Changing only color and font doesn't count. A reference file logs the style every past client used.
- **Contrast computed, not eyeballed.** A script computes WCAG contrast from the CSS and fails anything below 4.5:1.
- **Previews stay out of Google.** Every preview ships with `noindex` and a `robots.txt` that blocks everything. Only production gets indexed.
- **One-command deploy.** A script creates the GitHub-linked Cloudflare Pages project, registers the domain and points DNS. The skill then checks that a made-up URL returns 404, because without a real `404.html` Pages answers 200 for any path.

The same pipeline produced 30 proposal previews, and the DockPlus team uses the same skill. The folder also carries an interface file for Codex, so the process isn't locked to one tool.

## Design and motion skills

For UI work I use a group of design skills: `frontend-design`, `impeccable`, `design-taste-frontend`, `high-end-visual-design` and `motion-design`, plus the `ui-ux-pro-max` plugin. Their job is to pull the model away from its defaults: the same font, the same gradient, the same card with a drop shadow. Each one brings rules for typography, spacing and animation that Claude follows when the task is visual.

I also use a skill called `anti-slop`, which looks for generic AI patterns in text, code and design. It earns its place during review, when the output is correct but has no character.

## Plugins for process and code review

The plugins I keep enabled:

- **superpowers**: process skills. Brainstorming before building, writing a plan, TDD, systematic debugging, requesting code review, and a verification step before claiming the work is done. This is the plugin that changes Claude's behavior the most on long tasks.
- **ponytail**: a mode that pushes Claude toward the smallest solution that works. Reuse what's already in the codebase before writing something new, no abstractions nobody asked for. It also ships review commands in the same spirit.
- **vercel** and **stripe**: skills with each platform's docs and best practices, which load when the code touches them.

For review I also use Claude Code's built-in `/code-review`, which reads the current diff and flags correctness bugs.

## Checking the work in a real browser

Code that compiles is not a site that works. So Claude gets a browser: Chrome DevTools over MCP, Playwright and Claude in Chrome. With those it opens the page, takes desktop and mobile screenshots, reads the console and runs Lighthouse.

The website skill makes this mandatory: review in Chrome before showing the brand book, check desktop and mobile, fix overflow. I also have a skill, `google-consoles`, that opens Search Console and Bing Webmaster Tools under the right work account to submit sitemaps and read indexing reports.

## A concrete example: this portfolio

This site was also built with Claude Code. The `CLAUDE.md` at the repo root describes the commands, the architecture and where the data lives, and Claude reads it at the start of every session. The commit history shows what was built on top of that: the Copper & Petroleum brand, an indexable English version under `/en` with sitemap and hreflang, and a static export to Cloudflare Pages.

The static export is a good example of a small decision that stays documented in the code. `next.config.ts` reads one variable:

```ts
// STATIC_EXPORT=1 emits static HTML in out/ for Cloudflare Pages;
// without it, the build stays in standalone mode for Docker/Dokploy.
const staticExport = process.env.STATIC_EXPORT === "1";

const nextConfig: NextConfig = {
  output: staticExport ? "export" : "standalone",
  images: { unoptimized: staticExport },
};
```

The build runs type checking and lint, and there are Jest and Testing Library tests with a 60% coverage threshold. That's what lets me accept a large change from the agent: if it breaks something, the tests or the build catch it.

## Tips for writing your own skills

**Keep each skill small and specific.** A skill that does one thing well loads at the right time. One that tries to cover everything loads when it shouldn't. Long detail goes into reference files the skill reads only when needed, like the `imagens.md` file in `site-cliente`, which only comes in when it's time to process and crop photos.

**Write the description for the trigger.** Include the phrases people actually say, partial requests included. The `site-cliente` description lists examples like "grab the photos from her insta" precisely so a half-finished request still triggers the skill.

**Put rules where the model slips, and turn them into scripts when you can.** The model forgets "check the contrast." A script that fails below 4.5:1 doesn't.

**Keep credentials out of the skill.** `site-cliente` is a Git repo the team clones. Tokens live in files inside each client's folder, outside the repo, and the skill says never to print keys.

**Verify the output.** Stop for approval between phases, run the tests, open it in the browser. A skill speeds up the work. It doesn't replace looking at the result.

## How to learn Claude Code by building

The fastest way I know to learn Claude Code is to pick a task you repeat every week, do it once with Claude Code, write down where it went wrong, and turn those notes into a skill. Next time, use the skill and fix whatever still fails. `site-cliente` started that way and changes with every client.

The same goes for products. On [LedgerJob](https://gustavokarsten.com/en/projects/ledgerjob), a SaaS for US construction contractors, I designed the backend, the AI agent and the MCP server with Claude Code, with Vitest tests holding the business rules in place.

Want to talk about using Claude Code on your team? [get in touch](https://gustavokarsten.com/en/contact)

---
Page: https://gustavokarsten.com/en/articles/claude-code-skills-plugins
Contact: gustavo.karsten@outlook.com · https://www.linkedin.com/in/gustavo-karsten-88a04383/ · https://github.com/gustavo-karsten