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.
-
yanacuti1121 Skill React Agent Loop 2React Agent Loop
2 -
yanacuti1121 Skill HTML Xss Filtering 2Html Xss Filtering
2 -
yanacuti1121 Skill Sanitize HTML Cleanup 2Sanitize Html Cleanup
2 -
yanacuti1121 Skill Remotion Video Creation 2Best practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts, transitions, and more.
2 -
affaan-m Skill Backend Patterns 8Node.js, Express, Next.js API 라우트를 위한 백엔드 아키텍처 패턴, API 설계, 데이터베이스 최적화 및 서버 사이드 모범 사례.
226k -
affaan-m Skill Backend Patterns 9后端架构模式、API设计、数据库优化以及适用于Node.js、Express和Next.js API路由的服务器端最佳实践。
226k -
affaan-m Skill Coding Standards 6适用于TypeScript、JavaScript、React和Node.js开发的通用编码标准、最佳实践和模式。
226k -
affaan-m Skill Backend Patterns 10Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
226k -
affaan-m Skill Frontend Patterns 7React、Next.js、状態管理、パフォーマンス最適化、UIベストプラクティスのためのフロントエンド開発パターン。
226k -
affaan-m Skill Frontend Patterns 8React, Next.js, 상태 관리, 성능 최적화 및 UI 모범 사례를 위한 프론트엔드 개발 패턴.
226k -
affaan-m Skill Frontend Patterns 9React、Next.js、状态管理、性能优化和UI最佳实践的前端开发模式。
226k -
affaan-m Skill Frontend Patterns 10Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
226k -
desesbraker Skill Shopify Apps 2Modern Shopify app template with React Router
2 -
desesbraker Skill Voice Agents 2You are a voice AI architect who has shipped production voice agents handling millions of calls. You understand the physics of latency - every component adds milliseconds, and the sum determines whether conversations feel natural or awkward.
2 -
desesbraker Skill Azd Deployment 2Deploy containerized frontend + backend applications to Azure Container Apps with remote builds, managed identity, and idempotent infrastructure.
2 -
desesbraker Skill React Patterns 2Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
2 -
arjumaan Skill Development 2Comprehensive web, mobile, and backend development workflow bundling frontend, backend, full-stack, and mobile development skills for end-to-end application delivery.
1 -
arjumaan Skill Fp TS React 2Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15.
1 -
arjumaan Skill Rayden Code 2Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns
1 -
arjumaan Skill C4 Component 2Expert C4 Component-level documentation specialist. Synthesizes C4 Code-level documentation into Component-level architecture, defining component boundaries, interfaces, and relationships.
1 -
arjumaan Skill Bevy Ecs Expert 2Master Bevy's Entity Component System (ECS) in Rust, covering Systems, Queries, Resources, and parallel scheduling.
1 -
arjumaan Skill 3d Web Experience 2Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.
1 -
arjumaan Skill Nextjs Best Practices 2Next.js App Router principles. Server Components, data fetching, routing patterns.
1 -
arjumaan Skill Context7 Auto Research 2Automatically fetch latest library/framework documentation for Claude Code via Context7 API. Use when you need up-to-date documentation for libraries and frameworks or asking about React, Next.js, Prisma, or any other popular library.
1 -
yanacuti1121 Skill Component Layout Patterns 2Component Layout Patterns
2 -
yanacuti1121 Skill Chrome Devtools A11Y Audit 2Chrome Devtools A11y Audit
2 -
projectious-work Bundle Tailwind 2Tailwind CSS v4 — utility-first styling, responsive design, dark mode, and component extraction. Use when building or reviewing Tailwind-based UIs, setting up Tailwind v4, or designing responsive or dark-mode styling.
0 -
projectious-work Bundle Frontend Design 2Frontend architecture and UI design — component hierarchies, accessibility, performance, state management. Use when designing frontend architecture, building component hierarchies, making something accessible, optimizing Core Web Vitals, or choosing a state management approach.
0 -
projectious-work Skill PDF Workflow 2Generating and manipulating PDF files — from HTML, DOCX, or raw content using reportlab, weasyprint, or pypdf. Use when producing PDF reports, invoices, certificates, or when merging, splitting, or extracting text from existing PDFs.
0 -
manastalukdar Skill Remove AI Marks 2Strip multi-vendor AI provenance marks from files and text — invisible Unicode (Layer A), statistical text watermarks via rewrite (Layer B), and C2PA/EXIF/XMP/container metadata from PNG/JPEG/WebP/SVG/PDF/DOCX/ODT/HTML/MD. Requires the watermarks-remover local service (Docker). Use when the user asks to strip watermarks, remove C2PA/Content Credentials, clean AI metadata, remove invisible Unicode, or runs /remove-ai-marks.
-
manastalukdar Skill Visual AI Tells 2Detect AI-generated UI patterns in CSS and component files — reports side-tab accents, gradient text, glassmorphism, bounce easing, template scaffolding, and monoculture font choices, then asks before removing anything
-
manastalukdar Skill Component Library 2Scaffold component library structure with Storybook and documentation
-
peterbamuhigire Bundle Skills Web Dev 2Top-level router for the Chwezi Core Systems web-development and software-engineering skills engine. Use for AI systems, SaaS, architecture, APIs, databases, security, frontend engineering, mobile, DevOps, reliability, product engineering, SDLC documentation, catalog maintenance, delivery evidence packs, routing fixtures, and world-class engineering quality gates.
-
peterbamuhigire Bundle Tailwind CSS 2Use when implementing or reviewing Tailwind CSS styling, responsive layouts, state variants, theme tokens, layers, grids, or build configuration. Use a design-system skill for visual direction and accessibility-wcag for formal accessibility review.
-
peterbamuhigire Bundle Image Compression 2Use when implementing or reviewing client image optimisation plus authoritative server decode, validation, resize, metadata stripping, and canonical re-encoding. Use saas-managed-visual-assets for administrative asset lifecycle and frontend-performance for page budgets.
-
peterbamuhigire Skill Nextjs App Router 2Use when implementing or reviewing a Next.js App Router application with server and client components, route handlers, middleware, caching, authentication, streaming, or deployment. Use react-development for framework-neutral components and api-design-first for external APIs.
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-agent-loop, html-xss-filtering, sanitize-html-cleanup. 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.