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.
-
mayurrathi Skill Dify Frontend TesterSpecialized frontend testing logic. Automating component testing specifically for the Dify platform.
- mayurrathi Skill Frontend UI Dark TS
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces...
- mayurrathi Skill Hig Components Menus
Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure controls, and standard buttons. Use this skill when the user says "how should my buttons look," "what goes in the menu bar," "should I use a context menu or action sheet," "how do I design a toolbar," or asks about button design, menu design, context menu, toolbar, menu bar, action button, pop-up button, pull-down button, disclosure control, dock menu, edit menu, or any menu/button component layout and behavior. Cross-references: hig-components-search, hig-components-controls, hig-components-dialogs.
- mayurrathi Skill Mobile Native Bundle
Bundle of 50+ granular skills for Flutter, React Native, Swift, Jetpack Compose, and native builds.
- mayurrathi Skill HTML Injection Testing
This skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applications", or "test conten...
- mayurrathi Skill React Modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to...
- mayurrathi Skill Nextjs Supabase Auth
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
- mayurrathi Skill React Best Practices
React 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 pat...
- mayurrathi Skill React Flow Architect
Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or...
- mayurrathi Skill React State Management
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
- mayurrathi Skill Wcag Audit Patterns
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing ac...
- mayurrathi Skill Web Design Guidelines 2
Review UI code for Web Interface Guidelines compliance. Use when asked to \"review my UI\", \"check accessibility\", \"audit design\", \"review UX\", or \"check my site aga...
- mayurrathi Skill Angular State Management
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
- mayurrathi Skill Hig Components Search
Apple HIG guidance for navigation-related components including search fields, page controls, and path controls. Use this skill when the user says "how should search work in my app," "I need a breadcrumb," "how do I paginate content," or asks about search field, search bar, page control, path control, breadcrumb, navigation component, search UX, search suggestions, search scopes, paginated content navigation, or file path hierarchy display. Cross-references: hig-components-menus, hig-components-controls, hig-components-dialogs, hig-patterns.
- mayurrathi Skill Frontend Dev Guidelines
Opinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router...
- mayurrathi Skill Frontend Security Coder
Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns. Use PROACTIVELY for frontend security implementations or client-side security code reviews.
- mayurrathi Skill Nextjs Best Practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
- mayurrathi Skill Remotion Best Practices
Best practices for Remotion - Video creation in React
- mayurrathi Skill React Nextjs Development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
- mayurrathi Skill Nextjs App Router Patterns
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 Serve...
- mayurrathi Skill Frontend Mobile Security Xss Scan
You are a frontend security specialist focusing on Cross-Site Scripting (XSS) vulnerability detection and prevention. Analyze React, Vue, Angular, and vanilla JavaScript code to identify injection poi
- mayurrathi Skill Cc Skill Backend Patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
- mayurrathi Skill Cc Skill Coding Standards
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
- mayurrathi Skill Vercel React Best Practices
Official engineering guidelines from Vercel for ensuring Next.js code uses proper caching, server components, and suspense boundaries.
- mayurrathi Skill React Native Architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecti...
- mayurrathi Skill Cc Skill Frontend Patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
- mayurrathi Skill Javascript Typescript Typescript Scaffold
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
- mayurrathi Skill Accessibility Compliance Accessibility Audit
You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.
- mayurrathi Skill Frontend Mobile Development Component Scaffold
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
- mayurrathi Skill Application Performance Performance Optimization
Optimize end-to-end application performance with profiling, observability, and backend/frontend tuning. Use when coordinating performance optimization across the stack.
-
dozerojeong Skill React Best PracticesVercel 엔지니어링 룰 기반의 React 및 Next.js 성능 최적화 가이드입니다. React/Next.js 코드를 작성, 리뷰, 리팩토링할 때 사용하여 최적의 성능 패턴을 보장합니다.
- dozerojeong Skill Nextjs App Router Expert
Next.js 14+ App Router, React Server Components (RSC), Server Actions 및 클린 아키텍처 원칙을 활용한 최신의 현대적 프론트엔드 모범 사례 가이드입니다.
-
bobbycats Bundle HTML To PDF将 HTML 演示文稿（scroll-snap slides）导出为高清 PDF。逐页截图合成，保留动画最终态。当用户说「导出 PDF」「转 PDF」「生成 PDF」「打印」或需要将 HTML slides 分享为静态文件时使用。
- bobbycats Bundle Frontend Slides
生成零依赖、动画丰富的 HTML 演示文稿。支持从零创建、Markdown 文件转换、PPT 转换。当用户说「做 slides」「做演示」「做汇报」「PPT 转 web」「把文档做成演示」「产品展示」时使用。
- dozerojeong Skill React UI Patterns
로딩 상태, 에러 처리, 빈 화면(Empty states), 폼 제출 등에 대한 Modern React UI 패턴 가이드입니다. UI 컴포넌트를 구축하거나 비동기 데이터를 처리할 때 반드시 참고하세요.
- dozerojeong Skill Frontend Developer
React 19, Next.js 15 및 최신 프론트엔드 아키텍처에 능통한 숙련된 프론트엔드 개발자의 역할을 정의합니다. 구조 설계, 컴포넌트 퍼블리싱, 성능 및 접근성 최적화에 사용하세요.
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 Dify Frontend Tester, Frontend Ui Dark Ts, Hig Components Menus. 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.