SuperAPI AI 工具集
合作ENAI 行业资讯收藏

Skill 广场

找到适合任务的 Agent Skill，阅读介绍并复制安装命令。

更新于 10-17 00:11

前端与建站

10,791 个结果

nextjs-pathname-id-fetch

该技能聚焦于 Next.js 中基于 URL 参数获取数据的模式，主要讲解如何创建动态路由（如 [id]、[slug]）并在服务端组件中访问路由参数。内容涵盖动态文件夹命名规则、Next.js 15+ 中 params 必须 await 的写法、服务端组件默认无需 'use client'、TypeScript 类型约束（禁止使用 any）以及多参数路由等常见变体。适用于产品详情页、博客文章页、后台资源详情页等需要根据 URL 标识符加载数据的场景。

前端与建站291 次安装

frontend-design

Frontend Design 是一个专注于前端界面设计方向的技能，定位为「前端设计专家」，用于创建具有鲜明辨识度、达到生产级水准的前端界面。它强调在编码之前先确立大胆的美学方向，从目的、调性、差异化三个角度进行设计思考，并围绕排版、色彩与主题、动效与交互、空间构图、背景与视觉细节等方面给出具体指导。该技能明确反对通用化的 AI 审美，例如滥用 Inter、Roboto、Arial 等字体、陈词滥调的紫色渐变、可预测的布局和缺乏语境特征的模板化设计。它同时给出实现哲学：极繁主义设计应配合繁复的代码、丰富的动画与效果，极简主义设计则应克制、精确，注重间距、排版与微妙细节。资料中提供了 CSS 变量定义配色、CSS 关键帧实现交错揭示动画等示例代码，并提到在 React 中可使用 Motion 库编排页面加载揭示与滚动触发交互。

前端与建站288 次安装

motion

Motion（包名 motion，前身为 framer-motion）是面向 React 的动画库，提供声明式 API，用较少代码实现复杂动画。它支持手势（拖拽、悬停、点击、平移、聚焦）、滚动动画（视口触发、滚动联动、视差）、布局动画（FLIP 技术、共享元素过渡）、弹簧物理、SVG（路径变形、线条绘制、属性动画）以及退出动画（AnimatePresence）。性能方面支持硬件加速与 ScrollTimeline API，包体积可按需优化：完整 motion 组件约 34 KB（压缩+gzip），LazyMotion + m 组件约 4.6 KB，useAnimate mini 约 2.3 KB，useAnimate hybrid 约 17 KB。依赖 React 18+ 或 React 19+，原生支持 TypeScript。适用于拖拽排序、滚动揭示、共享元素过渡、SVG 动画等场景；简单列表增删动画建议改用 auto-animate，3D 动画建议使用 Three.js 等专用库。

前端与建站288 次安装

wix-cli-embedded-script

这是 Wix CLI 的技能文档，用于在 Wix CLI 应用中创建嵌入式脚本（embedded script）扩展。嵌入式脚本是以 HTML 片段形式注入到 Wix 站点 DOM 的代码，可用于接入第三方服务、分析追踪、广告投放以及自定义客户端 JavaScript。技能涵盖脚本类型（ESSENTIAL、FUNCTIONAL、ANALYTICS、ADVERTISING）、注入位置（HEAD、BODY_START、BODY_END）、通过模板变量 {{parameterKey}} 实现动态参数、以及配套的 Dashboard 配置页实现方式。

前端与建站288 次安装

cloudinary-next

cloudinary-next 是一项面向开发者的技能，用于帮助构建、调试和审查通过 next-cloudinary 以及 Cloudinary Node SDK v2 集成 Cloudinary 的 Next.js 应用。它覆盖在 JSX 中渲染经过转换的 Cloudinary 图片、生成 Cloudinary URL 字符串、嵌入视频播放器、从浏览器上传、执行签名上传、从服务器上传、删除资源、构建图片或文字叠加层、生成 OG/社交分享图片，以及修复 TypeScript、环境变量、导入、运行时或上传错误等任务。该技能采用渐进式加载组织，先按用户目标分类，再加载对应的参考文件，并强调一系列不可协商的规则，例如使用 next-cloudinary 组件与 URL 辅助函数、仅在服务端使用 Cloudinary Node SDK v2、绝不向浏览器暴露 CLOUDINARY_API_SECRET、将上传组件和视频播放器置于客户端组件边界内、使用文档化的 prop 名称与事件名称等。

前端与建站287 次安装

specsfy-specialist-react-ui-components

用于在 React 项目中从版本化 TSX 示例目录中挑选、组合并适配组件库的技能，基于 Tailwind CSS，覆盖落地页、营销、导航、表单、数据、反馈与排版等界面场景。该技能把资产文件当作可复制参考而非运行时依赖，先由 UI 设计技能确定层级、构图与密度，再到目录中挑选候选资产，并按项目已有的 tokens、组件、路由、数据和约定进行适配，同时保留语义、键盘、焦点、aria-*、dark mode 与断点。适用于需要从 231 个 TSX 示例中构建界面的情况，不适用于无视觉工作的状态、effects 或并发修复。

