SuperAPI AI 工具集

Skill 广场

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

更新于 10-14 00:01

前端与建站

4,839 个结果

vercel-react-best-practices

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

前端与建站796,224 次安装

design-taste-frontend

design-taste-frontend 是 leonxlnx/taste-skill 提供的前端设计技能包,用于为落地页、作品集和网站改版生成界面代码。它强调“反 AI 模板感”,要求智能体在编码前先解读需求简报,判断页面类型、受众、品牌调性与参考信号,先给出一次“设计解读”,再据此推断三组核心旋钮:设计变化度、动效强度与视觉密度,并用这些变量驱动布局、字体、配色与动效决策。技能还提供需求到设计系统的对照表,指导何时使用官方设计系统包(如 Fluent UI、Material、Carbon、Polaris 等),并规定默认技术栈(React/Next.js、Tailwind CSS v4、Motion、next/font)、图标库优先级与禁用清单。它同时用大量“反默认”规则约束颜色、字体、留白和网格,明确说明适用于落地页、作品集与改版,不适用于仪表盘、数据表格与多步产品界面。

前端与建站601,769 次安装

gpt-taste

gpt-taste 是 leonxlnx/taste-skill 下的一个前端设计工程技能,定位为高端 UX/UI 与 GSAP 动效工程。它通过一套明确的约束与流程,抑制大模型在前端界面生成中的常见统计偏差,例如窄容器导致的多行巨型标题、Bento 网格中出现空白死格、使用廉价元标签(如 SECTION 01、QUESTION 05)、按钮文字不可见、以及反复使用左右对称布局等问题。技能要求输出以 AIDA 结构组织页面,包含导航、注意力(Hero)、兴趣(Bento)、欲望(GSAP 滚动)、行动(页脚/定价)等段落,并使用超大垂直间距使各段落形成独立的影院式章节。在实现上,它要求使用 Python 驱动的确定性伪随机选择,从 Hero 架构、字体栈、组件架构和 GSAP 范式中随机组合,以避免重复同一套 UI。动效方面要求使用真实的 GSAP 与 ScrollTrigger,实现悬停物理、滚动固定、图片缩放淡出、文字逐词显现、卡片堆叠等效果,并强制适配 prefers-reduced-motion。该技能同时规定了 Hero 的 2 至 3 行铁律、Bento 网格零空格、禁用表情符号和廉价元标签、使用 picsum.photos 占位图并施加高级 CSS 滤镜等规则。

前端与建站377,764 次安装

imagegen-frontend-web

imagegen-frontend-web 是来自 leonxlnx/taste-skill 的前端图像指导技能,用于生成偏高端风格、兼顾转化率的网站设计参考图。其核心输出规则是:每个区块单独生成一张横向图片,绝不把多个区块合并到同一张图,也不返回包含整页的单张长图。若用户未说明区块数量,会按默认值处理,例如“landing page”默认 6 个区块即 6 张图,“full website template”默认 8 个区块即 8 张图。该技能以 awwwards 级别图像艺术指导为目标,强调避免常见的 AI 图像惯性,例如居中暗色 hero、紫蓝色 AI 光晕、无意义漂浮色块、通用仪表盘卡片堆叠等。它内置一组全局默认参数,包括设计变化度、视觉密度、艺术指导强度、实现清晰度、图像使用优先级、留白宽松度、布局变化度与转化纪律,并可根据用户简述动态调整。技能还提供 hero 构图偏好、主题范式、背景特征、字体特征、区块系统、签名组件、动效暗示、背景模式、CTA 变化、hero 尺度、叙事主线、二次阅读时刻等组合式变化引擎,以保证产出具有艺术指导感、结构清晰且可直接作为前端参考。所有生成图像应清楚传达布局、区块层级、间距、字体尺度、视觉节奏、CTA 优先级、组件样式、图像处理与设计系统,便于开发者或编码模型据此实现。未提供该技能的具体收费、价格、平台支持范围或安装命令等信息。

前端与建站359,324 次安装

waapi

