All skills — Skills

74 community skills across design engineering, frontend craft, motion, and systems.

Skills (74)

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.

707.1K installs

A relentless interview to sharpen a plan or design.

667.2K installs

grill-with-docs

A relentless interview to sharpen a plan or design, which also creates docs (ADRs and glossary) as we go.

565.5K installs

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React/Next.js code.

560.1K installs

improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

547.9K installs

Test-driven development. Use when building features or fixing bugs test-first, or when you want red-green-refactor / integration tests.

527K installs

setup-matt-pocock-skills

Configure a repo for Matt Pocock engineering skills — issue tracker, triage labels, and domain doc layout. Run once before first use.

478.5K installs

Move issues and external PRs through a triage state machine — categorise, verify, grill if needed, and write agent-ready briefs.

447K installs

remotion-best-practices

Domain-specific knowledge base for building videos with Remotion and React.

431.5K installs

nextlevelbuilder

Comprehensive UI/UX design intelligence with 50+ styles, 97 palettes, and 9 technology stacks for building professional interfaces.

286.1K installs

Flagship design skill for production-grade, anti-generic frontend interfaces with strong craft and consistency.

207.6K installs

emil-design-eng

Emil Kowalski's design-engineering philosophy for UI polish, components, animation, and production-ready frontend craft.

163.7K installs

Evaluate design quality with structured UX scoring, persona checks, and actionable remediation guidance.

84.1K installs

Enhance UX with purposeful animation and micro-interactions that support usability and delight.

83.2K installs

review-animations

Strict motion review of a diff against Emil's craft bar — justified motion, easing, duration, origin, GPU-only props, a11y. Default to flagging; approval is earned.

59.8K installs

animation-vocabulary

Turn a vague motion description into the exact term — "the bouncy popover thing" → Pop in — so you can prompt agents and designers with the right words.

48.3K installs

make-interfaces-feel-better

Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.

46.4K installs

Apple's interface and fluid-motion principles from WWDC design talks, translated for the web — continuous gestures, rubber-banding, physical feel.

38.7K installs

improve-animations

Survey a codebase's animation and motion code as a senior motion advisor, then produce prioritized audit and self-contained implementation plans. Read-only on source code - it plans improvements, it does not apply them. Use when the user asks to improve animations, audit motion, make an app feel better, or wants a roadmap of animation fixes rather than a review of a single diff.

32.4K installs

find-animation-opportunities

Search a UI for places that should animate — and reject what shouldn't. Read-only: proposes precise motion recipes, does not implement them.

22.1K installs

interface-design

Specialized skill for interface design: dashboards, admin panels, and SaaS apps. Focused on craft and consistency.

21.5K installs

fixing-motion-performance

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

19.3K installs

frontend-ui-engineering

Frontend UI engineering guidance covering component architecture, responsive design, accessibility, and maintainable implementation patterns.

16.9K installs

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

16.6K installs

fixing-accessibility

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

15.6K installs

interaction-design

Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.

11.2K installs

pick-ui-library

Opinionated library picker for common frontend tasks — toasts, cmdk, charts, DnD, OTP, motion — from Emil's trusted stack instead of AI inventing one.

9.9K installs

Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns.

5.2K installs

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.

2.5K installs

better-typography

Web typography from font choice and type scale to wrapping, truncation, OpenType features, and readable measure.

2.3K installs

OKLCH color for the web — convert, generate palettes, check contrast, handle gamut, and theme with semantic tokens including dark mode.

2.2K installs

Use when the user needs UI help and you must route by topic, stack, and intent to the smallest useful set of UI skills.

2K installs

bencium-innovative-ux-designer

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

1.2K installs

Interactive design exploration workflow: conduct interviews, generate variants, and refine UI designs through feedback.

1.1K installs

Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent without modifying product source.

976 installs

Precise design and UI vocabulary from index.how/to/articulate — reverse-lookup for typography, color, layout, motion, a11y, components, and more when you need the exact word.

777 installs

better-accessibility

Accessibility engineering for product UI — focus, keyboard, ARIA, forms, and screen readers. Use when building or reviewing components, modals, menus, or fixing a11y issues.

430 installs

Layout structure for web UI — grouping, alignment, reading order, progressive disclosure, breakpoints, and RTL-aware spacing.

423 installs

