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 React Best Practices 13React/Next.js performance optimization with 40+ rules in 8 categories Use when this capability is needed.
- tomevault-io Bundle Nextjs App Router Patterns 4
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components. Use when this capability is needed.
- tomevault-io Bundle Agent Md Refactor 2
Refactor bloated AGENTS.md, CLAUDE.md, or similar agent instruction files to follow progressive disclosure principles. Splits monolithic files into organized, linked documentation. Use when this capability is needed.
- tomevault-io Bundle Vue Router Best Practices 5
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions. Use when this capability is needed.
- tomevault-io Bundle Mineru Extract 2
Use the official MinerU (mineru.net) parsing API to convert a URL (HTML pages like WeChat articles, or direct PDF/Office/image links) into clean Markdown + structured outputs. Use when web_fetch/browser can’t access or extracts messy content, and you want higher-fidelity parsing (layout/table/formula/OCR). Use when this capability is needed.
- tomevault-io Bundle Accessibility Audit 7
Use when auditing UI for accessibility, WCAG compliance, keyboard navigation, screen reader support, or when building inclusive interfaces.
- tomevault-io Bundle UI Component Generation 2
Use when appropriate based on the user's context.
- tomevault-io Bundle React Patterns 10
Write React components with minimal state, proper memoization, and type-safe patterns. Use when creating components, managing state, or optimizing renders. Use when this capability is needed.
- tomevault-io Bundle Visualize 2
Render rich interactive visuals — SVG diagrams, HTML widgets, Chart.js charts, interactive explainers — directly inline in chat using the render_visualization tool. Use whenever the user asks to visualize, diagram, chart, draw, map out, or illustrate something, or when a topic has spatial, sequential, or systemic relationships a diagram would clarify better than prose. Also use proactively for data comparisons, metrics, architecture, processes, or mechanisms that benefit from a visual. Use when this capability is needed.
- tomevault-io Bundle Vue Router Best Practices 6
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions. Use when this capability is needed.
- tomevault-io Bundle Performance Optimizer 2
Optimize application performance and scalability. Use when investigating slow applications, scaling bottlenecks, or improving response times. Covers profiling, caching, database optimization, and frontend performance. Use when this capability is needed.
- tomevault-io Bundle Frontend Code Review 2
Conducts comprehensive frontend code reviews including React/Vue/Angular component analysis, TypeScript/JavaScript quality assessment, CSS/styling review, performance optimization, accessibility compliance, security vulnerabilities, and best practices validation. Produces detailed review reports with specific issues, severity ratings, and actionable recommendations. Use when reviewing frontend code, analyzing React/Vue/Angular components, checking JavaScript/TypeScript quality, validating CSS/SCSS, assessing web performance, or when users mention "review frontend code", "check React components", "analyze JavaScript", "review TypeScript", "validate accessibility", or "frontend code quality". Use when this capability is needed.
- tomevault-io Bundle React Best Practices 14
React/Next.js performance optimization. Waterfalls, bundle size, rendering. Use when this capability is needed.
- tomevault-io Bundle Interface Design 4
Interface design guidance for utilitarian apps — dashboards, tools, admin panels, data-heavy UIs. Use when building new pages/views, adding major UI components, or reviewing frontend design consistency. Component-library-first approach. Use when this capability is needed.
- tomevault-io Bundle Frontend Dev Guidelines 5
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code. Use when this capability is needed.
- tomevault-io Bundle React Best Practices 15
Vercel Engineering's React & Next.js performance optimization guide. Use when writing React components, implementing data fetching, reviewing code for performance, refactoring, or optimizing bundle size. Contains 40+ rules across 8 priority categories. Use when this capability is needed.
- tomevault-io Bundle Documentation Lookup 10
Use up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, API references, code examples, or when the user names a framework (e.g. React, Next.js, Prisma). Use when this capability is needed.
- tomevault-io Bundle React Native Skills 2
React Native patterns, navigation, and best practices for cross-platform mobile Use when this capability is needed.
- tomevault-io Bundle Mobile App 3
Deliver cross-platform and native mobile experiences across React Native, Flutter, SwiftUI, and Jetpack Compose without collapsing mobile work into a single framework. Use when this capability is needed.
- tomevault-io Bundle Vue Router Skilld 3
ALWAYS use when writing code importing \"vue-router\". Consult for debugging, best practices, or modifying vue-router, vue router, router. Use when this capability is needed.
- tomevault-io Bundle Nextjs App Router 5
Build production Next.js 14+ applications with App Router. Covers server/client components, routing, data fetching, caching, streaming, metadata, and middleware. Use for full-stack React apps, SSR, ISR, and edge deployments. Use when this capability is needed.
- tomevault-io Bundle Code Audit 3
Comprehensive static code analysis to enforce architectural patterns, conventions, and code quality standards. Use when this capability is needed.
- tomevault-io Bundle React Native Best Practices 3
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
- tomevault-io Bundle Markitdown 8
Convert various file formats (PDF, Office documents, images, audio, web content, structured data) to Markdown optimized for LLM processing. Use when converting documents to markdown, extracting text from PDFs/Office files, transcribing audio, performing OCR on images, extracting YouTube transcripts, or processing batches of files. Supports 20+ formats including DOCX, XLSX, PPTX, PDF, HTML, EPUB, CSV, JSON, images with OCR, and audio with transcription. Use when this capability is needed.
- tomevault-io Bundle Performance Optimization 9
Melhores práticas essenciais de performance para React e Next.js inspiradas pela Vercel. Use when this capability is needed.
- tomevault-io Bundle Design System Starter 2
Use this skill when creating or evolving design systems for applications. Provides design token structures, component architecture patterns, documentation templates, and accessibility guidelines. Ensures consistent, scalable, and accessible UI design across products.
- tomevault-io Bundle Coding Standards 24
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development. Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 42
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. Use when this capability is needed.
- tomevault-io Bundle Tailwind Patterns 6
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when this capability is needed.
- tomevault-io Bundle Backend Patterns 9
后端架构模式、API 设计、数据库优化，以及针对 Node.js、Express 和 Next.js API 路由的服务端最佳实践。 Use when this capability is needed.
- tomevault-io Bundle Coding Standards 25
适用于 TypeScript、JavaScript、React 和 Node.js 开发的通用编码标准、最佳实践和模式。 Use when this capability is needed.
- tomevault-io Bundle Remotion Best Practices 25
Best practices for Remotion - Video creation in React Use when this capability is needed.
- tomevault-io Bundle Frontend Design 126
Create distinctive, production-grade frontend interfaces with high design quality Use when this capability is needed.
- tomevault-io Bundle Web Design Guidelines 27
UI code review with 100+ rules for accessibility, performance, and UX Use when this capability is needed.
- tomevault-io Bundle Frontend Code Review 3
当用户需要对前端代码进行全面审查时使用此技能，包括 React、Vue、Angular 或原生 JavaScript/TypeScript 项目。适用于代码审查、Pull Request 评审、性能审计、安全检查等场景。 Use when this capability is needed.
- tomevault-io Bundle JSON Render React Native 2
React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile. 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 react-best-practices, nextjs-app-router-patterns, agent-md-refactor. 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.