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 Interface Guidelines
Review UI code for accessibility, focus states, forms, animation, typography, and performance. Comprehensive checklist from Vercel's design team.
Web 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.5kBuild 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-code4kgstack
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.8kImplement 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 AI590Find 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.4kRelated 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.