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 Storybook Play FunctionsUse when adding interaction testing to Storybook stories. Enables automated testing of component behavior, user interactions, and state changes directly in stories.
- tomevault-io Bundle Fabiensalles Claude Marketplace Astro View Transitions
Astro View Transitions
- tomevault-io Bundle React Use Client Boundary
Understanding when to use (and when NOT to use) the "use client" directive in React Server Components architecture. Use when this capability is needed.
- tomevault-io Bundle React Native Testing
Generate and write tests for React Native applications using React Native Testing Library (RNTL), Jest, and userEvent. Use this skill when the user asks to write tests, create test files, add unit tests, add component tests, or generate test suites for React Native or Expo projects. Also use when working with .test.tsx files, jest.config.js, or when the user mentions testing React Native components, screens, hooks, or forms. Covers getByRole, getByText, getByLabelText queries, userEvent.press, userEvent.type interactions, waitFor, findBy async patterns, and toBeOnTheScreen matchers. Use when this capability is needed.
- tomevault-io Bundle Greyhaven AI Claude Code Config React Tanstack Testing
React TanStack Testing Skill
- tomevault-io Bundle Heimeshoff Fsharp Full Stack Blueprint Fsharp Frontend
F# Frontend Implementation (Elmish + Feliz)
- tomevault-io Bundle React Frontend Spa
ReactでSPAフロントエンドを実装・改修するためのガイド。バックエンド分離前提でNext.jsやサーバーサイド機能に依存せず、React Router中心のクライアント実装を行う時に使う。認証はAuthProviderとuseAuthカスタムフックで統一し、OpenAPIからorvalまたはopenapi-typescriptで型/クライアントを生成して利用する。ESLint+Prettier、zod、shadcn/ui、デザイントークン（CSS変数/Tailwindテーマ）を前提にする場合に適用する。ディレクトリ構成はmodules/components/hooks/providers/servicesなどの直感的な命名で複雑化に耐える構成にする。 Use when this capability is needed.
- tomevault-io Bundle Accessibility Review
Systematic WCAG 2.1 AA accessibility audit with confidence-based reporting. Scans UI components for keyboard, screen reader, and visual accessibility issues. Use for pre-release audits or after major UI changes. Use when this capability is needed.
- tomevault-io Bundle Feature Planning
Break features into implementation tasks for backend, frontend, and E2E subagents. Use when planning features, creating implementation plans, or running feature-plan command. Plan mode only—no implementation. Use when this capability is needed.
- tomevault-io Bundle Microsoft Botframework Webchat Botframework Webchat
Web Chat HTML Tests
- tomevault-io Bundle Frontend Design Audit
Evaluate and improve the usability of existing front-end interfaces — either local source code or live websites by URL. Use this skill whenever the user has existing front-end code OR a live website URL and wants to understand why users struggle with it, find usability problems, or make it easier to use. Triggers on direct requests like "review my UI", "audit my interface", "check accessibility", "evaluate my design", "improve the UX", "audit this website", "review https://example.com" — but ALSO on indirect symptom descriptions like "users keep abandoning this form", "something feels off about this page", "we're getting complaints about the checkout flow", "conversion dropped after the redesign", "people say it's confusing", or "make this less painful to use". If someone has a front-end component, page, or URL and the problem sounds like usability, user confusion, or poor interaction design rather than a bug or performance issue — use this skill. NOT for building new interfaces from scratch, performance opti
- tomevault-io Bundle Modbender Skill Library MCP Vue Component Generator
---
- tomevault-io Bundle CSS Writing Rules
CSS coding guidelines for Web Components with Shadow DOM. Use when (1) writing new CSS styles for components, (2) reviewing CSS code, (3) implementing design tokens, (4) creating responsive layouts, (5) managing CSS variables. Covers @layer structure, ::part() styling, variable patterns, accessibility (reduced motion, any-hover), and naming conventions. Use when this capability is needed.
- tomevault-io Bundle Building Gitlab CI Components
Use when creating reusable GitLab CI/CD configurations, building component catalog entries, or packaging pipeline templates for sharing - provides systematic guide following GitLab documentation to avoid missing required files, directory structure, input specifications, or testing/publishing configuration
- tomevault-io Bundle MCP To Mobile
Flagship AiGNITE pipeline. Takes any AiGNITE MCP server URL, lists its tools, and scaffolds a complete React Native mobile app with one screen per public tool, Supabase auth, push notifications, and Stripe subscription billing. Converts B2B MCP infrastructure into a B2C consumer product without rebuilding the backend. Use this skill whenever the user mentions turning an MCP into a mobile app, wrapping an MCP as a consumer app, building a mobile front end for an MCP, MCP to mobile, or making a consumer app from an MCP server, even if they do not name the skill by name. Use when this capability is needed.
- tomevault-io Bundle Hexdocs Fetcher
Fetch HexDocs for Elixir libraries with HTML-to-markdown conversion. Use when looking up docs on hexdocs.pm — modules, functions, guides, changelogs. Use when this capability is needed.
- tomevault-io Bundle Accessibility Patterns
Build inclusive web experiences following WCAG guidelines. Covers semantic HTML, ARIA, keyboard navigation, color contrast, and testing strategies. Triggers on accessibility, a11y, WCAG, screen readers, or inclusive design requests. Use when this capability is needed.
- tomevault-io Bundle Fullstack Starter Pack
Curated bundle of essential skills for fullstack web development. Installs API design, testing, deployment, backend patterns, frontend architecture, and code quality skills together. Use when starting a new fullstack project or onboarding onto a codebase. Use when this capability is needed.
- tomevault-io Bundle Component Scaffold Generator
Generates clean React/Vue component skeletons with TypeScript types, prop variants, styling hooks, test files, Storybook stories, and usage documentation. Use when users request "create a component", "scaffold component", "new React component", or "generate component boilerplate".
- tomevault-io Bundle Postman Collection Generator
Generates Postman collection JSON files from Express, Next.js, Fastify, Hono, or other API routes. Scans route definitions, extracts endpoints, methods, params, and creates importable collections. Use when users request "generate postman collection", "export to postman", "create postman file", or "postman import".
- tomevault-io Bundle Vscode REST Client Generator
Generates .http files for the VS Code REST Client extension from Express, Next.js, Fastify, or other API routes. Creates organized request files with variables, environments, and authentication. Use when users request "generate http files", "rest client requests", "create .http file", or "vscode api testing".
- tomevault-io Bundle Quodsoler Unreal Engine Skills Unreal Engine Skills
UE Actor-Component Architecture
- tomevault-io Bundle Aptos Dapp Integration
Expert on building decentralized applications on Aptos with frontend integration, wallet connectivity (Petra, Martian, Pontem), TypeScript SDK, transaction submission, and wallet adapter patterns. Triggers on keywords wallet connect, petra, martian, pontem, typescript sdk, aptos sdk, dapp, frontend integration, wallet adapter, transaction, sign Use when this capability is needed.
- tomevault-io Bundle E2e Test Service Management
Service management for E2E testing in EdgeQuake. Start, stop, and monitor PostgreSQL, backend API, and frontend services. Includes health checks and logging utilities for interactive testing workflows. Use when this capability is needed.
- tomevault-io Bundle Raulnq Node Hono React Monorepo Add Backend Feature
Add Backend Feature
- tomevault-io Bundle Fix Scraper
Diagnose and fix a broken scraper mapping. Use when extraction tests fail, a scraper returns wrong data, or a website has changed its HTML structure. Use when this capability is needed.
- tomevault-io Bundle Rondleysg QA Agents Wdio Skill Frontend QA Friendly
Frontend QA-friendly
- tomevault-io Bundle Thc1006 Nephoran Intent Operator Web Component Design
---
- tomevault-io Bundle Nextjs Server Components
React Server Components patterns in Next.js Use when this capability is needed.
- tomevault-io Bundle Interpreting Results
Component skill for systematic result interpretation with intellectual honesty in DataPeeker analysis sessions Use when this capability is needed.
- tomevault-io Bundle Treygoff24 Autonomous Dev Kit Accessibility Checklist
Accessibility Checklist
- tomevault-io Bundle Frontend Modern
Modern frontend patterns for Optimizely Experimentation Use when this capability is needed.
- tomevault-io Bundle Accessibility React Native
Implement, audit, and fix accessibility (a11y) in React Native and Expo mobile apps. Use when this capability is needed.
- tomevault-io Bundle Dal Web Setup
Start or stop the DAL derivatives portfolio web UI (FastAPI backend + React/Vite frontend). Use when the user says "start the web UI", "run the Web UI", "stop the web UI", "shut down the Web UI", "launch the dashboard", or anything about bringing the DAL web UI up or down. Use when this capability is needed.
- tomevault-io Bundle Rust Porter
port a bounded TypeScript, TSX, React, Ink, Bun, Node, CLI, plugin, MCP, session, compaction, or remote slice to idiomatic Rust using behavior-first patterns, tokio, serde, tracing, ratatui, and crossterm. use whenever the user asks to convert, port, rewrite, or translate any specific TypeScript file or module to Rust, or wants to know how to implement the Rust equivalent of a TS/React/Ink pattern. also invoke when the user has a migration analysis ready and wants to start writing Rust code. do NOT use for screens/REPL.tsx or fullscreen Ink/React terminal flows — use rust-tui-runtime-replacement for those. Use when this capability is needed.
- tomevault-io Bundle Aaronbassett Aaronbassett Marketplace React Components
React Component Skill
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 storybook-play-functions, fabiensalles--claude-marketplace--astro-view-transitions, react-use-client-boundary. 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.