better-interface

Holistic interface review that coordinates the better-* skills (a11y, layout, writing, typography, colors, UI) for a screen, flow, or product.

416 installs

UX writing and interface copy — button labels, errors, empty states, placeholders, and voice/tone for product UI.

413 installs

12-principles-of-animation

Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.

288 installs

generating-sounds-with-ai

Audit Web Audio API code for sound synthesis best practices — procedural audio, UI sounds, and audio parameter quality.

185 installs

mastering-animate-presence

Audit Motion/Framer Motion AnimatePresence usage — exit animations, modals, and presence state best practices.

153 installs

Build an animation from scratch in the order that determines whether it feels right — purpose, tool, properties, curve, interruptibility, exit — then write the implementation.

Build multiple genuinely different versions of a UI piece behind a visual picker so you can flip through them live and promote the one that feels right. Explicit invoke only.

create-design-md

Create or update a DESIGN.md from an existing product repo or public website — extract design language and tokens for coding agents without changing product source.

fixing-metadata

Audit and fix HTML metadata — titles, descriptions, canonicals, Open Graph, Twitter cards, favicons, JSON-LD, and robots directives.

interface-review

User-invoked interface review of uncommitted work, a branch, or a PR — classifies introduced vs regression vs pre-existing, then routes through better-interface.

Final quality pass for spacing, alignment, and consistency to prepare UI for launch.

Build icon components that morph into each other through SVG line transformation — icon transitions and transforms.

pseudo-elements

Audit CSS pseudo-elements and View Transitions API usage — hover effects, decorative layers, and page transitions.

sounds-on-the-web

Audit UI audio feedback — sound implementation, audio UX decisions, and accessibility.

to-spring-or-not-to-spring

Audit animation timing — when to use springs vs easing, and fix motion that feels wrong.

Heuristic UX evaluation with Nielsen's 10 as the sole scorecard. Pair with ux-principles for Laws of UX and classic interaction principles.

UX principles review — Laws of UX (Fitts, Hick, Doherty, Peak-End, Gestalt, …) plus progressive disclosure, affordances, mapping, defaults, and forgiveness. Complements ux-heuristics.

Implement the settled Foundry plan unattended — log departures, keep moving, don't stall the chain on every pixel.

challenge-implementation-1

Foundry implementation-challenge round 1 — audit recent code changes for bugs and edge cases, then fix what you find.

challenge-implementation-2

Foundry implementation-challenge round 2 — audit recent code changes for bugs and edge cases, then fix what you find.

challenge-implementation-3

Foundry implementation-challenge round 3 — audit recent code changes for bugs and edge cases, then fix what you find.

challenge-implementation-4

Foundry implementation-challenge round 4 — audit recent code changes for bugs and edge cases, then fix what you find.

challenge-implementation-5

Foundry implementation-challenge round 5 — audit recent code changes for bugs and edge cases, then fix what you find.

challenge-plan-1

Foundry plan-challenge round 1 — stress-test a construct-the-plan result from a new research angle before implementation.

challenge-plan-2

Foundry plan-challenge round 2 — stress-test a construct-the-plan result from a new research angle before implementation.

challenge-plan-3

Foundry plan-challenge round 3 — stress-test a construct-the-plan result from a new research angle before implementation.

challenge-plan-4

Foundry plan-challenge round 4 — stress-test a construct-the-plan result from a new research angle before implementation.

challenge-plan-5

Foundry plan-challenge round 5 — stress-test a construct-the-plan result from a new research angle before implementation.

construct-the-plan

Research the territory and write a durable plan file — narrative half for humans, working-memory half for the agent.

Foundry interview stage: brief the human, then ask three to five high-leverage scoping and taste questions before anything is built.

Write the next-session note — what's in flight, what's next, and what would be hard to reconstruct cold.

Opt-in Foundry rider: quiz you on a change that just shipped and teach through the grading so you understand what you merged.

Optional Foundry adversarial security pass against named threat classes, with every finding forced to argue against itself.

Foundry chain opener: read the branch, handoff note, and session log before any work — re-reading the brief before kickoff.

Write behavioral tests against what the plan intended, not what the code happens to do — verify instead of punting to manual checks.

Close the Foundry session: cleanup, session log, wiki distill, and open the one pull request with a plain-English summary.