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 Bulk Remove ClassnameRemoves a specified class name from HTML/JSX files using the classname-search CLI tool. Use when you need to safely remove all occurrences of a specified class name from target files. Use when this capability is needed.
- tomevault-io Bundle Vue Component Architect
Use when vue component decisions involve architecture boundaries, integration tradeoffs, and scale planning.
- tomevault-io Bundle Implementing Game Skill Parsers
Use when implementing skill data generation from HTML sources for game build planners - guides the parser-factory-generation pattern for extracting level-scaling values for active and passive skills (project)
- tomevault-io Bundle Migration Styling
Phase 5 of 1st-gen to 2nd-gen component migration. Use to migrate CSS to the 2nd-gen structure, apply Spectrum 2 tokens, and ensure stylelint passes. Use when this capability is needed.
- tomevault-io Bundle Web Accessibility Web Accessibility
WCAG, ARIA, keyboard navigation Use when this capability is needed.
- tomevault-io Bundle Aj Geddes Useful AI Prompts Frontend State Management
Frontend State Management
- tomevault-io Bundle Aj Geddes Useful AI Prompts Vue Application Structure
Vue Application Structure
- tomevault-io Bundle Vue Tracking Inject
Vue Reactivity Graph 插件的 provide / inject 追蹤知識。說明 shared reference 造成的污染問題，以及解法：injectRawToNodeMap（module-level WeakMap）、injectRawToLocalNode（per-component Map）、anonymous node 建立機制，與 resolveDepNode 查找順序。涉及 inject 追蹤、provideRawToNode、resolveDepNode 時載入。 Use when this capability is needed.
- tomevault-io Bundle React Performance Patterns
Battle-tested patterns for optimizing React applications, from component design to bundle optimization Use when this capability is needed.
- tomevault-io Bundle Implementing Drag Drop
Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids. Use when building interactive UIs requiring direct manipulation, spatial organization, or touch-friendly reordering. Use when this capability is needed.
- tomevault-io Bundle Native Module Helper
Create custom React Native native modules for iOS and Android. Use when integrating native SDKs, optimizing performance-critical code, or accessing platform-specific APIs. Trigger words include "native module", "bridge", "native code", "iOS bridge", "Android bridge", "Turbo Module". Use when this capability is needed.
- tomevault-io Bundle Detecting Accessibility Issues
Detects and fixes accessibility issues in React/Fluent UI webviews. Use when reviewing code for screen reader compatibility, fixing ARIA labels, ensuring keyboard navigation, adding live regions for status messages, or managing focus in dialogs. Use when this capability is needed.
- tomevault-io Bundle Component Composition
Component composition patterns including Container/View separation, pipeline HOC composition, and proper TypeScript typing for React components. Use when this capability is needed.
- tomevault-io Bundle React Performance Optimization
React performance optimization patterns using memoization, code splitting, and efficient rendering strategies. Use when optimizing slow React applications, reducing bundle size, or improving user experience with large datasets. Use when this capability is needed.
- tomevault-io Bundle Peopleforrester Claude Dotfiles Accessibility Checker
Accessibility Checker
- tomevault-io Bundle Search Algorand Examples
Search GitHub for Algorand smart contract examples and patterns. Use when finding example implementations of specific patterns (BoxMap, inner transactions), looking up contract feature usage, discovering Algorand repositories, or retrieving files from algorandfoundation repos. Strong triggers include "find an example of...", "show me how to use BoxMap", "search for voting contract examples", "get the code from puya-ts examples", "find Algorand NFT repositories". Use when this capability is needed.
- tomevault-io Bundle Platxa Frontend Builder
Generate production-ready React/Next.js components for Platxa platform. Creates Server/Client components, forms, data tables, and UI primitives following App Router patterns, TypeScript best practices, and Tailwind/Shadcn styling. Use when this capability is needed.
- tomevault-io Bundle Copilotkit Nextjs Integration
Integrate CopilotKit AI components into Next.js frontend for building agentic UIs. Enables context-aware AI agents that can read app state and trigger tools/actions. Supports custom adapters for self-hosted LLMs and multiple provider integrations. Use when this capability is needed.
- tomevault-io Bundle Saeed Vayghan Gemini Agent Skills Fullstack Developer
You are a senior fullstack developer specializing in complete feature development with expertise across backend and frontend technologies. Your primary focus is delivering cohesive, end-to-end solutions that work seamlessly from database to user interface.
- tomevault-io Bundle Cloudflare Workers Frameworks
Framework integration for Cloudflare Workers. Use when building with Hono, Remix, Next.js, Astro, SvelteKit, Qwik, or Nuxt on Workers. Covers routing, SSR, static assets, and edge deployment. Use when this capability is needed.
- tomevault-io Bundle Setup React Native Storybook
Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a Re.Pack rspack/webpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups. Use when this capability is needed.
- tomevault-io Bundle Upgrading React Native
Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and Gradle changes, and handling breaking API updates. Use when upgrading React Native, bumping RN version, updating from RN 0.x to 0.y, or migrating Expo SDK alongside a React Native upgrade. Use when this capability is needed.
- tomevault-io Bundle Next JS Better Auth Integration
Use when working with a conceptual skill for integrating Better Auth with Next.js App Router
- tomevault-io Bundle React Native Mobile Development
Build and manage React Native/Expo mobile apps including project setup, development workflows, and platform-specific guidance. Use when working on mobile app development, configuration, or running apps. Use when this capability is needed.
- tomevault-io Bundle Webassembly Component Development
Comprehensive guide to WebAssembly component development covering WASI fundamentals, component composition patterns, language interoperability, runtime compatibility, and troubleshooting. Use when this capability is needed.
- tomevault-io Bundle Dark Mode Design Expert
Master dark mode UI design with atmospheric theming, WCAG accessibility, and cross-platform best practices. Specializes in weather/sky/ocean-inspired color systems that adapt to time of day Use when this capability is needed.
- tomevault-io Bundle Typescript Export Standards
Enforces TypeScript/React function export format standards. Use when exporting functions, creating React components, writing custom hooks, or when code review requires proper export syntax. Use when this capability is needed.
- tomevault-io Bundle Flutter Feature Analysis
Use when assessing feasibility or complexity of a new Flutter feature before implementation. Especially when evaluating API requirements, state management approach, UI component availability, native dependencies, or effort estimation.
- tomevault-io Bundle Configuring Image Optimization
Teach image optimization configuration changes in Next.js 16. Use when configuring images, troubleshooting image loading, or migrating image settings. Use when this capability is needed.
- tomevault-io Bundle Configuring Serverless Clients
Configure PrismaClient for serverless (Next.js, Lambda, Vercel) with connection_limit=1 and global singleton pattern. Use when this capability is needed.
- tomevault-io Bundle Managing Local Vs Global State
Teaches when to use local state vs global state (Context) in React 19. Use when deciding state management strategy, avoiding prop drilling, or architecting component state. Use when this capability is needed.
- tomevault-io Bundle Optimizing With React Compiler
Teaches what React Compiler handles automatically in React 19, reducing need for manual memoization. Use when optimizing performance or deciding when to use useMemo/useCallback. Use when this capability is needed.
- tomevault-io Bundle Reviewing Performance Patterns
Review React 19 performance patterns including memoization, re-renders, and bundle size. Use when reviewing performance or optimization. Use when this capability is needed.
- tomevault-io Bundle Dotcreativeagency Claude Plugins Mui React Development
MUI + React Full Stack Development Patterns
- tomevault-io Bundle Create Circuit Breaker
Generates Circuit Breaker pattern for PHP 8.4. Creates resilience component protecting against cascading failures with state management, fallback support, and metrics. Includes unit tests.
- tomevault-io Bundle Accessibility Advocate
Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.
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 bulk-remove-classname, vue-component-architect, implementing-game-skill-parsers. 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.