waapi 是 HyperFrames 的 Web Animations API 适配器,用于通过原生浏览器关键帧制作动画,无需依赖 GSAP。它适用于编写 element.animate() 动效、Animation currentTime 定位、document.getAnimations() 等场景。适配器会在合成初始化时同步创建动画,并在每次定位时调用 document.getAnimations(),将每个动画的 currentTime 设为 HyperFrames 的毫秒时间,然后暂停动画,使被定位的状态得以保持。使用时要求动画具有有限时长和迭代次数,使用 fill: "both",并在创建后暂停动画,避免使用回调或 Promise 处理渲染关键状态。适合轻量级 DOM 动效、由结构化数据生成的动画,以及可用关键帧、延迟和偏移表示的简单时间线。

前端与建站68,692 次安装

frontend-ui-engineering

Frontend UI Engineering 是一套用于构建生产级用户界面的前端工程技能,强调可访问性、性能与视觉完成度。它指导开发者创建看起来像由资深设计工程师打造、而非 AI 生成的界面,核心目标是遵循真实设计系统、实现正确的无障碍支持、采用合理的交互模式,避免通用的"AI 美学"(如紫色渐变、过度圆角、堆砌阴影、通用卡片网格、填充式占位文案等)。技能覆盖组件架构(文件共置、组合优于配置、组件职责单一、数据获取与展示分离)、状态管理选型(本地状态、提升状态、Context、URL 状态、服务端状态、全局 store)、设计系统遵循(间距尺度、字体层级、语义化颜色 token)、无障碍标准(WCAG 2.1 AA 级别的键盘导航、ARIA 标签、焦点管理、有意义的空态与错误态)、响应式设计(移动优先,320px/768px/1024px/1440px 断点)以及加载与过渡(骨架屏、乐观更新)。同时提供验证清单,包括控制台无错误、键盘可访问、屏幕阅读器可读、响应式正常、各类状态处理、符合设计系统等。适用于构建或修改用户界面与页面、创建组件、实现响应式布局、添加交互或状态管理、修复视觉与 UX 问题等场景。该技能不涉及具体收费、平台信息。

前端与建站56,624 次安装

stitch-loop

stitch-loop 是一个用于指导 AI 智能体使用 Stitch 迭代式构建网站的自主循环技能。它采用“接力棒”(baton)系统:每轮迭代读取 .stitch/next-prompt.md 中的当前任务,通过 Stitch MCP 工具生成页面,将该页面集成到站点结构中,并为下一轮迭代写好新的任务文件,从而实现持续、自主的网站开发。该技能依赖 Stitch MCP 服务器、Stitch 项目以及 .stitch/DESIGN.md 和 .stitch/SITE.md 两个上下文文件,可选使用 Chrome DevTools MCP 进行视觉验证。它适合需要多页站点、并希望让智能体按既定设计系统与站点路线图自动逐页推进开发的场景。

前端与建站55,381 次安装

typescript-react-patterns

typescript-react-patterns 是一套面向 React 开发的 TypeScript 最佳实践规则集,版本 2.0.0,采用 MIT 许可。它包含 33 条规则,覆盖 7 个类别:组件类型标注(Component Typing)、Hook 类型标注(Hook Typing)、事件处理(Event Handling)、Ref 类型标注(Ref Typing)、泛型组件(Generic Components)、Context 与状态(Context & State)、工具类型(Utility Types)。规则按优先级划分影响等级:组件类型标注与 Hook 类型标注为 CRITICAL,事件处理与 Ref 类型标注为 HIGH,泛型组件与 Context 与状态为 MEDIUM,工具类型为 LOW。每条规则带有前缀标识,如 comp-、hook-、event-、ref-、generic-、ctx-、util-。该技能适用于在编写带类型的 React 组件、Hooks、事件、Refs 或泛型组件时提供参考,也可用于排查 React 代码中的 TypeScript 错误。规则内容以独立 Markdown 文件组织(如 rules/comp-props-interface.md),并汇总在 AGENTS.md 中。

前端与建站997 次安装

sf-industry-commoncore-flexcard

该技能是面向 Salesforce Industries 的 OmniStudio FlexCard 创建与验证工具。它可生成可直接投入生产使用的 FlexCard 定义,用于展示一眼可见的信息卡片,支持声明式数据绑定、Integration Procedure 数据源、条件渲染和符合 SLDS 的样式,并通过 7 个维度共 130 分的评分标准进行验证。适用于构建卡片式 UI、配置数据源字段映射、生成多数据状态测试以及产出可部署文档。

前端与建站978 次安装