2 款值得前端開發者一試的 Agent Skills：Impeccable 與 Diagram Design

I love to try out new agent skills. Anything that can help me be more productive I'm all for. Today I found two new ones I want to share with you.

First one is Impeccable. Impeccable took a plain, AI-built website and gave it a design. It wasn't bad at all! Diagram Design took that same site and drew a diagram of how it works! Both install with one command, and both work with basically any coding harness. I used Kiro in my demos but you can use whatever you like.

I made a video walking through both if you'd rather watch:

Prerequisites

• An agent that supports Agent Skills. I use Kiro, but Claude Code, Cursor, and Codex work too.
• Node.js, so you can run npx.
• A frontend project to try them on. Mine is a small website about cats.

Finding skills

I found both skills on Skill Leaderboard, which ranks skill repos by GitHub stars. You can filter by compatible agent, so I set it to Kiro. Skills are like recipes that work across most coding harnesses, so you'll usually be fine without the filter. Some repos are easier to install in one agent than another, though, and the filter saves you from finding that out the hard way.

Stars measure popularity. I cared more about what fits my own projects, so I picked the two that match what I build most, which is websites.

Before you install anything, read the SKILL.md and any scripts it pulls in. A skill is instructions and scripts that run with your agent's permissions, so check it the same way you'd check an npm package.

1. Impeccable

Impeccable is a design skill that started from Anthropic's frontend-design skill and builds on top of it. It has UX planning, a set of design commands like critique, polish, and audit, and it asks you a lot of questions.

To test it, I had Claude Opus 5.5 vibe code a site called the Great Cat Color Census. You spot a cat in the wild, click "Spotted one," and the counts and leaderboard update. Out of the box it came with a blocky card style and some hover animations. It looked okay. I don't think it looked bad, but it was pretty generic.

The default design Claude Opus 5.5 came up with.

Install it from your project root:

npx impeccable install

Then run init inside your agent:

/impeccable init

Init looks through the project, asks about anything it can't work out on its own, and writes a PRODUCT.md with what it learned. After that I asked it to make the site much nicer using its styles. It came back with five or six design directions. I picked the sticker one.

The sticker direction from Impeccable. Same features, new design.

It has basically the same features as before, and you can still summon a random cat. It looks a lot more polished, with extra animation and cats that look like peel-off stickers. The font gives it a Cat in the Hat feel. I don't have a very particular taste for frontend design, and I still like this version better. If you're a designer, tell me in the comments whether you agree.

A good way to use Impeccable is to have it build several of its directions on separate Git branches. Then you can run each one and compare them side by side before you commit to a look.

2. Diagram Design

Diagram Design draws diagrams as one self-contained HTML and SVG file. It supports 45 diagram types, from architecture diagrams and flow charts to radar charts and Venn diagrams. The screenshots in the repo don't do it much justice.

Install it with the skills CLI:

npx skills add cathrynlavery/diagram-design

I asked it for a diagram of the same cat site and didn't say what to diagram. There's no backend, so I wasn't expecting much. It picked the visitor flow. A visitor clicks, an action runs change() or reset(), the counts update, and the derived stats feed the left and right pages. It also shows the save and load path to localStorage, and it even carried over the pink styling from the site.

The diagram Diagram Design made from the cat site, open in Kiro.

It's a simple diagram, but I like the style, and I can see myself using it on my next project. It's also handy when you open a code base with little documentation. Ask it for a few diagrams before you start reading the code.

The rest of the list

I haven't spent much time with the other popular skills yet. These are my notes so far.

Ponytail gives your agent the personality of the laziest senior dev in the room. In its README, you show him fifty lines, and he says nothing and replaces them with one. The goal is less code and fewer tokens. In Kiro it loads as an always-on ruleset, so you don't get its slash commands.

Caveman makes the agent answer tersely to cut token usage. I haven't seen much savings myself. Someone in a Reddit thread on the top Kiro skill repos said it raised their token usage, even though the research the repo cites says otherwise.

Addy Osmani's agent skills add a spec, plan, build, and test workflow to your agent. Kiro has specs built in, but if your tool doesn't, this or Superpowers is how I'd add spec-driven development.

I haven't tried UI UX Pro Max or Graphify yet, even though they're near the top of the list.

If you build on AWS, look at the Agent Toolkit for AWS. It's our set of skills and MCP servers for working with AWS from your agent, and it's free on GitHub.

Wrap up

If you build websites, Impeccable is the one I'd install first. Diagram Design is right behind it, especially when you're new to a code base.

I'm thinking about testing whether Ponytail and Caveman save tokens in Kiro. Leave a comment if you want to see that, and tell me which skills you're using.