SuperAPI AI 工具集找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-16 00:02
9,288 个结果
React useEffect 最佳实践指南，源自官方文档。用于编写或审查 useEffect、使用 useState 处理派生值、数据获取或状态同步等场景。核心观点是“你可能并不需要 Effect”：Effect 是 React 的逃生舱，用于与外部系统同步；若没有涉及外部系统，通常就不应使用 Effect。资料以快速参考表和决策树的形式，对比了派生状态、昂贵计算、属性变化时重置状态、用户事件响应、通知父组件、数据获取等常见情况下的错误做法与正确做法，并说明何时确实需要 Effect（如与外部系统同步、订阅外部存储、分析日志、带清理的数据获取），何时不需要 Effect（如渲染时的数据转换、处理用户事件、派生状态、链式状态更新）。
shadcn-layouts 是一项用于生成 shadcn/Tailwind 布局的 Agent 技能，通过应用 CSS 布局心智模型，帮助生成能一次正确渲染的 shadcn/Tailwind 组件。该技能适用于创建 shadcn/Tailwind 布局、调试高度与滚动问题、修复 flex/grid 问题、搭建整页应用外壳等场景，不适用于编写后端代码、非 Tailwind CSS 项目以及设计工作（设计应先使用 frontend-design）。其核心原则是：CSS 布局由约束驱动，高度从显式的祖先元素向下传递，宽度由内容向上撑开。技能提供了多个关键心智模型，包括高度继承链、Flex 溢出问题、Grid 父子分离、滚动容器尺寸，并给出诊断状态与常见布局模式。
该技能用于在 JavaScript 或 TypeScript 网页应用中实现和调试浏览器 Language Detector API 集成。它提供一套分步流程：先定位浏览器入口与前端边界，再确认 API 可用性并选择集成形态，随后实现带守卫的会话封装，接入用户体验与降级逻辑，最后进行验证。技能涵盖安全上下文检查、权限策略、availability() 能力检测、模型下载进度监控、AbortController 取消、会话销毁、置信度处理与 und 结果等要点，并附带参考文档、示例、兼容性与故障排查资料，以及用于盘点前端目标的 Node 脚本。
这是一个关于现代 React 状态管理的技能指南，覆盖从本地组件状态到全局状态与服务器状态同步的多种模式。它帮助开发者在 Redux Toolkit、Zustand、Jotai 之间做选择，并用 React Query 或 SWR 管理服务器状态。内容包含状态分类（本地、全局、服务器、URL、表单状态）、选型标准、Zustand、Redux Toolkit、Jotai、React Query 的代码示例，以及客户端与服务器状态结合的实践。还提供最佳实践（就近放置状态、使用选择器、数据规范化、类型化、关注点分离）和从旧版 Redux 迁移到 RTK 的指南。适用于搭建全局状态、选择状态库、实现乐观更新、调试状态问题等场景。
该技能介绍如何为 Inertia Rails 项目配置 TypeScript 类型安全，覆盖 React、Vue 和 Svelte 三种前端框架。核心手段是通过 globals.d.ts 中的 InertiaConfig 模块增强，为共享 props、flash 和 errors 提供全局类型定义。技能明确要求共享 props 类型只在全局定义一次，页面组件只声明自身专属 props，并区分了 usePage() 返回的 props、flash 等字段的访问方式。内容包含正确的属性名约定（sharedPageProps、flashDataType、errorValueType）、推荐的 auth 命名空间约定、React 下 type 与 interface 的差异导致 TS2344 的原因，以及常见 TypeScript 报错的排查思路，并提及与 Typelizer 自动生成类型方案的配合方式。
用于选择性引入 Laravel 官方 starter kit（vue/react/svelte/livewire）上游改进的 Agent 技能。它按功能逐项对比用户仓库与上游现状，让用户自行决定是否采纳，而不做版本升级或自动合并。
这是一个用于脚手架化 React 和 React Native 组件的技能，专注于生成生产就绪、可访问且具备良好性能的组件。它会根据用户需求，自动生成完整的组件实现，包括 TypeScript 类型定义、样式方案、测试用例、Storybook 文档以及统一的索引导出文件，遵循现代 React 开发最佳实践。适用于需要快速搭建标准化组件结构、确保类型安全、可访问性和测试覆盖率的开发流程，特别适合团队统一组件架构规范，但不适合与 React/React Native 组件脚手架无关的任务。
frontend-design 是一个面向 Web UI 的前端设计技能，主打“反套路”（anti-slop）的界面设计，适用于落地页、作品集、营销/产品站点以及界面改版。它会先阅读设计需求简报，推断合适的设计方向，再据此选择设计系统、配置设计变量并生成界面。技能内置风格变体文件（极简、粗野主义、改版）以及 UX 与无障碍审计脚本，并给出字体、配色、布局、动效、图标、响应式等一整套设计工程规范。
wp-block-themes 是 Automattic 的 agent-skills 仓库中的一个技能，用于开发 WordPress 区块主题。它覆盖 theme.json 的全局设置与样式、模板与模板部件、区块图案（patterns）、样式变体（style variations）以及站点编辑器的相关工作。该技能提供了一套从项目定位、主题识别到修改与验证的流程，并附带调试指南，帮助解决“样式不生效”“编辑器未反映 theme.json”等常见问题。
中文介绍正在整理，稍后补充。
该技能用于排查动画实现中的问题，以迪士尼动画原则作为诊断框架。当动画完全不播放、播放效果异常、开发环境正常但生产环境出错、跨浏览器表现不一致、触发时机错误或出现闪烁等视觉故障时，可借助本技能定位原因。它按时间节奏、关键帧、舞台呈现、绘制质量、跟随动作等原则分类给出调试思路，并列出常见症状与对应修复方式，如属性不可动画、缺少初始状态、填充模式错误、布局抖动等。同时提供动画事件日志、计算样式检查、动画重置等代码模式，以及 DevTools 动画面板、性能面板等排查技巧和一份故障排查清单。
frontend-design 是一个用于创建独特、生产级前端界面的技能，旨在帮助开发者避免千篇一律的“AI 味”设计。它适用于构建 Web 组件、页面或应用时，引导从设计思考到代码实现的完整流程。技能强调在编码前明确用途、受众、技术约束与差异化亮点，并选择大胆的美学方向（如极简、复古未来、编辑杂志风、粗野主义等）。实现层面要求产出可运行、视觉出众且细节精致的代码，涵盖排版、配色、动效、空间构图与背景纹理等维度。技能还提供常见设计问题排查与验证清单，覆盖视觉质量、响应式、无障碍、性能、代码质量与浏览器兼容性，并给出对比度检查、键盘导航、性能录制等测试方法。
Translator API 技能用于在 JavaScript 或 TypeScript 浏览器 Web 应用中实现和调试浏览器 Translator API 集成。它指导开发者识别前端集成入口、确认 API 可用性并选择合适的会话形态（如固定语言对的 Translator.create()、带下载进度监控的 create()、增量输出的 translateStreaming()、以及用于配额预算的 measureInputUsage()），实现带守卫的翻译会话，处理支持检测、可用性检查、用户激活、取消与销毁，并设计缺失 API、不安全上下文、被阻止的框架、不支持语言对、模型下载中、就绪、翻译进行中和已中止等状态的 UX 与降级方案。该技能仅适用于浏览器窗口内的设备端翻译，不适用于 Worker、服务端或云端批量翻译场景。
Frontend Routing 是一个前端客户端路由实现技能，用于在单页应用中构建多页面导航。它覆盖 React Router、Vue Router 和 Angular Router 三大主流路由方案，支持导航、懒加载、受保护路由（路由守卫）以及基于 URL 的状态管理。适用于需要多页面导航、URL 状态管理、受保护/守卫路由、组件懒加载和查询参数处理的场景。技能提供最小可运行示例（以 React Router v6 为例，包含 BrowserRouter、Routes、Route、Navigate、React.lazy 懒加载组件以及 ProtectedRoute 受保护路由包装器），并在 references/ 目录下提供 React Router v6、Vue Router 4、Angular Routing、查询参数处理、路由过渡效果等详细参考指南。最佳实践方面强调遵循既有模式与约定、编写整洁可维护的代码、添加适当文档、部署前充分测试，同时避免跳过测试或验证、忽略错误处理、硬编码配置值。
LinkFox 的亚马逊商品详情查询技能，通过 ASIN 获取标题、图片、五点描述、规格参数、A+ 内容、价格、评分评论、变体等结构化 Listing 数据，支持 22 个亚马逊站点与批量查询，可用于竞品对比与 Listing 分析。
该技能用于搭建专业文档网站，支持 Docusaurus、MkDocs、VitePress、GitBook 等主流静态站点生成器。适用于创建文档站点、API 文档门户、产品文档站、技术文档中心、静态站点生成、GitHub Pages 部署以及多版本文档等场景。技能内容涵盖安装、项目结构、配置、侧边栏配置、版本管理与部署等参考指南，并给出文档站点搭建的最佳实践，包括统一导航结构、启用搜索、添加编辑链接、版本选择器、代码高亮、暗色模式、图片优化、分析统计、响应式设计、面包屑、目录以及移动端测试等建议。
shadcn-ui Expert 是一个面向 React 组件开发的技能，帮助开发者使用 shadcn-ui、Tailwind CSS 和 Radix UI 构建高质量、可访问的界面。它覆盖组件选择、安装、实现、定制与最佳实践，适用于构建表单、布局、对话框、表格等各类 UI。技能提供 CLI 安装命令、组件分类指南、常见实现模式（如带校验的表单、对话框）、样式与主题定制方法，以及组合优先、类型安全、内置可访问性等实践建议，并包含针对 Next.js、Vite、Remix 等框架的说明与常见问题排查。
MapKit for SwiftUI 的 API 参考技能，提供地图视图、Marker、Annotation、相机位置与地图要素等本地文档，面向 iOS 26+ 的 SwiftUI 地图开发。
为 AlphaGenome Atlas 网站构造与校验深度链接的脚本工具，支持单变异、基因组区间、候选变异表格及 Ref/Alt 轨迹预测链接生成，并处理查询参数、过滤与布局配置。
React 19 组件与 Hooks 最佳实践技能，提供覆盖并发渲染、服务端组件、Actions 与表单、数据获取、状态管理、记忆化与性能、副作用与事件、组件模式等 8 大类共 44 条规则的性能优化指南，按影响程度从关键到渐进排序，并涵盖 React 19.3 的 <ViewTransition>、Fragment refs 与 Server Components 中直接使用 Context Provider 等稳定特性。
weapp-tailwindcss 是一个用于在小程序、Web、React Native、ReactLynx 等多端环境中使用 Tailwind CSS 的工具链。该 skill 本身是一个任务路由与安全基线入口：它先识别任务类型、框架、构建器、目标端和当前版本，再把泛化请求分派给对应的专用 skill（如接入配置、迁移升级、排障、运行时、自定义构建、React Native、Lynx 等）。当专用 skill 未安装时，它提供不会破坏当前 v5 构建边界的最小兜底方案，并给出安全基线与需要补充的信息，而不猜测框架配置。当前文档与主线只维护 Tailwind CSS 4。
SvelteKit 是 Svelte 的官方全栈框架，提供基于文件的路由、服务端渲染（SSR）、静态站点生成（SSG）、表单处理与渐进增强，以及面向各类平台的部署适配器。它支持在 src/routes/ 目录下通过文件命名自动生成路由，提供类型安全的 load 函数（+page.ts、+page.server.ts）用于数据获取，支持表单 actions、API 路由（+server.ts）、hooks 中间件、嵌套布局与布局分组。项目默认 TypeScript 优先，可从 $types 获得生成的类型。安装方式为 npm create svelte@latest my-app，随后进入目录安装依赖并运行开发服务器。适用于构建全栈 Web 应用、静态站点、SPA 以及需要服务端逻辑与多平台部署的 Svelte 项目。
rspeedy-bundle-size 是一个用于分析和缩减 rspeedy/Lynx（ReactLynx）应用包体积的技能，专注于 .lynx.bundle 的字节大小，而非运行时性能、类型或 CI。它采用“先测量、后优化”的工作流：先用 rsdoctor 或 stats.json 获取真实的按模块体积分解，再把体积归类到媒体资源、后台线程 JS、主线程 JS 三个层面，然后按投资回报率依次处理。技能强调不要凭猜测判断体积来源，必须追踪真实模块图，并提供了跨项目源码级分诊脚本。适用于用户要求优化包体积、排查包为何过大、或决定 tree-shaking 是否值得的场景。
该技能用于构建结构良好的 Vue 3 应用，核心围绕 Composition API、组件组织与 TypeScript 类型安全。它提供可复用的组合式函数（composable）示例，如计数器、异步数据获取、表单处理，以及 Pinia 状态管理和组件目录组织参考。适用于大型 Vue 应用、组件库开发、可复用 hooks、复杂状态管理与性能优化等场景。资料同时给出最佳实践：遵循既定模式与约定、编写整洁可维护代码、补充文档、部署前充分测试；避免跳过测试与校验、忽略错误处理、硬编码配置值。