motion-foundations
面向 React / Next.js 的动效基础层技能，基于 motion/react 定义统一的动效令牌、弹簧预设、性能规则、设备适配、无障碍约束与 SSR 安全规范，供下游动效技能继承。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 11-03 00:11
前端与建站
11,388 个结果
motion-patterns
Motion Patterns 是一套面向 React / Next.js 的生产级动画模式集合，基于 motion-foundations 的 token 与弹簧参数构建，提供按钮、模态框、Toast、列表错峰入场、页面过渡、退出动画、滚动揭示与布局动画等常见 UI 动画的可复制代码。所有模式统一从 motion-foundations 导入时长与缓动值，不自行定义数值，并强调 AnimatePresence 包裹、key 与 exit 的完整配合，以及模态框的无障碍要求。
motion-ui
Motion System v4.2 是一套面向 React / Next.js 的生产级 UI 动效系统，强调性能、可访问性与可用性，而非装饰。它给出动效的使用判断标准：动效应引导注意力、传达状态、保持空间连续性，否则应移除。系统提供安装方式（npm install motion）、动效令牌（时长、缓动、位移）、性能规则（优先使用 transform 与 opacity，避免 width/height、top/left）、低端设备适配启发式、无障碍支持（useReducedMotion、CSS 媒体查询、Tailwind 变体）、核心模式（whileHover、whileTap、whileInView、useScroll + useTransform、AnimatePresence、layout、useAnimate）、AnimatePresence 的 mode 选择（wait、sync、popLayout）、模态框要点（焦点陷阱、Escape 关闭、滚动锁定、ARIA 角色）、SSR 安全、调试与 QA 清单、反模式以及多个代码示例（按钮交互、减弱动效、交错列表、模态框、滚动视差、骨架屏、共享布局）。
nextjs-turbopack
本技能提供 Next.js 16+ 与 Turbopack 的使用指导。Turbopack 是用 Rust 编写的增量打包器，自 Next.js 16 起成为本地开发的默认打包工具，可显著加快开发启动速度与热更新（HMR），并通过文件系统缓存让重启更快（大型项目约 5–14 倍）。内容涵盖 Turbopack 与 webpack 的取舍、何时回退到 webpack、生产构建的注意事项、Next.js 16.1+ 实验性 Bundle Analyzer，以及 Next.js 16 中间件文件名由 middleware.ts 改为 proxy.ts 的说明。适用于开发或调试 Next.js 16+ 应用、排查开发启动或 HMR 缓慢、优化生产打包体积等场景。
nuxt4-patterns
Nuxt 4 应用模式技能，聚焦水合安全、性能优化、路由规则、懒加载以及基于 useFetch 与 useAsyncData 的 SSR 安全数据获取。适用于构建或调试使用 SSR、混合渲染、路由规则或页面级数据获取的 Nuxt 4 应用。
react-performance
面向 React 18/19 与 Next.js 的性能优化技能，改编自 Vercel Labs 的 react-best-practices（MIT）。按优先级整理规则，覆盖消除请求瀑布、包体积、服务端性能、客户端取数、重渲染、渲染、JavaScript 性能与高级模式。
ui-to-vue
ui-to-vue 是一个将 UI 设计截图批量转换为 Vue 3 Composition API 组件代码的工具。它适用于用户提供按模块和页面状态分组的截图目录、目标应用为 Vue 3、并希望生成页面组件、共享组件与路由接线的场景。工具支持将原生视觉元素映射到 Vant、Element Plus 或 Ant Design Vue 组件库，并可按页面级、模块级、全局共享的优先级使用切图资源。通过 npx 或全局安装的 ui-to-vue 命令行运行，需配置 DashScope API Key。
vite-patterns
vite-patterns 是一份围绕 Vite 构建工具的开发与配置实践指南，面向 Vite 8+ 项目。内容涵盖 vite.config 配置文件结构、插件选用与自定义插件编写、HMR 热更新 API、环境变量与 .env 文件、开发服务器代理、生产构建优化（手动分包、压缩）、库模式发布、SSR 外部依赖处理以及依赖预打包等主题。文档同时整理了常见生产陷阱（如环境变量前缀并不构成安全边界、vite build 不做类型检查、部署后旧 chunk 失效、Docker 中需绑定 host），并列举反模式与快速参考表，帮助开发者排查构建错误、优化开发服务器性能并正确使用 Vite 发布库或部署产物。
vue-patterns
Vue.js 3 开发技能指南，覆盖 Composition API、组件架构、响应式最佳实践、Pinia 状态管理、Vue Router 导航与 Nuxt SSR 模式，并含测试、性能优化与 Vue 3.5+ 新 API 说明。
responsive-web-design
一个关于响应式网页设计的技能型提示词资源，围绕使用 CSS Grid、Flexbox、媒体查询和移动优先策略构建跨设备自适应布局。
angular-best-practices
面向 Angular 17+ 的现代最佳实践规则集，共 112 条，覆盖 TypeScript 严格性、基于 Signal 的响应式、组件架构、模板优化、RxJS 模式、SSR 水合、打包优化、无障碍、路由、表单、测试与样式，帮助构建高性能、易维护的应用。
ui-mobile
一个 React Native 移动端 UI 设计技能，强调触摸目标、对比度、可见边界与无障碍标签等强制标准，并涵盖 iOS 与 Android 平台差异、间距、排版、颜色、组件模式、导航、动画与加载状态。
senior-frontend
面向 React、Next.js、TypeScript 与 Tailwind CSS 的前端开发技能，提供项目脚手架、组件生成、打包体积分析与性能优化参考，并内置决策引擎与定制化配置档案。
senior-qa
面向 React/Next.js 应用的测试自动化技能，可扫描组件生成 Jest + React Testing Library 单元测试桩、分析 Jest/Istanbul 覆盖率报告并识别缺口，以及为 Next.js 路由搭建 Playwright E2E 测试。
react-best-practices
一份 React 最佳实践技能，适用于读写含 React 导入的 .tsx、.jsx 组件时使用，建议与 TypeScript 最佳实践技能配合加载。核心原则是 Effect 属于逃生舱，应优先用事件处理器、渲染期计算、useMemo、key 等替代，仅在同步外部系统时使用 Effect。
meticulous-iterative-dev
用于多步前端改动的迭代开发技能：每完成一步就用 Meticulous 做本地可视化校验以尽早发现回归，全部完成后再跑一次云端全量测试。
meticulous-test
用于在实现前端变更后运行 Meticulous 测试的 Skill：先上传构建产物并触发测试运行，再交由 meticulous-review 对视觉差异逐项判定为预期或非预期。需配合 Meticulous CLI 或 MCP 使用。
frontend-design
一个用于 Codex 的前端设计技能，指导生成独特、生产级、高设计质量的前端界面，避免常见“AI 味”审美。适用于用户要求构建 Web 组件、页面或应用时，先确立鲜明美学方向，再实现可运行的 HTML/CSS/JS、React、Vue 等代码。
img-to-frontend
img-to-frontend 是一个图像优先的设计到代码工作流技能：先用 $imagegen 生成四张网站设计图，待用户选定后转成精确实现提示，再构建真实前端页面并通过截图迭代逼近参考图。
wp-guard
wp-guard 是一个用于在交付前审查 WordPress 生成或变更代码的技能，覆盖插件、主题与区块。它以安全规则为重点，同时检查核心 API 使用、国际化与性能问题，并提供守卫、实时与审查三种模式及交付前自检清单。
angular-component
angular-component 是 analogjs/angular-skills 仓库中的一个技能，用于创建现代 Angular 独立组件（standalone component）。该技能目前已标记为弃用（DEPRECATED）且不再维护，其原有指导内容已被移除，而非任其过时。Angular 团队现已在 angular/skills 发布官方技能，建议改用官方版本，安装命令为 npx skills add https://github.com/angular/skills；如需移除本技能，可执行 npx skills remove analogjs/angular-skills。该技能此前的内容仍保留在仓库的 git 历史中。
angular-forms
angular-forms 是 analogjs/angular-skills 仓库中的一个技能，用于在 Angular v21+ 中构建基于 signal 的表单。该技能目前已标记为 DEPRECATED（已弃用），不再维护，其指导内容已被移除，以免内容过时。官方建议改用 Angular 团队发布的官方技能，安装命令为 npx skills add https://github.com/angular/skills；如需移除本技能，可执行 npx skills remove analogjs/angular-skills。该技能此前的完整内容仍保留在所在仓库的 git 历史中。
angular-routing
angular-routing 是 analogjs/angular-skills 仓库中的一个技能，用于在 Angular v20+ 中实现路由。该技能已被标记为 DEPRECATED（已弃用），不再维护，其原有指导内容已被移除，而非任其过时。官方建议改用 Angular 团队发布的官方技能，安装命令为 npx skills add https://github.com/angular/skills；如需移除本技能，可执行 npx skills remove analogjs/angular-skills。该技能此前的内容仍保留在所在仓库的 git 历史中。
angular-ssr
angular-ssr 是 analogjs/angular-skills 仓库中一个用于实现 Angular 服务端渲染（SSR）的技能，但该技能已标记为废弃（DEPRECATED）且不再维护。其原有指导内容已被移除，而非保留至过时。官方建议改用 Angular 团队发布的官方技能，安装命令为 npx skills add https://github.com/angular/skills；如需移除本技能，可执行 npx skills remove analogjs/angular-skills。该技能此前的内容仍保留在仓库的 git 历史中。由于已废弃，其具体功能、使用方式、适用场景与限制等细节暂未提供。