UI Kit Favourites Pipeline

Skills

My favourite agent skills — the pinned SKILL.md context I install so my coding agent knows the libraries, patterns and design bars I care about.

These are the agent skills I install on projects. Each one is a folder with a SKILL.md — a name, a one-line description, and a body of instructions — that a coding agent loads on demand when the task matches. Instead of re-explaining "how I do Clerk" or "what good motion feels like" every session, I pin the skill once and the agent reads it when it's relevant.

How I use them

Skills are installed with the skills CLI and pinned to a lockfile so they stay reproducible:

# add a skill from any GitHub repo (owner/repo[/path])
npx skills add clerk/skills
npx skills add emilkowalski/skills

# discover what's available for a library you're using
npx skills

Every skill below is vendored into this repo under .agents/skills/ and tracked in skills-lock.json, so a fresh clone gets the exact same agent context I do. Each card links to that skill's page on skills.sh — the open directory where you can browse installs, stars and the full instructions. Morpha UI also ships its own skill — see UI Kit → Skills for the one that teaches an agent to build with these components.

Not sure which skill you need? find-skills (below) is the meta-skill: it helps an agent discover and install the right skill from a plain-English "is there a skill that can…" question.

AI SDK & chat UI

The typed foundation for anything AI-shaped — the SDK for the data layer and the components for the chat surface.

Build with the Vercel AI SDK — generateText, streamText, agents, tools, structured output, embeddings, useChat. Sourced from vercel/ai.

Build AI chat interfaces with ai-elements — conversations, messages, tool displays and prompt inputs. Sourced from vercel/ai-elements.

Clerk — auth, billing & orgs

The full Clerk family. clerk is a router that dispatches to the right sub-skill; the rest are the specialists I lean on when auth gets real.

The Clerk router skill — routes any Clerk task (setup, custom UI, orgs, billing, webhooks, native) to the right specialist automatically.

Add Clerk to any project by following the official quickstarts — keys, middleware and the first sign-in flow.

clerk-nextjs-patterns

Advanced Next.js patterns with Clerk — middleware, Server Actions and caching, including manual JWT verification.

clerk-custom-ui

Custom sign-in/sign-up flows with useSignIn/useSignUp, plus appearance theming — colors, fonts and CSS branding.

Organizations for B2B — org switching, role-based access, verified domains and enterprise SSO.

Subscription billing — PricingTable, in-app checkout, seat-limited B2B plans and feature entitlements with has().

Real-time events and data syncing — verify with verifyWebhook and handle user, session, org and billing events.

clerk-backend-api

Explore and execute Clerk Backend REST API calls — browse tags, inspect schemas, run authenticated requests.

End-to-end testing of Clerk auth flows with Playwright or Cypress using a testing token.

Drive the Clerk CLI — user/org/session management, env pull, config as code, doctor and guided deploy.

Design & motion craft

The bar for how things should feel. Emil Kowalski's philosophy on polish and motion, plus Apple's approach to physical, interruptible interaction.

emil-design-eng

Emil Kowalski's philosophy on UI polish, component design and the invisible details that make software feel great.

Apple's approach to interface design and fluid, physical motion — springs, gestures, materials and restraint — translated for the web.

animation-vocabulary

Reverse-lookup glossary that turns a vague description of a motion effect into its exact term — for naming an effect, not building it.

improve-animations

Survey a codebase's motion as a senior advisor and produce a prioritized audit plus implementation plans. Plans, doesn't apply.

review-animations

Reviews animation code against a high craft bar derived from Emil's philosophy — approval is earned, not assumed.

Frontend & code quality

The guidelines I hold UI and framework code to — design quality, accessibility and performance from Anthropic and Vercel Engineering.

frontend-design

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Anthropic's design skill.

web-design-guidelines

Review UI code against the Web Interface Guidelines — accessibility, UX and design best-practice audits. From Vercel.

vercel-react-best-practices

React and Next.js performance patterns from Vercel Engineering — for writing, reviewing and refactoring components.

next-best-practices

Next.js best practices — RSC boundaries, async APIs, data patterns, metadata and route handlers.

shadcn & migration

The two skills for the component layer this library is built on — managing shadcn and migrating its primitives from Radix to Base UI.

Add, search, fix and compose shadcn/ui components — project context, docs and examples, including --preset codes.

migrate-radix-to-base

Migrate React projects from Radix UI to Base UI — single components or a whole shadcn project's base library.

Discovering skills

The meta-skill — helps an agent discover and install the right skill from a plain-English 'is there a skill for X?' question.

Favourites

My curated collection of favourite sites, tools and references — the skills, CLIs, frameworks and services I actually reach for, grouped by domain.

CLIs

The command-line tools I drive services with — Stripe, Clerk, GitHub, Supabase and Vercel — without leaving the terminal.

On this page

How I use them AI SDK & chat UI Clerk — auth, billing & orgs Design & motion craft Frontend & code quality shadcn & migration Discovering skills