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.
- UX DesignFrontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Avoid generic "AI slop" aesthetics with bold typography, color, and spatial composition.
Anthropic45.5k - UX DesignDesign EngineeringEmil Kowalski's design engineering skill: UI polish, animation decisions, component patterns, and the invisible details that make interfaces feel right.
Emil Kowalski1.5k - UX DesignWeb Design GuidelinesAudit 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.
Vercel28k - EngineeringWeb Artifacts BuilderBuild elaborate, multi-component React artifacts with Tailwind CSS and shadcn/ui. Full stack for creating production-ready web components and applications.Anthropic45.5k
- UX DesignImpeccableDesign, critique, audit, and polish frontend UI: hierarchy, accessibility, motion, typography, spacing, theming, and live browser iteration.
pbakaus3.2k - UX DesignBetter UIDesign-engineering polish for interfaces: surfaces, shadows, icons, micro-interactions, and motion restraint that make UI feel intentional.
Jakub Krehel - Visual DesignBetter TypographyWeb typography craft: font choice and pairing, type scales, wrapping, OpenType features, and component text details.Jakub Krehel
- Visual DesignBetter ColorsOKLCH color systems for the web: palette generation, contrast, gamut, semantic tokens, and light/dark theming.Jakub Krehel
- UX DesignBetter LayoutLayout structure for web UI: grouping, spacing, reading order, progressive disclosure, breakpoints, and RTL-aware layout.Jakub Krehel
- AccessibilityBetter AccessibilityAccessibility engineering for product UI: focus, keyboard support, ARIA, forms, hit areas, and reduced-motion patterns.Jakub Krehel
- UX DesignGPT TasteStrict anti-slop frontend and GSAP motion rules: layout variance, wide editorial type, gapless bento grids, and cinematic scroll.
leonxlnx17.4k - UX DesignIndustrial Brutalist UISwiss industrial print and tactical telemetry UI: rigid grids, extreme type contrast, utilitarian color, and analog degradation effects.leonxlnx17.4k
- UX DesignApple HIG DesignerDesign iOS apps to Apple's Human Interface Guidelines: native components, San Francisco typography, semantic colors, spacing, and accessibility.
jamesrochabrun201 - UX DesignApple UI DesignerRedesign mobile UI to feel native iOS: Apple HIG, SF Pro typography, translucency, and system-like components.
heyman33327 - UX DesignAndroid Design GuidelinesMaterial Design 3 and Android platform guidelines for Jetpack Compose or XML: Material You, navigation, dynamic color, and accessibility.
ehmo494 - UX DesignMobile Android DesignMaterial Design 3 and Jetpack Compose patterns for native Android interfaces that follow Google platform guidelines.
wshobson39k - EngineeringVercel React Best PracticesDense React and Next.js best practices: performance, data fetching, server components, patterns, and opinionated reviews with good/bad examples.Vercel28k
- UX DesignApple DesignApple's fluid interface approach for the web: gesture-driven UI, spring motion, interruptible transitions, translucent materials, depth, and restrained typography.Emil Kowalski1.5k
- UX DesignBreak UIEmil Kowalski's adversarial skill: feeds a component realistic worst-case data (long names, unbreakable emails, missing fields, counts of 1, empty lists, non-Latin text) behind a Demo / Worst case toggle, then reports every break with its fix.Emil Kowalski
- EngineeringPick UI LibraryEmil Kowalski's curated picks for frontend tasks: toasts, command menus, OTP inputs, number animation, charts, drag and drop, virtualization, state, and styling. Recommends one library per task and checks what is already installed.Emil Kowalski
Build design systems
Tokens, Tailwind patterns, and DESIGN.md-style contracts in code.
- Design SystemsTailwind Design SystemBuild scalable design systems with Tailwind CSS v4: CSS-first tokens, OKLCH theming, CVA components, dark mode, and v3-to-v4 migration patterns.wshobson35.7k
- Design SystemsStitch DESIGN.mdAnalyze 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-code4k - Design SystemsExtract Design SystemReverse-engineer design tokens from public websites into starter token files, colors, typography, spacing, radius, and shadows via Playwright extraction.
arvindrk65 - EngineeringgstackFast 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.8k - EngineeringVercel Composition PatternsReact composition patterns for scalable UI: compound components, slot APIs, state lifting, and architecture that keeps design systems maintainable.Vercel28k
- Design SystemsMaterial 3Google Material Design 3 (Material You): tokens, components, adaptive layout, theming, and accessibility—primarily Jetpack Compose Material3.
hamen1.3k
Implement from Figma
Pull designs into the repo and hand off cleanly to production.
- UX DesignFigma UseMandatory 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.3k - UX DesignFigma Generate DesignBuild 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.3k
- UX DesignDesign HandoffGenerate developer handoff specs from a design: layout, tokens, component props, states, responsive breakpoints, edge cases, animations, and accessibility.Anthropic12.4k
Prototype with motion
Animation, Remotion, and fast vibe-coded experiments.
- EngineeringRemotion Best PracticesDomain-specific knowledge for Remotion: compositions, animations, sequencing, transitions, video/audio/assets, Lottie, charts, captions, and more.
remotion-dev39.9k - EngineeringVibe CodingBuild software with AI coding tools as a non-traditional developer: prompting patterns, iteration loops, and shipping working prototypes in Cursor or Claude Code.
Refound AI590 - Visual DesignVercel React View TransitionsImplement view transitions in React and Next.js: shared element transitions, page animations, and motion that feels native on the web.Vercel28k
- Visual DesignHyperframesCreate motion graphics, video compositions, and animated UI demos with Hyperframes. Covers GSAP, Lottie, Remotion bridges, and presentation-ready motion.
heygen-com890 - Visual DesignAnimateBuild animations from scratch in the order that determines craft: whether to animate, purpose, tool, properties, curve, duration, interruptibility, and exit.Emil Kowalski1.5k
- Visual DesignReview AnimationsReview animation and motion code against Emil Kowalski's design-engineering bar. Default to flagging; approval is earned.Emil Kowalski1.5k
- Visual DesignAnimation VocabularyTurn vague motion descriptions into precise animation terms so you can brief designers or prompt agents accurately.Emil Kowalski1.5k
- Visual DesignImprove AnimationsAudit motion in a codebase and produce prioritized, self-contained implementation plans. Read-only on product source.Emil Kowalski1.5k
- Visual DesignFind Animation OpportunitiesFind where motion would help—and reject where it would not. Restraint-first opportunity scan with exact motion recipes.Emil Kowalski1.5k
- Visual DesignScroll CraftBuilds premium scroll-driven landing pages: picks a page grammar, plans one emotional peak and a bespoke signature move, layers a dimensional hero, art-directs mobile separately, then verifies every scroll frame and contrast in a headless browser.
Nate Herk3k - EngineeringFind SkillsDiscover 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.4k
Ship & deploy
Deploy to production and verify flows in a real browser.
- EngineeringDeploy to VercelDeploy projects to Vercel from the agent: environment setup, build configuration, preview URLs, and production deployment workflows.Vercel28k
- EngineeringAgent BrowserBrowser automation for AI agents: open URLs, snapshot elements, click, fill, screenshot, and run real user-flow QA sessions from the CLI.Vercel Labs4.2k
- EngineeringgstackFast 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.8k
- EngineeringReview LoopIterative 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.
2dmurali120
Prep 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.
- Figma to CursorHand design context to coding agents without losing fidelity.
- Vibe coding rulesPrompting patterns that keep agent-built UI on-brand.
- AI Workflows: AGENTS.md & DESIGN.mdStanding repo instructions agents follow without re-explaining.
- Agentic UX frameworkTrust 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.