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

Skill 广场

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

更新于 10-16 00:02

前端与建站

9,235 个结果

motion

Motion 是一个面向网页动画的 AI 技能（skill），前身为 Framer Motion，同时覆盖 Motion 库与纯 CSS 动画。它提供动画最佳实践建议，支持 vanilla JS、React、Vue、Base UI 和 Radix 等平台，并说明何时选用 Motion、何时选用纯 CSS。该技能还支持文档与示例检索、Motion UI 组件搜索、CSS 弹簧与弹跳缓动生成、过渡曲线预览，以及 MotionScore 性能审计（检测卡顿、运行时审计、代码片段评分、URL 性能评级）。升级方面，可通过文档搜索处理从 framer-motion 迁移到 Motion 12 等任务。部分能力分层：最佳实践、搜索和缓动生成无需账号；保存过渡需免费 Motion 账号；MotionScore 审计、示例与 Motion UI 源码、文档 Motion+ 章节和可视化过渡编辑器属于 Motion+ 付费能力，分 Personal 一次性授权与 Business 按席位年费两种方案。Motion+ 还提供 Carousel、Ticker、AnimateNumber、Typewriter、ScrambleText、Cursor 和 splitText 等组件，不在免费 motion 包内。

前端与建站470 次安装

data-table-filters

data-table-filters 是一个基于 shadcn 注册表分发的 React 数据表格系统，用于构建可筛选、可排序、支持无限滚动与虚拟化的数据表格。它以核心块（data-table）为基础，提供表格引擎、状态存储、四种筛选类型（复选框、输入框、滑块、时间范围）以及内存适配器，并可通过可选块扩展命令面板、单元格渲染器、侧边详情面板、URL/客户端状态适配器、声明式 schema、Drizzle ORM 服务端助手、React Query 集成、AI 自然语言筛选、MCP 服务端点、行与批量操作、无头远程表格和时间线图表等能力。所有块通过 npx shadcn@latest add 命令安装，CLI 会自动处理依赖、路径重写和 CSS 变量注入。

前端与建站470 次安装

inertia-rails-forms

Inertia Rails Forms 是面向 Inertia.js + Rails 的全栈表单处理技能，覆盖创建、编辑、删除、多步向导和文件上传等表单场景，并处理验证错误与上传进度。它指导开发者优先使用 Inertia 的 <Form> 组件，仅在多步向导、动态增删字段或表单数据需与兄弟组件共享时使用 useForm hook，同时明确禁止使用 react-hook-form 等第三方表单库。内容包含 React 示例，并提供 Vue 3 与 Svelte 的对应参考文件。

前端与建站467 次安装

cc-skill-frontend-patterns

这是一个面向 React、Next.js 前端开发的知识型技能，汇总了现代前端开发中的常见模式与最佳实践。内容涵盖组件模式（组合优于继承、复合组件、Render Props）、自定义 Hooks（状态管理、异步数据获取、防抖）、状态管理模式（Context + Reducer）、性能优化（memo 化、代码分割与懒加载、长列表虚拟化）、表单处理（受控表单与校验）、错误边界、动画（Framer Motion）以及无障碍（键盘导航、焦点管理）等主题，并配有 TypeScript/React 代码示例。该技能适用于在明确匹配上述范围的任务中参考使用，不替代针对具体环境的验证、测试或专家评审。

前端与建站467 次安装

optimize

该技能用于诊断并修复 Web UI 的性能问题，覆盖加载速度、渲染、动画、图片与打包体积等方面。当用户提到页面慢、卡顿、掉帧或性能相关问题时可以调用。它先做性能测量与瓶颈定位，再给出针对性优化策略：包括图片格式与响应式处理、JavaScript 代码分割与懒加载、CSS 关键样式提取、字体子集化、容器查询、渲染与动画的 GPU 加速、网络请求优化以及 Core Web Vitals（LCP、INP、CLS）专项优化，最后通过前后对比验证改进效果。适合前端开发者、性能工程师在优化真实项目时使用。

前端与建站466 次安装

extract

stardust:extract 是 stardust 工作流中的一个描述性提取子命令，用于爬取现有网站并生成当前状态的快照。它以给定 URL 为起点，在限定页数上限内多页爬取站点，逐页用 Playwright 真实浏览器渲染并解析，提取品牌表面与页面结构信息，输出到 stardust/current/ 目录。产出内容包括 PRODUCT.md、DESIGN.md、DESIGN.json、逐页清单（pages/<slug>.json 及渲染后的 HTML）、截图、字体与媒体资源、_brand-extraction.json、_crawl-log.json 等，并更新 stardust/state.json。该技能只做描述：不发明方向、不做评判、不修改线上站点，后续子命令会消费这些结果来判断站点应当变成什么。支持 --cap、--all、--pages、--refresh、--single、--wait、--concurrency、--brand-source、--design-source、--prep、--dynamics 等可选参数控制范围与行为；默认爬取 5 页，可提升上限或全量爬取。爬取前需先完成主技能的 setup 流程，并确认 Playwright 可被模块导入（仅 npx 探测不够）。每页需满足实时渲染证据契约，否则视为失败并记录。资料未提供收费与价格信息。

