vercel-optimize
Vercel Optimize 是一个面向已部署 Vercel 项目的成本与性能优化审计技能，支持 Next.js、SvelteKit、Nuxt 和有限度的 Astro。它强调先看指标后改代码，基于 Vercel 生产信号和确定性筛选，只在有依据时才深入查看源码。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-26 00:15
前端与建站
11,096 个结果
stylex-styling
一份 StyleX 样式编写规范，介绍使用设计令牌、响应式断点与自定义 css prop 的写法，适用于在本项目中处理样式、CSS、设计令牌与响应式布局。
react
面向 Vite SPA 的 React v19 最佳实践指南，按影响优先级整理性能优化规则，覆盖并行异步、打包体积、重渲染、渲染性能、JavaScript 性能与高级模式。触发于组件设计、重渲染、性能、记忆化、状态管理与打包优化。
tcbs-stack
TCBS Stack 是一套面向生产环境的全栈 TypeScript 应用开发方案，由 TanStack Start、Convex、Better-Auth 与 Shadcn UI 四层技术组合而成。TanStack Start 提供支持 SSR 的全栈 React 框架并负责路由与渲染；Convex 作为实时数据库与无服务器函数后端，承载业务逻辑与实时数据订阅；Better-Auth 通过 Convex 适配器提供灵活的认证能力，支持邮箱密码、OAuth、魔法链接等方式；Shadcn UI 提供可访问的组件库。该方案适合用于创建带实时数据库和用户认证的 React 应用。
m3-web-angular
在 Angular 项目中实现 Material Design 3 的技能，基于官方 Angular Material（@angular/material），覆盖设计令牌主题、SCSS 与 CLI 生成器，包含按钮、卡片、表单、导航、对话框等组件用法示例。
Next.js 15
Next.js 15 是一个用于构建现代全栈 Web 应用的 React 框架，提供 App Router、Server Components、服务端渲染、静态生成、API 路由等能力。它通过服务端组件减少发送到客户端的 JavaScript，并支持流式渲染、数据缓存与重新验证、Server Actions、图片与字体优化，以及基于 Turbopack 的快速构建。适合需要服务端渲染、全栈一体化和性能优化的 React 项目。
astro-i18n
astro-i18n 是一个面向 Astro 站点的国际化（i18n）技能，用于为多市场、多语言的营销落地页提供国际化实现模式。它覆盖基于 URL 的多语言路由（如 /en/、/de/、/fr/）、翻译管理、hreflang 等 SEO 优化以及 RTL（从右到左）语言支持。该技能强调 URL 结构优先、翻译缺失时优雅回退到主语言、使用逻辑 CSS 属性适配阿拉伯语/希伯来语、持久化用户语言偏好、类型安全的翻译键、禁止硬编码文案、翻译 SEO 元数据、保持各语言内容结构对等，并使用原生 Intl API 按区域格式化日期、数字和货币。
frontend-design
frontend-design 是一个用于创建独特、生产级前端界面的技能，旨在避免千篇一律的“AI 味”审美。当用户需要构建 Web 组件、页面或应用界面时，该技能会引导先进行设计思考，再实现真正可运行的代码。它强调在编码前明确用途、受众、技术约束与差异化亮点，并选定一个大胆而清晰的美学方向，例如极简、极繁、复古未来、自然有机、奢华精致、玩具感、杂志编辑风、粗野主义、装饰艺术、柔和粉彩或工业实用等。实现层面支持 HTML/CSS/JS、React、Vue 等，要求代码可运行、视觉醒目、风格统一且细节精致。该技能还给出前端美学准则，涵盖字体、配色与主题、动效、空间构图、背景与视觉细节，并明确反对使用 Inter、Roboto、Arial 等常见字体、白底紫色渐变等陈词滥调配色以及可预测的布局。
syncfusion-javascript-spinner
Syncfusion JavaScript Spinner 是 Essential JS 2 中用于显示加载动画的轻量级组件，属于 @syncfusion/ej2-popups 包，提供 TypeScript 类型支持。它用于在数据获取、文件上传、表单提交等异步操作期间向用户提供视觉反馈。组件支持 Material、Bootstrap、Fabric 等主题，可全局或针对特定 DOM 元素显示，通过 createSpinner、showSpinner、hideSpinner 等 API 控制显示与隐藏，并支持自定义标签、尺寸、颜色和模板。
react-engineering
React Engineering 是一套面向现代 React 应用开发的工程实践与模式集合，旨在帮助开发者构建可维护、高性能的 React 应用。内容围绕 React 的核心原则展开，包括组合优于继承、单向数据流、声明式 UI、单一职责、不可变性和副作用隔离。技能覆盖组件模式（函数组件、组件组合、TypeScript Props 接口）、状态管理（useState、useReducer、Context 共享状态）、副作用处理（useEffect 基础、清理函数、避免 Effect 瀑布）、自定义 Hook（复用逻辑、数据获取）、性能优化（useMemo、useCallback、React.memo、代码分割）、列表与 key、表单受控组件、错误边界，以及组件组织、命名约定、避免 prop drilling 等最佳实践，并列出常见反模式。适合使用 React 与 TypeScript 开发前端应用的团队与个人参考。
styling-with-tailwind
该技能用于使用 Tailwind CSS v4 工具类与 shadcn/ui 组件模式构建可访问的界面。内容涵盖 CSS 优先配置（不再使用 tailwind.config.js）、OKLCH 语义颜色变量与主题、基于 CVA 的组件变体、响应式设计与容器查询、暗色模式、无障碍模式以及常见组件与布局写法。同时提供 shadcn CLI 安装与组件添加命令、视觉风格选项和常见问题排查方法。
effective-html-wireframe
用于制作低保真、自包含 HTML 线框图的专用技能，帮助评审产品界面的信息层级、内容、导航、任务流程与响应式布局，强调结构探索而非视觉打磨，产物为一个可直接打开的独立 HTML 文件。
anchor-text
来自前端检查清单的 SEO 规则技能：审计链接锚文本，要求使用描述性文字替代“点击这里”“阅读更多”等泛化措辞，以提升搜索引擎爬取理解与屏幕阅读器可访问性，并检查渲染后的 HTML 与 HTTP 响应。
autoplay-media
前端检查清单中的无障碍规则条目，用于审查渲染后的 HTML、交互组件或设计系统是否避免媒体自动播放。要求不自动播放音频，视频如需自动播放应默认静音，并提供键盘可访问的暂停控件。
back-forward-cache
该技能用于审查和优化页面的往返缓存（back/forward cache）适配，排查导致浏览器无法从内存恢复页面的阻塞因素，确保前进/后退导航能近乎即时完成。
breadcrumb-navigation
前端可访问性检查规则，用于审查模板、服务端渲染 HTML 或共享组件中的面包屑导航，确保其使用语义化结构、ARIA 属性与结构化数据，兼顾屏幕阅读器可用性与 SEO。
canonical-chain
该资料来自前端检查清单中的 SEO 规则 canonical-chain，用于检查页面的 rel="canonical" 链接是否指向会重定向的 URL。若 canonical 指向会跳转的地址，可能让搜索引擎索引错误版本并增加抓取延迟。
offline-fallback
该技能用于为网站添加离线回退页面，属于前端检查清单中的一项规则。当浏览器断网且导航请求无法完成时，默认的“无网络连接”错误页会破坏品牌体验。本技能指导开发者创建一个自包含的 /offline 页面，在 Service Worker 的 install 事件中预缓存，并在 fetch 处理器中拦截失败的导航请求，返回该离线页面。它强调离线页不依赖任何外部资源，且仅对导航请求生效，不应用于子资源。适用于添加 PWA 能力、实现 Service Worker 或改善不可靠网络下用户体验的场景。
reduced-motion
该技能用于审查已渲染的 HTML、交互组件或设计系统模式，检查其是否尊重用户的“减少动态效果”偏好。动画可能诱发前庭功能障碍、偏头痛和癫痫发作，尊重动态偏好能让网站对数百万受影响的用户可用。检查要点包括：动画是否遵循 prefers-reduced-motion、内容是否每秒闪烁超过 3 次、视差与滚动劫持效果是否有替代方案、以及动画过多的页面是否在进入前给出动态警告。修复方式为使用 @media (prefers-reduced-motion: reduce) 禁用动画，确保闪烁不超过每秒 3 次，避免静态文字背后的运动，并为沉浸式体验提供动态警告。
sitemap
该技能用于创建并提交 XML 站点地图（sitemap），帮助搜索引擎发现和索引网站的所有重要页面，尤其适用于大型或新上线的站点。它提供快速参考要点，包括在站点地图中包含重要页面的 priority 和 lastmod、提交到 Google Search Console 和 Bing Webmaster Tools、以及在 robots.txt 中引用站点地图。技能支持检查网站是否在 /sitemap.xml 提供格式正确的 XML 站点地图，生成或更新包含所有重要页面及合适 priority 与 changefreq 值的站点地图，解释站点地图如何帮助搜索引擎更高效地发现和索引页面，并可对元数据生成、渲染后的 HTML、结构化数据和响应头进行代码审查，标记违反规则的面向搜索引擎输出的具体路由或模板。
comment-system
Comment System 是一个面向开发者的 UX 模式，用于实现用户评论与讨论线程。它帮助团队在内容周围构建可靠的线程化讨论，同时保持审核、作者身份与恢复路径的可见性。该模式适用于文章与讨论评论、团队评审线程、支持与社区对话等场景。资料强调应避免在没有真实用户价值时加入社交或互动机制，也不应在未理解信任影响的情况下添加公开计数或可见性状态，并且不应在缺少审核、滥用处理或回滚规划的情况下上线。实现流程建议先确认模式与问题及约束匹配，再从参考文档的解剖与示例出发选择最小可行变体，先应用无障碍、性能与交互护栏，再进行视觉打磨，并使用测试指南验证键盘、屏幕阅读器、响应式与失败场景下的行为。无障碍方面涵盖键盘交互、屏幕阅读器支持与视觉无障碍要求。
currency-input
Currency Input 是一种专门用于输入货币金额的表单字段模式，结合了数字输入行为与本地化格式、货币符号显示和金融校验约束。与普通数字输入不同，它会在用户输入时按货币规则格式化数值（如显示 $1,299.99 而非 1299.99），根据货币处理小数精度（美元 2 位、日元 0 位），并按地区惯例放置货币符号或代码。适用于电商结账、银行金融表单、费用报销、订阅定价配置、预算预测等场景；不适用于只读价格展示、无货币含义的数量、超大或超小科学数值以及货币无关的场合。
date-input
Date Input 是一种专用于输入日期值的表单字段模式，涵盖两种主要实现方式：原生 <input type="date"> 控件（渲染浏览器内置日期选择器）以及使用掩码或分段字段的结构化文本输入（如 MM/DD/YYYY 格式，日、月、年各段之间自动前进）。它与 Date Picker 的区别在于侧重键盘直接输入日期值，而非基于日历的可视化选择，适合输入已知的精确日期（如出生日期、证件有效期、信用卡有效期），在这些场景下日历视图反而增加不必要的复杂度。
date-picker
Date Picker（日期选择器）是一种表单组件，将显示所选日期的文本输入框与日历浮层结合，让用户通过可视化日历浏览并选择日期。它适用于需要看到日历上下文的场景，如预约排期、配送日期选择、活动创建、酒店旅行预订以及报表或筛选日期。相比纯文本日期输入，日历能提供周边日期、星期和时间相对位置的上下文。该模式强调键盘可访问性、性能预算和常见实现错误的规避，例如不应在输入框获得焦点时自动打开日历，而应通过日历图标按钮触发。