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

Skill 广场

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

更新于 10-28 00:17

前端与建站

11,240 个结果

vue

该技能是一套针对 Vue 3 的编码规范与最佳实践集合，覆盖组合式 API、单文件组件（SFC）结构、响应式系统、可组合函数以及 TypeScript 集成等主题。其核心理念是：组合式 API 与 <script setup> 为默认写法，优先使用 ref() 而非 reactive()，优先使用可组合函数而非 mixin，优先使用类型化 props 而非仅运行时校验。技能包含响应式、SFC、组件、可组合函数、TypeScript、性能等参考文件，用于在涉及 Vue 交互的任务中提供一致、显式且可组合的代码风格指导。

前端与建站6 次安装

canvas-gestures-and-hit-testing

这是 React Native Skia 画布交互技能包，提供触控手势与命中测试的标准化输入方案。它把画布上的点击、滑动、拖拽、瞄准等操作统一交给单个手势模块 useCanvasGestures 处理，并基于与渲染相同的 CanvasLayout 进行命中测试，每次手势只发出至多一个带类型的 CanvasIntent；是否转为领域动作，由各表面独立的纯函数 intentToAction(state, intent) 依据领域合法性规则决定。技能包附带输入套件、意图函数与命中目标测试模板、校验脚本，以及点击、拖拽、滑动、瞄准等示例与测试指南。适用于使用 Skia 画布且需要触控交互的 React Native 应用，涉及手势统一、命中精度、拖拽提升、选中状态、无障碍触控目标与 RTL 适配等场景。

前端与建站6 次安装

nextjs

该技能提供 Next.js 开发模式与惯例，涵盖路由（App Router 与 Pages Router）、数据获取、Server Components 与 Client Components、Server Actions、动态路由、路由组与并行路由、中间件、API 路由、图片优化、元数据与 SEO、环境变量、缓存、部署以及常见模式（认证中间件、国际化、动态 OG 图片、性能优化）等主题。当用户提及 "next.js"、"nextjs"、"app router"、"pages router" 等关键词时使用。

前端与建站5 次安装

angular-material

Angular Material 是 Angular 官方推出的 Material Design 组件库，提供 50 多个可直接用于生产环境的组件，内置无障碍支持、主题定制与 TypeScript 类型支持。本技能面向 Angular 20+ 应用，指导开发者按规范安装与配置组件库、使用表单控件、导航组件、数据表格、对话框与弹窗，并实现主题定制与无障碍适配。内容涵盖 @angular/material、@angular/cdk、@angular/animations 的安装，provideAnimations() 配置，以及 MatButtonModule、MatIconModule 等具体模块的按需导入方式。

前端与建站5 次安装

angular-router

Angular Router 是 Angular 框架的官方路由技能，用于配置应用导航、路由规则、路由守卫、懒加载与参数处理。该技能提供了一套明确的规则与示例：在独立应用中通过 provideRouter(routes) 注册路由，将路由定义放在独立的 routes.ts 文件中，空路径重定向使用 pathMatch: 'full'，通配符路由（**）放在最后处理 404。懒加载方面，使用 loadChildren 加载特性路由、loadComponent 加载独立组件，避免在路由配置中提前导入特性模块。路由守卫推荐使用基于 inject() 的函数式守卫，返回布尔值或 UrlTree，通过 router.createUrlTree 实现重定向，不使用基于类的守卫。参数处理使用 toSignal 将 route.params 与 route.queryParams 转为信号并设置 initialValue，避免手动订阅。导航使用 router.navigate 或 [routerLink]，不直接操作 window.location。适用于配置路由、实现守卫、设置懒加载、处理路由与查询参数、嵌套路由、导航菜单与面包屑、路由过渡动画、重定向与通配符、路由事件与导航生命周期等场景。

前端与建站5 次安装

angularfire

