sfnext-configuration
管理 Storefront Next 应用配置的技能，围绕 config.server.ts 集中定义类型化默认值，并通过环境变量覆盖。适用于新增配置项、读取配置及多站点设置。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-27 00:15
前端与建站
11,179 个结果
shopware-admin-js
Shopware Administration 前端编码规则技能，用于编辑 src/Administration 下的 Admin UI 代码（.js/.ts/.vue）及 Jest 测试时套用规范。
frontend-optimistic-mutations
一种可移植、与框架无关的前端写入路径规范，面向 React 或 React Native 应用中基于查询/缓存层的乐观更新流程，涵盖乐观补丁、逐字回滚、幂等键与缓存一致性，并给出 TanStack Query、RTK Query、SWR 的适配方式。
react-component-generator
用于生成 React 组件的技能，提供 TypeScript、Tailwind CSS 与 Zustand 模板及最佳实践，覆盖基础、状态、表单、列表、卡片、按钮、弹窗等常见组件模式，帮助按统一规范快速搭建组件。
website-builder-migrate
将 Webflow、Framer、Squarespace、Wix、Carrd 等网站构建器上已发布的站点迁移为可自托管的静态站点，无需付费导出。使用 wget 镜像线上站点，再清理资源、URL 与平台特有产物。
atlassian-design
用于解答 Atlassian Design System 与 Atlaskit 的实现和设计问题，内置 jjcall/ads-docs-mirror 的本地文档镜像，可查组件选型、@atlaskit/* 用法、xcss 与设计令牌、Jira/Confluence 风格界面及迁移指引。
syncfusion-react-modern-rich-text-editor
Syncfusion React Modern Rich Text Editor 是 Syncfusion 提供的 React 富文本编辑器组件（RichTextEditorUIComponent，来自 @syncfusion/ej2-react-richtexteditor-ui），用于所见即所得（WYSIWYG）的富内容编辑。它支持行内与块级格式化、可配置工具栏（布局、位置、浮动）、文本/链接/图片/表格快捷工具栏、自定义工具栏按钮与斜杠命令、引用/代码块/提示框/折叠区块、有序/无序/清单列表、表格行列操作、链接自动识别与协议白名单、本地与 URL 图片插入（Blob/Base64 保存及服务端上传）、fluent commands() 编程式命令 API，以及生命周期、焦点、内容变更和可取消的操作前事件。组件需配合 Tailwind 3 主题安装使用。
react-native
React Native 技能：用单一 TypeScript 代码库构建 iOS 与 Android 原生应用，涵盖核心 UI 组件、Expo 托管开发与云构建、Reanimated 动画、Expo SDK 原生能力，以及列表、导航、样式、状态、性能与测试的实践指引。
taste-imagegen-frontend-mobile
用于生成高端移动应用界面概念与流程图的图像技能，面向 iOS、Android 与跨平台移动端。强调应用原生观感、可读性、屏幕一致性与完整流程，而非通用网页或落地页。
critical-images
该技能用于检查并优化关键图片的加载优先级，通过为 LCP 图片设置 fetchpriority='high'、预加载首屏主图、移除首屏图片的懒加载等手段，提升 Largest Contentful Paint 表现。
css-critical
这是一条前端检查清单技能，用于审查页面是否将首屏关键 CSS 内联，以减少渲染阻塞资源、加快首次绘制。它在代码评审中检查样式表、组件样式与响应式状态，并指出违反该规则的选择器、声明或断点。
css-file-size
来自前端检查清单的 CSS 文件体积优化规则，用于排查页面加载缓慢、资源过重或渲染延迟问题，指导开发者压缩 CSS、移除未使用样式，以加快 CSSOM 构建与首屏渲染。
page-weight
page-weight 是前端性能检查项，用于审计页面总重量是否控制在 1500KB 以内、理想情况下低于 500KB。它帮助定位图片、JavaScript 包等过大资源导致的加载缓慢问题。
service-worker
Service Worker 是浏览器与网络之间的可编程网络代理，用于缓存静态资源并提供离线支持。该技能条目来自前端检查清单（front-end-checklist），用于审计重复访问性能、添加离线支持或评估 Web 应用的 PWA 就绪度。它通过注册 Service Worker、在 install 事件中预缓存关键静态资源、按资源类型选择缓存策略（cache-first、network-first、stale-while-revalidate），并在 activate 事件中清理旧缓存，从而减少静态资源的重复服务器往返，将重复访问的加载时间缩短 50–90%，并让应用在弱网或离线环境下仍可运行。
sitemap-valid
用于检查与修复 XML sitemap 合规性的技能条目：确保 urlset 与正确命名空间、每个 url 仅一个绝对且百分号编码的 loc、单文件不超过 5 万条或 50MB、特殊字符正确转义，并排查 Google Search Console 提交错误。
third-party-scripts
该技能用于审计与优化第三方脚本加载导致的页面加载缓慢、资源过重或渲染延迟问题。它提供快速参考策略：对独立脚本（如分析、广告）使用 async，对依赖 DOM 的脚本（如聊天组件、社交插件）使用 defer，对非关键脚本在页面加载后懒加载，并考虑自托管关键第三方脚本。技能包含检查、修复、解释和代码审查四个环节，帮助定位阻塞渲染的脚本并给出优化建议。
ttfb
TTFB（Time to First Byte，首字节时间）是衡量服务器响应速度的核心性能指标，指从浏览器发起请求到接收到第一个字节数据所经历的时间。该技能用于审计 SSR 页面、API 或可缓存 HTML 的首字节响应过慢问题，帮助区分源站计算耗时、网络延迟与 CDN 缓存未命中三类成因。技能提供快速参考、检查、修复、解释与代码审查等环节：优化服务端逻辑与数据库查询、使用 CDN 就近分发内容、在服务器与边缘层实施有效缓存策略。代码审查会检查服务端渲染路由、API 处理器、缓存配置及关键路径上的数据库访问，标记未缓存 HTML、首字节前的慢速同步工作、重复的上游请求，以及使 TTFB 高于约 800ms 的高开销查询。完整实现细节、代码示例与框架相关指导见 references/rule.md。
vercel-react-best-practices
面向 React 与 Next.js 的性能优化规则集，源自 Vercel Engineering，共 57 条规则、分 8 个优先级类别，用于在编写、审查或重构 React/Next.js 代码时按影响程度指导优化与自动重构。
velt-live-state-sync-best-practices
Velt Live State Sync 的实现模式与最佳实践指南，面向 React、Next.js 及 Web 应用，用于添加实时共享状态、同步数据、离线支持与 Redux 集成，包含 6 大类共 14 条规则。
frontend-ui-engineering
这是一个用于指导构建生产级前端用户界面的技能，强调可访问性、响应式设计与视觉打磨，目标是让 UI 看起来像由顶级公司里有设计意识的工程师构建的，而不是 AI 生成。文档覆盖组件架构与文件结构、组件模式（优先组合而非配置）、状态管理方案选择、遵循设计系统（避开常见的 AI 审美套路，如满屏紫色、滥用渐变、万物圆角、模板化 hero 区块等）、间距与排版规范、颜色语义化 token、WCAG 2.1 AA 可访问性要求（键盘导航、ARIA 标签、焦点管理、有意义的空状态与错误状态）、移动优先的响应式设计及测试断点、骨架屏加载与乐观更新等。还附有常见合理化借口与现实、危险信号清单以及构建后的验证清单。
tailwind-theme-styling
用于 dev-quiz-battle 应用的 Tailwind CSS v4 样式技能，涵盖 OKLCH 颜色变量、深色模式、响应式布局、组件样式、动画与渐变文字等现代设计模式。
animate
animate 是一个用于审查功能并为其添加有目的动画、微交互与动效的技能，旨在提升可用性与愉悦感。它强调在动手前必须先收集上下文（目标受众、使用场景、品牌调性、性能约束），若无法从当前对话或代码库中推断出这些信息，必须停止并调用 AskUserQuestionTool 澄清，不得猜测。该技能要求先使用 frontend-design 技能获取设计原则与反模式，再评估动画机会、制定动画策略并系统化实现。它覆盖入场动画、微交互、状态过渡、导航与流程、反馈与引导、愉悦时刻等类别，并给出时长与缓动曲线建议、CSS/JavaScript 实现方式、性能优化与无障碍要求（必须尊重 prefers-reduced-motion）。
frontend-css-patterns
这是一个与框架无关的 CSS 设计模式集合，聚焦于排版、色彩、动效与空间构图，用于实现更具辨识度的视觉设计。内容以代码片段形式给出，涵盖字体搭配与响应式字号（clamp）、高对比度且克制的配色方案、页面加载与滚动触发的动效、打破网格的非对称与重叠布局，以及渐变叠加、发光效果等视觉细节，并附有 Tailwind 主题自定义示例。适合前端开发者在构建网站界面时参考，帮助摆脱通用默认样式。
frontend-design
frontend-design 是一套前端界面设计指导技能，用于创建风格独特、可投入生产的网页组件与页面，避免常见的“AI 味”审美。适合在用户要求构建 Web 组件、页面或界面时使用。