前端与建站464 次安装

attention-management

这是一个关于动画注意力管理的技能文档，源自 dylantarre/animation-principles 技能集。它针对界面中错误元素吸引注意力、重要内容被忽略、视觉层级被动画破坏等问题，借助迪士尼动画原则（Staging、Timing、Exaggeration、Anticipation、Appeal）来诊断并修复注意力分配问题。文档提供了按原则分类的诊断方法、快速修复清单、排查检查表，以及用 CSS 动画错峰（stagger）和弱化背景元素来建立视觉层级的代码示例。适用于前端与界面动效设计中需要引导用户视线、突出主 CTA、保持信息层级清晰的场景。

前端与建站464 次安装

frontend-design-ultimate

Frontend Design Ultimate 是一个用于从纯文本需求生成独特、生产级静态网站的技能。它无需设计稿或 Figma，直接根据描述产出大胆、令人印象深刻的界面。技术栈为 React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion，输出形式可选 Vite（静态 HTML）或 Next.js（可部署至 Vercel）。技能强调先确定鲜明的美学方向（如极简、复古未来、编辑杂志风等），并给出排版、配色、动效、空间构图、背景氛围与移动端适配的规范，同时提供初始化脚本、项目结构、siteConfig 内容配置模式以及上线前检查清单。

前端与建站460 次安装

angular-development

这是一个面向 Angular 框架开发的技能，覆盖组件、指令、服务、依赖注入、路由和响应式编程等核心内容。资料以示例代码形式讲解了现代 Angular 开发方式：使用独立组件（standalone component）构建界面，用 inject() 函数替代构造函数注入服务，通过 Signals（signal、computed、effect）实现细粒度响应式状态管理，并配合 RxJS 处理异步数据。资料还展示了路由懒加载（loadComponent）、函数式路由守卫（CanActivateFn）、带参数路由与 switchMap 用法、基于 ReactiveFormsModule 的响应式表单与内置校验、自定义校验器，以及结构型指令（如自定义重复指令）的实现。该技能适用于需要使用 Angular 构建、维护或迁移应用的开发者，帮助其采用较新的模式和最佳实践。

前端与建站460 次安装

tailwind-css

Tailwind CSS 是一个实用优先（Utility-First）的 CSS 框架，用于快速构建自定义用户界面。它通过单一职责的工具类直接在 HTML/JSX 中组合样式，内置响应式断点、暗色模式、状态变体与设计系统约束，并借助 JIT 编译只生成实际使用的 CSS。本技能覆盖核心工具类、响应式设计、暗色模式、主题定制、组件抽取与生产优化，适用于 React、Vue、Svelte、Next.js 等框架的现代 Web 应用开发。

前端与建站459 次安装

direct

direct 是 stardust 体系下用于为现有网站设定重设计方向（redesign direction）的技能。它把用户的自由文本重设计意图解析为完整的目标规范：在项目根目录生成 PRODUCT.md 和 DESIGN.md（impeccable 格式）、DESIGN.json 附带分歧审计记录（divergence audit trail），以及 stardust/direction.md 记录完整推理过程。direct 产出的是规范，供下游的 prototype 与 migrate 子命令使用；它本身不写原型、不迁移页面。它支持多种模式：品牌忠实（Mode A，默认在品牌信号足够强时启用）、品牌邻近精修（Mode A+）、以及通过 --rebrand 触发的完全重品牌。它还支持 --re-direct 替换现有方向、--prep 迁移准备模式、--add-variant 添加变体。运行前需要 stardust 主技能的 setup 与一次成功的 extract，依赖状态文件和品牌抽取结果。该工具强调对品牌信号的分类（signal-strong / signal-thin / signal-absent）与对零移动（zero-movement）短语的识别（此类短语应转交 replica 而非 direct）。

前端与建站458 次安装

react-router

TanStack Router 的 React 绑定包（@tanstack/react-router），为 React 应用提供类型安全的路由能力。它提供 RouterProvider、Link、Outlet、Navigate、Await、CatchBoundary 等组件，以及 useRouter、useRouterState、useNavigate、useSearch、useParams、useLoaderData、useMatch、useMatches、useLocation、useBlocker、useCanGoBack、useLinkProps、useMatchRoute 等 Hook。该技能基于 router-core，强调类型完全推断、客户端优先（loader 默认在客户端运行），并明确区别于 react-router-dom/react-router。文档包含基于 Vite 的文件式路由完整搭建步骤、Hook 与组件参考、React 专属模式（createLink 自定义链接、跨路由复用组件、认证 Provider 包裹 RouterProvider）以及常见错误说明。

前端与建站458 次安装

migrate

