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.
-
vril-labs Bundle Angular Best Practices NgrxNgRx state management best practices for Angular. Install alongside angular-best-practices.
- vril-labs Bundle Nextjs
Next.js App Router - Production Patterns
- vril-labs Bundle Angular Best Practices Spartan
Spartan UI (shadcn for Angular) best practices. Install alongside angular-best-practices.
- vril-labs Bundle Pinia V3
Pinia v3 - Vue State Management
- vril-labs Bundle AI Sdk UI
AI SDK UI - Frontend React Hooks
- vril-labs Bundle Playwright
Browser automation and E2E testing with Playwright. Auto-detects dev servers, writes clean test scripts. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use for cross-browser testing, visual regression, API testing, component testing in TypeScript/JavaScript and Python projects.
- vril-labs Bundle Shadcn Vue
shadcn-vue Production Stack
- vril-labs Bundle Better Auth
Skill for integrating Better Auth - comprehensive TypeScript authentication framework for Cloudflare D1, Next.js, Nuxt, and 15+ frameworks. Use when adding auth, encountering D1 adapter errors, or implementing OAuth/2FA/RBAC features.
- vril-labs Bundle Pinia Colada
Pinia Colada - Smart Data Fetching for Vue
- vril-labs Bundle Base UI React
Base UI React
- vril-labs Bundle Tanstack Start
TanStack Start (React) — RC-Ready Playbook
- vril-labs Bundle Cloudflare Nextjs
Cloudflare Next.js Deployment Skill
-
kernel8901 Bundle Devbridge FrontendFrontend Bridge Agent
-
ntizar Bundle Adela IntegrateIntegrar módulos Adela en un proyecto Express o añadir nuevos tabs/frontend a un CRM Adela existente
- ntizar Bundle Accessibility Map
Patrones para construir mapas de accesibilidad urbana (estilo Close City): travel time maps con POIs, isocronas, transporte público y bicis compartidas. Cobertura de datos, fuentes, y arquitectura de proyecto.
- ntizar Skill Editorial Diagrams
Use al crear diagramas editoriales claros en HTML+SVG.
- ntizar Bundle Modular Component Ecosystem
Diseñar un ecosistema de módulos base reutilizables (@namespace/*) para construir proyectos multi-usuario sin arrastrar deuda técnica — desde análisis de señales (GitHub stars, proyectos existentes) hasta definición de paquetes con principios de diseño.
- ntizar Skill Static Digest Pipeline
Pipeline de digest estático: fetch API externa → normalización → scoring heurístico → JSON → HTML → GitHub Pages. Patrón para repos tipo datos-gob-watch.
- ntizar Skill Hyperframes HTML Video
Usa a convertir HTML a vídeo con HyperFrames CLI.
- ntizar Skill Lieflat Charts Dataviz
Use al convertir datos en gráficos HTML editoriales.
Audited - ntizar Bundle Personal Tracking Database
Patrón para construir sistemas de seguimiento personal con base de datos JSON estructurada + dashboard HTML interactivo + scripts de registro rápido. Reutilizable para dieta, finanzas, hábitos, productividad, etc.
- ntizar Skill Webapp Movil First
Use al crear una tool HTML interactiva: táctil-first.
- ntizar Bundle Browser Local Tools
Herramientas HTML que funcionan 100% en el navegador sin instalación. Patrón para crear tools locales con drag-drop, extracción de texto (mammoth.js para Word, pdf.js para PDF), normalización y comparación. Incluye pitfalls de PDF.js Worker y normalización de documentos legales.
- ntizar Bundle HTML Demo Pattern Mining
Use al minar ideas de colecciones de demos HTML.
- ntizar Skill Plandemovilidad Patterns
Patrones de proyecto PLANDEMOVILIDAD v3.0 — generador de Planes de Movilidad Sostenible (PMST/PTST). Arquitectura, módulos, helpers, convenciones, archivos sagrados, clases CSS.
- ntizar Bundle HTML To PDF Report Pipeline
Pipeline completo para generar informes PDF profesionales desde HTML/JS vanilla: generación en browser, transferencia a disco, conversión con weasyprint, manejo de charts/maps como imágenes estáticas. Patrón para dashboards que necesitan exportar a PDF sin Puppeteer/Chromium.
- ntizar Skill Gtfs To HTML Timetables
Usa a generar horarios HTML desde GTFS.
- ntizar Bundle Ocr Quirurgico PDF Md
Pipeline completo OCR quirúrgico: PDF → página a página → Markdown/HTML con precisión total. Detecta tablas, firmas, diagramas, imágenes. Si no entiende algo, captura y graba en posición exacta. Vectoriza para búsqueda con ChromaDB + qwen3-embedding.
-
thedaviddias Bundle Structured DataUse when auditing metadata, crawlability, structured data, or indexability related to Add structured data markup. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle Td Headers Attr
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Link table cells to headers using IDs. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Aria Dialog Name
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure dialogs have an accessible name. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Aria Hidden Body
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Do not use aria-hidden on the document body. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- thedaviddias Bundle Author Expertise
Use when auditing metadata, crawlability, structured data, or indexability related to Highlight author credentials and expertise. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle Canonical Header
Use when auditing metadata, crawlability, structured data, or indexability related to Sync HTML canonical tags and Link headers. Verify the rendered HTML and HTTP response rather than relying only on source files.
- thedaviddias Bundle Contract Testing
Use when setting up integration testing for a frontend-backend API boundary, evaluating whether two services are safe to deploy independently, or replacing slow end-to-end tests with contract tests.
- thedaviddias Bundle CSS Minification
Use when reviewing stylesheets, component styles, and responsive behavior related to Minify all CSS files. Check the rendered layout across breakpoints and interaction states before proposing a fix.
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 angular-best-practices-spartan, pinia-v3, angular-best-practices-ngrx. 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.