Agent skills
60 skills. Emil Kowalski, Matt Pocock, Wondel.ai, Corey Haines and 6 other authors wrote 49 of them, and each keeps its author’s license. Credits.
design-kit
animateBuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.design-kit·Emil Kowalskianimate-expoBuild animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.design-kit·Emil Kowalskianimation-performanceKeep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.design-kit·Emil Kowalskianimation-vocabularyReverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.design-kit·Emil Kowalskiapple-designApple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.design-kit·Emil Kowalskiask-sonnerGuide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it — toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.design-kit·Emil Kowalskibreak-uiTry to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing fields, huge counts, zero items, long labels, non-Latin text, emoji, extreme numbers — then render it behind a "Demo data / Worst case" toggle and report everything that broke, with the fix for each. Use when the user asks to stress-test, break, or find edge cases in a component or screen, or to "try the worst case". For visual design critique use emil-design-eng; for motion use review-animations.design-kit·Emil Kowalskicolor-expertUse when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory."design-kit·meodaicopywritingWhen the user wants to write, rewrite, or improve marketing copy for any page, including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," "CTA copy," "value proposition," "tagline," "hero section copy," "this copy is weak," "this sounds like AI," "AI slop," "make it sound human," or "help me describe my product." Drafts never use AI tells like "it's not X, it's Y" reveals, "no X, no Y, no Z" lists, or sentences that trail into extra comma clauses. For email copy, see emails. For popup copy, see popups. For editing existing copy, see copy-editing. For the offer underneath the copy (bonuses, guarantees, value framing), see offers. Claims must be supportable, and a declined claim names the evidence that would unlock it. Diagnoses the input first (blank brief, real voice, or point edit) and changes only what it calls for.design-kit·Corey HainescroWhen the user wants to optimize, improve, or increase conversions on any marketing page or form — including homepage, landing pages, pricing pages, feature pages, lead capture forms, or contact forms. Also use when the user says 'CRO,' 'conversion rate optimization,' 'this page isn't converting,' 'improve conversions,' 'why isn't this page working,' 'my landing page sucks,' 'form abandonment,' 'nobody's converting,' 'low conversion rate,' or 'this page needs work.' Use this even if the user just shares a URL and asks for feedback. For signup/registration flows, see signup. For post-signup activation, see onboarding. For popups/modals, see popups.design-kit·Corey HainesdesignUse only when the user explicitly invokes /design or $design. Turns a design request (a new page, a change to an existing one, a redesign, a review, copy, color, type, motion, mobile, images, charts) into the one right skill or recipe from the design library, says why in a line, and starts it. Resumes a recipe already in progress. Ordinary design talk must not activate it.design-kit·Agent Kitdesign-everyday-thingsApply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models. Use when the user mentions "why is this confusing", "affordance", "error prevention", "discoverability", "human-centered design", "mental model", "mapping", "seven stages of action", "users keep making mistakes", "this is unintuitive", or "people cant figure out how to use it". Also trigger when reducing product complexity or feature creep. Covers the gulfs of execution and evaluation. For usability scoring, see ux-heuristics. For iOS-specific patterns, see ios-hig-design.design-kit·Wondel.aiemil-design-engThis skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.design-kit·Emil Kowalskifind-animation-opportunitiesSearch a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "what could be animated here?" or wants to "make this feel more alive". For fixing existing animations, use improve-animations or review-animations instead.design-kit·Emil Kowalskifix-writingOne command for text the user dislikes. Works out what kind of text it is, reads the project's voice and vocabulary, applies the right rules from Humanizer, Sepia, Stop Slop or Impeccable clarify, and scores it with slop-guard before and after. Use when the user says /fix-writing, or asks to fix, clean up or de-AI a section of text without naming a specific tool.design-kit·Agent KithallmarkDesign skill for websites and new pages that look designed, not generated. Use when the user asks to build or design something new, or names Hallmark. Never use it on an existing design unless the user names Hallmark, as in `/hallmark redesign <path>`.design-kit·Hallmark contributorshooked-uxDesign habit-forming product loops using the Hook Model (Trigger, Action, Variable Reward, Investment). Use when the user mentions "users arent coming back", "habit formation", "engagement loops", "habit zone", or "the manipulation matrix". Also trigger when designing notification or re-engagement strategies, building streaks or progress systems, or analyzing why users stop after signup. Covers ethics evaluation and onboarding for habits. For friction reduction and B=MAP, see improve-retention. For viral sharing, see contagious.design-kit·Wondel.aiimprove-animationsSurvey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the animations", "audit the motion", "make this app feel better", or wants a roadmap of animation fixes rather than a review of a single diff.design-kit·Emil Kowalskiimprove-retentionDiagnose and fix retention problems using behavior design (B=MAP). Use when the user mentions "users sign up but dont stick around", "activation rate", "onboarding friction", "retention metrics", "why users dont complete", "churn analysis", or "aha moment". Also trigger when analyzing cohort retention curves, designing activation milestones, reducing time-to-value for new users, or investigating why users quit after their first session. Covers the Ability Chain, prompt design, and tiny behaviors that compound. For habit loops and variable rewards, see hooked-ux. For intrinsic motivation, see drive-motivation.design-kit·Wondel.aiios-hig-designDesign native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone app", "iPad layout", "SwiftUI", "UIKit", "Dynamic Island", "safe areas", "HIG compliance", "SF Symbols", "haptic feedback", "iOS accessibility", "make my app feel native", or "follow Apple design guidelines". Also trigger when building tab bars, navigation stacks, sheets, or modals for iOS, implementing dark mode, or adapting layouts across screen sizes. Covers navigation patterns, accessibility, SF Symbols, and platform conventions. For general UI polish, see refactoring-ui. For affordance design, see design-everyday-things.design-kit·Wondel.ailean-uxApply lean thinking to UX: hypothesis-driven design, collaborative sketching, and rapid experiments instead of heavy deliverables. Use when the user mentions "Lean UX", "design hypothesis", "outcome over output", "design studio method", "assumption mapping", "lightweight research", "too much design documentation", or "get the team designing together". Also trigger when reducing design-documentation overhead, getting cross-functional teams to co-design, or running fast usability experiments. Covers hypothesis statements, MVPs for UX, and cross-functional collaboration. For Build-Measure-Learn, see lean-startup. For usability audits, see ux-heuristics.design-kit·Wondel.aimicrointeractionsDesign the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones. Use when the user mentions "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", "state transitions", "input feedback", "the interface feels dead", "make the UI feel responsive", or "add polish to interactions". Also trigger when designing form-validation responses, progress indicators, confirmation dialogs, or any element where the user expects immediate feedback. Covers trigger design, state rules, feedback mechanisms, and progressive loops. For overall UI polish, see refactoring-ui. For affordance design, see design-everyday-things.design-kit·Wondel.aimobile-nativeMake a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content under the notch, long-press selecting button text, carousels that scroll the wrong way, mismatched status bars, and the rule that you test on real hardware. Use when a web app is being built for or reviewed on mobile, when something "works in Chrome but feels wrong on my phone", when building a PWA, a bottom sheet, a carousel, a full-screen layout, or any touch interaction. For motion itself use animate; for React Native use animate-expo.design-kit·Emil Kowalskioklch-skillOKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.design-kit·Jakub Krehelpick-ui-libraryPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.design-kit·Emil Kowalskiproduct-marketingWhen the user wants to create or update their product marketing context document. Also use when the user mentions 'product context,' 'marketing context,' 'set up context,' 'positioning,' 'who is my target audience,' 'describe my product,' 'ICP,' 'ideal customer profile,' 'brand voice,' 'tone of voice,' 'brand guidelines,' 'what have we learned,' 'log this learning,' or wants to avoid repeating foundational information across marketing tasks. Use this at the start of any new project before using other marketing skills — it creates `.agents/product-marketing.md` that all other skills reference for product, audience, and positioning context.design-kit·Corey HainesprototypeBuild multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.design-kit·Emil Kowalskirefactoring-uiAudit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.design-kit·Wondel.aireview-animationsReviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.design-kit·Emil Kowalskisteve-jobs-design-reviewReview designs, products, and features with Steve Jobs' standards: ruthless simplicity, focus, and end-to-end excellence. Use when the user mentions "Steve Jobs review", "design review", "product review", "what would Steve do", "insanely great", "this feels too complicated", "too many features", "product taste", "saying no", or "is this good enough to ship". Also trigger when critiquing a UI, feature, or roadmap for focus and simplicity, cutting scope to the essential, or pressure-testing the whole experience from first run to daily use. Covers the simplicity audit, the no list, design-is-how-it-works, end-to-end ownership, demo culture, and a Jobs-style review protocol with binary verdicts. For visual design fundamentals, see refactoring-ui. For usability audits, see ux-heuristics. For detail polish, see microinteractions.design-kit·Wondel.aistop-slopRemove AI writing patterns from prose. Use when drafting, editing, or reviewing text to eliminate predictable AI tells.design-kit·Hardik Pandyaswiftui-proComprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance. Use when reading, writing, or reviewing SwiftUI projects.design-kit·Paul Hudsontop-designCreate award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard landing page into a memorable digital experience. Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation. For foundational UI, see refactoring-ui. For type selection, see web-typography.design-kit·Wondel.aiux-heuristicsEvaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "users are confused", "form usability", "navigation problems", "Nielsen heuristics", "cognitive walkthrough", or "is this easy to use". Also trigger when reviewing a design for usability issues, improving form-completion rates, or evaluating information architecture and navigation. Covers Krug's laws, Nielsen's 10 heuristics, severity ratings, dark-pattern recognition, and accessibility. For visual design fixes, see refactoring-ui. For conversion-focused audits, see cro-methodology.design-kit·Wondel.aiux-writingCreate user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX writing best practices based on four quality standards — purposeful, concise, conversational, and clear. Includes accessibility guidelines, research-backed benchmarks (sentence length, comprehension rates, reading levels), expanded error patterns, tone adaptation frameworks, and comprehensive reference materials.design-kit·Christopher Greerweb-typographySelect, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.design-kit·Wondel.aiwrite-swiftHow to write modern Swift well — modeling with value types, Swift 6 data-race safety and approachable concurrency (@concurrent, main-actor-by-default, actors, task groups), protocols and generics (some vs any), API design, performance and ARC, Swift Testing, macros, and the modern language features agents don't know about yet. Use when writing, reviewing, or migrating Swift, or when a concurrency error, a hang, a data race, a retain cycle, or a performance problem needs fixing.design-kit·Emil Kowalski
engineering-kit
codebase-designDeep-module vocabulary (module, interface, depth, seam, adapter, leverage, locality). Called by tdd and improve-codebase-architecture; otherwise only when the user explicitly asks for it by name.engineering-kit·Matt PocockdatabaseUse only when the user explicitly invokes /database or $database. Turns a plain description of a PostgreSQL problem (wrong numbers, heavy writes, a crowded schema, cost, a risky migration, agents escalating decisions) into one starting investigation from the prompt library, says why in a sentence, and runs it read-only when the session can reach the code and database. Ordinary database talk must not activate it.engineering-kit·Agent Kitdiagnosing-bugsDiagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.engineering-kit·Matt Pocockdomain-modelingKeeps GLOSSARY.md and ADRs current while a design is discussed. Called by grill-with-docs and improve-codebase-architecture; otherwise only when the user explicitly asks to update the glossary or record an ADR.engineering-kit·Matt PocockengineerUse only when the user explicitly invokes /engineer or $engineer. Turns a description of what is going on in a codebase (a symptom, a worry, a plan) into one starting move from the Agent Engineering Field Guide - an investigation prompt to paste, an installed skill to run, or a thinking prompt - and says why in a line. Ordinary engineering talk must not activate it.engineering-kit·Agent Kitgrill-meA relentless interview to sharpen a plan or design.engineering-kit·Matt Pocockgrill-with-docsA relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.engineering-kit·Matt PocockgrillingInterview rounds that stress-test a plan or decision. Called by grill-me, grill-with-docs and improve-codebase-architecture; otherwise only when the user explicitly asks to be grilled.engineering-kit·Matt Pocockimprove-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.engineering-kit·Matt PocockresearchInvestigate a question against high-trust primary sources and capture the findings as a Markdown file in the repo. Use when the user wants a topic researched, docs or API facts gathered, or reading legwork delegated to a background agent.engineering-kit·Matt PocockretroConduct a retrospective on a coding session.engineering-kit·Matt PococktddTest-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.engineering-kit·Matt Pocockto-questionnaireTurn a decision you can't fully answer into a questionnaire for someone else to fill in.engineering-kit·Matt Pocockwait-whatStop. That last message did not land: re-pitch it.engineering-kit·Matt PocockwizardGenerate an interactive bash wizard that walks a human through steps only they can perform. Use when provisioning infrastructure, setting up credentials or CI secrets, walking an unfamiliar third-party dashboard, or running a one-off migration or cutover. Don't invoke this for steps the agent can perform itself.engineering-kit·Matt Pocockwriting-for-agentsStyle reference for documents agents read (skills, AGENTS.md, CLAUDE.md). Called by retro; otherwise only when the user explicitly asks for it by name.engineering-kit·Matt Pocock
Experience Architecture
diagnoseWork out why a web app's experience feels wrong and what is causing it. Starts from a plain-language complaint ("the navigation feels broken", "users get lost", "Back does something weird", "my filter resets", "shared links open the wrong thing", "do we have too many pages", "are our URLs right") and investigates whichever layers it needs - page structure, URLs and routing, navigation chrome (sidebars, tabs, breadcrumbs, mobile menu) and state continuity (Back, refresh, deep links, switching records). Proves findings in a real browser when the app runs, traces symptoms to a few root causes, judges whether the structure itself is the problem, and explains it in plain English. Read-only.experience-architecture·Agent KitrethinkDecide whether a web app's structure should change and what it should become - which pages should exist, merge or go, how navigation should be organised, and whether a fundamentally different product structure would serve users better. Produces two or three genuinely different options (one ambitious when the evidence supports it) as a clickable prototype, explains each as what using the product would feel like, recommends one, and plans a migration that keeps existing links working. Changes the app only after the owner picks an option and says go.experience-architecture·Agent KitverifyProve how a web app actually behaves in a real browser. Reproduces navigation and state bugs, checks that shared links open the right thing in a fresh browser signed out, as the same user and as a different account, that links open in new tabs, that Back, Forward and refresh keep the user's place, and that layouts work at desktop, phone and narrow side-panel widths. Records every step, fails loudly when an action cannot run, blocks data-changing requests by default, and keeps the journeys as a regression suite for after a change.experience-architecture·Agent Kit
working-style
ceoUse only when Austin explicitly invokes /ceo or $ceo. Explain status, systems, or technical work in concise plain English focused on outcomes, cost, risk, and time. This is an explanation mode, not a decision framework; do not manufacture options or prescribe a course of action unless Austin separately asks what to do. Ordinary requests for an explanation or summary must not activate it.working-style·Agent Kitharsh-reviewUse only when Austin explicitly invokes /harsh-review or $harsh-review. Gives a blunt, severity-ranked critique of code or product work, backed by evidence at every item, then ships the small certain fixes in the same turn and verifies them. Ordinary requests for honesty, feedback, or a review must not activate it.working-style·Agent KitrecommendUse only when Austin explicitly invokes /recommend or $recommend. Turn a real decision into the call first, then the real options, what each costs and risks, why the chosen one wins, and the one thing Austin must decide, all in plain English. Unlike /ceo, which explains without deciding, this skill must pick a path. Ordinary questions, "what do you think", or "what should we do" must not activate it.working-style·Agent Kitviewport-proofUse only when Austin explicitly invokes /viewport-proof or $viewport-proof. Judges a real rendered UI across representative viewports for production readiness: it works, stays consistent across device sizes, and looks deliberately composed. Delivers one of three verdicts with a visual proof sheet of saved screenshots, mechanical geometry checks, and every exclusion named. Ordinary UI, screenshot, review, or coding requests must not activate it.working-style·Agent Kit