I spent a day running this site through UI skills, installable instruction packs that teach Claude Code to perform specific tasks. One touched nearly every page on the site, two came back with zero findings, and one built an entire tool to help me iterate on animations.

Naturally, I kept a ledger.

What a skill actually is

A skill is a markdown file full of opinions. For example, Emil Kowalski provides guidance on animation, Stephen Turner on AI writing tells, and the Vercel team on React performance. Your agent reads the file and executes on those opinions.

A skill stack is a design artifact. I did not expect that going in, but curating which opinions your agent holds is similar to curating a design system. My baseline stack has been growing since May, and it travels with me to every new project.

The sweeps

Sweeps are skills I ran once across the whole repo.

web-design-guidelines is a compliance audit against the Web Interface Guidelines that landed as one site-wide commit. It set the template everything below follows.

react-best-practices cut navigation between header links from about 400ms to under 100. The photos lightbox also stopped shipping on every page view, and the theme toggle lost its mount flash.

deslop strips AI writing tells from machine-generated prose. The audit was humbling: 74 of my 161 SEO descriptions opened with marketing verbs like “Discover” and “Explore.” In addition to rewriting descriptions and alt text, I hardened the scripts’ prompts that generate text so it doesn’t happen again.

The reviews

I installed the aiforui.dev pack, 20 skills from Emil Kowalski. This is where I had some fun.

ui-review found two layout shift bugs.

touch-and-accessibility flagged sub-44px tap targets, a missing playsInline, and hover animations that stick on touch screens.

forms-and-inputs found seven issues, mostly on the search palette and the password gate. My favorite fix was a 16px font floor on touch devices to prevent iOS from zooming in on the page when you tap an input.

Both performance and marketing-pages came back clean.

break is particularly insightful. The skill builds torture-test pages by feeding a component worst-case content: unbreakable strings, RTL text, null fields, empty states, fifty-row lists, all squeezed into a 320px box. Running it against my cards and search components produced a solid round of bug fixes, including a published npm component that clipped long titles.

Three more skills remain installed for everyday use.

shadcn drives the component registry from the CLI, which matters when three of my own packages live in that registry (heh). beautiful-shadows encodes layered, neutral shadow recipes, the same philosophy this site’s floating panels follow (diffuse shadow, no border). Lastly, brag reads a project’s code and turns it into a short, shareable launch video. I’m not planning on using the videos, but they are inspirational to watch.

The one that built me a tool

get-creative works differently from everything above by stepping in when you have an idea instead of a spec. I pointed it at a real opportunity: a hero animation for my upcoming Vibecoded Projects case study. Instead of mockups, it builds a generator with sliders to control minute details. Once the general direction and settings feel locked in, a “Save” button writes the exact recipe to a JSON file the production site will eventually import.

The stages in the diagram are my real pipeline: idea, research, Claude Code, lab, review, push. Tinkering with get-creative was the most fun I’ve had using skills. I highly recommend it.

The one that watched my animations

ask-lapse is an animation inspector from the same aiforui course. Mount one component in development and every animation on the page can be slowed to a tenth of its speed, recorded as a scrubbable clip, and exported as structured state an agent can read. It’s a bit buggy but it gets the job done.

I pointed it at my photo lightbox and slowed the open animation to 0.1x. I had a feeling I never got the animations quite right for this component. Within a few seconds I saw something I hadn’t noticed before: the photo reaches its final size, dips smaller from the lower-right corner, and snaps back. A jitter! The agent recorded the interaction, measured the photo’s edge position across burst screenshots, and named the cause. The motion library declares a spring finished once it comes within one percent of its target, then jumps to the exact end value. That final jump is invisible on something small. On a 1350px photo, it’s about ten pixels.

The fix kept the spring’s overshoot, because that half-percent of bounce is what makes the open feel alive.

Lessons learned

1. Skills are encoded taste. Choose whose opinions your agent holds the way you choose typefaces.
2. Sweep broadly, then review narrowly.
3. Truthful diagrams beat decorative ones.
4. When the target is a feeling, ask for a tool with knobs instead of another round of options.
5. Watch animations at a tenth of their speed. Most of what “feels off” becomes nameable when time stretches, and nameable is fixable.