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 Form VanillaFramework-free form validation using HTML5 Constraint Validation API enhanced with Zod for complex rules. Use when building forms without React/Vue or for progressive enhancement. Use when this capability is needed.
- tomevault-io Bundle Forms Router
Router for web form development. Use when creating forms, handling validation, user input, or data entry across React, Vue, or vanilla JavaScript. Routes to 7 specialized skills for accessibility, validation, security, UX patterns, and framework-specific implementations. Start here for form projects. Use when this capability is needed.
- tomevault-io Bundle Postfx Bloom
Bloom and glow effects using Three.js UnrealBloomPass with React Three Fiber. Use when implementing glow, bloom, luminance-based effects, selective bloom on specific meshes, or neon/ethereal lighting. Essential for cyberpunk aesthetics, energy effects, magic spells, and UI glow. Use when this capability is needed.
- tomevault-io Bundle Frontend Web Engineer
You are a seasoned frontend web software engineer with deep expertise in modern Use when this capability is needed.
- tomevault-io Bundle I18N Component Review
Review Svelte components and pages for i18n compliance. Ensures user-facing strings use translation keys via $_() or T component, keys exist in en.json, and keys are translated in all 15 locale files. Use when reviewing components for i18n, adding new UI strings, or when the user asks to check or fix i18n. Use when this capability is needed.
- tomevault-io Bundle Expo UI Swift UI
Use when building iOS-specific UI components using SwiftUI views in Expo, embedding React Native views in SwiftUI with RNHostView, or implementing native iOS interfaces beyond cross-platform components
- tomevault-io Bundle Cadence Workflow Cadence Web Cadence Web
React Joyride v3
- tomevault-io Bundle Vue Vite Setup
Best practices for setting up VueJS 3 projects with Vite, including proper Tailwind CSS integration and essential plugins. Use when creating or configuring Vue.js projects. Use when this capability is needed.
- tomevault-io Bundle Ccivlcid Vibeharness Mobile React Native
Mobile — React Native + Expo
- tomevault-io Bundle Acx Code Assistant
Generate code scaffolds following Carbon ACX conventions for React components, TypeScript APIs, Cloudflare Workers, Python scripts, and tests. Use when this capability is needed.
- tomevault-io Bundle Analyzing Frontend Layer
Use when analyzing frontend/UI layer including components, state management, routing, and API integration (optional - skip if no frontend exists)
- tomevault-io Bundle Site Clone
Reverse-engineer and replicate any website into a pixel-perfect Next.js codebase. Extracts design tokens, assets, interactions, and content, then dispatches parallel builder agents to reconstruct each section. Supports multiple URLs. Use when this capability is needed.
- tomevault-io Bundle UI Automation Workflows
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 UI Handler
Implement UI using Shadcn/UI and Tailwind CSS. Use when this capability is needed.
- tomevault-io Bundle Itechmeat LLM Code React Testing Library
React Testing Library Skill
- tomevault-io Bundle Jackspace Claudeskillz Cloudflare Nextjs
Cloudflare Next.js Deployment Skill
- tomevault-io Bundle Apple Hig Designer
Design iOS apps following Apple's Human Interface Guidelines. Generate native components, validate designs, and ensure accessibility compliance for iPhone, iPad, and Apple Watch. Use when this capability is needed.
- tomevault-io Bundle API Routes
Create and work with Next.js Route Handlers in src/app/api/. Use when creating API endpoints, handling HTTP requests, or working with server-side API logic in App Router. Use when this capability is needed.
- tomevault-io Bundle Frontend Tests
How to run frontend tests and verify code integrity. Use when this capability is needed.
- tomevault-io Bundle Tanstack Start Shadcn
Build full-stack React applications with TanStack Start, React Query, shadcn/ui, and Tailwind CSS v4. Use when working on projects created with create-tanstack-start-shadcn, or when the user needs help with TanStack Start patterns, server functions, React Query integration, or shadcn/ui components. Use when this capability is needed.
- tomevault-io Bundle Nextjs App Router Fundamentals
Guide for working with Next.js App Router (Next.js 13+). Use when migrating from Pages Router to App Router, creating layouts, implementing routing, handling metadata, or building Next.js 13+ applications. Activates for App Router migration, layout creation, routing patterns, or Next.js 13+ development tasks. Use when this capability is needed.
- tomevault-io Bundle Phalconvee Devstart Stack React Native
React Native / Expo Stack Conventions
- tomevault-io Bundle Fake Content
Generate realistic fake content for HTML prototypes. Use when populating pages with sample text, products, testimonials, or other content. NOT generic lorem ipsum. Use when this capability is needed.
- tomevault-io Bundle Xhtml Author
Write valid XHTML-strict HTML5 markup. Use when creating HTML files, editing markup, building web pages, or writing any HTML content. Ensures semantic structure and XHTML syntax. Use when this capability is needed.
- tomevault-io Bundle Accessible Web Dev
Build WCAG 2.1 AA compliant web applications for University of Sheffield. Covers semantic HTML, ARIA patterns, form accessibility, keyboard navigation, color contrast, alt text, captions, and automated testing. Use when creating websites, web apps, forms, interactive components, or auditing accessibility for WCAG compliance, screen readers, keyboard access, or inclusive design. Use when this capability is needed.
- tomevault-io Bundle Review Dep Upgrade
Review npm dependency upgrade diffs. Use when comparing upgraded direct dependency versions between refs or package.json changes, fetching npm release dates, sorting by release gap, and summarizing upstream changes plus repo-specific impact. Use when this capability is needed.
- tomevault-io Bundle Data Client React
Use @data-client/react hooks - useSuspense, useFetch, useQuery, useCache, useLive, useDLE, useSubscription, useController for fetch/mutations, DataProvider, AsyncBoundary, useLoading, useDebounce Use when this capability is needed.
- tomevault-io Bundle Data Client Setup
Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills. Use when this capability is needed.
- tomevault-io Bundle Docs Writer Learn
Use when writing or editing files in src/content/learn/. Provides Learn page structure and tone.
- tomevault-io Bundle Floating Runes
Guidance for using the floating-runes Svelte 5 wrapper around @floating-ui. Use when building tooltips, popovers, context menus, overlays, portals, or singleton floating UI in Svelte apps. Use when this capability is needed.
- tomevault-io Bundle Dynoai Test Generator
Generates tests for the DynoAI codebase. Bootstraps Vitest and React Testing Library for frontend, generates pytest tests for backend. Provides test templates for React Query hooks, utility functions, components, Flask endpoints, and VE math. Use when the user asks to add tests, create test files, set up testing infrastructure, or improve test coverage.
- tomevault-io Bundle Rpamis Security
MyBatis-based enterprise data security component for data masking and encryption/decryption. Invoke when implementing data masking, database encryption, SM4 encryption, or working with @Masked/@SecurityField annotations. Use when this capability is needed.
- tomevault-io Bundle Tanstack Errors
This skill should be used when the user asks about "React Query error handling", "error boundaries with useQuery", "throwOnError", "global error callbacks", "onError callback", "query error state", "mutation error handling", or needs guidance on error handling strategies and patterns in TanStack Query. Use when this capability is needed.
- tomevault-io Bundle Flutter Mobile App Dev
Flutter mobile app development specialist for Dart, widgets, navigation, state management, mobile architecture, debugging, performance, accessibility, platform behavior, and design-system alignment. Use for Flutter UI, feature implementation, code analysis, refactors, mobile bugs, or app performance work. Use when this capability is needed.
- tomevault-io Bundle Better Chatbot
better-chatbot project conventions and standards. Use for contributing code, following three-tier tool system (MCP/Workflow/Default), or encountering server action validators, repository patterns, component design errors. Use when this capability is needed.
- tomevault-io Bundle Tanstack Start
TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers. Use for Next.js migration, edge rendering, or encountering hydration, auth, data pattern errors. 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 form-vanilla, forms-router, postfx-bloom. 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.