web

AI 前端工程

子分类:

50 / 371 skills

frontend-design

by @anthropics

指导并实现独特且达到生产标准的前端界面设计与开发，确保用户体验的卓越性和界面的高性能表现。

vercel-react-best-practices

by @vercel-labs

Vercel维护的React和Next.js应用性能优化指南，包含8大类62条规则，帮助开发者构建高性能前端应用。

web-development

vercel-composition-patterns

by @vercel-labs

提供React组件组合模式，用于构建灵活、可维护的React组件，通过复合组件等方式避免布尔属性泛滥。

shadcn

by @shadcn

掌握使用Shadcn UI组件库进行前端开发的能力，使AI编码代理能快速构建美观、响应式且高度可定制的用户界面，提升开发效率。

vercel-react-native-skills

by @vercel-labs

Vercel官方推出的React Native智能代理技能集，旨在帮助移动开发者高效构建和部署跨平台应用。

impeccable

by @pbakaus

全面的前端设计增强 Skill，含 7 个专业参考（排版、色彩、动效等）和 20 条命令（审计、打磨、评审），通过反模式清单引导 AI 工具产出高品质 UI，支持 Claude Code、Cursor 等 10 个平台。

develop-userscripts

by @xixu-me

此技能专注于浏览器用户脚本的开发、调试、打包与发布，支持 Tampermonkey 和 ScriptCat 等主流平台。它涵盖了用户脚本的完整生命周期，包括背景脚本、定时任务、配置管理以及订阅工作流的创建与维护，帮助开发者高效地为浏览器添加自定义功能和自动化任务。

web-development

next-best-practices

by @vercel-labs

提供Next.js最佳实践，涵盖文件约定、RSC边界、数据模式、异步API、元数据、错误处理等，优化Next.js应用开发。

stitch-design-taste

by @leonxlnx

为 Google Stitch 生成优化的语义化设计系统，将前端工程规范转为描述性设计语言，提升屏幕生成质量

web-artifacts-builder

by @anthropics

掌握构建和管理Web项目产物的能力，使AI编码代理能高效地打包、优化前端资源，确保部署的Web应用性能优异且稳定。

frontend-design

teach-impeccable

by @pbakaus

Impeccable是一个前端设计AI技能，提供23个命令和反模式规则，帮助AI生成高质量、符合最佳实践的前端设计。它涵盖排版、色彩、动效、空间布局、交互、响应式设计及UX文案，旨在提升设计效率和质量。

algorithmic-art

by @anthropics

具备运用算法和编程技术生成艺术作品的能力，使AI编码代理能在UI/UX设计中创造独特、动态的视觉元素，增强用户体验。

web-development

react:components

by @google-labs-code

专注于React组件的开发和管理，提供构建可复用、高性能UI组件的指导和最佳实践。

tailwind-design-system

by @wshobson

针对Tailwind CSS设计系统，提供智能自动化和多代理编排能力，助力设计师高效构建和管理统一的用户界面。

building-native-ui

by @expo

针对Expo项目构建原生UI的AI代理技能集，提供智能辅助，帮助移动开发者高效设计和实现跨平台用户界面。

gpt-taste

by @leonxlnx

基于 Awwwards 获奖作品训练的前端设计工程师，生成高质量、无偏见的网页设计和代码

vercel-react-view-transitions

by @vercel-labs

此技能旨在帮助开发者在 React 和 Next.js 应用中实现流畅、原生的视图过渡动画。它利用 React 的 View Transition API，支持页面切换、组件进出场、共享元素以及方向性导航动画。通过 `<ViewTransition>` 组件和 `next/link` 的 `transitionTypes` 属性，开发者可以轻松创建各种复杂的动画效果，提升用户体验，并提供预设的 CSS 动画方案。

css-animations

by @heygen-com

为 HyperFrames 提供 CSS 动画适配模式，支持确定性地查找 CSS 关键帧、动画延迟和填充模式，用于预览和渲染。适用于简单的、固定时长的装饰性动画，如循环、遮罩和微妙的视差效果。

animejs

by @heygen-com

此技能为HyperFrames提供Anime.js适配模式，使动画和时间线可被HyperFrames精确控制。它确保动画可寻址、确定性播放，并支持将Anime.js示例转换为渲染安全的HyperFrames HTML，简化动画集成。

shadcn-ui

by @google-labs-code

此技能提供关于Shadcn UI的专业指导，帮助前端开发者高效集成和构建基于该UI库的应用，确保界面美观、功能完善且用户体验流畅。

tailwind

by @heygen-com

此技能为 HyperFrames 作品集成 Tailwind CSS v4.2 浏览器运行时提供了基本模式。它指导用户如何使用 `hyperframes init --tailwind` 构建项目、编写实用类、定义 CSS-优先的 v4 主题令牌，并区分 v3 和 v4 语法。它还有助于调试样式缺失问题，并理解何时应将 Tailwind 编译为 CSS 以实现生产级稳定渲染，确保确定且可靠的样式呈现。

three

by @heygen-com

