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 Reactive Dashboard PerformanceExpert in building blazing-fast reactive dashboards with comprehensive testing. Masters React performance patterns, testing strategies for async components, and real-world patterns from Linear, Use when this capability is needed.
- tomevault-io Bundle Coverage Readme Workflow
Ensure test coverage percentage is displayed in README.md for Next.js and Python projects following industry standards Use when this capability is needed.
- tomevault-io Bundle Nextjs Unit Test Creator
Generate comprehensive unit tests for Next.js 16 applications covering App Router, Server Components, Client Components, API routes, and Server Actions with industry best practices Use when this capability is needed.
- tomevault-io Bundle Flutter Accessibility Validator
Use when creating or modifying Flutter UI components, screens, or widgets, or when the user asks about accessibility, screen reader support, VoiceOver, TalkBack, touch targets, color contrast, or WCAG compliance in a Flutter app.
- tomevault-io Bundle Security Report Builder
Transform plugin security scanner results into professional reports (HTML, PDF, DOCX) with intelligent false positive filtering and MITRE ATT&CK/OWASP integration. Reduces false positive rate from 85-90% to under 20%. Use when this capability is needed.
- tomevault-io Bundle Component Docs Batcher
批量生成和维护前端组件库文档的自动化工具。专为 Monorepo 组件库设计（如 atom-ui-mobile），通过对比组件文件和文档的修改时间，自动生成任务清单并批量生成符合规范的完整组件文档。支持以下场景：(1) 定期批量更新组件文档，(2) 单个组件文档维护，(3) 新组件文档初始化。自动识别主要组件文件，跳过 index.ts、store、hooks 等辅助文件，文档路径为组件目录下的 index.zh-CN.md。 Use when this capability is needed.
- tomevault-io Bundle Fosmvvm React View Generator
Generate React components that render FOSMVVM ViewModels. Scaffolds ViewModelView pattern with hooks, loading states, and TypeScript types. Use when this capability is needed.
- tomevault-io Bundle IOS Developer Agents
Use this skill to audit iOS apps for accessibility compliance with Apple Human Interface Guidelines, WCAG 2.2 standards, and iOS accessibility best practices.
- tomevault-io Bundle Hoangnguyen0403 Agent Skills Standard React Native Navigatio
React Native Navigation
- tomevault-io Bundle Accessibility Checklist
Verify WCAG 2.1 AA compliance for UI components. Use when building or reviewing frontend components, implementing accessibility, or working with frontend-architect. Use when this capability is needed.
- tomevault-io Bundle Frontend Integration
Frontend integration guides for React and Flutter with Kailash SDK workflows, including setup, API integration, state management, and best practices. Use when asking about 'frontend integration', 'React integration', 'Flutter integration', 'frontend developer', 'UI integration', 'React with Kailash', 'Flutter with Kailash', 'frontend workflow', 'API client', 'React query', or 'Flutter state management'. Use when this capability is needed.
- tomevault-io Bundle Josiahsiegel Claude Plugin Marketplace React State Managemen
Quick Reference
- tomevault-io Bundle Tailwindcss Animations
Tailwind CSS animations and transitions including built-in utilities and custom animation patterns Use when this capability is needed.
- tomevault-io Bundle Kk0ga Employee Time Attendance Frontend Tables Tanstack Tabl
TanStack Table Skill
- tomevault-io Bundle Kk0ga Employee Time Attendance Frontend Tanstack Architectur
Frontend TanStack Architecture Skill
- tomevault-io Bundle Nextjs Dashboard Patterns
Next.js 15 App Router patterns, React components, API routes, and state management for the Language Operator dashboard Use when this capability is needed.
- tomevault-io Bundle Li Lance Android Seraphim Framework React Native Architectur
React Native Architecture
- tomevault-io Bundle Mcpserver Migrate Mcpapps
Migrates an MCP server with interactive widgets from the OpenAI Apps SDK (window.openai, text/html+skybridge) to the MCP Apps standard (@modelcontextprotocol/ext-apps), covering server-side and client-side changes. Use when this capability is needed.
- tomevault-io Bundle Update Workflow Explorer
Audit and update workflow-explorer.html flowcharts to match the current codebase logic. Reads all command, skill, and agent source files, compares against the 4 data structures in the HTML file, reports drift, and applies updates. Use when workflow logic has changed and the explorer needs syncing. Use when this capability is needed.
- tomevault-io Bundle Li Lance Android Seraphim Framework React Native Performance
React Native Performance
- tomevault-io Bundle Vue Auto Import Checker
Use this skill when a user wants an agent to scan one or more Vue projects with vue-auto-import-checker to find tags that are not registered in components.d.ts, with interactive run configuration and output preferences.
- tomevault-io Bundle Magento UI Component Developer
Builds sophisticated admin interfaces and frontend components using Magento's UI Component framework. Use when creating admin grids, forms, modals, or data-driven interfaces. Masters XML configuration, KnockoutJS templates, data providers, and complex form/grid implementations.
- tomevault-io Bundle Design Token Management
Use when implementing design token systems, CSS variable architectures, or Style Dictionary pipelines. Covers token schemas, naming conventions, token transformations, and multi-platform token delivery for design systems.
- tomevault-io Bundle Technical Doc Creator
Create HTML technical documentation with code blocks, API workflows, system architecture diagrams, and syntax highlighting. Use when users request technical documentation, API docs, API references, code examples, or developer documentation. Use when this capability is needed.
- tomevault-io Bundle React Native Storage Manager
Handles MMKV storage operations and data persistence patterns with encryption. Use when implementing data persistence, caching, or user preferences in Fitness Tracker App.
- tomevault-io Bundle Frontend Accessibility Best Practices
Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance. Use when this capability is needed.
- tomevault-io Bundle React Uiux Design First
Senior-level React UI/UX development with design-first approach. Prioritizes UX clarity, visual rhythm, micro-interactions, loading states, accessibility, and performance. Use when building React components, designing user interfaces, implementing loading/error states, adding animations, or reviewing UI code for polish and user experience. Use when this capability is needed.
- tomevault-io Bundle Page Structure Design
Use when designing page hierarchies, page templates, layout zones, or sitemap structures. Covers page sets, template inheritance, component zones, and page tree APIs for headless CMS architectures.
- tomevault-io Bundle Modbender Skill Library MCP Next JS Production Engineering
Next.js Production Engineering
- tomevault-io Bundle Oscardrt Supastarter Nextjs Skill Supastarter Nextjs Skill
supastarter for Next.js – Skill
- tomevault-io Bundle React Native I18N Workflow
Manages internationalization strings and translation workflows using i18next and react-i18next. Use when adding new text, supporting additional languages, or implementing pluralization and interpolation in Fitness Tracker App.
- tomevault-io Bundle Document Cotton Component
Guide for creating comprehensive documentation pages for django-cotton-bs5 components and utilities. Use when adding or improving component documentation in the example app - covers component analysis, documentation structure, section organization, description writing, and example patterns. Use when this capability is needed.
- tomevault-io Bundle Professional Commit Workflow
Creates professional git commits with automated pre-commit checks for Java, Python, React, and documentation projects. Generates emoji conventional commit messages and analyzes staging status. Produces atomic commits following best practices.
- tomevault-io Bundle Tailwind Style Validator
Tailwind CSS v4とHextraテーマの併用環境で、使用されているCSSクラスを検証し、問題を検出するスキル。Tailwindクラスの使用状況確認やHextraとの競合チェックに使用します。 Use when this capability is needed.
- tomevault-io Bundle Ckmobile Development
Build mobile apps with React Native, Flutter, Swift/SwiftUI, Kotlin/Jetpack Compose. Use for iOS/Android, mobile UX, performance optimization, offline-first, app store deployment. Use when this capability is needed.
- tomevault-io Bundle Node Typescript Service
Builds and extends Node.js/TypeScript microservice endpoints with request validation (Zod/Joi/class-validator), structured error handling, and unit + integration tests. Use when the user wants to create or modify an API endpoint, service layer, or route handler in Express, Nest.js, or Fastify. Do not use for React frontend components, UI elements, or accessibility audits.
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 reactive-dashboard-performance, coverage-readme-workflow, nextjs-unit-test-creator. 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.