vercel-ai-elements

Community-curated, human-vetted skills for AI coding and agent tools. Focused on practical, production-ready skill implementations.

200 skills

CFN Loop skill for unified error handling, batching, and structured logging across agent failures with categorization and recovery.

169 skills · 9 agents

Search and discover Claude Code skills and MCP servers from marketplaces and GitHub. Use to find tools for specific tasks or explore available integrations before building custom solutions.

160 skills

Collection of Claude Code plugins tailored for streamlining software development and engineering processes.

85 skills

Pre-built SWE workflows for Claude Code covering development patterns, testing strategies, and engineering best practices for software projects.

32 skills · 40 agents

Supercharged plugin collection with 109 components: 22 agents, 32 commands, 55 skills across 13 modular plugins. Includes deep reasoning, autonomous dev loops, DDD architecture, git automation, and design system enforcement.

66 skills

AI agent skills for CopilotKit — search the current documentation and source, and drive the CopilotKit CLI

9 skills · 2 MCP servers

Use MagicPath to find, inspect, install, create, and edit UI components from Codex.

1 skill

Find UI components and themes, retrieve their code, and use hosted 21st AI when enabled.

1 skill · 1 MCP server

Full-stack web development with app scaffolding and page generation

2 commands

Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>

1 agent

Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>

1 agent