HyperFrames 的 Three.js 适配器，用于创建确定性的 Three.js 场景、WebGL 画布层、动画时间线、摄像机运动和着色器驱动的视觉效果。它响应 HyperFrames 的 hf-seek 事件，确保精确渲染，适用于产品展示、粒子效果和 GLTF 动画。

waapi

by @heygen-com

HyperFrames 的 Web Animations API (WAAPI) 适配器，旨在简化和优化浏览器原生动画在 HyperFrames 中的集成。它支持 `element.animate()` 动画、`Animation currentTime` 寻帧、`document.getAnimations()`、`KeyframeEffect` 定时及填充模式，确保原生浏览器动画在 HyperFrames 环境中确定性地渲染，提供流畅且可控的动画体验。

next.js-caching

next-cache-components

by @vercel-labs

Next.js 16缓存组件深度指南,全面解析PPR(部分预渲染)、缓存指令、缓存生命周期管理、缓存标签和动态更新机制,帮助开发者构建高性能Web应用,是Next.js开发者必备的缓存优化工具。

upgrading-expo

by @expo

此技能集提供AI代理能力，专门用于协助Expo项目的升级过程，简化版本迁移和兼容性处理，确保移动应用平稳过渡到新版本。

imagegen-frontend-web

by @leonxlnx

这个技能是一个顶级的**前端图像指导**工具，专为生成**高质量、注重转化**的网站设计参考图而设计。它严格遵循**每部分一张独立横向图片**的原则，确保构图多样性、CTA变化和英雄区规模多样化，并保持视觉一致性。输出的图像优化用于**登陆页、营销站和产品原型**，开发人员或编码模型可精确复现。

vue

by @antfu

运用Vue框架进行前端开发，使AI智能体能够高效构建交互式用户界面和单页应用。

markdown-conversion

baoyu-markdown-to-html

by @JimLiu

Markdown 转 HTML：支持微信公众号主题、代码语法高亮、引用脚注自动生成，多种排版主题可选。

vue-best-practices

by @hyf0

掌握Vue前端开发的最佳实践，使AI智能体能编写出高效、可维护且符合行业标准的Vue应用代码。

dom-manipulation

use-dom

by @expo

提供与DOM操作相关的AI代理技能集合，辅助前端开发者在Expo项目中高效处理界面元素。

next-upgrade

by @vercel-labs

指导用户将Next.js项目升级到最新版本，确保利用最新功能和性能优化，提升开发效率。

nextjs-app-router-patterns

by @wshobson

聚焦Next.js App Router模式，为前端开发提供智能自动化和多智能体编排能力，优化路由管理。

opentui

by @msmps

使用OpenTUI平台构建终端用户界面（TUI），通过决策树选择合适的框架和组件。

vueuse-functions

by @antfu

在Vue.js/Nuxt项目中，适当应用VueUse可组合函数，构建简洁且可维护的功能。

chat-ui

by @inferen-sh

专注于前端聊天界面开发，通过API为Agent提供交互能力，构建用户友好的对话体验。

agent-ui

by @inferen-sh

专注于前端Agent用户界面开发，通过API为Agent提供可视化交互能力，提升用户操作体验。

widgets-ui

by @inferen-sh

专注于前端小部件（Widgets）用户界面开发，通过API为Agent提供丰富的交互组件，增强应用功能。

tools-ui

by @inferen-sh

专注于前端工具用户界面开发，通过API为Agent提供集成和展示各类工具的能力，提升工作效率。

gsap-core

by @greensock

GSAP 核心动画引擎专家，处理补间动画、缓动函数、交错动画和时间轴控制

vue.js-debugging

vue-debug-guides

by @hyf0

掌握Vue前端调试指南，使AI智能体能快速定位并解决Vue应用中的问题，确保代码质量和稳定性。

web-accessibility

by @supercent-io

该技能专注于新UI组件的无障碍设计与开发，并进行无障碍审计，以识别和修复现有系统中的无障碍问题，确保用户体验。

clerk-nextjs-patterns

by @clerk

专注于Clerk与Next.js集成模式，利用AI技能增强开发效率，简化用户认证与管理流程。

chrome-devtools

chrome-devtools

by @github

运用Chrome开发者工具进行前端调试、性能分析和质量保证，帮助AI智能体优化网页应用。

gsap-performance

by @greensock

GSAP 性能优化专家，实现 60fps 流畅动画，减少布局和绘制开销，解决卡顿问题

gsap-timeline

by @greensock

GSAP 时间轴专家，协调多步骤序列动画和并行动画，实现关键帧式复杂动画编排

electron

by @vercel-labs

通过Chrome DevTools协议，使用代理浏览器自动化Electron桌面应用程序，如VS Code、Slack等。

nuxt-ui

by @nuxt

利用@nuxt/ui v4构建用户界面，提供超过125个可访问的Vue组件，加速开发。

gsap-plugins

by @greensock

GSAP 插件使用专家，涵盖滚动、拖拽、SVG、文本、物理效果和自定义缓动等高级功能

pinia

by @antfu

Pinia是Vue官方的状态管理库，类型安全且可扩展，用于定义存储、处理状态、getter和action。

gsap-utils

by @greensock

GSAP 工具函数专家，处理数学计算、数组操作、单位转换和值映射等动画辅助功能