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 Doc ArchitectureGenerate architecture documentation using arc42 or C4 model. Use for creating system context, container, and component diagrams with narrative. Use when this capability is needed.
- tomevault-io Bundle Ecosystem Health
Analyzes Claude Code ecosystem health by tracking all 27 extensibility components across 6 tiers - including plugin components, core configuration, environment/CLI, authentication, session features, and integrations. Use when checking if Claude Code components are up-to-date, orchestrating audits efficiently, tracking documentation coverage, applying updates from new Claude Code versions, or getting an overview of ecosystem component staleness.
- tomevault-io Bundle Originator Profile Frontend
フロントエンド開発支援（React コンポーネント、Tailwind CSS、アクセシビリティ、テスト） Use when this capability is needed.
- tomevault-io Bundle Tryboy869 Dojutsu For AI Astro Typescript Cursorrules Prompt
astro-typescript-cursorrules-prompt-file
- tomevault-io Bundle Tryboy869 Dojutsu For AI Typescript React Cursorrules Prompt
typescript-react-cursorrules-prompt-file
- tomevault-io Bundle Plain Language
Simplification and readability techniques. Use when writing for broad audiences or simplifying complex content. Covers active voice, short sentences, jargon elimination, and accessibility principles from the Plain Language Movement. Use when this capability is needed.
- tomevault-io Bundle Jeremylongshore Claude Code Plugins Plus Skills React Hook C
React Hook Creator
- tomevault-io Bundle Tailwindcss Fundamentals V4
Tailwind CSS v4 fundamentals covering installation, CSS-first configuration, design systems, and 2025/2026 best practices Use when this capability is needed.
- tomevault-io Bundle Pega Dx Component Builder
Create or extend a Pega Constellation DX component in this UI gallery. Use for new custom components, config.json authoring, Storybook docs, Jest tests, component registration, and safe PCore or PConnect API integration that follows repo and Pega best practices. Use when this capability is needed.
- tomevault-io Bundle React Native Testing Patterns
Implements testing strategies for React Native components, MST stores, and services using Jest, React Testing Library, and Maestro. Use when writing unit, integration, or E2E tests in Fitness Tracker App. Use when this capability is needed.
- tomevault-io Bundle Frontend Performance Optimization
Use when 用户需要优化前端性能、提升页面加载速度、减少白屏时间、优化交互流畅度、进行性能排查时。触发场景：前端性能优化、页面加载慢、白屏时间长、卡顿、LCP/FID/CLS指标优化、前端性能分析、打包体积优化。
- tomevault-io Bundle Appkit Accessibility Auditor
Audit macOS AppKit interfaces for accessibility, focusing on VoiceOver, keyboard navigation, and semantics Use when this capability is needed.
- tomevault-io Bundle Tdd Refactor Coverage Audit
Audit newly added source files for paired tests during the TDD refactor phase. JSON-driven language conventions (TypeScript, JavaScript, Svelte, Python, Go, Rust, Ruby, Elixir, Java, C#) with optional project overrides. Advisory only — never blocks the TDD gate. Use when this capability is needed.
- tomevault-io Bundle Vue Markdown Next Project Spec
vue-markdown-next 的工程改造与质量规范。用于跨 `packages/parser`、`packages/vue`、`app/markdown-next-preview`、`app/markdown-next-docs` 进行功能开发、Bug 修复、API 调整、Worker 兼容处理和回归测试时，确保改动符合项目约束与发布标准。 Use when this capability is needed.
- tomevault-io Bundle Senior Frontend Engineer
Production-grade frontend development for senior engineers building large-scale React 19.2 + Next.js 16 applications. Covers architecture, performance, testing (Jest, Playwright), accessibility (WCAG 2.1), state management (React Query, Zustand), styling (Tailwind, shadcn/ui), and enterprise patterns. Use when building production applications, reviewing code, optimizing performance, implementing accessibility, writing tests, or following senior-level best practices for modern React/Next.js development. Use when this capability is needed.
- tomevault-io Bundle Abhinavssingh Training Saas Site Optimizely Frontend Compone
Optimizely Frontend Component Conventions
- tomevault-io Bundle Spec Writing Rules
Enforces clear, unambiguous, testable, FULL-STACK specification writing rules for Phase II web applications (Frontend + Backend + Auth + Database). Apply before any code is written. Use when this capability is needed.
- tomevault-io Bundle React Component Structure
Best practices for structuring React components - function declarations, file organization, and Single Responsibility Principle Use when this capability is needed.
- tomevault-io Bundle Github Pages Publisher
Publish static page artifacts from the publisher workspace to a GitHub Pages repository using a fine-grained token, with advisory image optimization and an original-image path. Use when a React/static page artifact is already prepared and needs to be copied into the Pages repo under a strict year/year-month/page-slug directory layout, then committed and pushed, with a final public artifact URL returned. Use when this capability is needed.
- tomevault-io Bundle Backend To Frontend Handoff Docs
Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'. Use when this capability is needed.
- tomevault-io Bundle Frontend To Backend Requirements
Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI. Use when this capability is needed.
- tomevault-io Bundle Demerzels Lab Elsamultiskillagent Deliberate Frontend Redesi
Activation Criteria
- tomevault-io Bundle Webapp Playwright Testing
Browser automation toolkit using Playwright MCP for testing web applications. Use when asked to navigate pages, click elements, fill forms, take screenshots, verify UI components, check console logs, debug frontend issues, or validate responsive design. Supports live browser interaction and accessibility snapshots. Use when this capability is needed.
- tomevault-io Bundle Typescript Security Review
Provides security review capability for TypeScript/Node.js applications, validates code against XSS, injection, CSRF, JWT/OAuth2 flaws, dependency CVEs, and secrets exposure. Use when performing security audits, before deployment, reviewing authentication/authorization implementations, or ensuring OWASP compliance for Express, NestJS, and Next.js. Triggers on "security review", "check for security issues", "TypeScript security audit".
- tomevault-io Bundle Next JS App Router Clientserver Boundary
App Router の Server Component でクライアント専用APIを使っていないか確認する。 Use when this capability is needed.
- tomevault-io Bundle Laravel 11 12 App Guidelines
Guidelines and workflow for working on Laravel 11 or Laravel 12 applications across common stacks (API-only or full-stack), including optional Docker Compose/Sail, Inertia + React, Livewire, Vue, Blade, Tailwind v4, Fortify, Wayfinder, PHPUnit, Pint, and Laravel Boost MCP tools. Use when implementing features, fixing bugs, or making UI/backend changes while following project-specific instructions (AGENTS.md, docs/). Use when this capability is needed.
- tomevault-io Bundle Vue JS Progressive Javascript Framework
Vue.js is a progressive JavaScript framework for building user interfaces with an incrementally adoptable architecture, reactive data binding, and a rich ecosystem including Vue Router, Pinia, and Vite. Use when this capability is needed.
- tomevault-io Bundle React Native Brownfield Migration
Provides an incremental adoption strategy to migrate native iOS or Android apps to React Native or Expo using @callstack/react-native-brownfield for initial setup. Use when planning migration steps, packaging XCFramework/AAR artifacts, and integrating them into host apps.
- tomevault-io Bundle Vue Composable Testing
Test Vue 3 composables with Vitest following best practices. Use when writing tests for composables, creating test helpers for Vue reactivity, or when asked to "test a composable", "write tests for use*", or "help test Vue composition functions". Covers independent composables (direct testing) and dependent composables (lifecycle/inject testing with helpers). Use when this capability is needed.
- tomevault-io Bundle Adk Agent Builder
Build production-ready AI agents using Google's Agent Development Kit with Claude integration, React patterns, multi-agent orchestration, and comprehensive tool libraries Use when this capability is needed.
- tomevault-io Bundle Feature Doc Review
Review a feature/component documentation to check that it adheres to repo standards. Use when this capability is needed.
- tomevault-io Bundle Create Modus Wrapper Component
Scaffold a new Modus wrapper component following established patterns with proper TypeScript interfaces, event handling, and cleanup Use when this capability is needed.
- tomevault-io Bundle Salesforcemobilesdk Reactnative
This skill updates the minimum iOS deployment target across the Salesforce Mobile SDK for React Native repository. Use when this capability is needed.
- tomevault-io Bundle Tryboy869 Dojutsu For AI Cursor AI React Typescript Shadcn U
cursor-ai-react-typescript-shadcn-ui-cursorrules-p
- tomevault-io Bundle Tryboy869 Dojutsu For AI Javascript Astro Tailwind CSS Curso
javascript-astro-tailwind-css-cursorrules-prompt-f
- tomevault-io Bundle Nextjs Material UI Tailwind CSS Cursorrules Prompt
Apply for nextjs-material-ui-tailwind-css-cursorrules-prompt. Ce projet s'appel Portfolio2 Il est basé sur Next.Js, il a tailwindcss, materialui, shadcn/ui et aceternityui What is your project named? portfolio2 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 doc-architecture, ecosystem-health, originator-profile-frontend. 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.