migrate 是 stardust 流程中的最终阶段（stardust:migrate），用于将 direct 编写的目标规范（DESIGN）、prototype --prep 编写的视觉 canon，以及 prepare-migration 期间提取的品牌模块目录，应用到清单中的每一个页面，最终在 stardust/migrated/ 下产出自包含、可部署的静态 HTML 站点。它按页面、增量、幂等地执行：输出与平台无关的 HTML，下游转换（AEM EDS、CMS、框架）由消费 migrated/、DESIGN.json 及每页 _meta.json 边车文件的独立插件负责。

前端与建站456 次安装

tailwind-responsive-ui

这是一个面向 Tailwind CSS 应用的响应式 UI 改造技能，基于 Adam Wathan 与 Steve Schoger 的《Refactoring UI》以及现代响应式设计模式整理而成。它包含 8 个类别、共 49 条规则，并按影响程度划分优先级，用于指导自动化重构与代码生成。适用场景包括：让现有界面适配不同屏幕尺寸、用 Tailwind CSS 构建新的响应式布局、将仅支持桌面的界面重构为支持移动端、审查响应式代码中的断点/间距/排版问题，以及为触屏设备改造导航、表单和数据表格。规则类别按优先级依次为：断点策略（CRITICAL，前缀 bp-）、布局转换（CRITICAL，前缀 layout-）、响应式间距（HIGH，前缀 rspac-）、流式排版（HIGH，前缀 fluid-）、导航模式（MEDIUM-HIGH，前缀 nav-）、触控与交互（MEDIUM，前缀 touch-）、响应式媒体（MEDIUM，前缀 rmedia-）、数据适配（LOW-MEDIUM，前缀 data-）。

前端与建站456 次安装

tailwind-ui-refactor

这是一个面向 Tailwind CSS 应用的 UI 重构技能，基于 Adam Wathan 与 Steve Schoger 的《Refactoring UI》理念实现。它包含 9 个类别、共 52 条规则，并按设计影响力划分优先级，用于指导自动化重构与代码生成。技能采用 Tailwind CSS v4 语法，并在语法存在差异时提供 v3 说明。其核心原则是先思考再样式化：在应用任何视觉规则前，先理解 UI 的用途、判断对用户重要的内容、移除多余元素；「设计意图」类别（优先级 1）必须先于任何样式改动被考虑。适用时机包括：重构现有 Tailwind CSS 组件、使用 Tailwind 工具类编写新 UI、检查视觉层级与间距问题、在没有设计师的情况下提升设计质量、修复无障碍对比度问题。规则类别按优先级为：设计意图（关键）、视觉层级（关键）、布局与间距（关键）、排版（高）、色彩系统（高）、深度与阴影（中）、边框与分隔（中）、图片与内容（低-中）、打磨与细节（低）。技能范围覆盖布局、层级、间距、色彩与打磨，但不覆盖字体选择与搭配、动画与动效、创意方向、空间构图，建议与设计思维或前端设计技能配合使用。

前端与建站456 次安装

react-useeffect

React useEffect 最佳实践指南，源自官方文档。用于编写或审查 useEffect、使用 useState 处理派生值、数据获取或状态同步等场景。核心观点是“你可能并不需要 Effect”：Effect 是 React 的逃生舱，用于与外部系统同步；若没有涉及外部系统，通常就不应使用 Effect。资料以快速参考表和决策树的形式，对比了派生状态、昂贵计算、属性变化时重置状态、用户事件响应、通知父组件、数据获取等常见情况下的错误做法与正确做法，并说明何时确实需要 Effect（如与外部系统同步、订阅外部存储、分析日志、带清理的数据获取），何时不需要 Effect（如渲染时的数据转换、处理用户事件、派生状态、链式状态更新）。

前端与建站454 次安装

shadcn-layouts

shadcn-layouts 是一项用于生成 shadcn/Tailwind 布局的 Agent 技能，通过应用 CSS 布局心智模型，帮助生成能一次正确渲染的 shadcn/Tailwind 组件。该技能适用于创建 shadcn/Tailwind 布局、调试高度与滚动问题、修复 flex/grid 问题、搭建整页应用外壳等场景，不适用于编写后端代码、非 Tailwind CSS 项目以及设计工作（设计应先使用 frontend-design）。其核心原则是：CSS 布局由约束驱动，高度从显式的祖先元素向下传递，宽度由内容向上撑开。技能提供了多个关键心智模型，包括高度继承链、Flex 溢出问题、Grid 父子分离、滚动容器尺寸，并给出诊断状态与常见布局模式。

前端与建站452 次安装

language-detector-api

该技能用于在 JavaScript 或 TypeScript 网页应用中实现和调试浏览器 Language Detector API 集成。它提供一套分步流程：先定位浏览器入口与前端边界，再确认 API 可用性并选择集成形态，随后实现带守卫的会话封装，接入用户体验与降级逻辑，最后进行验证。技能涵盖安全上下文检查、权限策略、availability() 能力检测、模型下载进度监控、AbortController 取消、会话销毁、置信度处理与 und 结果等要点，并附带参考文档、示例、兼容性与故障排查资料，以及用于盘点前端目标的 Node 脚本。

前端与建站452 次安装