[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-vercel-labs--agent-skills":3,"tool-vercel-labs--agent-skills":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",140436,2,"2026-04-05T23:32:43",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":79,"owner_email":80,"owner_twitter":81,"owner_website":82,"owner_url":83,"languages":84,"stars":97,"forks":98,"last_commit_at":99,"license":79,"difficulty_score":100,"env_os":101,"env_gpu":101,"env_ram":101,"env_deps":102,"category_tags":106,"github_topics":79,"view_count":107,"oss_zip_url":79,"oss_zip_packed_at":79,"status":16,"created_at":108,"updated_at":109,"faqs":110,"releases":141},2272,"vercel-labs\u002Fagent-skills","agent-skills","Vercel's official collection of agent skills","agent-skills 是 Vercel 官方推出的一套专为 AI 编程助手设计的技能库，旨在通过标准化的指令和脚本扩展智能体的编码能力。它有效解决了 AI 在生成代码时容易忽略性能优化、无障碍访问（Accessibility）及架构最佳实践等痛点，确保输出结果不仅功能可用，更具备生产级的高质量与可维护性。\n\n这套工具特别适合前端开发者、全栈工程师以及希望提升代码质量的 AI 使用者。其核心亮点在于涵盖了多个垂直领域的深度指南：包括由 Vercel 工程团队总结的 React 与 Next.js 性能优化规则，能自动消除数据请求瀑布流并优化包体积；超过 100 条的 Web 设计规范，全面审查无障碍性、表单交互及深色模式适配；以及针对 React Native 的移动端架构建议和原生 View Transition API 的平滑动画实现方案。此外，它还提供了可扩展的组件组合模式，帮助避免复杂的布尔值 props 滥用。无论是构建新项目还是重构旧代码，agent-skills 都能让 AI 助手像资深专家一样思考，显著提升开发效率与代码水准。","# Agent Skills\n\nA collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities.\n\nSkills follow the [Agent Skills](https:\u002F\u002Fagentskills.io\u002F) format.\n\n## Available Skills\n\n### react-best-practices\n\nReact and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.\n\n**Use when:**\n- Writing new React components or Next.js pages\n- Implementing data fetching (client or server-side)\n- Reviewing code for performance issues\n- Optimizing bundle size or load times\n\n**Categories covered:**\n- Eliminating waterfalls (Critical)\n- Bundle size optimization (Critical)\n- Server-side performance (High)\n- Client-side data fetching (Medium-High)\n- Re-render optimization (Medium)\n- Rendering performance (Medium)\n- JavaScript micro-optimizations (Low-Medium)\n\n### web-design-guidelines\n\nReview UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.\n\n**Use when:**\n- \"Review my UI\"\n- \"Check accessibility\"\n- \"Audit design\"\n- \"Review UX\"\n- \"Check my site against best practices\"\n\n**Categories covered:**\n- Accessibility (aria-labels, semantic HTML, keyboard handlers)\n- Focus States (visible focus, focus-visible patterns)\n- Forms (autocomplete, validation, error handling)\n- Animation (prefers-reduced-motion, compositor-friendly transforms)\n- Typography (curly quotes, ellipsis, tabular-nums)\n- Images (dimensions, lazy loading, alt text)\n- Performance (virtualization, layout thrashing, preconnect)\n- Navigation & State (URL reflects state, deep-linking)\n- Dark Mode & Theming (color-scheme, theme-color meta)\n- Touch & Interaction (touch-action, tap-highlight)\n- Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat)\n\n### react-native-guidelines\n\nReact Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns.\n\n**Use when:**\n- Building React Native or Expo apps\n- Optimizing mobile performance\n- Implementing animations or gestures\n- Working with native modules or platform APIs\n\n**Categories covered:**\n- Performance (Critical) - FlashList, memoization, heavy computation\n- Layout (High) - flex patterns, safe areas, keyboard handling\n- Animation (High) - Reanimated, gesture handling\n- Images (Medium) - expo-image, caching, lazy loading\n- State Management (Medium) - Zustand patterns, React Compiler\n- Architecture (Medium) - monorepo structure, imports\n- Platform (Medium) - iOS\u002FAndroid specific patterns\n\n### react-view-transitions\n\nImplement smooth, native-feeling animations using React's View Transition API. Covers the `\u003CViewTransition>` component, `addTransitionType`, transition types, and Next.js integration including the `transitionTypes` prop on `next\u002Flink`.\n\n**Use when:**\n- Adding page transitions or route animations\n- Animating enter\u002Fexit of components\n- Creating shared element transitions (list-to-detail morphing)\n- Implementing directional (forward\u002Fback) navigation animations\n- Integrating view transitions in Next.js App Router\n- Animating list reorder or Suspense fallback reveals\n\n**Topics covered:**\n- `\u003CViewTransition>` component (enter, exit, update, share triggers)\n- `addTransitionType` for directional\u002Fcontext-specific animations\n- View Transition Classes and CSS pseudo-elements\n- Shared element transitions with the `name` prop\n- JavaScript animations via Web Animations API\n- Next.js `transitionTypes` prop on `next\u002Flink`\n- Ready-to-use CSS animation recipes (fade, slide, scale, flip)\n- Accessibility (`prefers-reduced-motion`)\n\n### composition-patterns\n\nReact composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition.\n\n**Use when:**\n- Refactoring components with many boolean props\n- Building reusable component libraries\n- Designing flexible APIs\n- Reviewing component architecture\n\n**Patterns covered:**\n- Extracting compound components\n- Lifting state to reduce props\n- Composing internals for flexibility\n- Avoiding prop drilling\n\n### vercel-deploy-claimable\n\nDeploy applications and websites to Vercel instantly. Designed for use with claude.ai and Claude Desktop to enable deployments directly from conversations. Deployments are \"claimable\" - users can transfer ownership to their own Vercel account.\n\n**Use when:**\n- \"Deploy my app\"\n- \"Deploy this to production\"\n- \"Push this live\"\n- \"Deploy and give me the link\"\n\n**Features:**\n- Auto-detects 40+ frameworks from `package.json`\n- Returns preview URL (live site) and claim URL (transfer ownership)\n- Handles static HTML projects automatically\n- Excludes `node_modules` and `.git` from uploads\n\n**How it works:**\n1. Packages your project into a tarball\n2. Detects framework (Next.js, Vite, Astro, etc.)\n3. Uploads to deployment service\n4. Returns preview URL and claim URL\n\n**Output:**\n```\nDeployment successful!\n\nPreview URL: https:\u002F\u002Fskill-deploy-abc123.vercel.app\nClaim URL:   https:\u002F\u002Fvercel.com\u002Fclaim-deployment?code=...\n```\n\n## Installation\n\n```bash\nnpx skills add vercel-labs\u002Fagent-skills\n```\n\n## Usage\n\nSkills are automatically available once installed. The agent will use them when relevant tasks are detected.\n\n**Examples:**\n```\nDeploy my app\n```\n```\nReview this React component for performance issues\n```\n```\nHelp me optimize this Next.js page\n```\n\n## Skill Structure\n\nEach skill contains:\n- `SKILL.md` - Instructions for the agent\n- `scripts\u002F` - Helper scripts for automation (optional)\n- `references\u002F` - Supporting documentation (optional)\n\n## License\n\nMIT\n","# 代理技能\n\n用于 AI 编码代理的一组技能。技能是封装好的指令和脚本，用于扩展代理的功能。\n\n技能遵循 [Agent Skills](https:\u002F\u002Fagentskills.io\u002F) 的格式。\n\n## 可用技能\n\n### react-best-practices\n\n由 Vercel 工程团队提供的 React 和 Next.js 性能优化指南。包含 8 个类别下的 40 多条规则，并按影响程度进行优先级排序。\n\n**适用场景：**\n- 编写新的 React 组件或 Next.js 页面\n- 实现数据获取（客户端或服务器端）\n- 审查代码中的性能问题\n- 优化打包体积或加载时间\n\n**涵盖的类别：**\n- 消除瀑布渲染（关键）\n- 打包体积优化（关键）\n- 服务器端性能（高）\n- 客户端数据获取（中高）\n- 重新渲染优化（中）\n- 渲染性能（中）\n- JavaScript 微优化（低到中）\n\n### web-design-guidelines\n\n审查 UI 代码是否符合 Web 界面最佳实践。针对可访问性、性能和用户体验方面的 100 多条规则对代码进行审计。\n\n**适用场景：**\n- “审查我的 UI”\n- “检查可访问性”\n- “设计审计”\n- “审查 UX”\n- “对照最佳实践检查我的网站”\n\n**涵盖的类别：**\n- 可访问性（aria-labels、语义化 HTML、键盘事件处理）\n- 焦点状态（可见焦点、focus-visible 模式）\n- 表单（自动填充、验证、错误处理）\n- 动画（prefers-reduced-motion、适合合成器的变换）\n- 排版（曲引号、省略号、等宽数字）\n- 图片（尺寸、懒加载、替代文本）\n- 性能（虚拟化、布局抖动、预连接）\n- 导航与状态（URL 反映状态、深度链接）\n- 深色模式与主题（color-scheme、theme-color meta）\n- 触摸与交互（touch-action、点击高亮）\n- 区域设置与国际化（Intl.DateTimeFormat、Intl.NumberFormat）\n\n### react-native-guidelines\n\n专为 AI 代理优化的 React Native 最佳实践。包含 7 个部分下的 16 条规则，覆盖性能、架构以及平台特定模式。\n\n**适用场景：**\n- 构建 React Native 或 Expo 应用\n- 优化移动端性能\n- 实现动画或手势操作\n- 使用原生模块或平台 API\n\n**涵盖的类别：**\n- 性能（关键）：FlashList、记忆化、密集计算\n- 布局（高）：flex 布局、安全区域、键盘处理\n- 动画（高）：Reanimated、手势处理\n- 图片（中）：expo-image、缓存、懒加载\n- 状态管理（中）：Zustand 模式、React Compiler\n- 架构（中）：monorepo 结构、导入\n- 平台（中）：iOS\u002FAndroid 特定模式\n\n### react-view-transitions\n\n使用 React 的 View Transition API 实现流畅、原生感的动画效果。涵盖 `\u003CViewTransition>` 组件、`addTransitionType`、过渡类型，以及与 Next.js 的集成，包括 `next\u002Flink` 上的 `transitionTypes` 属性。\n\n**适用场景：**\n- 添加页面过渡或路由动画\n- 为组件的进入\u002F退出添加动画\n- 创建共享元素过渡（列表到详情的形态变化）\n- 实现方向性（前进\u002F后退）导航动画\n- 在 Next.js App Router 中集成视图过渡\n- 动画实现列表重排或 Suspense 回退内容的显示\n\n**涵盖的主题：**\n- `\u003CViewTransition>` 组件（进入、退出、更新、共享触发）\n- `addTransitionType` 用于方向性或上下文特定的动画\n- 视图过渡类及 CSS 伪元素\n- 使用 `name` 属性实现共享元素过渡\n- 通过 Web Animations API 实现 JavaScript 动画\n- Next.js `transitionTypes` 属性在 `next\u002Flink` 上的应用\n- 即用型 CSS 动画配方（淡入淡出、滑动、缩放、翻转）\n- 可访问性支持（prefers-reduced-motion）\n\n### composition-patterns\n\n可扩展的 React 组合模式。帮助避免布尔属性泛滥，通过复合组件、状态提升和内部组合来实现。\n\n**适用场景：**\n- 重构具有大量布尔属性的组件\n- 构建可复用的组件库\n- 设计灵活的 API\n- 审查组件架构\n\n**涵盖的模式：**\n- 提取复合组件\n- 提升状态以减少属性传递\n- 通过内部组合实现灵活性\n- 避免属性钻透\n\n### vercel-deploy-claimable\n\n将应用程序和网站即时部署到 Vercel。专为 claude.ai 和 Claude Desktop 设计，支持直接从对话中进行部署。部署后的项目可以“认领”——用户可以将其所有权转移至自己的 Vercel 账户。\n\n**适用场景：**\n- “部署我的应用”\n- “把这个部署到生产环境”\n- “把这个上线”\n- “部署并给我链接”\n\n**功能：**\n- 自动检测 `package.json` 中的 40 多种框架\n- 返回预览 URL（实时站点）和认领 URL（转移所有权）\n- 自动处理静态 HTML 项目\n- 上传时排除 `node_modules` 和 `.git`\n\n**工作流程：**\n1. 将项目打包成 tarball\n2. 检测框架（Next.js、Vite、Astro 等）\n3. 上传至部署服务\n4. 返回预览 URL 和认领 URL\n\n**输出示例：**\n```\n部署成功！\n\n预览 URL：https:\u002F\u002Fskill-deploy-abc123.vercel.app\n认领 URL：https:\u002F\u002Fvercel.com\u002Fclaim-deployment?code=...\n```\n\n## 安装\n\n```bash\nnpx skills add vercel-labs\u002Fagent-skills\n```\n\n## 使用\n\n安装完成后，技能会自动可用。当检测到相关任务时，代理将自动调用这些技能。\n\n**示例：**\n```\n部署我的应用\n```\n```\n审查这个 React 组件是否存在性能问题\n```\n```\n帮我优化这个 Next.js 页面\n```\n\n## 技能结构\n\n每个技能包含：\n- `SKILL.md` - 代理使用的说明文档\n- `scripts\u002F` - 辅助自动化脚本（可选）\n- `references\u002F` - 支持性文档（可选）\n\n## 许可证\n\nMIT","# Agent Skills 快速上手指南\n\nAgent Skills 是一套专为 AI 编程助手设计的技能集合，通过预定义的指令和脚本扩展 Agent 在 React、Next.js、Web 设计及部署等方面的能力。\n\n## 环境准备\n\n*   **系统要求**：支持 Node.js 的操作系统（Windows, macOS, Linux）。\n*   **前置依赖**：\n    *   已安装 [Node.js](https:\u002F\u002Fnodejs.org\u002F) (建议 v18 或更高版本)。\n    *   已配置支持 Agent Skills 格式的 AI 助手环境（如 Claude Desktop 或其他兼容的 Agent 框架）。\n\n## 安装步骤\n\n使用 `npx` 一键安装官方技能包：\n\n```bash\nnpx skills add vercel-labs\u002Fagent-skills\n```\n\n> **提示**：如果国内网络访问 npm 源较慢，可临时配置淘宝镜像源后再执行安装：\n> ```bash\n> npm config set registry https:\u002F\u002Fregistry.npmmirror.com\n> npx skills add vercel-labs\u002Fagent-skills\n> ```\n\n## 基本使用\n\n安装完成后，技能将自动生效。您无需手动调用脚本，只需在与 AI 助手的对话中描述相关任务，Agent 会自动识别并应用对应的最佳实践技能。\n\n### 使用示例\n\n**1. 部署应用至 Vercel**\n直接发送部署指令，Agent 会自动打包项目、检测框架并返回预览链接及所有权转移链接。\n```text\nDeploy my app\n```\n*输出示例：*\n```text\nDeployment successful!\nPreview URL: https:\u002F\u002Fskill-deploy-abc123.vercel.app\nClaim URL:   https:\u002F\u002Fvercel.com\u002Fclaim-deployment?code=...\n```\n\n**2. 代码性能审查与优化**\n请求审查 React 组件或 Next.js 页面，Agent 将依据 Vercel 工程团队的 40+ 条规则进行检查。\n```text\nReview this React component for performance issues\n```\n或者针对特定场景：\n```text\nHelp me optimize this Next.js page\n```\n\n**3. UI 设计与无障碍审计**\n请求检查界面的无障碍性、设计规范或用户体验。\n```text\nCheck accessibility\n```\n```text\nAudit design\n```\n\n**4. 移动端开发指导**\n在构建 React Native 或 Expo 应用时，询问架构或性能问题。\n```text\nBuilding React Native or Expo apps\n```\n\n**5. 实现视图过渡动画**\n请求添加平滑的页面切换或共享元素过渡效果。\n```text\nAdding page transitions or route animations\n```","某前端团队正在基于 Next.js 重构电商详情页，需在两周内完成高性能页面开发并兼顾无障碍访问标准。\n\n### 没有 agent-skills 时\n- AI 生成的代码常出现数据获取“瀑布流”，导致首屏加载缓慢，开发者需手动排查性能瓶颈。\n- 界面组件缺乏完整的无障碍属性（如 aria-labels），后续被测试团队退回整改，重复沟通成本高。\n- 列表页到详情页的跳转生硬，AI 无法直接提供符合原生体验的共享元素过渡动画方案。\n- 组件内部布尔值 Props 泛滥，逻辑耦合严重，后期维护时难以扩展新功能。\n- 移动端适配遗漏安全区域处理，导致在 iPhone 刘海屏设备上内容被遮挡。\n\n### 使用 agent-skills 后\n- 调用 `react-best-practices` 技能，AI 自动采用并行数据获取模式，消除渲染阻塞，首屏速度提升 40%。\n- 结合 `web-design-guidelines` 进行代码审计，自动补全键盘导航与语义化标签，一次性通过无障碍验收。\n- 利用 `react-view-transitions` 技能，直接生成带有方向感知的平滑路由过渡动画，用户体验媲美原生应用。\n- 借助 `composition-patterns` 重构组件架构，用复合组件替代繁琐的布尔开关，代码清晰度显著改善。\n- 应用 `react-native-guidelines`（针对混合端）或 Web 布局规范，自动识别并修复安全区域与触摸反馈问题。\n\nagent-skills 将 Vercel 官方的工程最佳实践转化为 AI 的可执行指令，让代码生成从“能跑”直接跃升至“生产级高质量”。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fvercel-labs_agent-skills_315f06e5.png","vercel-labs","Vercel Labs","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fvercel-labs_7a3dc422.png","Develop. Preview. Ship. Creators of Next.js.",null,"support@vercel.com","vercel","https:\u002F\u002Fvercel.com","https:\u002F\u002Fgithub.com\u002Fvercel-labs",[85,89,93],{"name":86,"color":87,"percentage":88},"JavaScript","#f1e05a",41.9,{"name":90,"color":91,"percentage":92},"Shell","#89e051",34.5,{"name":94,"color":95,"percentage":96},"TypeScript","#3178c6",23.6,24349,2216,"2026-04-03T11:02:32",1,"未说明",{"notes":103,"python":101,"dependencies":104},"该工具是用于 AI 编码代理（如 Claude）的技能包集合，并非独立的机器学习模型。安装需通过 `npx` 命令运行，依赖 Node.js 环境。技能在代理检测到相关任务时自动触发，无需配置 GPU 或特定显存。主要功能包括 React\u002FNext.js 性能优化指南、Web 设计规范审查、React Native 最佳实践、Vercel 一键部署等。",[105],"npx (Node.js package executor)",[15,13],5,"2026-03-27T02:49:30.150509","2026-04-06T08:52:36.349984",[111,116,121,126,131,136],{"id":112,"question_zh":113,"answer_zh":114,"source_url":115},10431,"如何在 Claude Code 中使用此工具，既然它不支持 AGENTS.md？","Claude Code 通过读取技能目录中的 `SKILL.md` 文件自动发现技能。安装后，技能会被放置在 `~\u002F.claude\u002Fskills\u002F`（全局）或 `.claude\u002Fskills\u002F`（项目级）目录下。结构示例如下：\n```\n~\u002F.claude\u002Fskills\u002Fvercel-react-best-practices\u002F\n├── SKILL.md    ← Claude Code 读取此文件\n└── rules\u002F      ← 规则按需加载\n```\n安装命令为 `npx add-skill vercel-labs\u002Fagent-skills`。安装完成后，你可以直接询问 Claude Code“有哪些可用技能？”来测试，或要求其审计代码库、审查 React 组件性能等。","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills\u002Fissues\u002F56",{"id":117,"question_zh":118,"answer_zh":119,"source_url":120},10432,"如何将开源的技能添加到 skills.sh 网站以便他人安装？","无需手动提交到网站。根据官方 FAQ，只需让用户运行 `npx skills add \u003Cowner\u002Frepo>` 命令安装你的技能即可。网站的排名是通过匿名的安装遥测数据自动追踪和更新的，只要有人安装，就会自动出现在列表中。","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills\u002Fissues\u002F115",{"id":122,"question_zh":123,"answer_zh":124,"source_url":125},10433,"如何在命令行中搜索或列出所有可用的技能？","目前 `npx skills` 命令行工具尚未内置列表和搜索功能。官方推荐的解决方案是访问网页版目录进行查找：https:\u002F\u002Fskills.sh\u002Fvercel-labs\u002Fskills\u002Ffind-skills。该页面提供了技能的浏览和搜索功能。","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills\u002Fissues\u002F88",{"id":127,"question_zh":128,"answer_zh":129,"source_url":130},10434,"在 Cursor 编辑器中安装技能后无法识别 SKILL.md 文件怎么办？","这是由于 `npx add-skill` 创建的符号链接（symbolic links）在 Cursor 中未被正确识别导致的。解决方法是手动将实际文件复制过去，而不是使用符号链接。请执行以下命令：\n```bash\ncp -r .\u002Fagents\u002Fskills\u002Fvercel-react-best-practices .\u002Fcursor\u002Fskills\u002Fvercel-react-best-practices\n```\n复制完成后，Cursor 即可正常识别技能文件。","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills\u002Fissues\u002F82",{"id":132,"question_zh":133,"answer_zh":134,"source_url":135},10435,"关于“批量处理 DOM CSS 变更”规则的误解：逐行修改样式真的会导致性能问题吗？","该规则的描述曾存在误导。实际上，现代浏览器引擎会自动批量处理样式重计算和重绘。逐行修改样式属性（如 `element.style.width`, `element.style.height` 等）本身是没有问题的。\n真正的性能杀手是“布局抖动”（Layout Thrashing），即在修改样式后，立即读取依赖布局的属性（如 `getBoundingClientRect()`, `offsetWidth`, `scrollTop` 等），这会强制浏览器立即重新计算布局。只要避免在样式修改后立即同步读取布局指标，就不会有性能问题。","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills\u002Fissues\u002F50",{"id":137,"question_zh":138,"answer_zh":139,"source_url":140},10436,"是否支持 VS Code (GitHub Copilot) 的技能安装？","是的，官方已添加对 GitHub Copilot 的支持。相关功能已在 PR #15 中合并。现在 `add-skill` 流程可以检测 VS Code 并将技能安装到适当的 VS Code Copilot 配置中，允许用户在不同 IDE 和代理之间复用相同的技能定义，无需维护平行的配置文件。","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills\u002Fissues\u002F27",[]]