[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2945":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},2945,"agent-skills","vercel-labs\u002Fagent-skills","vercel-labs","Vercel's official collection of agent skills","https:\u002F\u002Fskills.sh\u002Fvercel-labs\u002Fagent-skills",null,"JavaScript",27818,2516,115,54,0,26,252,1395,143,117,false,"main",true,[],"2026-06-12 04:00:16","# 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[![skills.sh](https:\u002F\u002Fskills.sh\u002Fb\u002Fvercel-labs\u002Fagent-skills)](https:\u002F\u002Fskills.sh\u002Fvercel-labs\u002Fagent-skills)\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\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\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\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\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\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\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\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\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\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\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\n- \"Deploy my app\"\n- \"Deploy this to production\"\n- \"Push this live\"\n- \"Deploy and give me the link\"\n\n**Features:**\n\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:**\n\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\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\n```\nDeploy my app\n```\n\n```\nReview this React component for performance issues\n```\n\n```\nHelp me optimize this Next.js page\n```\n\n## Skill Structure\n\nEach skill contains:\n\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","Agent Skills 是一个由 Vercel 官方维护的 AI 编程助手技能集合，这些技能以打包的形式提供指令和脚本，扩展了AI代理的能力。该项目使用JavaScript编写，遵循Agent Skills格式规范。它包含了一系列针对不同场景优化的技能，如React最佳实践、Web设计指南、React Native指导原则及React视图过渡等，旨在帮助开发者在编写新组件、审查代码性能问题、优化加载时间以及确保网页界面符合最佳实践等方面提高效率。适用于需要提升React或Next.js项目性能、改进UI\u002FUX设计质量、优化移动应用开发流程等场景下的开发者。",2,"2026-06-11 02:51:51","top_language"]