SuperAPI AI 工具集找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-16 00:02
9,886 个结果
React Flow Implementation 是一个用于正确实现基于节点的 React 界面（使用 @xyflow/react 库）的技能。它适用于构建流程图、图表、可视化编辑器或基于节点的应用程序。该技能提供了快速入门示例、实现检查清单、核心模式（包括 TypeScript 类型、自定义节点、自定义边、状态管理、视口控制、连接验证等），以及常用属性参考和交互 CSS 类。它强调样式导入、useReactFlow 边界、稳定的 nodeTypes/edgeTypes 以及 Handle 与边的匹配等关键实现要点，帮助开发者避免常见错误并构建可靠的节点式 UI。
该技能用于指导创建独特、达到生产级水准的前端界面，避免常见的“AI 味”审美。用户提供前端需求（组件、页面、应用或界面）及其用途、受众或技术约束后，技能先引导进行设计思考：明确要解决的问题与使用者、选定鲜明甚至极端的美学基调（如极简、复古未来、奢华、编辑杂志风、粗野主义、工业实用等）、梳理框架与性能无障碍等技术约束，并确定让作品令人难忘的差异化点。随后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求功能可用、视觉醒目、风格统一且细节讲究。美学指南涵盖：排版选用独特字体并搭配展示字体与正文字体、避免 Arial/Inter 等通用字体；用 CSS 变量统一色彩主题，主色配锐利点缀；用动画与微交互营造效果，HTML 优先纯 CSS，React 可用 Motion，重视页面加载的编排式揭示；空间构成上采用非对称、重叠、斜向、打破网格的布局；背景与视觉细节使用渐变网格、噪点纹理、几何图案、层叠透明、戏剧化阴影、装饰边框、自定义光标等营造氛围。要求避免通用 AI 审美（如常见字体、紫渐变白底、可预测布局），根据语境做多元变化，并让实现复杂度与美学愿景匹配。
Vite 性能优化指南技能，提供 42 条规则、分为 8 个类别，用于在编写、审查或重构 Vite 配置时提升开发服务器启动速度、生产打包体积与 HMR 表现，并辅助从 Webpack 等打包器迁移。
该技能为 Next.js App Router 中服务端组件（Server Components）与客户端组件（Client Components）的选择提供指导，涵盖 cookie/header 访问、searchParams 处理、pathname 路由以及 React 'use' API 解包 Promise 等场景。技能强调服务端组件是默认形态，仅在需要客户端特性时才添加 'use client'；同时要求代码库启用 @typescript-eslint/no-explicit-any，禁止使用 any 类型，否则会导致构建失败。适用于决定组件渲染策略、访问服务端数据、处理路由参数、调试 'use client' 边界问题等开发场景。
CometChat UI Kit 多端本地化（i18n）参考技能，覆盖 React、React Native、Angular、Android V5/V6、iOS、Flutter V5/V6，说明各端 CometChatLocalize 或等价 API 的初始化方式、自定义语言、RTL 与回退语言处理。
Artifacts Builder 是一套用于创建复杂、多组件 claude.ai HTML 工件的工具集，基于现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）。它通过初始化脚本生成配置完整的 React + TypeScript 项目，开发完成后可将全部代码打包为单个自包含 HTML 文件，直接在 Claude 对话中作为工件展示。
基于 TemPad Dev MCP 把可见 Figma 节点还原为项目原生 UI 代码的技能。要求以 Figma 与项目证据为准，复用现有组件、令牌与样式惯例，只实现有据可依的状态与响应式行为；证据不足时暂停或询问，不凭记忆或截图臆造实现。
three.js 渲染管线技能，覆盖 WebGLRenderer 与 WebGPURenderer 的创建、画布尺寸与像素比、色彩空间与色调映射、渲染目标与性能分析等核心渲染配置。
React Native Reusables 是一个面向 React Native（Expo）的组件方案技能，把 shadcn/ui 的使用体验带入移动端开发。它通过复制粘贴或 CLI 脚手架的方式提供组件，支持基于 CSS 变量的主题定制，底层使用 RN Primitives 实现。该技能支持 Nativewind 与 Uniwind 两种样式方案，使用时需要为浮层类组件提供根级 PortalHost，并采用 Text 继承系统以及对 Lucide 图标的 Icon 封装。其内容涵盖概述、安装、定制、组件与模式、最佳实践与故障排查等参考主题，文档版本截至 2026-02-26。
AutoAnimate 是一个零配置的动画库，包名为 @formkit/auto-animate，体积约 3.28kb，支持 React、Vue、Solid、Svelte、Preact 等框架。它通过给父元素绑定 ref 即可自动为子元素的增删和移动添加过渡动画，无需编写动画代码。本技能是一份错误预防指南，针对该库 15 个已知问题提供规避方案，涵盖 SSR/Next.js 导入错误、条件渲染父元素、缺少唯一 key、Flexbox 抖动、表格行显示异常、Jest 与 esbuild 兼容性、CSS position 副作用、Vue/Nuxt 注册、Angular ESM、React 19 StrictMode 双重调用、视口外动画失效、删除元素遮挡、拖拽时无法禁用、父级 transform 位置错误等。文档还给出 SSR 安全模式、关键规则清单、社区技巧与版本信息，适用于需要在列表、手风琴、Toast、表单等场景快速添加动画的前端开发者。
在 Blazor 应用中集成 Syncfusion Image Editor 组件的技能说明，涵盖图像加载、裁剪旋转、标注绘制、滤镜调节、模糊打码、相框、导出与事件处理等能力的用法。
Webflow 站点自定义代码管理技能，用于添加、审查和移除内联自定义脚本（上限 10,000 字符），适用于分析工具、追踪像素、聊天组件等自定义 JavaScript。所有操作均需通过 Webflow MCP 工具完成。
Material UI 与 Tailwind CSS 集成技能，主要解决两者同时使用时样式冲突的问题。核心方案是利用 CSS 级联层（cascade layers），通过 enableCssLayer 与 @layer 顺序控制，让 Tailwind 工具类能够正确覆盖 MUI 样式。技能文档涵盖 Tailwind v4 的层顺序设置（mui 置于 utilities 之前）、Next.js App Router 与 Pages Router 的配置方式、Vite 等 SPA 场景下 StyledEngineProvider 的用法，以及 MUI 组件上 className 与 slotProps.*.className 的使用区别。同时记录了将 --mui-* 变量映射到 Tailwind @theme 的方法，以及 VS Code IntelliSense 的 classRegex 配置。对于仍在使用 Tailwind v3 的项目，文档也说明了 preflight、important、injectFirst 和 portals 等兼容性处理方式。SKILL.md 为入口文件，AGENTS.md 为完整指南，reference.md 提供可复制的代码片段。
i18n Frontend Implementer 是一个前端国际化（i18n）实现技能，用于为前端项目添加国际化基础设施。它支持使用 next-intl、react-i18next 或类似库进行集成，涵盖翻译管道搭建、可扩展的翻译键策略、日期/数字/货币格式化、复数规则处理以及语言切换器等内容。该技能提供从安装依赖、创建语言字典、配置 Provider、组织层级化翻译键，到格式化与语言切换的完整流程，并给出翻译结构示例与使用示例，帮助开发者系统化地完成前端多语言支持。
中文介绍正在整理，稍后补充。
面向 Vue 3 应用中 Pinia store 的 TypeScript 配置与常见类型问题排查技能，覆盖 storeToRefs 类型丢失、getter 循环引用类型错误以及 setup store 写法。适用于在 TypeScript 项目中使用或调试 Pinia 时参考。
shadcn/ui 是一套基于 Radix 基础组件与 Tailwind 样式的 React UI 组件开发模式，本资料介绍其 CLI 命令、CVA 变体、复合组件、asChild 多态渲染、data-slot 属性以及无障碍状态等具体实践，用于指导构建 UI 组件。
这是一个获奖风格的游戏主题落地页模板，使用 React 19、Vite、GSAP 和 Tailwind CSS 构建，包含滚动触发动画、几何过渡、3D 悬停效果和视频叙事。模板为纯静态站点，无后端，构建输出到 dist 目录，开发端口为 5173，可部署到 Vercel 或 Netlify。
structured-artifact 是一个用于创建结构化 HTML 制品、以解释和呈现信息的技能。它要求在制作前先确定内容呈现方式，再选择实现工具，并配合信息层级、交付、图表、图像与模型稿等相关技能使用。
中文介绍正在整理，稍后补充。
Remotion Studio 配置项生命周期规范：把每个面向 Studio 的配置项归类为“启动固定”或“可重载”，并确保所有消费者遵循同一生命周期，避免混用。用于修改或新增 Studio 配置项时确定其重载行为。
Next.js Core 是一套面向 App Router 开发的核心模式集合，主要覆盖 Server Components、Server Actions、路由处理器、数据获取与缓存策略等主题。其核心思路是默认使用 Server Components，仅在必要时添加 "use client"；数据变更通过 Server Actions 完成，并强调校验与授权、按标签或路径进行 revalidate；API 与 Webhook 使用路由处理器实现，并配合 loading 与 error 边界。资料同时列出若干反模式，例如在 useEffect 中获取初始数据、缓存或 revalidate 范围过宽、仅依赖客户端授权。该技能还提供 references 目录，涉及 server actions、fetching、caching、routing、auth、testing 等参考内容。
frontend-design-pro 是一个面向前端界面设计的技能，定位为“世界级创意前端工程师兼视觉总监”，目标是产出达到高价代理项目水准、可直接上线的界面。它要求每次设计先选定一种鲜明美学方向并彻底执行，可选风格包括极简瑞士风、新拟态、玻璃拟态、粗野主义、黏土拟态、极光/网格渐变、复古未来/赛博朋克、3D 超写实、鲜艳色块/极繁主义、暗色 OLED 奢华、有机/生物形态等，每种风格都给出核心关键词、配色思路与标志性效果。技能还规定了一系列硬性前端规则，例如禁用 Inter、Roboto、Arial、system-ui 等默认 AI 字体，改用有个性的字体，全面使用 CSS 自定义属性，强调单一主色加锐利点缀色，至少一个令人难忘的标志性细节，打破居中卡片网格，重视有节奏的动效，并满足 WCAG AA/AAA、焦点样式、语义化 HTML 与 prefers-reduced-motion。图像方面，它要求真实摄影只用 Unsplash、Pexels、Pixabay 的真实照片并给出以 .jpg/.png 结尾、带 ?w=1920&q=80 的直接链接和 SEO alt 文本；概念场景或插画则输出可直接粘贴的 Flux/Midjourney v6/Ideogram 提示词，并用指定标记包裹。最终交付生产级、可复制粘贴的代码，完全响应式且性能良好。
Angular 性能优化技能，聚焦图片优化、延迟加载、路由懒加载与 SSR。该技能在优化 Angular 应用性能、图片或懒加载时触发，提供 NgOptimizedImage、@defer、懒加载路由、SSR 与 Hydration 以及慢计算处理等实践指导，并给出对应代码示例与规则。