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 Remotion 3使用 React 编程方式创建视频，支持动态图表、数据可视化视频、产品演示与教学视频 Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder 4
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 Nuxt UI 4
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces. Use when this capability is needed.
- tomevault-io Bundle Vue 40
Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns. Use when this capability is needed.
- tomevault-io Bundle Solidjs 2
Expert guide for SolidJS development, covering reactivity, component patterns, and migration from React. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 23
Create distinctive, production-grade frontend interfaces with high design Use when this capability is needed.
- tomevault-io Bundle Accessibility 2
Apply WCAG and accessibility best practices to design review and audits. Use when auditing flows or specs for accessibility, writing a11y acceptance criteria, or recommending design changes for accessibility. Use when this capability is needed.
- tomevault-io Bundle Find Skills 8
Discovers, searches, and installs skills from multiple AI agent skill marketplaces (400K+ skills) using the SkillKit CLI. Supports browsing official partner collections (Anthropic, Vercel, Supabase, Stripe, and more) and community repositories, searching by domain or technology, and installing specific skills from GitHub. Use when the user wants to find, browse, or install new agent skills, plugins, extensions, or add-ons; asks 'is there a skill for X' or 'find a skill for X'; wants to explore a skill store or marketplace; needs to extend agent capabilities in areas like React, testing, DevOps, security, or APIs; or says 'browse skills', 'search skill marketplace', 'install a skill', or 'what skills are available'. Use when this capability is needed.
- tomevault-io Bundle Upgrade React Native 2
Upgrade the React Native fixture app to a new version. Covers JS deps, Android (Gradle, Kotlin, SDK), iOS (Podfile, pbxproj), Metro config, and third-party libraries. Use when this capability is needed.
- tomevault-io Bundle Theme Factory 3
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly. Use when this capability is needed.
- tomevault-io Bundle Openai Image Gen 3
Batch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery. Use when this capability is needed.
- tomevault-io Bundle Remotion Best Practices 7
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle Magic UI 2
Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability.
- tomevault-io Bundle Accessibility 4
Primary accessibility skill for VS Code. REQUIRED for new feature and contribution work, and also applies to updates of existing UI. Covers accessibility help dialogs, accessible views, verbosity settings, signals, ARIA announcements, keyboard navigation, and ARIA labels/roles. Use when this capability is needed.
- tomevault-io Bundle Tailwind 3
WHEN building design systems or component libraries with Tailwind CSS; covers design tokens, CVA patterns and dark mode. Use when this capability is needed.
- tomevault-io Bundle Vueuse Functions 4
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features. Use when this capability is needed.
- tomevault-io Bundle Upgrade React Native 3
Upgrade React Native version in example/ directory using rn-diff-purge methodology. Use when the user wants to upgrade react-native, migrate to a new RN version, or update React Native dependencies in the example app. Handles diff retrieval, systematic file changes, dependency updates, and conflict resolution. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 25
创建具有高设计质量、独特的生产级前端界面，或应用 Anthropic 官方品牌视觉风格指南。当用户要求构建 Web 组件、页面、应用程序时，生成富有创意且打磨精良的代码；当涉及品牌色彩、风格指南或公司设计标准时，应用 Anthropic 的外观和感觉。 Use when this capability is needed.
- tomevault-io Bundle React Dev 2
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and TanStack Router integration. Use when this capability is needed.
- tomevault-io Bundle Vite 5
Vite next-generation frontend build tool with fast HMR and optimized builds. Use when configuring Vite, adding plugins, working with dev server, or building for production. Use when this capability is needed.
- tomevault-io Bundle Web Scraping 4
Extracts data from web pages using browser automation and CSS/JavaScript selectors. Use when you need to scrape titles/text/structured fields from live web pages or when the user mentions scraping, extraction, or selectors.
- tomevault-io Bundle Web Design Guidelines 8
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 Expert 2
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 App Store Preflight Compliance 2
Pre-submission compliance scanner workflow for Apple App Store apps. Use when reviewing iOS, macOS, tvOS, watchOS, or visionOS projects (Swift, Objective-C, React Native, Expo) for App Store rejection risks, submission readiness, privacy compliance, or guideline violations. Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder 5
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 Nextjs 4
Next.js 16 with App Router, Server Components, Server Actions, Cache Components. Use for React 19.2 apps, SSR, or encountering async params, proxy.ts migration, use cache errors. Use when this capability is needed.
- tomevault-io Bundle Impeccable 2
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. Generates creative, polished code that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 5
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. Use when this capability is needed.
- tomevault-io Bundle Vueuse Functions 5
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features. Use when this capability is needed.
- tomevault-io Bundle Vueuse Functions 6
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features. Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 4
Vue 3 TypeScript, vue-tsc, Volar, Vite, component props, testing, composition API. Use when this capability is needed.
- tomevault-io Bundle React Native 2
React Native mobile app authority — Expo SDK, native modules, iOS and Android builds, push notifications, deep linking, App Store and Play Store submission, over-the-air updates, native gesture handlers, and cross-platform mobile app architecture Use when this capability is needed.
- tomevault-io Bundle Inject Docs 2
Inject framework-specific best practices into CLAUDE.md. Supports Next.js Use when this capability is needed.
- tomevault-io Bundle Frontend Design 27
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 Vue Typescript 2
Expert in Vue.js TypeScript development with Vite, Pinia, and modern UI frameworks Use when this capability is needed.
- tomevault-io Bundle Summarize 9
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.
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 remotion, web-artifacts-builder, nuxt-ui. 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.