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 Sui FrontendSui frontend dApp development with @mysten/dapp-kit-react (React) and @mysten/dapp-kit-core (Vue, vanilla JS, other frameworks). Use when building browser apps that connect to Sui wallets, query on-chain data, or execute transactions. Use alongside the sui-ts-sdk skill for PTB construction patterns. Use when this capability is needed.
- tomevault-io Bundle React Next JS Patterns
Modern React 19 and Next.js 15 patterns for FrankX applications Use when this capability is needed.
- tomevault-io Bundle Nextjs Skills
Next.js framework patterns, SSR/SSG, and App Router best practices Use when this capability is needed.
- tomevault-io Bundle Stacks
Stack-specific skills organized by technology category (backend, frontend, infrastructure, mobile) Use when this capability is needed.
- tomevault-io Bundle Flutter Add Widget Test
Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected. Use when this capability is needed.
- tomevault-io Bundle Aashutosh396 Mindpalace Vue Expert JS
Vue Expert (JavaScript)
- tomevault-io Bundle Abhayla Claude Best Practices Vue Dev
Vue 3 Development
- tomevault-io Bundle Adilkalam Orca Nextjs Knowledge Skill
Next.js Knowledge Skill – Architecture & Patterns
- tomevault-io Bundle Flutter Reference
Use as a Flutter app-building reference for architecture, code quality, Dart style, state management, lifecycle, performance, rendering, testing, CI, accessibility, localization, security, platform integration, and Flame/game-loop guidance. Use when authoring, reviewing, repairing, or diagnosing Flutter mobile apps or games. Do not use for non-Flutter frontend work, generic visual design, running Flutter tooling, or latest Flutter/Dart facts without checking official docs. Use when this capability is needed.
- tomevault-io Bundle Web Framework React
Component architecture, hooks, patterns Use when this capability is needed.
- tomevault-io Bundle AI Skills
Create, modify, validate, and analyze Windsurf AI assets such as AGENTS.md files, Windsurf skills, templates, and supporting scripts. Use when building or maintaining the repository's Windsurf-specific AI component package. Use when this capability is needed.
- tomevault-io Bundle Atomic Audit
Audit a React component (or folder) for Atomic Design correctness and refactor recommendations. Use when components are too large, props are exploding, or responsibilities are unclear. Use when this capability is needed.
- tomevault-io Bundle Arbgjr Sdlc Agentico Frontend Testing
Frontend Testing Skill
- tomevault-io Bundle Myvibe Publish
Publish static HTML, ZIP archive, or directory to MyVibe. Use this skill when user wants to publish web content to MyVibe. Use when this capability is needed.
- tomevault-io Bundle Inspect Output
This skill should be used when the user asks to "inspect CSS output", "show generated CSS", "debug styles", "see what CSS is generated", "view layer structure", or wants to understand what CSS Seams produces for a component. Use when this capability is needed.
- tomevault-io Bundle Jackspace Claudeskillz Tailwind V4 Shadcn
Tailwind v4 + shadcn/ui Production Stack
- tomevault-io Bundle Project Adaptor
Cross-project component adaptation in an incremental, auditable, minimally-invasive manner. Use when adapting code components from reference projects into a target project. Key scenarios (1) Adapting tasks, models, datasets, or experiments from another codebase, (2) Importing components with conflict detection and resolution, (3) Surgical code adaptations with human-in-the-loop confirmation, (4) Multi-reference project integration with traceability. Invoked via /adapt command or natural language like "Adapt the SwissRiver dataset from the reference project Use when this capability is needed.
- tomevault-io Bundle Vue Framework
Build interactive user interfaces with Vue.js - components, state management, templates, composition API, lifecycle hooks, and reactive data binding Use when this capability is needed.
- tomevault-io Bundle MCP Chrome Devtools
Use the Chrome DevTools MCP server for browser debugging, performance profiling, and runtime inspection. Use this skill when debugging web applications or analyzing frontend performance. Use when this capability is needed.
- tomevault-io Bundle Create Component Docs
Generate comprehensive component documentation (architecture, API, examples, known issues). Works with React, Vue, Angular, and Web Components. | Genera documentación completa de componentes (arquitectura, API, ejemplos, issues conocidos). Compatible con React, Vue, Angular y Web Components. Use when this capability is needed.
- tomevault-io Bundle UI Visual Regression
Review and validate Storybook, Playwright, and Argos visual regression diffs. Use when the user wants snapshot-change triage or layout regression analysis, not broad frontend QA. Use when this capability is needed.
- tomevault-io Bundle Osiris Component Developer
Create production-ready Osiris ETL components (extractors, writers, processors). Use when building new components, implementing capabilities (discover, streaming, bulkOperations), adding doctor/healthcheck methods, packaging for distribution, validating against 60-rule checklist, or ensuring E2B cloud compatibility. Supports third-party component development in isolated projects. Use when this capability is needed.
- tomevault-io Bundle Create Storybook Docs
Create or update Storybook stories and documentation for a Spark UI component. Use when the user wants to add stories, update documentation, or improve component documentation in Storybook. Use when this capability is needed.
- tomevault-io Bundle Lexand Dev Subtrack Monorepo Heroui React
HeroUI v3 React Development Guide
- tomevault-io Bundle Batch File Converter
Batch convert files between formats - images (HEIC/PNG/JPG/WebP), documents (Markdown/HTML), and more using Python and system tools. Use when this capability is needed.
- tomevault-io Bundle Tailwindcss Interactivity
Interactivity utilities Tailwind CSS v4.1. Cursor (cursor-*), Scroll (scroll-smooth, scroll-snap-*, overscroll-*), User select (select-*), Pointer events (pointer-events-*), Touch action, Resize, Caret color, Accent color. Use when this capability is needed.
- tomevault-io Bundle Unit Test Vue Pinia
Write and review unit tests for Vue 3 + TypeScript + Vitest + Pinia codebases. Use when creating or updating tests for components, composables, and stores; mocking Pinia with createTestingPinia; applying Vue Test Utils patterns; and enforcing black-box assertions over implementation details. Use when this capability is needed.
- tomevault-io Bundle Gluestack UI V4creating Components
Step-by-step guide for creating components with gluestack-ui v4 - covers planning, structure, styling, TypeScript, and common component patterns. Use when this capability is needed.
- tomevault-io Bundle Grey Haven Code Style
Apply Grey Haven Studio's TypeScript/React and Python/FastAPI coding standards from production templates. Use when writing code, reviewing PRs, fixing linting errors, formatting files, or when the user mentions 'code standards', 'Grey Haven style', 'linting', 'Prettier', 'ESLint', 'Ruff', 'formatting rules', or 'coding conventions'. Includes exact Prettier/ESLint/Ruff configs, naming conventions, project structure, and multi-tenant database patterns. Use when this capability is needed.
- tomevault-io Bundle Grimblaz Workflow Template Frontend Design
Frontend Design Skill
- tomevault-io Bundle Guyoung Boxagnts Front Component Generator
---
- tomevault-io Bundle Web Frameworks
Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects. Use when this capability is needed.
- tomevault-io Bundle React Frontend Development
Modern React + TypeScript dashboard and SPA development patterns. Covers Vite, shadcn/ui, TanStack Query, Zustand, React Router, React Hook Form + Zod, Vitest + Testing Library, accessibility, and performance. Use when building React frontends, creating components, managing state, integrating APIs, writing frontend tests, or setting up a new React project. Use when this capability is needed.
- tomevault-io Bundle Heyvhuang Ship Faster Workflow Ship Faster
Workflow: Ship Faster (Next.js 16.1.1)
- tomevault-io Bundle Hass Sync
Maintains synchronization between src/hass folder and Home Assistant frontend source code. Verifies file locations, checks code matches upstream, and identifies unused code. Use when working with src/hass files, syncing Home Assistant code, or verifying code synchronization. Use when this capability is needed.
- tomevault-io Bundle Tailwind UI
Master Tailwind CSS for modern, responsive UI styling. Covers utility-first patterns, responsive design, dark mode, custom themes, animations, and component libraries like shadcn/ui and Headless UI. Use for styling React apps, building design systems, and rapid UI development. 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 sui-frontend, react-next-js-patterns, nextjs-skills. 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.