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 Sync ArtifactsSynchronize all five AGENTVIZ artifacts after a UI change -- README, style guide, color-palette.html, CLAUDE.md, and screenshots. Detects what drifted, drafts updates, and regenerates screenshots. Use when this capability is needed.
- tomevault-io Bundle Coding Style
JavaScript、TypeScript、PHP、Python、CSS 代碼規範 Use when this capability is needed.
- tomevault-io Bundle Buzzform
Use when working with BuzzForm schema-driven forms, `@buildnbuzz/form-core`, `@buildnbuzz/form-react`, or any related APIs like `defineSchema`, `InferType`, `FormProvider`, `useDataField`, `useLayoutField`, `RenderFields`, `extractDefaults`, registry-based rendering, validation, conditions, or dynamic behavior. Also use for migration from deprecated `@buildnbuzz/buzzform`. Activate this skill whenever the user mentions BuzzForm, form schemas, form registries, TanStack Form integration with BuzzForm, conditional fields, `$data`/`$context` dynamic values, or field type configuration. Even if the user doesn't say "BuzzForm" explicitly, use this skill if they're working in a project that imports from `@buildnbuzz/*` packages. Do NOT trigger for raw TanStack Form usage without BuzzForm, drag-and-drop form builders, or other form libraries like Formik, React Hook Form, or Zod.
- tomevault-io Bundle Apply Wechat Custom Theme
AI-ready skill to test, register, and publish Markdown articles to WeChat Official Accounts using a local custom CSS theme via Wenyan CLI. Use when this capability is needed.
- tomevault-io Bundle Requirement Interviewer
Gather missing product, UX, technical, and delivery constraints before planning or coding. Use when a request is underspecified, when several implementations are plausible, when frontend work needs explicit acceptance criteria, or when the agent must ask structured questions before acting. Use when this capability is needed.
- tomevault-io Bundle Animator
Create short video animations from HTML/CSS/JS. Frame-by-frame capture at 30fps using Playwright + ffmpeg. Write CSS animations normally - the recorder pauses and steps them. Use for product demos, social clips, ad creative, feature announcements. Use when this capability is needed.
- tomevault-io Bundle Create Hook
React 커스텀 훅을 생성합니다. 새로운 훅이 필요하거나, 훅을 만들어달라고 요청할 때 사용합니다. Use when this capability is needed.
- tomevault-io Bundle Cui CSS
Modern CSS standards covering essentials, responsive design, quality practices, and tooling for CUI projects Use when this capability is needed.
- tomevault-io Bundle Developerakx Skills Rn Tests
React Native Testing Conventions
- tomevault-io Bundle Vue Vite
Vue + Vue Router + Vite开发专家助手。当用户需要进行Vue SPA搭建、Vite配置、Vue Router、Pinia或现代前端项目开发时调用。 Use when this capability is needed.
- tomevault-io Bundle Building Vue Apps
Builds production Vue 3 applications with Composition API, TypeScript, Pinia, and Vue Router. Use when creating Vue.js SPAs, component libraries, or reactive web interfaces.
- tomevault-io Bundle E Xode Vue Ssr Vue Ssr Hooks
Vue SSR Hooks (Validation System)
- tomevault-io Bundle Mdream
Ultra-performant HTML to Markdown Convertor Optimized for LLMs and llm.txt artifacts. ALWAYS use when writing code importing "mdream". Consult for debugging, best practices, or modifying mdream. Use when this capability is needed.
- tomevault-io Bundle Cr General
Run a 5-pass language-agnostic code review scoped to the current PR diff. Use when reviewing pull requests for any language or framework that doesn't have a dedicated skill (Vue.js, Go, Rust, Ruby, PHP, Java, etc.). Use when this capability is needed.
- tomevault-io Bundle Feature Flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
- tomevault-io Bundle Django Cotton
Expert guide for working with Django Cotton, a component-based UI composition library. Use when creating, modifying, or testing Cotton components — covers component syntax, slots (default and named), attributes, c-vars, dynamic attributes with Python types, attribute proxying, template organization, naming conventions, and integration patterns. Essential for building reusable UI components in Django templates. Use when this capability is needed.
- tomevault-io Bundle React Forms
TanStack Form v1 - type-safe forms with Zod/Yup/Valibot validation, async validation, arrays, nested fields, React 19 Server Actions Use when this capability is needed.
- tomevault-io Bundle React State
Zustand v5 state management for React. Use when implementing global state, stores, persist, or client-side state. Use when this capability is needed.
- tomevault-io Bundle Solid React
SOLID principles for React 19. Files < 100 lines, hooks separated, interfaces in src/interfaces/, JSDoc mandatory. Use for React architecture and code quality. Use when this capability is needed.
- tomevault-io Bundle Solidjs
SolidJS reactive UI library with fine-grained reactivity and JSX. Use for performant React-like apps. Use when this capability is needed.
- tomevault-io Bundle Gaia Handoff
Generate a comprehensive GAIA session handoff document — accomplishments, decisions, current state, open questions — so context can be cleared or compacted without losing anything. Trigger on `/gaia-handoff` or natural-language asks like "write a handoff", "hand off this session", or "document where we are before I clear context". Use when this capability is needed.
- tomevault-io Bundle React Vite
React 18+ patterns with Vite bundler, TypeScript, hooks, component design, and state management. Activate for React apps, Vite configuration, TypeScript, frontend development, and modern React patterns. Use when this capability is needed.
- tomevault-io Bundle Ma1orek Replay Accessibility
Web Accessibility (WCAG 2.1 AA)
- tomevault-io Bundle Writing Docs
Writes and updates Medusa documentation MDX files for the book, resources, ui, user-guide, and cloud projects. Use when making documentation changes based on code diffs, adding new pages, updating existing content, or updating component examples. ALWAYS load this skill before modifying any MDX file in www/apps/. Use when this capability is needed.
- tomevault-io Bundle React Query
Guidelines for using React Query for data fetching, caching, and server state synchronization in React applications Use when this capability is needed.
- tomevault-io Bundle Meowvue
Vue 3 Composition API patterns, Pinia state management, reactivity, component design, and performance. Auto-activates on .vue files or Vue-related tasks. Use for Vue architecture decisions, composables, Pinia stores, forms, and optimization. Use when this capability is needed.
- tomevault-io Bundle Frontend Slides
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... Use when this capability is needed.
- tomevault-io Bundle Odjaramillo Custom Rules Vue
Critical Patterns
- tomevault-io Bundle Shadcn UI Setup
Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2. Use when this capability is needed.
- tomevault-io Bundle Peterbenoit Agent Config Vue
Vue.js Advisor
- tomevault-io Bundle Maizzle
Use when building, editing, or debugging HTML email templates with Maizzle and Tailwind CSS. Triggers on Maizzle projects, email template work, HTML email component usage, email CSS inlining, and email-client compatibility questions.
- tomevault-io Bundle Messyjs Tekton React Native
React Native
- tomevault-io Bundle Inject Docs
Inject framework-specific best practices and documentation into the project's CLAUDE.md file. Supports Next.js (via Vercel's agents-md codemod) and Python/FastAPI (via zhanymkanov/fastapi-best-practices). This skill should be used when a user wants to add framework documentation for AI coding agents or improve AI agent performance on framework-specific projects. Use when this capability is needed.
- tomevault-io Bundle Review Perf
Perform comprehensive performance review analyzing database queries, algorithmic complexity, frontend bottlenecks, and resource leaks for PRs, commits, or entire codebases. This skill should be used when a user wants to audit code performance, identify bottlenecks, review query efficiency, or check for memory leaks. Analysis only - identifies issues without modifying code. Use when this capability is needed.
- tomevault-io Bundle Lemmafit Post React Audit
Audit workflow for lemmafit apps after React. Runs after writing React code to catch logic that slipped through. Performs audit and labels findings by severity and iterates until only minor findings remain. Use when this capability is needed.
- tomevault-io Bundle Moon Component
How to use the moon-component CLI (MoonBit WIT/component workflow). 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 sync-artifacts, coding-style, buzzform. 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.