yjs-nextjs
面向在 Next.js 16 App Router 中集成 Yjs 协同编辑的规则型技能，聚焦 Yjs 13.6.31、y-websocket、tRPC v11 与 shadcn/ui 的配合。通过纠正模型的错误默认写法，减少静默数据丢失、内容重复、编辑回退等问题。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-21 00:11
前端与建站
10,940 个结果
pubnub-chat
PubNub Chat SDK 助手技能，帮助开发者用 PubNub Chat SDK 构建聊天应用，涵盖一对一/群组会话、输入状态、消息操作（回应、编辑、已读回执）、文件分享等，并指导编排 App Context、Access Manager 与历史记录。
react19-patterns
面向 React 19 与 React Compiler 的编码模式参考：介绍 Context 简写语法、use() 钩子替代 useContext，以及在 Compiler 启用时避免手动 memo 化，并说明 ViewTransition 与 Suspense 组合时的 hydration 问题与修复方式。
ui-cloner
ui-cloner 是一个用于复刻网站 UI 的技能，当用户提供 URL 并希望为自己的产品复制或克隆某网站的界面、设计或视觉风格时使用。它通过四阶段流程分析目标站点、访谈用户品牌，并生成一次性复刻提示词。
formsmd-builder
formsmd-builder 是一个用于构建 Typeform 风格多步骤表单和问卷的技能，基于 Forms.md 库实现。它适用于用户要求创建表单、构建问卷等场景，通过类似 Markdown 的 DSL 语法编写表单内容，并配合 Typeform 风格的 CSS 主题，生成纯客户端运行的单 HTML 文件，可部署到任意静态托管。表单支持必填字段、幻灯片分隔、逻辑跳转（如按前序答案条件显示）、开始/结束页、进度提示、评分与追问等条件逻辑。若需收集和存储表单回复，可通过 Rebyte Forms API 创建后端存储，获取 submitUrl 与 resultsUrl，并将提交地址配置到表单的 post-url 设置中，结果可查看 JSON 或 CSV。
nextjs-app-router-patterns
这是一个专注于 Next.js 14+ App Router 的技能，覆盖 Server Components、流式渲染、并行路由与高级数据获取等架构模式，适合构建和迁移现代全栈 React 应用。技能提供明确的使用与不适用场景说明，包括搭建新应用、从 Pages Router 迁移、实现 Server Components 与流式渲染、设置并行与拦截路由、优化数据获取与缓存、使用 Server Actions 构建全栈功能等。其指令要求先明确目标、约束与所需输入，再应用相关最佳实践并验证结果，给出可执行步骤与验证方法；如需详细示例，可查阅 resources/implementation-playbook.md。
expo-tailwind-setup
该技能用于在 Expo 项目中配置 Tailwind CSS v4，结合 react-native-css 与 NativeWind v5，实现 iOS、Android 和 Web 的通用样式方案。内容涵盖依赖安装命令、Metro 与 PostCSS 配置、全局 CSS 文件、CSS 组件包装器（View、Text、ScrollView、Pressable、TextInput、Image 等）、自定义主题变量、平台特定样式、Apple 系统颜色与 CSS 变量在 JavaScript 中的使用，并说明与 NativeWind v4 / Tailwind v3 的关键差异及常见问题排查。
fixing-metadata
用于审计和修复 HTML 元数据的技能，覆盖页面标题、meta 描述、canonical、Open Graph、Twitter 卡片、favicon、JSON-LD 结构化数据与 robots 指令，适合新增 SEO 元数据、修复社交分享预览等场景。
flutter-animation
该技能用于在 Flutter 中实现或诊断动画与动效，覆盖隐式动画、显式动画、路由过渡、Hero 动画、交错动画以及基于物理的动画。适用于处理时间控制、过渡效果或运动表现相关问题的场景。技能强调用动效解释状态变化、层级关系或连续性，并要求动画可中断且具备无障碍支持。它负责时间控制、插值、序列编排、稳定标识与中断处理；模糊、玻璃、折射、着色器 uniform 与光学图层合成等视觉特效则交由 flutter-visual-effects 处理，两者同时适用时由动画状态驱动效果，而非在渲染器中重复持有控制器。
tinyship-brand
tinyship-brand 是 TinyShip 项目官方技能库中的品牌定制技能，用于对 TinyShip 项目进行改名与换肤。它指导开发者修改项目根目录下的 config.ts，完成应用名称、Logo、颜色主题和国际化默认语言四项设置。应用名称会出现在页面标题、导航栏、邮件模板等界面位置；Logo 支持“图标+文字”和“完整 Logo 图片”两种模式；主题提供 default、claude、cosmic-night、modern-minimal、ocean-breeze 五套内置配色，也可借助外部编辑器自定义 CSS 主题；语言方面支持 en 与 zh-CN 两种 locale，可设置是否自动检测浏览器语言。该技能适合需要将 TinyShip 模板改造为自有品牌产品的开发者使用，最后需通过启动开发服务器验证导航栏、主题、语言及暗色模式是否生效。
Functional Programming in React
Functional Programming in React 是一套在 React 应用中使用 fp-ts 的实用模式集，目标是用可运行的代码展示函数式编程写法，而非抽象术语。它适用于 React 18/19 与 Next.js 14/15。内容覆盖常见开发场景：用 Option 表示可能缺失的值（如用户尚未加载），用 Either 表示可能失败的操作（如表单校验），用 TaskEither 表示可能失败的异步操作（如 API 调用），用 RemoteData 管理加载、错误与成功状态，用 pipe 串联多个转换。
css-design-tdd
CSS Design System TDD 是一个面向 CSS 设计系统修改的测试驱动开发（TDD）技能。它将 TDD 的 RED-GREEN-REFACTOR 流程应用到 CSS 设计系统维护中：先运行检查脚本暴露当前问题（RED），再以最小改动修复 CSS 使其通过检查（GREEN），最后重新校验确保没有回归并清理（REFACTOR）。该技能提供一组基于 grep/comm 的命令行检查方法，覆盖未定义变量、缺失回退值、硬编码颜色、容器一致性、焦点指示器与 Token 使用审计等维度，并附有快速检查与完整审计两个脚本示例，以及容器块修改清单，帮助在修改 blockquote、alert、details 等容器样式时保持设计系统一致性。
Internationalizing Websites
为 Next.js 网站添加多语言支持与国际化 SEO 配置的完整工作流，涵盖 hreflang 标签、本地化 sitemap 和语言专属内容。
web-forms-react-hook-form
React Hook Form 表单模式技能，涵盖 useForm、Controller、useFieldArray、resolver 校验与性能优化，指导在 React 中正确绑定原生输入、受控组件、可重复字段与多步表单，并避免常见重渲染与注册陷阱。
theme-create
用于为 Odoo 网站生成可安装主题模块的脚手架技能，自动创建规范的文件结构、清单、SCSS 变量配置与页面模板，并遵循版本特定的构建约定。
a11y
a11y 是一项系统化审计并修复 UI 无障碍问题的技能，聚焦键盘导航、屏幕阅读器支持、颜色对比度、语义 HTML、ARIA、焦点管理、动效偏好等，目标是让界面在辅助技术下可用，而不只是打分。
wechat-publisher
将 Markdown 文章智能排版并发布到微信公众号草稿箱的技能。它由 AI 生成内联样式 HTML、自动上传图片、必要时使用默认封面，实现零人工干预的草稿发布流程。
form-vue
面向 Vue 3 的生产级表单模式技能，默认使用 VeeValidate 配合 Zod 做校验，也可选用 Vuelidate。提供安装命令、组合式 API 用法、可复用字段组件、异步与跨字段校验、动态字段数组等示例，并给出两种方案的选择依据。
performance-at-scale
面向 Three.js 大型建造类游戏的空间索引与世界流式加载技能，用于处理数千个部件的性能优化，提供空间哈希网格、八叉树、分块管理与性能分析脚本。
vercel
该技能用于在 Vercel 上运营 Next.js 16 SaaS，并结合 Cloudflare DNS 与 Supabase。适用于部署到 Vercel、降低构建成本、管理密钥或进行流量拆分等场景。
color-palette-extractor
从图片中提取主色调并生成配色方案的工具，基于 K-means 聚类，支持导出 CSS、JSON、ASE、ACO 等格式，可分析 RGB、HEX、HSL、HSV 值并生成色板可视化。
accessibility
用于构建或审查前端无障碍合规性的技能，覆盖 WCAG 2.2 AA 标准，包括语义化 HTML、键盘导航、表单可访问性、ARIA 模式、颜色对比与 axe-playwright 测试。
web-performance-optimization
用于审计、诊断和优化网站加载与交互性能、Core Web Vitals 及 Lighthouse 性能评分的技能，基于 Chrome DevTools MCP 采集性能追踪与网络数据，并结合 web.dev 等来源核对指标阈值。
accessibility
该技能面向无障碍网页开发，提供 WCAG 合规、BFSG 合规、语义化 HTML、ARIA、键盘导航、对比度、表单与辅助技术的绑定规则与检查清单。适用于 HTML 结构与语义审计、ARIA 属性设置、键盘导航实现、对比度检查、无障碍表单设计、媒体无障碍、BFSG 合规核查以及现有界面无障碍审计。涵盖 POUR 四原则、语义化标签、ARIA 使用边界、焦点指示与陷阱、颜色对比标准、图片与媒体替代、表单标签与错误提示、触摸目标与缩放、动效减弱等规则，并列出 Skip Navigation、可访问模态、错误摘要、可访问手风琴等模式与反模式。