Back to Home
web

AI Frontend Engineering

About AI Frontend Engineering

Equips AI agents with comprehensive frontend engineering skills. Agents assist developers in UI/UX design, applying/optimizing frameworks (React, Next.js, Vue). They master component development, design system integration, and performance optimization to generate high-quality, maintainable code. Ideal for automating UI design, accelerating project development, and enhancing application performance, serving developers and teams seeking AI-driven excellence.

Subcategory navigation

Categories:

All AI Frontend Engineering Skills

50 / 371 skills
designFeatured

frontend-design

by @anthropics

Guides and implements unique, production-ready frontend interface design and development, ensuring excellent user experience and high-performance interface.

4.9(1.2K)
446.3K
react

vercel-react-best-practices

by @vercel-labs

Vercel-maintained performance optimization guide for React and Next.js applications, containing 8 categories and 62 rules, helping developers build high-performance frontend applications.

4.9(2.0K)
419.7K
web-development

vercel-composition-patterns

by @vercel-labs

Provides React component composition patterns for building flexible, maintainable React components, avoiding prop drilling and boolean prop proliferation through techniques like compound components.

4.8(2.0K)
183.8K
shadcn/ui

shadcn

by @shadcn

Proficiency in using the Shadcn UI component library for frontend development, enabling AI coding agents to quickly build beautiful, responsive, and highly customizable user interfaces, improving development efficiency.

4.8(2.0K)
154.4K
vercel

vercel-react-native-skills

by @vercel-labs

Official Vercel React Native intelligent agent skill set, designed to help mobile developers efficiently build and deploy cross-platform applications.

4.8(2.0K)
123.8K
frontend

impeccable

by @pbakaus

A comprehensive frontend design enhancement skill with 7 expert references (typography, color, motion, etc.) and 20 commands (audit, polish, critique), using anti-patterns to guide AI tools toward high-quality UI output. Supports 10 platforms including Claude Code and Cursor.

4.8(955)
115.0K
userscripts

develop-userscripts

by @xixu-me

This skill focuses on the development, debugging, packaging, and publishing of browser userscripts for platforms like Tampermonkey and ScriptCat. It covers the complete lifecycle of userscripts, including background scripts, cron jobs, configuration management, and subscription workflows, enabling developers to efficiently add custom functionalities and automation tasks to browsers.

4.8(20)
109.6K
web-development

next-best-practices

by @vercel-labs

Provides Next.js best practices, covering file conventions, RSC boundaries, data patterns, asynchronous APIs, metadata, error handling, etc., to optimize Next.js application development.

4.7(2.0K)
91.9K
design-systems

stitch-design-taste

by @leonxlnx

Generates an optimized semantic design system for Google Stitch, transforming front-end engineering specifications into a descriptive design language to improve screen generation quality.

4.7(20)
51.4K
webpack

web-artifacts-builder

by @anthropics

Proficiency in building and managing web project artifacts, enabling AI coding agents to efficiently package and optimize frontend resources, ensuring excellent and stable performance of deployed web applications.

4.7(856)
50.7K
frontend-design

teach-impeccable

by @pbakaus

Impeccable is an AI skill for frontend design, offering 23 commands and anti-pattern rules to help AI generate high-quality, best-practice-aligned frontend designs. It covers typography, color, motion, spatial layout, interaction, responsive design, and UX writing, aiming to enhance design efficiency and quality.

4.7(1.7K)
50.4K
generative-art

algorithmic-art

by @anthropics

Ability to use algorithms and programming techniques to generate art, enabling AI coding agents to create unique, dynamic visual elements in UI/UX design, enhancing user experience.

4.7(984)
45.8K
web-development

react:components

by @google-labs-code

Focuses on the development and management of React components, providing guidance and best practices for building reusable, high-performance UI components.

4.7(1.0K)
44.4K
tailwind-css

tailwind-design-system

by @wshobson

Intelligent automation and multi-agent orchestration capabilities for Tailwind CSS design systems, helping designers efficiently build and manage unified user interfaces.

4.7(1.1K)
43.8K
react-native

building-native-ui

by @expo

