Agent skills for engineers
Ship UI that matches design intent with frontend polish, design systems, Figma MCP, and motion skills for code-first agents. Install once and your agent helps you hand off cleanly and integrate design into production workflows.
Ship polished UI
Ship interfaces that match design intent, not generic agent output.
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality. Avoid generic "AI slop" aesthetics with bold typography, color, and spatial composition.
Anthropic45.5kDesign Engineering
Emil Kowalski's design engineering skill: UI polish, animation decisions, component patterns, and the invisible details that make interfaces feel right.
Emil Kowalski1.5kWeb Design Guidelines
Audit UI code against Vercel Web Interface Guidelines for design and accessibility compliance. Fetches the latest rules before each review and outputs terse file:line findings.
Vercel28k398.2kWeb Artifacts Builder
Build elaborate, multi-component React artifacts with Tailwind CSS and shadcn/ui. Full stack for creating production-ready web components and applications.
Anthropic45.5kImpeccable
Design, critique, audit, and polish frontend UI: hierarchy, accessibility, motion, typography, spacing, theming, and live browser iteration.
pbakaus3.2k1.3kBetter UI
Design-engineering polish for interfaces: surfaces, shadows, icons, micro-interactions, and motion restraint that make UI feel intentional.
Jakub Krehel8kBetter Typography
Web typography craft: font choice and pairing, type scales, wrapping, OpenType features, and component text details.
Jakub Krehel7.7kBetter Colors
OKLCH color systems for the web: palette generation, contrast, gamut, semantic tokens, and light/dark theming.
Jakub Krehel7.4kBetter Layout
Layout structure for web UI: grouping, spacing, reading order, progressive disclosure, breakpoints, and RTL-aware layout.
Jakub Krehel5.6kBetter Accessibility
Accessibility engineering for product UI: focus, keyboard support, ARIA, forms, hit areas, and reduced-motion patterns.
Jakub Krehel5.5kGPT Taste
Strict anti-slop frontend and GSAP motion rules: layout variance, wide editorial type, gapless bento grids, and cinematic scroll.
leonxlnx17.4k223.2kIndustrial Brutalist UI
Swiss industrial print and tactical telemetry UI: rigid grids, extreme type contrast, utilitarian color, and analog degradation effects.
leonxlnx17.4k226.2kApple HIG Designer
Design iOS apps to Apple's Human Interface Guidelines: native components, San Francisco typography, semantic colors, spacing, and accessibility.
jamesrochabrun201954Apple UI Designer
Redesign mobile UI to feel native iOS: Apple HIG, SF Pro typography, translucency, and system-like components.
heyman33327640Android Design Guidelines
Material Design 3 and Android platform guidelines for Jetpack Compose or XML: Material You, navigation, dynamic color, and accessibility.
ehmo4941.2kMobile Android Design
Material Design 3 and Jetpack Compose patterns for native Android interfaces that follow Google platform guidelines.
wshobson39k20.9kVercel React Best Practices
Dense React and Next.js best practices: performance, data fetching, server components, patterns, and opinionated reviews with good/bad examples.
Vercel28k2.7kApple Design
Apple's fluid interface approach for the web: gesture-driven UI, spring motion, interruptible transitions, translucent materials, depth, and restrained typography.
Emil Kowalski1.5k2.3kBuild design systems
Tokens, Tailwind patterns, and DESIGN.md-style contracts in code.
Tailwind Design System
Build scalable design systems with Tailwind CSS v4: CSS-first tokens, OKLCH theming, CVA components, dark mode, and v3-to-v4 migration patterns.
wshobson35.7kStitch DESIGN.md
Analyze Stitch projects and generate semantic DESIGN.md files from screen metadata, HTML/CSS, and assets. Produces atmosphere, color roles, typography, component styling, and layout principles.
google-labs-code4kExtract Design System
Reverse-engineer design tokens from public websites into starter token files, colors, typography, spacing, radius, and shadows via Playwright extraction.
arvindrk65123.5kgstack
Fast headless browser for QA testing, deployment verification, and user-flow dogfooding. Navigate pages, interact with elements, diff snapshots, take annotated screenshots, and test responsive layouts, forms, and dialogs.
garrytan10.8kVercel Composition Patterns
React composition patterns for scalable UI: compound components, slot APIs, state lifting, and architecture that keeps design systems maintainable.
Vercel28k1.3kMaterial 3
Google Material Design 3 (Material You): tokens, components, adaptive layout, theming, and accessibility—primarily Jetpack Compose Material3.
hamen1.3k1.7kImplement from Figma
Pull designs into the repo and hand off cleanly to production.
Figma Use
Mandatory prerequisite for Figma MCP: execute Plugin API scripts to create, edit, and inspect nodes, variables, components, and auto-layout. Pairs with design-system screen workflows for implementing designs in Figma.
Figma3.3kFigma Generate Design
Build full pages, modals, and multi-section views in Figma from code or descriptions using design system components, variables, and styles. Pairs with Figma Use and Figma MCP.
Figma3.3kDesign Handoff
Generate developer handoff specs from a design: layout, tokens, component props, states, responsive breakpoints, edge cases, animations, and accessibility.
Anthropic12.4kPrototype with motion
Animation, Remotion, and fast vibe-coded experiments.
Remotion Best Practices
Domain-specific knowledge for Remotion: compositions, animations, sequencing, transitions, video/audio/assets, Lottie, charts, captions, and more.
remotion-dev39.9kVibe Coding
Build software with AI coding tools as a non-traditional developer: prompting patterns, iteration loops, and shipping working prototypes in Cursor or Claude Code.
Refound AI590Vercel React View Transitions
Implement view transitions in React and Next.js: shared element transitions, page animations, and motion that feels native on the web.
Vercel28k756Hyperframes
Create motion graphics, video compositions, and animated UI demos with Hyperframes. Covers GSAP, Lottie, Remotion bridges, and presentation-ready motion.
heygen-com8904.4kAnimate
Build animations from scratch in the order that determines craft: whether to animate, purpose, tool, properties, curve, duration, interruptibility, and exit.
Emil Kowalski1.5k2.2kReview Animations
Review animation and motion code against Emil Kowalski's design-engineering bar. Default to flagging; approval is earned.
Emil Kowalski1.5k2.2kAnimation Vocabulary
Turn vague motion descriptions into precise animation terms so you can brief designers or prompt agents accurately.
Emil Kowalski1.5k83.3kImprove Animations
Audit motion in a codebase and produce prioritized, self-contained implementation plans. Read-only on product source.
Emil Kowalski1.5k68.2kFind Animation Opportunities
Find where motion would help—and reject where it would not. Restraint-first opportunity scan with exact motion recipes.
Emil Kowalski1.5k56.8kFind Skills
Discover and install agent skills from the open ecosystem. Search skills.sh, verify quality, and install with npx skills when users need capabilities beyond your current setup.
Vercel Labs2.4kShip & deploy
Deploy to production and verify flows in a real browser.
Deploy to Vercel
Deploy projects to Vercel from the agent: environment setup, build configuration, preview URLs, and production deployment workflows.
Vercel28k705Agent Browser
Browser automation for AI agents: open URLs, snapshot elements, click, fill, screenshot, and run real user-flow QA sessions from the CLI.
Vercel Labs4.2k3.6kgstack
Fast headless browser for QA testing, deployment verification, and user-flow dogfooding. Navigate pages, interact with elements, diff snapshots, take annotated screenshots, and test responsive layouts, forms, and dialogs.
garrytan10.8kReview Loop
Iterative worker-reviewer cycle: do the work, spawn a critic subagent to score 1-10, revise until a quality gate is met. First drafts are never final.
2dmurali1202.5kPrep for interviews
Pattern-based coding practice for technical interviews.
Beyond skills
Skills install into your agent. These guides, prompts, and frameworks show the rest of the stack.
Guide
Figma to Cursor
Hand design context to coding agents without losing fidelity.
Guide
Vibe coding rules
Prompting patterns that keep agent-built UI on-brand.
Prompt
AI Workflows: AGENTS.md & DESIGN.md
Standing repo instructions agents follow without re-explaining.
Framework
Agentic UX framework
Trust and control patterns when agents touch production systems.
Frequently asked questions
What are agent skills for engineers?
Agent skills are SKILL.md files that encode engineering and design-engineering standards (UI polish, accessibility, design tokens, Figma MCP, and motion) so agents ship code that matches your bar.
Which engineering skills should I install first?
Start with Frontend Design and Web Interface Guidelines for UI quality. Add Figma Use if you work from designs. Add Vibe Coding for rapid prototyping with guardrails.