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.3kVercel React Best Practices
Dense React and Next.js best practices: performance, data fetching, server components, patterns, and opinionated reviews with good/bad examples.
Vercel28k2.7kBuild 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.3kImplement 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.4kFind 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.8kRelated on AI UX Playground
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.