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 Code Review 9Review code for AEM Edge Delivery Services projects. Use at the end of development (before PR) for self-review, or to review pull requests. Validates code quality, performance, accessibility, and adherence to EDS best practices. Use when this capability is needed.
- tomevault-io Bundle Web Design Guidelines 2
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Use when this capability is needed.
- tomevault-io Bundle React 4
React component patterns, hooks, naming conventions, and the query-language translation system for Graph Explorer. Use when this capability is needed.
- tomevault-io Bundle Browser 2
Browser automation for web apps and Electron desktop apps. Supports navigation, screenshots, ARIA snapshots, forms, data extraction, and visual verification. Use when inspecting UI, verifying frontend behavior, or automating browser/desktop workflows. Use when this capability is needed.
- tomevault-io Bundle Vue 35
Vue 3 component patterns, composition API, reactive data binding, two-way binding with defineModel, and best practices. Use when this capability is needed.
- tomevault-io Bundle Testing 25
Use when writing tests, running tests, adding test coverage, or debugging test failures. Unit and component testing with Vitest and React Testing Library.
- tomevault-io Bundle Frontend Design 16
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 Frontend Design 17
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 Vue 36
Vue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render/vue, defining Vue component registries, or rendering AI-generated specs in Vue. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 18
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 Vue 37
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 19
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.
- tomevault-io Bundle Vercel React Best Practices 18
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 Vercel Composition Patterns 5
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
- tomevault-io Bundle Remotion Best Practices 6
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle Git Release 2
Create consistent releases and changelogs Use when this capability is needed.
- tomevault-io Bundle Vercel React Best Practices 19
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 Web Artifacts Builder 3
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. Use when this capability is needed.
- tomevault-io Bundle Vercel Composition Patterns 6
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
- tomevault-io Bundle Nextjs I18N 2
Next.js 16 internationalization with next-intl or DIY. Use when implementing i18n, translations, localization, multilingual, language switch, locale routing, or formatters. Use when this capability is needed.
- tomevault-io Bundle Web Design Guidelines 6
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Use when this capability is needed.
- tomevault-io Bundle Next Upgrade 2
Upgrade Next.js to the latest version following official migration guides and codemods Use when this capability is needed.
- tomevault-io Bundle Vercel React Best Practices 20
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 Frontend Design 20
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.
- tomevault-io Bundle Tanstack Query 2
TanStack Query (React Query) v5 best practices for data fetching, caching, and mutations. Use when fetching server data with useQuery, setting up mutations with useMutation, configuring caching strategies, managing query keys, handling optimistic updates, invalidating queries, or integrating TanStack Query into a React/TypeScript project. Triggers on "React Query", "TanStack Query", "useQuery", "useMutation", "query keys", "stale time", "cache invalidation", "optimistic update", "prefetch", "infinite query". Use when this capability is needed.
- tomevault-io Bundle Vue 38
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive. Use when this capability is needed.
- tomevault-io Bundle Nuxt 4
This skill should be used when working on Nuxt projects (v3+). Use it for building Vue applications with Nuxt's file-based routing, server-side rendering, and auto-import features. Trigger when working with .vue or .ts files in Nuxt directories (pages/, server/, composables/, middleware/), nuxt.config.ts, or when the project contains a nuxt dependency in package.json. Also trigger for questions about Nuxt concepts like composables, auto-imports, server routes, SSR/SSG patterns, or file-based routing. Use when this capability is needed.
- tomevault-io Bundle Writing Plans 3
Use when design is complete and you need detailed implementation tasks for engineers with zero codebase context - creates comprehensive full-stack implementation plans with exact file paths, complete code examples (Spring Boot/React/Angular), and verification steps.
- tomevault-io Bundle Vue Testing Best Practices 3
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing. Use when this capability is needed.
- tomevault-io Bundle UI Design 4
Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality. Use when this capability is needed.
- tomevault-io Bundle Next 6
Next.js renderer for json-render that turns JSON specs into full Next.js applications with routes, layouts, SSR, and metadata. Use when working with @json-render/next, building Next.js apps from JSON specs, or creating AI-generated multi-page applications. Use when this capability is needed.
- tomevault-io Bundle Wagmi Development 2
Creates Wagmi features across all layers - core actions, query options, framework bindings. Use when adding new actions, hooks, or working across packages/core, packages/react, packages/vue.
- tomevault-io Bundle Frontend Design 21
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.
- tomevault-io Bundle Summarize 6
Fetch a URL or convert a local file (PDF/DOCX/HTML/etc.) into Markdown using `uvx markitdown`, optionally it can summarize Use when this capability is needed.
- tomevault-io Bundle Vitest 9
Unit testing with Vitest and React Testing Library Use when this capability is needed.
- tomevault-io Bundle Code Review 89
Comprehensive code review knowledge including security, performance, accessibility, and quality standards across multiple languages and frameworks 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 code-review, web-design-guidelines, react. 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.