html-svg-diagrams
用于在 HTML 中创建基于 SVG 的技术图表，如流程图、时序图、状态机、数据流图、依赖图和请求/响应路径等。适合需要箭头、方框、层次、时间或位置关系的概念说明，输出为自包含的 HTML 文件。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-16 00:02
前端与建站
9,381 个结果
react
本技能面向 React 19.2 与 React Compiler 1.0（babel-plugin-react-compiler），配合 eslint-plugin-react-hooks 7.1+ 使用。核心观点是：编译器即优化器，它在构建时对每个组件和 Hook 应用等价于 memo 的优化，粒度比手写 Hook 更细。代价是 React 规则从风格建议变成构建期契约，违规时编译器会静默跳过该组件的优化而不报错，因此必须先启用 lint 规则再启用编译器。技能给出记忆化决策表：仅用于渲染的新值直接写、依赖身份需保持时保留 useMemo/useCallback、跨到未编译消费者时保留手动记忆化、保留的手动记忆化依赖必须穷尽、跨组件重复的昂贵调用需提升到模块级缓存。内容涵盖纯度、变更、refs、全局变量、组件静态声明、Effects、错误边界、ref 作为 props、"use no memo" 逃生舱等陷阱，并按主题提供 references 参考文件：rules-of-react、compiler、compiler-setup、effects、components-and-types、state、react19-apis、testing。相关技能包括 tanstack、xstate-store、shadcn、tailwindcss、vitest。
tanstack-router
TanStack Router 技能：为 React 单页应用提供类型安全的文件式路由，支持路由级数据加载、TanStack Query 集成与 Cloudflare Workers 部署，并汇总常见错误与解决方案。
threejs
Three.js 3D 图形库技能，覆盖场景搭建、几何体、材质、灯光、纹理、动画、加载器、着色器、后处理与交互，提供 API 参考、最佳实践和可运行代码示例，适用于构建 3D 网页体验。
svelte-template-directives
面向 Svelte 模板指令的技能资料，涵盖 @attach、@html、@render、@const、@debug 等指令，以及 DOM 操作、第三方库集成、动态 HTML 等用法参考。
auth0-spa-js
面向 Vanilla JS、Svelte、SolidJS 等非 React/Angular/Vue 单页应用的 Auth0 认证集成技能，基于 @auth0/auth0-spa-js，指导安装、初始化、登录登出、令牌获取与构建验证。
tailwindcss
Tailwind CSS 技能用于使用 Tailwind CSS v4 和项目设计令牌为组件编写样式，专注组件级样式实现。它强调优先使用工具类（utilities）进行组件样式编写，但 CSS 仍然负责主题令牌、基础规则以及工具类无法清晰表达的样式；要求使用已安装的 Tailwind 版本和现有设计系统。颜色、边框和状态应使用语义化令牌，名称取自项目的令牌来源和设计文档，不假设存在通用的 shadcn 词汇。类名需保持完整且可静态发现，避免使用 bg-${color}-500 这类插值片段，改用查找映射。长类名可分组以提升可读性，不设字符数门槛；在组合变体或接受覆盖 className 时使用项目的 cn/merge 辅助函数。特异性应通过样式设计和类合并解决，避免 !important；仅在仓库允许处使用 @apply。响应式布局应基于内容需求构建，保留可见的键盘焦点，并选择 v4 支持的实用工具而非照搬旧写法。验证通过仓库既有的门禁机制，复用其根目录/包命令和有效证据，样式改动不额外增加 lint/typecheck 流程。修改某工具类或变体前应阅读 references/patterns.md，其中的令牌名称仅为示例，实际应使用真实的主题清单。该技能明确排除纯 CSS、CSS-in-JS 及其他工具类框架。
svelte-development
面向 Svelte 开发的技能指南，覆盖 Svelte 5 响应式 runes、组件、stores、生命周期钩子、过渡与动画等现代模式，基于官方文档整理，适合构建高性能 Web 应用、SPA、组件库与 SvelteKit 服务端渲染项目。
wterm-web-terminal
wterm 是一个 Web 终端模拟器，核心用 Zig/WASM 实现（约 12 KB），负责 VT100/VT220/xterm 解析，渲染到 DOM，从而获得原生文本选择、复制粘贴、浏览器查找与无障碍支持。提供 React 与原生 JS 绑定，支持 WebSocket PTY 后端、备用屏幕缓冲、24 位色、回滚与主题。
pwa-development
PWA Development 是一个面向 React 和 Svelte 项目的渐进式 Web 应用（PWA）实现技能，用于添加 Service Worker、缓存策略、离线支持和安装提示等能力。它强调 PWA 不是简单地在现有应用上“加一个 Service Worker”，而是关于数据流、缓存与连接失败的根本性架构决策。技能提供从 P0 到 P6 的诊断状态划分，覆盖无 PWA 设置、仅有 Manifest、缓存问题、更新问题、离线数据缺口、iOS 兼容问题到生产就绪等阶段，并给出对应的干预措施。内置 manifest-generator.ts、sw-scaffolder.ts、cache-strategy-advisor.ts、pwa-audit.ts 等脚本，以及缓存策略参考（Cache First、Network First、Stale While Revalidate、Network Only）和框架快速参考（React + Vite、SvelteKit、Next.js 的安装命令）。适用于为 Web 应用添加 PWA 能力、实现离线支持、创建 Service Worker 缓存策略、调试 PWA 安装问题以及处理 iOS 特有 PWA 怪癖等场景。不适用于构建后端 API、需求/设计阶段或需要复杂离线优先架构（应先设计）的情况。
clerk-nextjs-skills
面向 Next.js 16（仅 App Router）的 Clerk 身份验证技能，涵盖 proxy.ts 配置、从 middleware.ts 迁移、环境变量配置与 MCP 服务器集成。
syncfusion-blazor-datagrid
Syncfusion Blazor DataGrid（SfGrid<TValue>）是用于在 Blazor 应用中展示和操作表格数据的高性能组件，支持数据绑定、排序、筛选、分组、分页、编辑、选择、聚合、导出、虚拟/无限滚动、模板等功能。该技能面向 Blazor Server、WebAssembly、Web App 与 MAUI，提供从安装配置到各功能模块的参考文档，并强调仅使用官方支持的 API、事件名需核对、事件处理器须定义在 GridEvents 组件内等规则。
prompt-api
Prompt API 技能用于在 JavaScript 或 TypeScript 浏览器 Web 应用中实现和调试浏览器 Prompt API 集成。它指导开发者识别前端集成入口、确认 Prompt API 可行性、编写带能力检测的会话封装、处理下载与就绪等 UX 状态，并验证行为。适用于需要添加 LanguageModel 可用性检查、会话创建、流式响应、结构化输出或回退逻辑的场景。该技能强调在安全窗口上下文中运行、遵循权限策略、避免使用已废弃参数，并说明 tools 为实验性、Web Worker 中不可用等平台限制。
safe-action-tanstack-query
next-safe-action 的 TanStack Query 适配器，用于将 next-safe-action 的 Server Action 与 TanStack Query（React Query）的 mutation 机制集成。它提供 mutationOptions() 方法，把 safe action 的结果封装桥接到 TanStack Query 的错误模型：调用 action 后检查结果中的 serverError 或 validationErrors，若存在则抛出 ActionMutationError（客户端错误类，支持 instanceof），成功时直接返回数据作为 TData。同时提供 ActionMutationError、isActionMutationError、hasServerError、hasValidationErrors 等导出，并处理 redirect()、notFound() 等导航错误。该适配器仅支持 mutation，不提供 queryOptions()，且只能用于无状态、非抛错（non-throwing）的 .action() 函数。
shadcn-ui
shadcn/ui 是一个基于 React 的组件集合，使用 Radix UI 基础组件构建，并以 Tailwind CSS 进行样式设计。与传统组件库不同，shadcn/ui 的组件是直接复制到项目中的，让开发者拥有完整的代码所有权和定制控制。组件具备无障碍特性、可定制、开源。核心哲学是「复制粘贴组件，而非安装 npm 包」，代码归你所有。适配 Next.js、Vite、Remix、Astro 等框架，原生支持 TypeScript 和深色模式，采用组合优于配置的设计思路。
stitch-sdk-usage
Stitch SDK 是 Google Stitch（AI 界面生成服务）的 TypeScript 接口，可通过文本提示生成、编辑和迭代 UI 屏幕，管理项目与设计系统，并获取屏幕的 HTML 与图片。
modern-frontend-design
Modern Frontend Design（2026 版）是一个用于指导 AI 生成现代高端前端界面的设计规范与提示词框架。它把「资深前端工程师 + UI/UX 设计师 + 视觉设计策略师」的角色设定为一套可执行的设计流程，目标是让任意产品需求转化为看起来像知名高端 SaaS 产品、现代 AI 工具与获奖设计网站级别的 Web 界面，而非普通的 AI 模板产物。其核心主张是 2026 年的范式转变：用 OKLCH 替代 HSL、用原生 CSS 滚动驱动动画替代 JS 库、以 Liquid Glass 作为标准表面处理、用 View Transitions 处理页面导航、以 AI Minimalism 作为新的 SaaS 美学，并且永远「令牌优先」。内容以 12 步 Atom of Thought 设计流程组织，涵盖设计令牌系统、产品理解与细分行业方向、视觉研究与 Hero 模式、视觉系统规划、布局架构、组件系统、动效系统、技术栈、后端意识与性能、响应式与无障碍、视觉质量校验以及 Hero 提示词工程。
cc-design-html-prototyping
面向 AI 编程代理的高保真 HTML 设计与原型技能，可生成幻灯片、交互原型、落地页、UI 稿与动画演示，支持从 68+ 设计系统克隆品牌风格，并用 Playwright 做视觉验证。
diffs
中文介绍正在整理，稍后补充。
bun-nextjs
在 Bun 运行时中开发、构建与部署 Next.js 应用的技能。涵盖创建项目、依赖安装、Bun 原生 API（如 bun:sqlite、Bun.file）在服务端组件与 API 路由中的使用、Next.js 16 的 Turbopack、proxy.ts 变更，以及 Docker、Vercel 部署与常见错误排查。
notte-functions-build
Notte Functions Build 是一个把一次性浏览器探索任务转化为可复用、可参数化 Notte Function 的技能。它先驱动智能体探索网站一次，找到稳定数据路径，再生成 Python 函数、自测并发布为可通过 HTTP、CLI/SDK 或定时调用的 Function。
tailwind
Tailwind 是 Tailwind Labs 维护的 Tailwind CSS v4 最佳实践技能，聚焦样式编写与配置。它提供覆盖 8 个类别、共 42 条规则的性能优化指南，按影响程度排序，用于指导自动化重构与代码生成。内容涵盖构建工具配置（Vite 插件、PostCSS、CLI）、v4 的 CSS-first 配置方式、CSS 打包体积与构建性能优化、响应式设计与容器查询、以及通过 @theme 指令和设计令牌进行主题设置。每条规则配有 references/<rule-id>.md 文档，说明其重要性并给出错误与正确代码对比。该技能可通过 npx 命令在项目根目录运行检测与扫描，识别已安装版本与目标版本差异，并将废弃 API 映射到对应规则 ID。
sveltekit-remote-functions
SvelteKit 远程函数（remote functions）使用指南，说明在 .remote.ts 文件中使用 query()、form()、command()、prerender() 等实验性 API 的模式与规则。
edu-chem-reaction
该技能用于把一个化学反应制作成自包含的微观 3D 交互演示网页。页面一侧是 Three.js 可交互分子动画，支持旋转缩放，并可拖动“反应进度”滑块逐帧查看化学键断裂、生成与原子重新组合，带分步高亮和浮动分子标签；另一侧是 KaTeX 反应方程、分步讲解、原子守恒计数器，可选能量-反应进程曲线、火焰、催化剂质子、电子转移等叠加层。支持三种入口：给定文字反应或方程、随机出题、上传图片识别后演示。计算核心依赖 sympy 进行配平，RDKit 为可选。成品为单页 HTML，输出到用户当前工作目录。