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.
-
planifest Bundle Accessibility Compliance Accessibility AuditYou are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.
-
argentaios Bundle Openai Image GenBatch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery.
-
hybridlabor-api Skill Nextjs Best PracticesNext.js App Router principles. Server Components, data fetching, routing patterns.
-
hybridlabor-api Bundle Nextjs App Router PatternsComprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
-
hybridlabor-api Bundle React Component PerformanceDiagnose slow React components and suggest targeted performance fixes.
-
kyrie66nb Skill Design[OMX] Canonical repo-local DESIGN.md workflow for product, UI/UX, and frontend decision source of truth
-
marktantongco Skill Design Taste FrontendSenior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
-
marktantongco Skill Web Artifacts BuilderSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Audited -
marktantongco Bundle Vercel Composition PatternsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
-
gigik2a Bundle Flusso Financeboost Pmi 2Orchestratore FinanceBoost — diagnosi finanziaria completa e controllo di gestione per PMI italiane (5-50 dipendenti), con riclassificazione bilancio, analisi indici, marginalita, proiezioni e piano d'azione. Usa SEMPRE questa skill quando l'utente dice "diagnosi finanziaria", "FinanceBoost", "analisi finanziaria PMI", "controllo di gestione", "come sta la mia azienda", "margini", "bilancio", "budget", "KPI aziendali", "cruscotto direzionale", "non so se guadagno", "cash flow", "liquidita", "quanto vale la mia azienda", "indici di bilancio", oppure quando fornisce dati di bilancio o chiede una valutazione economico-finanziaria di una PMI italiana. Attivala anche per analisi BEP, leva operativa, Du Pont, EVA, benchmark settore, budget previsionale. Produce report DOCX executive, cruscotto XLSX con formule, dashboard HTML e output JSON strutturato.
-
tcuzzo Skill Root Cause First 5तब लगाओ जब सामने कोई कड़ा bug हो, silent failure हो, regression की खोज हो, या ऐसा जोखिम भरा बदलाव जो चुपचाप किसी downstream consumer को तोड़ सकता हो। बिना जाँच कोई fix नहीं — error पढ़ो, माँग पर reproduce करो, हाल के बदलाव देखो, component की सीमाओं पर instrument लगाओ, data के बहाव को पीछे source तक trace करो। Trigger words: debug, root cause, why is this failing, silent failure, regression, works in tests but fails live, systematic debugging, जड़ पकड़ो, असली वजह ढूँढो, यह fail क्यों हो रहा है, पहले जाँच फिर fix.
-
delorenj Skill Gsd Sketch 2Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)
1 -
delorenj Skill Gsd Sketch 3Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)
1 -
delorenj Skill Gsd UI Phase 2Generate UI design contract (UI-SPEC.md) for frontend phases
1 -
delorenj Skill Gsd UI Phase 3Generate UI design contract (UI-SPEC.md) for frontend phases
1 -
delorenj Skill Gsd UI Review 2Retroactive 6-pillar visual audit of implemented frontend code
1 -
delorenj Skill Gsd UI Review 3Retroactive 6-pillar visual audit of implemented frontend code
1 -
777genius Skill Docs 5<!-- generated by docs build -->
-
777genius Skill Docs 9Hidden
-
quantumquirkxyz Skill Accessibility Testing 2Test web interfaces for accessibility compliance — automated scans, manual keyboard navigation, screen reader validation — with explicit barrier detection and remediation evidence.
-
gktuoktay Skill API Handoff Workflow 2Backend'de bir değişiklik yapıldığında otomatik Changelog çıkaran ve Frontend takımı için eski/yeni API karşılaştırma (Devir-Teslim) dokümanı üreten iş akışı.
-
gktuoktay Skill A11Y And I18N Engineer 2Ürünlerin en baştan çoklu dil (i18n) destekli ve ekran okuyuculara (WCAG) uygun erişilebilir olmasını sağlayan uzman.
-
lobbi-docs Skill Code Review 2This skill should be used when the user asks to "review code", "check changes", "analyze a PR", "do a security review", or "assess code quality" — providing comprehensive review across correctness, security, performance, accessibility, and testing.
-
lobbi-docs Skill Agentic Patterns 12Patterns from "Agentic Design Patterns" (Gulli & Sauco, 2025) applied to design token management, component scaffolding, multi-tenant theming, and accessibility-compliant UI generation.
-
lobbi-docs Skill Agentic Patterns 14Patterns from "Agentic Design Patterns" (Gulli & Sauco, 2025) applied to web animation composition, performance optimization, and multi-library orchestration for React and TypeScript.
-
publieople Bundle Design Taste FrontendAnti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
-
mk-organization-1 Skill Backend PatternsBackend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
-
mk-organization-1 Skill Agency UI Designer 2Expert UI designer specializing in visual design systems, component libraries, and pixel-perfect interface creation. Creates beautiful, consistent, accessible user interfaces that enhance UX and reflect brand identity
-
mk-organization-1 Skill Agency UX Architect 2Technical architecture and UX specialist who provides developers with solid foundations, CSS systems, and clear implementation guidance
-
ghosteken Skill UI A11YAudit a StyleSeed-based component or page for WCAG 2.2 AA issues and apply practical accessibility fixes where the code makes them safe.
-
ghosteken Skill UI ReviewReview UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality.
-
ghosteken Skill React PatternsModern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
-
ghosteken Skill Awt E2e TestingAI-powered E2E web testing — eyes and hands for AI coding tools. Declarative YAML scenarios, Playwright execution, visual matching (OpenCV + OCR), platform auto-detection (Flutter/React/Vue), learning DB. Install: npx skills add ksgisang/awt-skill --skill awt -g
-
ghosteken Bundle Senior FrontendFrontend 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.
-
kyrie66nb Bundle Frontend SkillBuild polished frontend UI.
-
kyrie66nb Bundle Frontend DesignBuild polished frontend interfaces; design-focused alias.
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 accessibility-compliance-accessibility-audit, nextjs-best-practices, openai-image-gen. 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.