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.
-
tomevault-io Bundle Openai Image Gen 6Batch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery. Use when this capability is needed.
- tomevault-io Bundle Agents Sdk 6
Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Use when this capability is needed.
- tomevault-io Bundle Frontend Dev 3
Expert React/Next.js frontend engineer context and rules. Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 6
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling Use when this capability is needed.
- tomevault-io Bundle Vue Router 2
Use when adding, changing, testing, or reviewing Vue Router routes, route names, navigation, guards, lazy-loaded pages, scroll behavior, route-level accessibility, or page composition in Vue 3 apps.
- tomevault-io Bundle Frontend Design 38
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle Docs Writer Reference 2
Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack. Use when this capability is needed.
- tomevault-io Bundle Docs Writer Reference 3
Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack. Use when this capability is needed.
- tomevault-io Bundle Docs Writer Reference 4
Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack. Use when this capability is needed.
- tomevault-io Bundle Docs Writer Reference 5
Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack. Use when this capability is needed.
- tomevault-io Bundle Docs Writer Reference 6
Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack. Use when this capability is needed.
- tomevault-io Bundle React Expert 3
Use when researching React APIs or concepts for documentation. Use when you need authoritative usage examples, caveats, warnings, or errors for a React feature.
- tomevault-io Bundle Docs Writer Reference 7
Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack. Use when this capability is needed.
- tomevault-io Bundle Docs Writer Reference 8
Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack. Use when this capability is needed.
- tomevault-io Bundle Docs Writer Reference 9
Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack. Use when this capability is needed.
- tomevault-io Bundle React Router Framework Mode 2
Build full-stack React applications using React Router's framework mode. Use when configuring routes, working with loaders and actions, handling forms, handling navigation, pending/optimistic UI, error boundaries, or working with react-router.config.ts or other react router conventions. Use when this capability is needed.
- tomevault-io Bundle React Expert 4
React expert for hooks, state management, Server Components, and performance optimization Use when this capability is needed.
- tomevault-io Bundle Frontend Patterns 2
Use when frontend UI work needs accessibility, responsive layout, loading and error states, or performance guardrails under an approved visual direction.
- tomevault-io Bundle AI Sdk UI 2
Vercel AI SDK v5 React hooks (useChat, useCompletion, useObject) for AI chat interfaces. Use for React/Next.js AI apps or encountering parse stream errors, no response, streaming issues. Use when this capability is needed.
- tomevault-io Bundle Svelte Testing 2
Fix and create Svelte 5 tests with vitest-browser-svelte and Playwright. Use when fixing broken tests, debugging failures, writing unit/SSR/e2e tests, or working with vitest/Playwright. Use when this capability is needed.
- tomevault-io Bundle UI Design System 2
Guide to the UI/CSS architecture, including Tailwind, Shadcn UI, and Theming. Use when this capability is needed.
- tomevault-io Bundle Wiki QA 2
Answers questions about a code repository using source file analysis. Use when the user asks a question about how something works, wants to understand a component, or needs help navigating the code... Use when this capability is needed.
- tomevault-io Bundle React Native 5
React Native production guidance for mobile architecture, runtime performance, navigation, and platform API boundaries. Use when this capability is needed.
- tomevault-io Bundle React 12
React 19 performance optimization guidelines for concurrent rendering, Server Components, actions, hooks, and memoization (formerly react-19). This skill should be used when writing React 19 components, using concurrent features, or optimizing re-renders. This skill does NOT cover Next.js-specific features like App Router, next.config.js, or Next.js caching (use nextjs-16-app-router skill). For client-side form validation with React Hook Form, use react-hook-form skill. Use when this capability is needed.
- tomevault-io Bundle Remotion Best Practices 9
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle Styling 2
Guidance for frontend styling. Use when changing Tailwind classes, CSS tokens, light or dark themes, semantic color usage, accessibility contrast, layout wrappers, or visual UI states. Use when this capability is needed.
- tomevault-io Bundle React Testing 4
Pragmatic React/Vitest testing workflow for DataConnect. Use when writing or updating React/UI code, deciding what tests to add, running tests for a change, or before commit. Use when this capability is needed.
- tomevault-io Bundle Translate 2
Manages translation files for react-i18next. Adds/removes keys across 15 languages, keeps files sorted, enforces fixed-word rules, and verifies sync with en.json.
- tomevault-io Bundle Remotion Best Practices 10
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle Vercel React Best Practices 29
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Use when this capability is needed.
- tomevault-io Bundle React Best Practices 4
React performance optimization guidelines. Use when writing, reviewing, or refactoring React components to ensure optimal rendering and bundle patterns. Triggers on tasks involving React components, hooks, memoization, or bundle optimization. Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 10
Vue.js performance optimization guidelines for building fast, maintainable applications. This skill should be used when writing, reviewing, or refactoring Vue.js code to ensure optimal performance patterns. Triggers on tasks involving Vue components, reactivity, Composition API, state management, or performance improvements. Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 10
Test local web applications with Playwright. Use when asked to verify frontend functionality, debug UI behavior, capture browser screenshots, or inspect browser logs. Use when this capability is needed.
- tomevault-io Bundle Vue 48
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
- tomevault-io Bundle Performance 6
Performance optimization patterns covering Core Web Vitals, React render optimization, lazy loading, image optimization, backend profiling, LLM inference, and sustainability UX. Use when improving page speed, debugging slow renders, optimizing bundles, reducing image payload, profiling backend, deploying LLMs efficiently, or reducing digital carbon footprint. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 58
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Use when this capability is needed.
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 openai-image-gen, agents-sdk, frontend-dev. 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.