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 Dependency Updater 3Smart dependency management for any language. Auto-detects project type, applies safe updates automatically, prompts for major versions, diagnoses and fixes dependency issues. Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder 16
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 Gesture Handler 3 Migration 2
Migrates files containing React Native components which use the React Native Gesture Handler 2 API to Gesture Handler 3. Use when this capability is needed.
- tomevault-io Bundle Angular Migration 3
Migrate 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. Use when this capability is needed.
- tomevault-io Bundle Vue Testing Best Practices 11
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 Scrape Webpage 3
Scrape webpage content, extract metadata, download images, and prepare for Edge Delivery Services migration. Returns analysis JSON with paths, metadata, cleaned HTML, and local images. Use when this capability is needed.
- tomevault-io Bundle UI Automation Workflows 2
Accessibility-first UI automation using IDB. Query accessibility tree (fast, 50 tokens) before screenshots (slow, 170 tokens). Use when automating simulator interactions, tapping UI elements, finding buttons, or testing user flows. Covers idb-ui-describe, idb-ui-tap, idb-ui-find-element patterns. Use when this capability is needed.
- tomevault-io Bundle Accessibility 12
Web accessibility guidelines and implementation Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder 17
一套用于构建复杂且多组件集成的 claude.ai HTML Artifacts（交互式组件）的工具集。该工具集采用现代前端技术栈，包括 React、Tailwind CSS 及 shadcn/ui。适用于需要状态管理、路由功能或集成 shadcn/ui 组件库的复杂项目，而非简单的单文件 HTML/JSX 组件。当用户需要构建具备深层交互逻辑、多视图导航或工业级 UI 标准的高级 Web 应用原型时，应调用该技能。 Use when this capability is needed.
- tomevault-io Bundle React Best Practices 16
React best practices for Benefriches (Vite + Redux). Covers code quality, component patterns, state management, and performance. Use when writing, reviewing, or refactoring React components, debugging slow interactions, or implementing Redux patterns. Use when this capability is needed.
- tomevault-io Bundle Frontend Expert 4
Specialized instructions for modern frontend development (React, Next.js, CSS). Use when this capability is needed.
- tomevault-io Bundle Vercel React Native Skills 3
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
- tomevault-io Bundle Next Best Practices 39
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling, caching, middleware, self-hosting, and deployment. Automatically applies when writing or reviewing Next.js code. Use when this capability is needed.
- tomevault-io Bundle Remotion Best Practices 26
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle Slides Generator 2
Generate interactive presentation slides using React + Tailwind. Triggers on keywords like "slides", "presentation", "PPT", "demo", "benchmark". Use when this capability is needed.
- tomevault-io Bundle Frontend Slides 6
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. Use when this capability is needed.
- tomevault-io Bundle React Native Expert 5
React Native gotchas and decision criteria. Covers FlatList optimization, storage hierarchy, and platform-specific pitfalls. Use when this capability is needed.
- tomevault-io Bundle Design Principles 3
Use this skill when designing UI/UX, creating dashboards, building SaaS interfaces, or reviewing frontend design. Provides S-tier design checklist inspired by Stripe, Airbnb, and Linear.
- tomevault-io Bundle Make Content Editable 2
Converts hardcoded Vue components in a Nuxt Content markdown file into slot-based, Studio-editable MDC components. Use when a user wants their Nuxt Content page to be visually editable in Nuxt Studio's TipTap editor.
- tomevault-io Bundle Code Style 8
Oak AI project TypeScript coding conventions including naming patterns (kebab-case files, PascalCase components, camelCase functions), component structure, error handling with cause, state management patterns, and tRPC implementation. Use when writing, reviewing, or refactoring code. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 116
Creates distinctive, production-grade frontend interfaces with high design quality, avoiding generic AI aesthetics
- tomevault-io Bundle Artifacts Builder 6
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 Vue Best Practices 34
Vue 3 and Vue.js best practices for TypeScript, vue-tsc, and Volar. This skill should be used when writing, reviewing, or refactoring Vue components to ensure correct typing patterns. Triggers on tasks involving Vue components, props extraction, wrapper components, template type checking, or Volar configuration. Use when this capability is needed.
- tomevault-io Bundle React Server Components 2
Implements React Server Components (RSC) patterns with Next.js App Router including data fetching, streaming, selective hydration, and server/client composition. Use when users request "server components", "RSC", "Next.js app router", "server-side rendering", or "streaming". Use when this capability is needed.
- tomevault-io Bundle Next Cache Components 19
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag Use when this capability is needed.
- tomevault-io Bundle Frontend Design 117
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 React Native Design 8
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 118
Create frontend components and pages for the Fables & Sagas D&D app. Use this skill when building UI for the dnd-homebrew-frontend project. Generates code that matches the existing dark fantasy aesthetic, theme system, and component patterns. Use when this capability is needed.
- tomevault-io Bundle Mobile Developer 7
Develop React Native, Flutter, or native mobile apps with modern Use when this capability is needed.
- tomevault-io Bundle Frontend AI Guide 2
Frontend-specific technical decision criteria, anti-patterns, debugging techniques, and quality check workflow. Use when making frontend technical decisions or performing quality assurance. Use when this capability is needed.
- tomevault-io Bundle Fp TS React 2
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15. Use when this capability is needed.
- tomevault-io Bundle Nextjs 7
Next.js 15+ App Router development patterns Use when this capability is needed.
- tomevault-io Bundle Shadcn 8
shadcn/ui component library patterns Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 40
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 Tanstack Query 8
Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular. Use when this capability is needed.
- tomevault-io Bundle Tanstack Start 2
Full-stack React framework powered by TanStack Router with SSR, streaming, server functions, and deployment to any hosting provider. 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 dependency-updater, web-artifacts-builder, gesture-handler-3-migration. 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.