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.
-
pleaseai Bundle Vercel React Best PracticesReact 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.
-
thebeardedbearsas Skill WasmWebAssembly (WASM) — Component Model, WASI
- thebeardedbearsas Skill Tooling 5
Tooling React Native - Expo & EAS. Use when configuring the React Native build/dev toolchain (Expo, EAS Build, Metro, native dependencies).
- thebeardedbearsas Skill Ddd Patterns 3
Patterns DDD (vue d'ensemble). Use when structuring a domain layer end-to-end — entities, value objects, aggregates, repositories, domain services — or choosing between them.
-
intent-solutions-io Bundle Scanning For Xss VulnerabilitiesThis skill enables Claude to automatically scan for XSS (Cross-Site Scripting) vulnerabilities in code. It is triggered when the user requests to "scan for XSS vulnerabilities", "check for XSS", or uses the command "/xss". The skill identifies reflected, stored, and DOM-based XSS vulnerabilities. It analyzes HTML, JavaScript, CSS, and URL contexts to detect potential exploits and suggests safe proof-of-concept payloads. This skill is best used during code review, security audits, and before deploying web applications to production.
- thebeardedbearsas Skill Tooling 6
Herramientas React - Configuración y Optimización. Use when working with tooling.
- thebeardedbearsas Skill Tooling 7
Tooling React - Configuration et Optimisation. Use when working with tooling.
- thebeardedbearsas Skill Tooling 8
Ferramentas React - Configuracao e Otimizacao. Use when working with tooling.
- thebeardedbearsas Skill Architecture 5
React-Architektur. Use when designing architecture or reviewing code structure.
- thebeardedbearsas Skill Architecture 6
React Architecture - Principles and Organization. Use when designing architecture or reviewing code structure.
- thebeardedbearsas Skill Architecture 7
Arquitectura React - Organización y Patrones. Use when designing architecture or reviewing code structure.
- thebeardedbearsas Skill Architecture 8
Architecture React - Principes et Organisation. Use when designing architecture or reviewing code structure.
- thebeardedbearsas Skill Architecture 9
Arquitetura React - Princípios e Organização. Use when designing architecture or reviewing code structure.
- thebeardedbearsas Skill Testing React 3
Estrategia de Testing React. Use when writing tests, reviewing test coverage, or setting up testing.
- thebeardedbearsas Skill Quality Tools 9
Ferramentas de Qualidade de Codigo. Use when setting up quality tools or CI.
- pleaseai Bundle Vercel React Native Skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
-
yuukias Bundle Webapp TestingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
- yuukias Bundle Markitdown
Convert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more.
- yuukias Bundle Motion Interaction
Design and implement frontend motion: page-load choreography, transitions, hover states, scroll effects, feedback animation, and reduced-motion behavior. Use when adding or reviewing animation and interaction polish.
- yuukias Bundle Theme Factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
- yuukias Bundle Product UX Planning
Plan frontend products before implementation: purpose, audience, information architecture, navigation, user flows, states, content discipline, and feature scope. Use when starting a new app/page, redesigning UX, or reviewing whether a frontend experience is coherent.
- yuukias Bundle Plantuml Diagrams
Create PlantUML source and rendered diagrams for sequence, activity, class, component, deployment, state, and C4-style architecture diagrams. Use when UML semantics are more important than freeform drawing.
- yuukias Bundle Research Product Frontend
Plan high-density research product frontends such as medical imaging viewers, phenotype explorers, model comparison dashboards, provenance tools, and experiment history interfaces.
-
fusengine Bundle Modularize 2Use when converting existing code to modular architecture (Laravel, Next.js, React). Triggers: "modularize", "convert to modules", "migrate to modular", "restructure modules".
- fusengine Bundle Astro 7 2
Use when building Astro 7 sites, choosing an output mode (static/server/hybrid), configuring middleware, or upgrading from Astro 5/6.
- fusengine Bundle Astro DB 2
Use when doing database operations in an Astro project via Astro DB (defineDb, defineTable, db/config.ts, Turso).
- fusengine Bundle React 19 2
Use when implementing React 19.2 patterns — use(), useOptimistic, useActionState, useEffectEvent, Activity component, React Compiler.
- fusengine Bundle Brainstorming 2
Use when creating a feature/component or adding functionality. Fires BEFORE APEX Analyze to refine requirements via structured questioning.
- fusengine Bundle Astro I18N 2
Use when implementing i18n in Astro — locale routing strategies, getRelativeLocaleUrl/getAbsoluteLocaleUrl, Astro.currentLocale, or hreflang with sitemap.
- fusengine Bundle Nextjs 16 2
Use when building Next.js 16 apps — Turbopack, App Router, Cache Components, proxy.ts, v15 migration. Not for stack scaffolding (nextjs-stack) or React SPA (react-expert).
- fusengine Bundle React I18N 2
Use when implementing translations in a React app (not Next.js) with react-i18next — useTranslation, namespaces, pluralization, Suspense.
- fusengine Bundle Solid Astro 2
Use when applying SOLID principles to an Astro project — file-size limits, src/interfaces/ for types, JSDoc, modular structure, DRY.
- fusengine Bundle Design IOS 2
Use when designing an iOS or macOS screen or flow — deliverable is a device/window-framed HTML mockup and handoff spec, never SwiftUI code.
- fusengine Bundle React Forms 2
Use when building type-safe forms in React with TanStack Form v1 — Zod/Yup/Valibot validation, async validation, field arrays.
- fusengine Bundle React State 2
Zustand v5 state management for React. Use when implementing global state, stores, persist, or client-side state.
- fusengine Bundle Solid React 2
Use when applying SOLID principles to React architecture — file-size limits, hook separation, src/interfaces/, JSDoc.
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 vercel-react-best-practices, wasm, tooling. 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.