前端与建站287 次安装

iphone-duo-react-native

该技能面向 React Native 与 Expo 开发者，讲解如何让应用适配 iPhone Duo（苹果首款折叠屏 iPhone）。核心内容包括：处理非对称安全区域内边距（左右内边距因折叠姿态和分屏位置而不同）、在每次渲染时响应窗口尺寸变化、用宽度断点替代设备或方向判断，以及为内屏提供双栏或主从布局。资料指出 React Native 目前没有折叠或铰链 API，也没有正式支持 iPhone Duo 的版本，因此分为两层方案：第一层用 react-native-safe-area-context 的 useSafeAreaInsets() 和 useWindowDimensions() 等现有库即可完成；第二层需要编写原生模块（TurboModule 或旧式原生模块），通过 Swift 桥接 iOS 27.1 的 reservedRegions、UIHingeInteraction 和 traitCollection 尺寸类等 API，并用 NativeEventEmitter 推送连续事件。Expo 项目需配置插件和本地原生模块，无法在 Expo Go 中运行。

前端与建站286 次安装

vercel-react-best-practices

Vercel React Best Practices 是由 Vercel Engineering 维护的 React 与 Next.js 性能优化指南技能，用于编写、审查或重构 React/Next.js 代码时参考。该技能包含按影响程度排序的 8 大类共 70 条规则，覆盖消除异步瀑布、包体积优化、服务端性能、客户端数据获取、重渲染优化、渲染性能、JavaScript 性能以及高级模式。每条规则以独立文件形式提供，包含问题说明、错误代码示例与正确代码示例，可用于指导自动化重构与代码生成。

前端与建站283 次安装

nativewind

NativeWind 是一个将 Tailwind CSS 编译到 React Native 的工具，让开发者可以用 className 为 React Native 组件设置样式，并在 Web 与原生平台之间复用同一套 Tailwind 样式表。该技能基于 NativeWind v5（Tailwind CSS v4）生成，涵盖安装配置、CSS-first 配置、单位与函数指令、样式优先级、组件样式、平台与响应式、状态与暗色模式、主题与颜色、API（withNativewind、styled、vars 运行时变量、cssInterop/remapProps 旧 API）、v4 到 v5 迁移以及最佳实践等主题。

前端与建站283 次安装

dashboard

Dashboard 是一个用于生成单屏管理/分析仪表盘的技能。它输出一个自包含的 HTML 文件，包含固定左侧边栏、带用户与搜索的顶栏，以及由 KPI 卡片和一两个图表组成的主网格。适用于需要快速产出后台数据概览界面的场景。该技能会读取当前生效的 DESIGN.md，颜色、字体、间距和组件样式均来自其中定义的设计令牌，不自行发明新令牌。图表仅使用内联 SVG 绘制，不依赖任何 JS 图表库。

前端与建站283 次安装

imagegen-frontend-web

该技能面向网站与落地页的前端视觉方向参考生成，强调以“艺术指导级”的图片产出替代通用 AI 插画。其核心是分节出图：每个页面区块生成一张独立的横向图片，绝不把多个区块合并成一张长图或拼贴。若用户未说明区块数量，落地页默认 6 节、完整网站模板默认 8 节，并按“Section X of N: 区块名”逐一标注输出。技能内置一整套视觉方向参数基线，包括设计变化度 8、视觉密度 4、艺术指导 8、可实施清晰度 9、图像使用优先级 9、间距充裕度 8、布局变化度 8、转化纪律 8，用于在不过度拥挤的前提下产出有层次、可读、便于前端实现的设计稿。同时提供组合式变化机制，涵盖主题范式、背景特征、字体气质、首屏结构、区块系统、标志性组件、动效暗示、构图锚点、背景模式、CTA 形态、首屏尺度、叙事主线与“第二眼”细节等维度，要求选定组合并一致执行，而非堆砌。针对首屏特别强调避免默认的左文右图套路，优先考虑居中叠加、左下/右下文字压图、顶部左引导、图像即画布、偏网格编辑式等构图。适用场景包括落地页、营销站、产品页、作品集与整站模板的设计参考出图；限制在于它只产出视觉参考图，不涉及具体代码实现、收费与价格等信息，资料中未提供。

前端与建站283 次安装

react

这是一个基于 Vercel Engineering 指南的 React 性能优化与最佳实践技能，框架无关，适用于 Next.js、Remix、Vite 等任意 React 项目。它把优化规则按影响度分为七个优先级类别：异步瀑布消除、包体积优化、重渲染优化、渲染性能、客户端数据与事件、JavaScript 性能、高级模式，每条规则都配有前缀标识（如 async-、bundle-、rerender-）。技能在编写或修改 React 组件（.tsx、.jsx）、处理状态管理、hooks 与重渲染优化、异步数据获取等场景下使用。规则细节与代码示例放在 references/ 目录，Next.js/SSR 专属规则则参考原始 Vercel 指南。

前端与建站282 次安装