AngularFire 是将 Firebase 各项服务集成到 Angular 应用中的官方库配套技能。它面向 Angular 20+ 与 AngularFire v20+ 项目，覆盖身份认证、Cloud Firestore 数据库、Cloud Storage 文件存储、Cloud Functions 云函数以及 Analytics 分析等服务的接入方式。该技能强调使用模块化 API（如 provideAuth、provideFirestore、provideStorage、provideFunctions、provideAnalytics）并通过 provideFirebaseApp() 与 initializeApp() 在 app.config.ts 中完成注册，同时明确要求避免使用兼容层 API。在状态管理方面，它主张用 toSignal() 将认证状态与 Firestore 可观察对象转换为 Angular Signals，并推荐结合 NgRx Signals 与 rxMethod()、tapResponse() 处理异步操作。技能还给出仓库层封装、错误码处理、安全规则（firestore.rules、storage.rules）以及离线持久化等实践指引，解释何时应启用该技能并列出安装命令与前置条件。

前端与建站5 次安装

capabilities-layer

Capabilities Layer 是一套用于在 src/app/capabilities 目录下实现功能的架构模式集合，来自 7spade/black-tortoise。它围绕表现层、应用层、领域层与集成层的边界划分，强调将每个能力作为独立的限界上下文交付，能力之间仅通过事件与工作区上下文交互。该模式规定使用 @ngrx/signals 存储作为能力状态的唯一来源，通过 computed signals 派生视图状态，异步副作用经由 rxMethod 与 tapResponse 处理；事件遵循先持久化后发布的顺序，订阅发生在应用层而非表现组件中。UI 方面要求使用独立、无 zone 的组件，模板仅绑定 signals 并使用 Angular 控制流语法，且只使用 Material Design 3 token。数据边界上要求基础设施返回 Observable/Promise 并在模板前转换为 signals，禁止将 Firebase/DataConnect DTO 泄漏到集成/基础设施之外。测试方面要求对存储状态转换做单元测试，并用 Playwright 覆盖关键路径，使用稳定的选择器。

前端与建站5 次安装

frontend-design

该技能用于指导创建独特、达到生产级水准的前端界面，避免常见的“AI 味”审美。用户提供前端需求（组件、页面、应用或界面）及其用途、受众或技术约束后，技能先引导进行设计思考：明确要解决的问题与使用者、选定鲜明甚至极端的美学基调（如极简、复古未来、奢华、编辑杂志风、粗野主义、工业实用等）、梳理框架与性能无障碍等技术约束，并确定让作品令人难忘的差异化点。随后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求功能可用、视觉醒目、风格统一且细节讲究。美学指南涵盖：排版选用独特字体并搭配展示字体与正文字体、避免 Arial/Inter 等通用字体；用 CSS 变量统一色彩主题，主色配锐利点缀；用动画与微交互营造效果，HTML 优先纯 CSS，React 可用 Motion，重视页面加载的编排式揭示；空间构成上采用非对称、重叠、斜向、打破网格的布局；背景与视觉细节使用渐变网格、噪点纹理、几何图案、层叠透明、戏剧化阴影、装饰边框、自定义光标等营造氛围。要求避免通用 AI 审美（如常见字体、紫渐变白底、可预测布局），根据语境做多元变化，并让实现复杂度与美学愿景匹配。

前端与建站5 次安装

modern-accessible-html-jsx

该技能用于编写干净、现代且高度可访问的 HTML 与 JSX 代码，强调语义化元素与属性的正确使用。其核心理念是：默认编写语义化、可访问、符合标准的 HTML，可访问性是基线要求而非附加增强。技能要求优先使用 header、nav、main、section、article、footer 等语义元素，避免在存在语义元素时使用通用 div/span；保持正确的标题层级（h1 到 h6）且不跳级。在可访问性方面，要求交互元素必须支持键盘访问，尽可能优先使用原生 HTML 元素而非 ARIA，不用 ARIA 修补错误的 HTML 语义，并为所有交互控件提供可访问名称。表单与输入要求标签与控件关联，优先使用原生校验和输入类型，并确保错误信息可被正确播报。图片与媒体要求提供有意义的 alt 文本，纯装饰性图片使用空 alt，必要时提供 figcaption。结构上要求通过语义元素隐式使用地标角色，确保单一清晰的 main 区域，并面向屏幕阅读器组织内容。总体原则是：HTML 是基础，不要与之对抗；可访问性不可妥协；如果去掉 CSS 或 JS 仍能正常工作，那大概率是正确的。

