Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
jackspace Bundle Sveltia CmsSveltia CMS, a lightweight Git-backed headless CMS and modern successor to Decap/Netlify CMS (about 300 KB bundle, GraphQL-based). Covers admin/config.yml collection config, YAML and TOML frontmatter, OAuth setup including a Cloudflare Workers OAuth proxy, i18n with DeepL translation, image optimization, and deployment on Cloudflare Pages, Netlify, Vercel, or GitHub Pages. Framework-agnostic across Hugo, Jekyll, 11ty, Gatsby, Astro, SvelteKit, and Next.js. Use when adding a Git-based editing interface to a static site for non-technical editors, migrating from Decap or Netlify CMS, or fixing OAuth authentication failures, YAML parse errors, CORS/COOP policy problems, content not listing, script loading errors, or image upload failures.
-
jackspace Bundle Vercel BlobCovers integrating Vercel Blob object storage (@vercel/blob) into Next.js and other Vercel apps: server-side uploads with put, client-side uploads via presigned client upload tokens, listing, downloading and deleting blobs, streaming and multipart uploads for large files, public versus private access, content-type and caching settings, and automatic CDN delivery. Use when adding file, image, PDF or video uploads to a Next.js app, handling user-generated content such as avatars and attachments, building file management features, migrating from Cloudflare R2 to Vercel Blob, or hitting errors like BLOB_READ_WRITE_TOKEN is not defined, file size limit exceeded, client upload token failures, filename collisions, upload timeouts, or blobs that fail to delete.
-
jackspace Bundle Auto AnimateProduction-tested setup for AutoAnimate (@formkit/auto-animate), a zero-config drop-in library that automatically adds smooth transitions when DOM elements are added, removed, or moved, at about 3 KB gzipped with no dependencies and built-in prefers-reduced-motion support. Covers the useAutoAnimate React hook, its stable-key and always-rendered-parent requirements, and SSR-safe usage. Use when animating dynamic lists, filter and sort interfaces, accordions, toast notifications, or form validation messages without writing animation code, when working in Vite + React + Tailwind, when deploying to Cloudflare Workers Static Assets, or when hitting SSR errors from animation libraries. For gestures, scroll-linked effects, or complex sequences, use the motion skill instead.
-
jackspace Bundle Openai AgentsGuide to the OpenAI Agents SDK for JavaScript and TypeScript (@openai/agents, @openai/agents- realtime), covering text agents and realtime voice agents. Covers agents, tools defined with Zod schemas, multi-agent workflows and handoffs, input and output guardrails, structured outputs, streaming, human-in-the-loop patterns, and integrations for Cloudflare Workers, Next.js, React, Hono and Node.js, with templates for each agent type plus error handling and debugging strategies. Prevents 9+ documented errors including Zod schema type errors, MCP tracing failures, agent infinite loops, tool call failures, and schema mismatches. Use when building or debugging agent workflows with this SDK, adding tools or handoffs, implementing realtime voice agents, or hitting those errors.
-
jackspace Bundle Better ChatbotSupplies the project-specific conventions, architecture, and contribution guidelines for the better-chatbot open-source AI chat platform (github.com/cgoinglove/better-chatbot; Next.js 15, Vercel AI SDK 5, Better Auth, Drizzle ORM, PostgreSQL). Covers the API architecture, the three- tier tool system (MCP, Workflow, Default), server action validators and the safe() wrapper, database repository patterns, compound component design, DAG workflow builder internals, Playwright E2E test setup, and principles such as progressive enhancement, defensive programming, and streaming-first, plus templates for adding tools, API routes, and repositories. Use when working in the better-chatbot repository, contributing features or fixes, adding API routes or database queries, implementing tools and workflows, building UI components, or integrating multiple AI providers.
-
jamie-bitflight Bundle Prepare Walkthrough PresentationTransforms validated /linear-walkthrough artifacts into one presentation-ready deck outline per major codebase component. Use when the user asks to create a presentation, prepare a walkthrough deck, build an onboarding deck, produce an architecture review deck, or summarize a codebase for a technical audience. Requires walkthrough directory output -- reads unified walkthrough, per-section files, validation reports, coverage maps, entry points, and open questions -- then orchestrates four parallel agent phases to produce slide outlines with speaker notes, evidence references, and suggested visuals.
-
harshahosur81 Skill C4 ContextExpert C4 Context-level documentation specialist. Creates high-level system context diagrams, documents personas, user journeys, system features, and external dependencies. Synthesizes container and component documentation with system documentation to create comprehensive context-level architecture. Use when creating the highest-level C4 system context documentation.
-
harshahosur81 Skill UI UX DesignerCreate interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
-
harshahosur81 Skill Mobile DeveloperDevelop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use PROACTIVELY for mobile features, cross-platform code, or app optimization.
-
jackspace Bundle Tanstack QueryTanStack Query v5 (React Query) server-state management for React: QueryClient and QueryClientProvider setup, custom useQuery hooks, useMutation with error handling, useInfiniteQuery pagination, useSuspenseQuery, query keys, staleTime/gcTime caching, invalidation, prefetching, optimistic updates, and React Query Devtools. Use when adding data fetching to a React app, debugging stale data or caching problems, fixing request waterfalls or background refetching, or migrating React Query v4 to v5 breaking changes: cacheTime renamed to gcTime, isLoading renamed to isPending, required object syntax, initialPageParam required, keepPreviousData removed in favor of placeholderData, and onSuccess/onError query callbacks removed.
-
jackspace Bundle Project PlanningGenerates comprehensive planning documentation for web application projects, structuring work into context-safe phases with built-in verification criteria. Creates IMPLEMENTATION_PHASES.md, DATABASE_SCHEMA.md, API_ENDPOINTS.md, ARCHITECTURE.md, and other planning docs based on project needs. Optimized for Cloudflare Workers + Vite + React stack. Use when starting new projects, adding major features, or restructuring existing work into manageable phases. Keywords: project planning, planning documentation, IMPLEMENTATION_PHASES.md, DATABASE_SCHEMA.md, API_ENDPOINTS.md, ARCHITECTURE.md, UI_COMPONENTS.md, TESTING.md, AGENTS_CONFIG.md, phased development, context-safe phases, verification criteria, exit criteria, planning docs generator, web app planning, Cloudflare Workers planning, Vite React planning, project structure, project phases, major features planning, new project setup
-
jackspace Bundle Cloudflare NextjsCovers deploying Next.js apps (App Router and Pages Router) to Cloudflare Workers with the OpenNext adapter @opennextjs/cloudflare: scaffolding new projects via create-cloudflare, migrating existing apps, wrangler.jsonc and open-next.config.ts setup, the nodejs_compat flag and compatibility_date, the dual next dev plus opennextjs-cloudflare preview workflow, deployment, image optimization, caching, and bindings for D1, R2, KV and Workers AI. Use when running SSR, ISR, server components, server actions or middleware on Workers, moving a Next.js app from Vercel or AWS to Cloudflare, or hitting errors such as worker size limit exceeded (3 MiB free, 10 MiB paid), FinalizationRegistry is not defined, Cannot perform I/O on behalf of a different request, Turbopack chunk load failures, request-scoped database connection problems, or the CVE-2025-6087 SSRF vulnerability.
-
jackspace Bundle Elevenlabs AgentsGuide to building conversational AI voice agents on the ElevenLabs Agents Platform (ASR, LLM, TTS, turn-taking model). Covers agent configuration and system prompts, workflows, multi-voice, pronunciation dictionaries and speed control, knowledge base RAG, client/server/MCP/system tools, Scribe real-time STT, WebRTC and WebSocket connections, testing and evaluation, analytics, cost optimization, GDPR/HIPAA/SOC 2 compliance, and agents-as-code CLI workflows. Includes production templates for @elevenlabs/react, @elevenlabs/client, @elevenlabs/react- native, Next.js, Swift and Cloudflare Workers, plus 17+ documented fixes: deprecated @11labs packages, Android audio cutoff, CSP violations, missing dynamic variables, case-sensitive tool names, webhook authentication failures and WebRTC misconfiguration. Use when building, configuring or debugging an ElevenLabs voice agent.
-
harshahosur81 Skill C4 ComponentExpert C4 Component-level documentation specialist. Synthesizes C4 Code-level documentation into Component-level architecture, defining component boundaries, interfaces, and relationships. Creates component diagrams and documentation. Use when synthesizing code-level documentation into logical components.
-
harshahosur81 Skill C4 ContainerExpert C4 Container-level documentation specialist. Synthesizes Component-level documentation into Container-level architecture, mapping components to deployment units, documenting container interfaces as APIs, and creating container diagrams. Use when synthesizing components into deployment containers and documenting system deployment architecture.
-
human-avatar Skill S4h Systems Emergence DetectionIdentifies system-level properties that exist nowhere in any individual component. Use when asked about 'emergent behavior', 'components are fine but the system isn't', 'why does the whole behave like this', or 'what creates this property'.
-
jackspace Bundle Content CollectionsContent Collections, a TypeScript-first build tool that turns local Markdown and MDX files into type-safe, Zod-validated data collections. Covers @content-collections/core and the Vite plugin, defineCollection and defineConfig, the tsconfig path alias to .content-collections/generated, MDX compilation with compileMDX and the MDXContent component, rehype/remark plugins, transform functions for computed properties, and Cloudflare Workers deployment. Use when building blogs, documentation sites, or content-heavy Vite + React apps, defining content schemas with Zod, migrating from Contentlayer, or debugging errors like module not found content-collections, path alias not working, MDX type errors, or collections not updating after edits.
-
jackspace Bundle React Hook Form ZodType-safe validated forms in React with react-hook-form and Zod, wired through zodResolver from @hookform/resolvers, covering useForm, register, handleSubmit, formState, Controller and useController, useFieldArray, useWatch, z.infer type inference, and shadcn/ui Form and Field components. Use when building validated React forms, sharing one Zod schema across client and server validation, handling nested objects, array fields, conditional or async validation and zod refine, building multi-step forms and wizards, adding dynamic repeatable fields, optimizing form re-renders, making error handling accessible, or debugging validation issues such as resolver not found or uncontrolled-to-controlled input warnings.
-
jackspace Bundle Cloudflare TurnstileCovers implementing Cloudflare Turnstile, the invisible CAPTCHA alternative for bot protection: creating widgets and sitekey/secret pairs, embedding the cf-turnstile widget or @marsidev/react- turnstile, server-side token validation through the siteverify API, widget lifecycle and reset handling, pre-clearance for SPAs, custom actions and cData, required CSP directives, and E2E testing with dummy keys. Use when protecting forms, login and signup flows or API endpoints from spam and bots, migrating from reCAPTCHA or hCaptcha, integrating Turnstile with React, Next.js, Hono or Workers, or debugging error 110200 unknown domain, 300030 widget crash, 600010 configuration error, 200500 CSP iframe blocking, token expiry and single-use reuse failures, or Safari 18 Hide IP problems.
-
jackspace Bundle Neon Vercel PostgresIntegrates Neon serverless Postgres and Vercel Postgres (built on Neon) into web and edge applications: the @neondatabase/serverless and @vercel/postgres HTTP and WebSocket drivers, pooled versus non-pooled connection strings, sslmode requirements, git-like database branching with neonctl, Drizzle ORM and Prisma integration, migrations, and point-in-time restore. Use when setting up serverless Postgres for Cloudflare Workers, Vercel Edge Functions, Next.js, or Node.js serverless functions, configuring connection pooling for edge runtimes, creating database branches, migrating from D1/SQLite or traditional Postgres to serverless Postgres, or debugging errors like connection pool exhausted, TCP connections not supported in serverless, transaction timeouts, and sslmode required.
-
jackspace Bundle Thesys Generative UITheSys C1 Generative UI API (@thesysai/genui-sdk with @crayonai/react-ui) for React apps that stream interactive components such as forms, charts, and tables instead of plain text LLM output. Covers integration for Vite + React, Next.js, and Cloudflare Workers with OpenAI, Anthropic Claude, or Workers AI backends, plus C1Component and ThemeProvider, tool calling with Zod schemas, theming, thread management and persistence, and production deployment. Use when building conversational UIs, AI assistants and copilots, AI-generated dashboards, or dynamic forms, or when debugging empty agent responses, streaming and response transformation failures, ignored system prompts, themes not applying, SDK/API version mismatches, CORS failures, or rate limit crashes.
-
jamie-bitflight Skill Code Review WebUse when reviewing web frontend code — HTML, CSS, JSX, or browser-targeted JavaScript. Enforces accessibility (WCAG AA, aria labels, focus management), XSS prevention (innerHTML, dangerouslySetInnerHTML), performance (layout thrash, CLS, lazy loading), CSS design tokens, form labeling, and event listener cleanup. Loaded by dh:code-reviewer on *.html, *.css, *.jsx detection.
-
jackspace Bundle Zustand State ManagementProduction-tested patterns for Zustand state management in React with TypeScript: creating type- safe stores, the slices pattern for modular stores, persist middleware backed by localStorage or sessionStorage, devtools and immer middleware, and selector plus shallow-equality patterns that avoid extra re-renders. Documents fixes for five recurring problems: Next.js SSR hydration mismatches and text content mismatch errors, the create<T>()() double-parentheses TypeScript syntax, persist middleware export errors, infinite render loops, and slices pattern type inference failures. Use when setting up global state in React, migrating from Redux or Context API, adding state persistence, wiring devtools, or debugging Zustand v5 typing and hydration issues.
-
jackspace Bundle Github Project AutomationAutomates GitHub repository setup: 12 production-tested GitHub Actions workflow templates (React/Vite, Node matrix testing, Python, Cloudflare Workers deploy, basic CI), 4 YAML issue and pull request templates, Dependabot config, CodeQL security scanning, branch protection, and CODEOWNERS. Prevents 18 documented errors in workflow YAML syntax and indentation, action version pinning, runner versions, issue template structure, Dependabot PR limits, and CodeQL permissions such as security-events: write. Use when bootstrapping a new repo, adding CI/CD pipelines, creating issue or PR templates, enabling Dependabot or CodeQL scanning, deploying to Cloudflare Workers from GitHub Actions, or fixing GitHub Actions workflow YAML syntax errors.
-
jackspace Bundle MarkitdownConvert various file formats (PDF, Office documents, images, audio, web content, structured data) to Markdown optimized for LLM processing. Use when converting documents to markdown, extracting text from PDFs/Office files, transcribing audio, performing OCR on images, extracting YouTube transcripts, or processing batches of files. Supports 20+ formats including DOCX, XLSX, PPTX, PDF, HTML, EPUB, CSV, JSON, images with OCR, and audio with transcription.
-
jackspace Bundle Cloudflare Browser RenderingReference for Cloudflare Browser Rendering, headless Chrome on Workers via @cloudflare/puppeteer and @cloudflare/playwright. Covers the browser binding, puppeteer.launch, puppeteer.connect and puppeteer.sessions, page.goto, page.screenshot, page.pdf, page.evaluate, browser.close and disconnect, session reuse with keep_alive, incognito contexts, batch scraping and crawling, and pricing and concurrency limits. Use when taking screenshots, generating PDFs from URLs or HTML, scraping or crawling sites, automating or testing web apps from a Worker, extracting page content for AI, or troubleshooting browser timeouts, concurrency limits, memory exceeded errors, XPath selectors not supported, or Cannot read properties of undefined (reading fetch).
-
harshahosur81 Skill Component ScaffoldYou are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
-
harshahosur81 Skill Frontend DeveloperBuild React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
-
jackspace Bundle Cloudflare Full Stack ScaffoldProduction-ready starter project for React 19 + Cloudflare Workers + Hono, with D1, KV, R2, and Workers AI pre-configured plus opt-in enable scripts for Clerk auth, AI chat, Queues, and Vectorize. Ships Tailwind v4, shadcn/ui, TypeScript, the Vite Cloudflare plugin, AI SDK provider setup (Workers AI, OpenAI, Anthropic, Gemini), planning docs, and a session handoff protocol. Use when starting a new full-stack Cloudflare project, scaffolding a React + Hono web app, building an AI chat or RAG application, or needing a complete production boilerplate instead of hours of manual setup. Prevents service binding mistakes, CORS errors, frontend-backend connection issues, Clerk integration problems, and AI SDK configuration confusion.
-
jackspace Bundle Cloudflare Full Stack IntegrationProduction-tested patterns for wiring a React frontend to a Cloudflare Workers + Hono backend with Clerk authentication and D1, including an API client that attaches auth tokens automatically, a ProtectedRoute auth gate with loading states, CORS middleware for dev and production, Clerk JWT verification middleware, wrangler.jsonc bindings, .dev.vars environment variables, and @cloudflare/vite-plugin config (the Worker and frontend share one dev port, so relative /api URLs are correct). Use when connecting frontend to backend, implementing an auth flow, or troubleshooting CORS errors, 401 Unauthorized responses, auth tokens not passing, race conditions while auth is still loading, environment variable confusion, or D1 connection issues.
-
enuno Skill T4 StackT4 Stack - Full-stack TypeScript starter for React Native + Web with Tamagui, tRPC, Cloudflare edge deployment, and universal code sharing across iOS, Android, and PWA
1 -
harshahosur81 Skill Angular MigrationMigrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.
-
harshahosur81 Skill Accessibility AuditYou are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct comprehensive audits, identify barriers, provide remediation guidance
-
harshahosur81 Skill Wcag Audit PatternsConduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
-
harshahosur81 Skill Unity Ecs PatternsMaster Unity ECS (Entity Component System) with DOTS, Jobs, and Burst for high-performance game development. Use when building data-oriented games, optimizing performance, or working with large entity counts.
-
harshahosur81 Skill Typescript ScaffoldYou are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include sveltia-cms, vercel-blob, auto-animate. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.