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.
-
diegosouzapw Bundle Frontend Design 9Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...
54 - diegosouzapw Bundle Frontend Design 10
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
54 - diegosouzapw Bundle Frontend 5
Build UI components, manage state, handle routing, optimize performance, and ensure accessibility
54 - diegosouzapw Bundle React Expert 3
Expert frontend engineer focused on React 19+, Next.js 16+ (App Router), and Tailwind CSS v4+. Provides production-grade code, enforces good architecture and design principles, and explains decisions briefly and clearly. Favors TypeScript, accessibility, performance, and maintainability over shortcuts.
54 - diegosouzapw Bundle Web Design Guidelines 4
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 against best practices".
54 - diegosouzapw Bundle Web Design Guidelines 5
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 against best practices".
54 - diegosouzapw Bundle Algorithmic Art 3
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
54 - diegosouzapw Bundle Frontend Design 11
Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
54 - diegosouzapw Bundle Frontend Design 12
Create frontend components and pages for the Fables & Sagas D&D app. Use this skill when building UI for the dnd-homebrew-frontend project. Generates code that matches the existing dark fantasy aesthetic, theme system, and component patterns.
54 - diegosouzapw Bundle Team Frontend 2
Unified team skill for frontend development team. All roles invoke this skill with --role arg. Built-in ui-ux-pro-max design intelligence. Triggers on "team frontend".
54 - diegosouzapw Bundle Animation Motion 2
Create smooth animations and micro-interactions with Framer Motion and CSS. Covers enter/exit animations, gestures, scroll animations, loading states, and performance optimization. Use for polished UIs, interactive elements, and engaging user experiences.
54 - diegosouzapw Bundle Creating Cursor Rules Skill
Expert guidance for creating effective Cursor IDE rules with best practices, patterns, and examples
54 - diegosouzapw Bundle Moai Domain Frontend 3
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
54 - diegosouzapw Bundle Web Design Guidelines 6
Review UI code for Web Interface Guidelines compliance. Use when asked to review UI quality, UX, accessibility, or design-system adherence for specific files or routes.
54 - diegosouzapw Bundle Add Feature 3
Scaffold a new frontend feature module with page, components, API service, and hooks
54 - diegosouzapw Bundle Frontend Design 13
Create distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications with React-based frameworks. Includes Tailwind CSS v4, shadcn/ui components, Motion animations, and visual design philosophy for avoiding generic AI aesthetics.
54 - diegosouzapw Bundle Frontend Design 14
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
54 - diegosouzapw Bundle Frontend Design 16
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
54 - diegosouzapw Bundle React Frontend 2
Provides best practices for building React applications with TypeScript and Tailwind CSS, covering component design, state management, data fetching, forms, performance, and accessibility. Use when building or modifying React frontend components, hooks, or pages.
54 - diegosouzapw Bundle Webapp Testing 4
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.
54 - diegosouzapw Bundle Frontend Design 17
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
54 - diegosouzapw Bundle Web Design Guidelines 8
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 against best practices".
54 - diegosouzapw Bundle Algorithmic Art 4
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
54 - diegosouzapw Bundle API Integration 4
Generate Next.js App Router API routes with Zod validation and TypeScript types
54 - diegosouzapw Bundle Frontend Design 18
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
54 - diegosouzapw Bundle Project Overview 2
A protocol for creating a new IoT LED controller project from scratch, including setting up the folder structure, initializing PlatformIO for the firmware, and setting up a React/Vite project for the web UI.
54 - diegosouzapw Bundle Senior Frontend 3
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
54 - diegosouzapw Bundle Frontend Design 20
Crie interfaces frontend distintas e de nível de produção com alta qualidade de design. Use esta habilidade quando o usuário solicitar a criação de componentes web, páginas, artefatos, pôsteres ou aplicativos (exemplos incluem sites, landing pages, painéis, componentes React, layouts HTML/CSS ou ao estilizar/embelezar qualquer UI web). Gera código criativo e polido e design de UI que evita a estética genérica de IA.
54 - diegosouzapw Bundle Anthropic Webapp Testing
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.
54 - diegosouzapw Bundle Accessibility Testing 3
WCAG compliance testing and accessibility quality assurance workflows for iOS apps. Use when validating accessibility labels, testing VoiceOver compatibility, checking contrast ratios, or ensuring WCAG 2.1 compliance. Covers accessibility tree analysis, semantic validation, and automated accessibility testing patterns.
54 - diegosouzapw Bundle Web Design Guidelines 9
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...
54 - diegosouzapw Bundle AI Maestro Code Graph Query
PROACTIVELY query the code graph database to understand relationships and impact of changes. Use this skill WHEN READING any file to understand context, when searching for files, when exploring the codebase, or when you need to understand what depends on a component. This is your primary tool for understanding code structure and avoiding breaking changes.
54 - diegosouzapw Bundle Frontend Design 21
Create distinctive, production-grade frontend interfaces with high design quality. Avoids generic AI aesthetics in favor of bold, memorable designs.
54 - diegosouzapw Bundle Senior Fullstack 2
Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring, and stack selection guidance. Use when the user asks to "scaffold a new project", "create a Next.js app", "set up FastAPI with React", "analyze code quality", "audit my codebase", "what stack should I use", "generate project boilerplate", or mentions fullstack development, project setup, or tech stack comparison.
54 - diegosouzapw Bundle Senior Fullstack 3
Expert full-stack development covering frontend frameworks, backend services, databases, APIs, and deployment for modern web applications.
54 - diegosouzapw Bundle UI UX Pro Max 42
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
54
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 web-design-guidelines, frontend-design, frontend-design. 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.