前端与建站5 次安装

modern-best-practice-nextjs

该技能用于构建采用 App Router 的现代 Next.js 应用，并遵循最佳实践。内容涵盖路由与目录结构、数据获取与缓存、UI 状态处理以及元数据与 SEO 等方面。强调以服务端组件为默认、仅在必要时添加 'use client'，在 React Server Components 中获取数据而避免使用 useEffect() 与 fetch()，使用 Server Functions（服务端操作）处理变更，并通过 loading.tsx、error.tsx 和 Suspense 边界改善路由级用户体验，同时使用 Metadata API 管理元数据与 SEO。由于 Next.js 更新频繁，资料建议通过网页搜索或 context7 MCP（经 DocsExplorer 智能体）查阅最新文档。

前端与建站5 次安装

modern-tailwind

Modern Tailwind 是一份关于 Tailwind CSS 最佳实践的技能指南，旨在帮助开发者用现代工具类与变体构建整洁、可扩展的 UI。内容涵盖核心原则、变体与状态、响应式与容器查询、主题与自定义以及可维护性等方面。核心原则建议大多数样式优先使用工具类而非自定义 CSS，按布局→间距→排版→颜色→效果的顺序分组类名以保持可读性，并先写语义化 HTML，让工具类起增强作用而非替代结构。变体与状态方面，建议在合适场景使用 hover、focus-visible、disabled、dark 和 motion-safe 变体，优先用 data-* 与 aria-* 变体处理与 DOM 语义绑定的状态样式，并用 group 和 peer 处理父子、兄弟状态而无需额外 JavaScript。响应式与容器查询建议先写基础样式再叠加 sm、md、lg 等响应式变体，当布局依赖父容器尺寸时使用容器查询工具类。主题与自定义建议在 tailwind.config 中扩展主题而非临时写自定义类，重复不可避免时用 @layer 定义自定义工具类或组件，除小型可复用模式外避免 @apply。可维护性建议将可复用 UI 抽取为组件而非重复大段类名，并保持类名确定性，尽量避免动态字符串拼接。

前端与建站5 次安装

use-modern-browser-apis

该技能主张在现代 Web 开发中优先使用浏览器原生 API，而不是引入重量级外部库或自行用 JavaScript 手写实现。它覆盖 UI 与交互（如 Intersection Observer、ResizeObserver、PerformanceObserver、BroadcastChannel）、导航与视图（View Transitions、URLPattern）、剪贴板与分享（Clipboard Async、Web Share Level 2）、文件与持久化（File System Access、文件句柄与目录选择器扩展）、并发与调度（Web Locks、Scheduling API）、Worker 与离屏渲染（Web Workers、OffscreenCanvas）、语音与无障碍（Web Speech）、高级图形与计算（WebGPU）、实时通信（WebRTC）等能力。使用前需做特性检测，对支持不足的 API 提供渐进增强的降级方案（如 WebGPU 回退到 WebGL），并遵循异步优先、权限提示、性能监控与安全上下文（HTTPS）等最佳实践。

前端与建站5 次安装

vue-best-practices

Vue Best Practices 是一个面向 Vue.js 任务的技能指令集，要求在编写代码时遵循一套有序的工作流程与最佳实践。它把 Vue 3、Composition API 与 <script setup lang="ts"> 作为默认技术栈，并在项目明确使用 Options API 或 JSX 时提示改用对应的最佳实践技能。技能强调整体架构先行：在编码前确认技术栈、阅读并持续应用核心参考（响应性、单文件组件、组件数据流、组合式函数），并先规划组件边界。其主要内容涵盖状态可预测、数据流显式（props 向下、events 向上）、组件小而聚焦、避免不必要重渲染、可读性优先等原则，并给出组件拆分触发条件、入口/根组件与路由视图保持轻量的规则、以及插槽、属性透传、KeepAlive、Teleport、Suspense、过渡动画、指令、异步组件、插件、状态管理等可选特性的按需使用条件。性能优化被定位为功能完成之后的阶段，最后提供一份收尾自查清单。

前端与建站5 次安装