AI agent skill set for building native UI in Expo projects, providing intelligent assistance to help mobile developers efficiently design and implement cross-platform user interfaces.

4.7(984)
43.0K
ui-design

gpt-taste

by @leonxlnx

Frontend design engineer trained on Awwwards winning works, generates high-quality, unbiased web designs and code.

4.7(13)
40.5K
react

vercel-react-view-transitions

by @vercel-labs

This skill helps developers implement smooth, native-feeling view transition animations in React and Next.js applications. It leverages React's View Transition API to support page transitions, component entry/exit, shared element transitions, and directional navigation animations. Using the `<ViewTransition>` component and `next/link`'s `transitionTypes` prop, developers can easily create various complex animation effects, enhancing user experience, and provides ready-to-use CSS animation recipes.

4.6(20)
39.7K
css

css-animations

by @heygen-com

CSS animation adapter patterns for HyperFrames, enabling deterministic seeking of CSS keyframes, animation-delay, and fill-mode for preview and rendering. Ideal for simple, fixed-duration decorative motions like loops, masks, and subtle parallax.

4.6(120)
38.2K
animation

animejs

by @heygen-com

This skill provides Anime.js adapter patterns for HyperFrames, enabling precise control over animations and timelines. It ensures seek-driven, deterministic playback and supports translating Anime.js examples into render-safe HyperFrames HTML, simplifying animation integration.

4.6(120)
37.4K
shadcn-ui

shadcn-ui

by @google-labs-code

This skill provides expert guidance on Shadcn UI, helping frontend developers efficiently integrate and build applications based on this UI library, ensuring aesthetic interfaces, complete functionality, and a smooth user experience.

4.6(844)
36.9K
tailwind

tailwind

by @heygen-com

This skill provides essential patterns for integrating Tailwind CSS v4.2 browser-runtime into HyperFrames compositions. It guides users on scaffolding projects with `hyperframes init --tailwind`, writing utility classes, defining CSS-first v4 theme tokens, and navigating v3 vs v4 syntax differences. It also helps in debugging missing styles and understanding when to compile Tailwind to CSS for production-stable renders, ensuring deterministic and reliable styling.

4.6(120)
36.9K
threejs

three

by @heygen-com

Three.js and WebGL adapter patterns for HyperFrames. Use when creating deterministic Three.js scenes, WebGL canvas layers, AnimationMixer timelines, camera motion, shader-driven visuals, or canvas renders that respond to HyperFrames hf-seek events.

4.6(120)
36.8K
web-animations

waapi

by @heygen-com

Web Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames.

4.6(120)
36.7K
next.js-caching

next-cache-components

by @vercel-labs

Introduces Next.js 16 caching components, including PPR, caching directives, cache lifecycle, cache tags, and revalidation tags.

4.6(604)
30.8K
expo-updates

upgrading-expo

by @expo

This skill set provides AI agent capabilities specifically designed to assist with the Expo project upgrade process, simplifying version migration and compatibility handling to ensure a smooth transition for mobile apps to new versions.

4.6(572)
30.0K
frontend

imagegen-frontend-web

by @leonxlnx

This elite frontend image-direction skill generates premium, conversion-aware website design references. It strictly adheres to a 'one separate horizontal image per section' rule, ensuring diverse compositions, varied CTAs, and hero scales, all while maintaining visual consistency. Optimized for landing pages, marketing sites, and product comps, the output is highly reproducible by developers or coding models.

4.6(120)
27.2K
vue

vue

by @antfu

Utilizes the Vue framework for frontend development, enabling AI agents to efficiently build interactive user interfaces and single-page applications.

4.6(540)
23.1K
markdown-conversion

baoyu-markdown-to-html

by @JimLiu

Markdown to HTML: Supports WeChat Official Account themes, code syntax highlighting, automatic generation of citations/footnotes, and multiple typography themes.

4.6(192)
22.7K
vue

vue-best-practices

by @hyf0

Masters best practices in Vue frontend development, enabling AI agents to write efficient, maintainable, and industry-standard Vue application code.

4.6(576)
22.1K
dom-manipulation

use-dom

by @expo

