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 Nextjs App Router 4Next.js App Router patterns and conventions Use when this capability is needed.
- tomevault-io Bundle Tailwind Patterns 4
Tailwind CSS utility patterns and best practices Use when this capability is needed.
- tomevault-io Bundle Tonic UI Patterns 2
Coding patterns extracted from tonic-ui repository Use when this capability is needed.
- tomevault-io Bundle Funstack Router Knowledge 2
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 Frontend Design 119
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle Vue Options API Best Practices 3
Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only. Use when this capability is needed.
- tomevault-io Bundle React Native Mobile 4
React Native mobile development covering iOS and Android cross-platform apps, navigation, state management, native modules, and performance optimization for production-ready mobile applications Use when this capability is needed.
- tomevault-io Bundle Frontend Patterns 8
Apply UI and accessibility patterns. Uses accessibility, user-experience; invokes @designer, @reviewer for UI and a11y. Use when this capability is needed.
- tomevault-io Bundle React Dev 6
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router). Use when this capability is needed.
- tomevault-io Bundle React Native Architecture 3
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecti... Use when this capability is needed.
- tomevault-io Bundle Senior QA 6
This skill should be used when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality". Use for React/Next.js testing with Jest, React Testing Library, and Playwright. Use when this capability is needed.
- tomevault-io Bundle Frontend UI Engineering 2
Builds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components, implementing layouts, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
- tomevault-io Bundle Frontend Patterns 11
Frontend patterns for Next.js App Router, Clerk auth, shadcn/Radix UI, and PostHog analytics. Use when building UI components, creating pages, implementing auth flows, or adding analytics events. Ensures consistent UX patterns and accessibility standards. Use when this capability is needed.
- tomevault-io Bundle Planning 11
Creates structured implementation plans for non-trivial development work.
- tomevault-io Bundle Web Design Guidelines 28
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "web interface guidelines". Use when this capability is needed.
- tomevault-io Bundle IOS Simulator Skill 2
21 production-ready scripts for iOS app testing, building, and automation. Provides semantic UI navigation, build automation, accessibility testing, and simulator lifecycle management. Optimized for AI agents with minimal token output. Use when this capability is needed.
- tomevault-io Bundle Error Handling 14
Backend exception handling, error codes, and frontend error patterns for SE104_VLEAGUE Use when this capability is needed.
- tomevault-io Bundle React Best Practices 18
Use when sequential user actions hit multiple endpoints needing the same data within seconds.
- tomevault-io Bundle Vercel React Best Practices 45
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Use when this capability is needed.
- tomevault-io Bundle Frontend Developer 6
Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.
- tomevault-io Bundle Unity Ecs Patterns 3
Master Unity ECS (Entity Component System) with DOTS, Jobs, and Burst for high-performance game development. Use when building data-oriented games, optimizing performance, or working with large entity counts. Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder 18
Suite of tools for creating elaborate, multi-component 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 React Patterns 11
Provides comprehensive React 19 patterns for Server Components, Server Actions, useOptimistic, useActionState, useTransition, concurrent features, Suspense boundaries, and TypeScript integration. Generates executable code patterns, validates security for public endpoints, and optimizes performance with React Compiler or manual memoization. Proactively use when building React 19 applications with Next.js App Router, implementing optimistic UI, or optimizing concurrent rendering.
- tomevault-io Bundle Vue Testing Best Practices 13
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 Vue Router Best Practices 7
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions. Use when this capability is needed.
- tomevault-io Bundle Tailwind 4 Docs 2
Comprehensive Tailwind CSS v4 documentation snapshot and workflow guidance. Use when answering Tailwind v4 questions, selecting utilities/variants, configuring Tailwind v4, or migrating projects from v3 to v4 with official docs and gotcha checks. Use when this capability is needed.
- tomevault-io Bundle Typescript Type Safety 2
TypeScript type safety including type guards and advanced type system features. **ALWAYS use when writing ANY TypeScript code (frontend AND backend)** to ensure strict type safety, avoid `any` types, and leverage the type system. Examples - "create function", "implement class", "define interface", "type guard", "discriminated union", "type narrowing", "conditional types", "handle unknown types". Use when this capability is needed.
- tomevault-io Bundle Tailwindcss 6
Tailwind CSS utility-first styling for JARVIS UI components Use when this capability is needed.
- tomevault-io Bundle Moonshine Components 2
Build MoonShine admin panel UI with Blade components — tables, forms, cards, modals, navigation, and page layouts. Use when creating admin interfaces, data tables with actions, form layouts, or any UI using MoonShine's component library. Use when this capability is needed.
- tomevault-io Bundle Frontend Philosophy 3
Visual & UI philosophy (The 5 Pillars of Intentional UI). Understand deeply to avoid "AI slop" and create distinctive, memorable interfaces. Use when this capability is needed.
- tomevault-io Bundle Vue Jsx Best Practices 3
JSX syntax in Vue (e.g., class vs className, JSX plugin config). Use when this capability is needed.
- tomevault-io Bundle Typescript Coding Standards 2
TypeScript, JavaScript, React, and Node.js coding standards — naming conventions, immutability, error handling, async patterns, component structure, API design. For language-agnostic principles see rules/common/coding-style.md. Use when this capability is needed.
- tomevault-io Bundle AI Elements 5
Intelligent documentation system for AI Elements component library. Activate automatically when working with AI-native applications or when AI Elements component names are mentioned (Message, Conversation, Reasoning, Canvas, etc.). Provides context-aware documentation retrieval - fetches examples for implementation queries, component references for API lookups, and smart multi-page fetching for complex tasks. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 123
Create distinctive, production-grade frontend interfaces with high design quality. Use when users ask to build web components, pages, or applications. Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 37
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling Use when this capability is needed.
- tomevault-io Bundle Code Quality 26
Assess and improve code quality in TypeScript/React projects. Runs lint, type-check, coverage, duplication, and complexity analysis with sprint planning. 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 nextjs-app-router, tailwind-patterns, tonic-ui-patterns. 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.