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 Codebase IndexAutomatically generate relationship and dependency maps for any component-based codebase (React, Vue, Svelte, Astro, Next.js, Angular, Solid). Auto-detects framework. Supports TOON format for 30-60% token savings. Use when indexing codebases, mapping component relationships, documenting dependencies, or understanding unfamiliar projects. Generates JSON/TOON files mapping component usage, imports, npm dependencies, utilities, CSS, and data queries. Use when this capability is needed.
- tomevault-io Bundle Rampa Colors
Generate mathematically accurate color palettes using OKLCH color space. Use when creating design systems, color ramps, accessible palettes, CSS variables for themes, or when user asks about color generation. Use when this capability is needed.
- tomevault-io Bundle Form Vue
Production-ready Vue form patterns using VeeValidate (default) or Vuelidate with Zod integration. Use when building forms in Vue 3 applications with Composition API. Use when this capability is needed.
- tomevault-io Bundle Theme System
Use when creating or modifying UI components, styling, or visual elements in OpenChamber. All UI colors must use theme tokens - never hardcoded values or Tailwind color classes.
- tomevault-io Bundle Vite Orchestrator
Scaffolds Vite + React + TypeScript configuration with tsconfig aliases, Tailwind support, and recommended scripts. Use when this capability is needed.
- tomevault-io Bundle Cgyudistira Agentkit Nextjs Patterns
Next.js Patterns
- tomevault-io Bundle Chat Frontend
Use when working on the React chat frontend. Covers architecture, components, styling, and state management.
- tomevault-io Bundle Health Analyze Skill
Analysis phase for /assist:health-check command - scores each component Use when this capability is needed.
- tomevault-io Bundle Component Design
Reusable component patterns including VGroup subclasses, helper methods, encapsulated visualizations, and always_redraw patterns. Use when this capability is needed.
- tomevault-io Bundle Front End Testing
Behavior-driven UI testing patterns. Covers Vitest Browser Mode (preferred) and DOM Testing Library. Use when testing any front-end application, writing UI tests, querying DOM elements, or simulating user interactions. For React-specific patterns, see the react-testing skill. Use when this capability is needed.
- tomevault-io Bundle Playdate Dev
Playdate game development in Lua with the Playdate SDK. Covers game loop, sprites, graphics, input (crank, buttons, accelerometer), audio, UI, performance, metadata (pdxinfo), and simulator/device workflow. Use when asked to make a Playdate game, implement Playdate-specific mechanics, or apply Playdate design and accessibility guidelines. Use when this capability is needed.
- tomevault-io Bundle Tui Designer
Design and implement retro/cyberpunk/hacker-style terminal UIs. Covers React (Tuimorphic), SwiftUI (Metal shaders), and CSS approaches. Use when creating terminal aesthetics, CRT effects, neon glow, scanlines, phosphor green displays, or retro-futuristic interfaces. Use when this capability is needed.
- tomevault-io Bundle Add Query Mode
Use when adding a new analysis/query mode to drizzle-cube (e.g., cohort, path analysis). Covers backend types, query builder, executor/compiler integration, frontend adapter, store slice, hooks, UI components, tests, and icon.
- tomevault-io Bundle Analyzing Unit Tests
Use when analyzing unit test coverage, patterns, and test code for isolated component testing
- tomevault-io Bundle Codemie AI Codemie Code Codemie Code
CodeMie HTML Report Builder
- tomevault-io Bundle T42ji2ji Astro Dorara Course Writing
課程講義寫作 Skill
- tomevault-io Bundle Enhance Frontend
Enhance frontend to pixel-perfect standards with mobile responsiveness and industry-leading design quality Use when this capability is needed.
- tomevault-io Bundle Enhance
Enhance frontend to pixel-perfect standards with mobile responsiveness and industry-leading design quality Use when this capability is needed.
- tomevault-io Bundle Frontend Testing
Test web applications using Chrome DevTools. Use for visual regression testing, performance analysis, accessibility checks, console error detection, and automated UI testing. Works with live URLs or local development servers. Use when this capability is needed.
- tomevault-io Bundle React Design Principles
Design React APIs and abstractions in a React-like way. Covers declarative interfaces, lifecycle-safe abstractions, minimal surfaces, zero-dependency bias, type safety, and documentation. Use when this capability is needed.
- tomevault-io Bundle Frontend AI Guide
This skill provides frontend-specific technical decision criteria, anti-patterns, debugging techniques, and quality check workflow. Automatically loaded when making frontend technical decisions, performing React/TypeScript quality assurance, or when "React anti-pattern", "frontend code smell", or "component quality" are mentioned. Use when this capability is needed.
- tomevault-io Bundle Funstack Router Knowledge
Use this skill when you need information about `@funstack/router` (the React router your app uses). What it is, API references, best practices, etc.
- tomevault-io Bundle Panel Dashboards
Master interactive dashboard and application development with Panel and Param. Use this skill when building custom web applications with Python, creating reactive component-based UIs, handling file uploads and real-time data streaming, implementing multi-page applications, or developing enterprise dashboards with templates and theming. Use when this capability is needed.
- tomevault-io Bundle Expected Md QA
Generate a short expected.md listing what to test in a frontend UI. Use when the user asks for expected.md, QA checklist, or frontend testing instructions. Use when this capability is needed.
- tomevault-io Bundle UI Page Readme
Write concise README.md files for a page/route folder or co-located components, covering purpose, boundaries, data flow, integration points, and tests. Use when asked to document a page, route, or component bundle. Use when this capability is needed.
- tomevault-io Bundle Preview Plan
Render implementation plans as navigable HTML with sidebar TOC and progress tracking. Activate automatically when producing or previewing implementation plans, design docs, architecture proposals, migration plans, or any long-form structured plan. Use when this capability is needed.
- tomevault-io Bundle Reactive Polling
Poll for changes to any value and trigger React re-renders when it changes. Use when this capability is needed.
- tomevault-io Bundle Target Fe Architecture
Target frontend architecture for Lingx. Progressive FSD Hybrid combining Next.js App Router with Feature-Sliced Design layers. Use when implementing frontend features, reviewing code, or making architectural decisions. Use when this capability is needed.
- tomevault-io Bundle Ruoyi AI Generator
This skill should be used when the user needs AI-powered code generation for RuoYi-Vue-Plus framework. It handles intelligent generation of Java backend code (Controller, Service, Mapper, Domain) and Vue3 frontend code (Vue pages, TypeScript API, Types) based on database table structures, replacing or enhancing the traditional Velocity template approach. Use when this capability is needed.
- tomevault-io Bundle Web Component Design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems. Use when this capability is needed.
- tomevault-io Bundle Yellinzero Aico Aico Frontend Design
Design
- tomevault-io Bundle Yellow Seed Template React To Review
react-to-review
- tomevault-io Bundle Yukiteruamano Skills Frontend Design
Frontend Design Skill
- tomevault-io Bundle Component Naming
Enforces consistent React component naming conventions across the portfolio codebase. Use when creating, reviewing, or refactoring components. Use when this capability is needed.
- tomevault-io Bundle Revealjs
Create polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required. Use when this capability is needed.
- tomevault-io Bundle Fulcro Frontend
Guide for building maintainable UI with ClojureScript and Fulcro. Use when creating UI components, designing component architecture, or following frontend patterns. 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 codebase-index, rampa-colors, form-vue. 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.