The Userful Skills

AI coding is a deeply personal practice. Everyone’s setup looks a little different, and I think that is the point. Nobody else works the way you do, and the shape of your kit ends up matching the shape of your brain. Here is mine, over on GitHub.

What is a skill?

A skill is a reusable instruction bundle you can invoke by name to scope an AI agent’s behavior to a specific task. Skills are not tied to any one tool. They work across Claude Code, Codex, Copilot CLI, Gemini CLI, and any other agentic environment that supports the format.

My kit

Three buckets: open-source skills kept as files, custom ones I wrote, and plugins.

# Open source
bun/                      # Use Bun in place of Node / npm / vite
chrome-devtools/          # Debugging via chrome-devtools MCP
deslop/                   # Remove AI slop from generated code
favicon/                  # Favicon generation
find-skills/              # Discover and install new skills
frontend-design/          # Build distinctive UI that avoids generic AI aesthetics
last30days/               # Deep research across Reddit, X, YouTube, HN, web
polish/                   # deslop + simplify pre-commit cleanup
rams/                     # Accessibility and visual design review
react-doctor/             # React anti-pattern scanner
reclaude/                 # Refactor CLAUDE.md for progressive disclosure
simplify/                 # Clean up recently-modified code
skill-creator/            # Meta-skill for creating new skills
vercel-react-best-practices/   # React and Next.js performance rules

# Custom, written by me
create-designsystem/      # Generate a design token system from a questionnaire
screenshot/               # Capture and file UX study screenshots with notes

# Installed as plugins
superpowers/              # Workflow skills: planning, TDD, debugging, reviews
codex/                    # OpenAI Codex integration
playwright/               # Browser automation via Playwright MCP

The plugin I lean on hardest is Superpowers. Its skills (brainstorming, writing-plans, executing-plans, test-driven-development, systematic-debugging, verification-before-completion, and more) shape how I work with an agent from the first message onward. If you take nothing else from this list, take this one.

The two custom ones are worth a closer look.

/screenshot

I use this for collecting UX patterns from other products. Before I built it, the flow was a friction pile. Take a screenshot. Drag it into a folder. Rename it. Open a notes file. Write down what I was looking at and why. By the time I had captured the context, the observation had gone stale.

Now I kick off a session with “let’s study Vercel” and Claude sets up a study folder and a notes file. From there, the triggers cover whatever I need in the moment. “Add, persistent setup checklist at bottom” captures the Chrome window and logs that note verbatim. “Add 1440x900, clean empty state” does the same at a specific viewport. “Screenshot hero-nav” grabs one without a note. “Capture this” is the lazy version. A small shell script does the grab; Claude names the file from the observation, drops it in the right folder, and appends the note to the notes file.

If I get tired of driving, I shift to auto mode with something like “go through Stripe’s dashboard and capture what stands out.” Claude takes over the browser through the chrome-devtools MCP and captures patterns on its own while I skim. It turned pattern collection from a chore into something I actually do.

/create-designsystem

Since the AI wave hit, I have been starting a lot more pet projects. Every new project wants the same foundational things: a primary color, a type scale, a spacing rhythm, shadows. As someone whose work sits mostly on the product and design side, I know exactly how I want these to hang together, and I got tired of doing them by hand each time.

/create-designsystem walks me through the fundamentals as an interactive questionnaire and generates a real token system I can drop into a new project: CSS custom properties, TypeScript exports, and a standalone HTML showcase page so I can see it. The prompt is still a work in progress, and the workflow gets a little better every time I use it. Even as-is it saves me a couple of hours on every new project.

The reason I keep polishing this one is not just for me. My daughter is at UCLA studying design media, and I am hoping skills like this become part of how the next generation of designers learns to use AI tools to take repetitive work off their plate.

Send me yours

There is a bigger, project-specific pile at work that stays private for now — one day, maybe a future article. In the meantime, this is what I actually reach for. What is in your tool belt? I am always looking to steal something good.