Provides a collection of AI agent skills related to DOM manipulation, assisting frontend developers in efficiently handling UI elements in Expo projects.

4.6(358)
21.5K
nextjs

next-upgrade

by @vercel-labs

Guides users on upgrading Next.js projects to the latest version, ensuring utilization of the newest features and performance optimizations, and improving development efficiency.

4.6(283)
20.8K
nextjs

nextjs-app-router-patterns

by @wshobson

Focuses on Next.js App Router patterns, providing intelligent automation and multi-agent orchestration capabilities for frontend development, optimizing route management.

4.6(385)
18.4K
opentui

opentui

by @msmps

Builds Terminal User Interfaces (TUI) using the OpenTUI platform, selecting appropriate frameworks and components via a decision tree.

4.5(49)
15.4K
vueuse

vueuse-functions

by @antfu

Appropriately apply VueUse composable functions in Vue.js/Nuxt projects to build concise and maintainable features.

4.5(340)
15.3K
chat-ui

chat-ui

by @inferen-sh

Focuses on frontend chat UI development, providing Agents with interaction capabilities via API to build user-friendly conversational experiences.

4.5(560)
14.0K
ai-agent-ui

agent-ui

by @inferen-sh

Focuses on frontend Agent user interface development, providing Agents with visual interaction capabilities via API to enhance user operational experience.

4.5(556)
13.9K
ui-widgets

widgets-ui

by @inferen-sh

Focuses on frontend Widgets user interface development, providing Agents with rich interactive components via API to enhance application functionality.

4.5(556)
13.9K
ui-tools

tools-ui

by @inferen-sh

Focuses on frontend tools user interface development, providing Agents with the ability to integrate and display various tools via API to improve work efficiency.

4.5(556)
13.9K
animation

gsap-core

by @greensock

GSAP core animation engine expert, handles tweening, easing functions, staggered animations, and timeline control.

4.5(52)
13.4K
vue.js-debugging

vue-debug-guides

by @hyf0

Masters Vue frontend debugging guides, enabling AI agents to quickly identify and resolve issues in Vue applications, ensuring code quality and stability.

4.5(381)
13.3K
wcag

web-accessibility

by @supercent-io

This skill focuses on accessible design and development for new UI components, and conducts accessibility audits to identify and fix accessibility issues in existing systems, ensuring a good user experience.

4.5(508)
12.7K
clerk-auth

clerk-nextjs-patterns

by @clerk

Focuses on Clerk and Next.js integration patterns, leveraging AI skills to enhance development efficiency and simplify user authentication and management processes.

4.5(32)
12.4K
chrome-devtools

chrome-devtools

by @github

Utilizes Chrome Developer Tools for frontend debugging, performance analysis, and quality assurance, helping AI agents optimize web applications.

4.5(335)
12.1K
performance

gsap-performance

by @greensock

GSAP performance optimization expert, achieving smooth 60fps animations, reducing layout and paint overhead, and resolving stuttering issues.

4.5(85)
12.1K
gsap

gsap-timeline

by @greensock

GSAP timeline expert, coordinating multi-step sequential and parallel animations, enabling complex keyframe-style animation orchestration.

4.5(89)
12.0K
electron.js

electron

by @vercel-labs

Automate Electron desktop applications like VS Code, Slack, etc., using a proxy browser via the Chrome DevTools Protocol.

4.5(472)
11.8K
nuxt

nuxt-ui

by @nuxt

Build user interfaces using @nuxt/ui v4, offering over 125 accessible Vue components to accelerate development.

4.5(26)
11.8K
gsap

gsap-plugins

by @greensock

GSAP plugin usage expert, covering advanced features like scrolling, dragging, SVG, text, physics effects, and custom easing.

4.5(57)
11.8K
pinia

pinia

by @antfu

Pinia is Vue's official state management library, type-safe and extensible, used for defining stores, handling state, getters, and actions.

4.5(278)
11.7K
gsap

gsap-utils

by @greensock

GSAP utility function expert, handling animation auxiliary functions like mathematical calculations, array operations, unit conversions, and value mapping.

4.5(104)
11.7K