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.
-
mhassan0000 Bundle Md Review 2Converts a markdown PR writeup or code review (one with ```diff fenced blocks and severity-tagged > [!BLOCKER]/[!MAJOR]/[!MINOR]/[!NIT] callouts) into a single-file 2-column HTML review — unified-diff on the left, severity-tagged annotation cards on the right, top jump-nav listing every finding, mandatory named reviewer footer. Triggers when the markdown-html-orchestrator classifies an input as REVIEW, or when invoked directly via /cs:md-review. Refuses without explicit --reviewer (a code review must name a human), refuses if no diff hunks present (route to md-document instead), and refuses to encode severity in color only (every badge ships color + icon + aria-label per WCAG 1.4.1). Use after orchestrator routing.
1 -
mhassan0000 Bundle Md Slides 2md-slides — Markdown deck → single-file HTML presentation
1 -
mhassan0000 Skill Theme Factory 2Apply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes.
1 -
mhassan0000 Bundle Md Document 2Converts long-form markdown (specs, RFCs, reports, plans, explainers) into a single-file, lightly-interactive HTML document with sticky TOC, scrollspy, search filter, code-copy buttons, and design-system-driven brand tokens. Triggers when the markdown-html-orchestrator classifies an input as DOCUMENT, or when invoked directly via /cs:md-document. Reads the design-system config via config_loader.py and inlines the user's 12 derived CSS custom properties; refuses to render if onboarding hasn't run. Single-file output — Google Fonts + Prism.js CDN are the only externals; no framework runtime, no build step. Use after orchestrator routing or after design-system onboarding is confirmed.
1 -
mhassan0000 Bundle Spec To Repo 2Use when the user says 'build me an app', 'create a project from this spec', 'scaffold a new repo', 'generate a starter', 'turn this idea into code', 'bootstrap a project', 'I have requirements and need a codebase', or provides a natural-language project specification and expects a complete, runnable repository. Stack-agnostic: Next.js, FastAPI, Rails, Go, Rust, Flutter, and more.
1 -
mhassan0000 Bundle Senior QA 2Generates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, analyzes Istanbul/LCOV coverage reports to surface gaps, scaffolds Playwright test files from Next.js routes, mocks API calls with MSW, creates test fixtures, and configures test runners. Use when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality".
1 -
mudassarabrar Skill Frontend Security Coder 2Use this skill when
-
aibot88 Bundle Game Review 2Audits existing game code against design principles — checks server-authority, schema conventions, auth security, payment safety, narrative coherence, and MVP scope drift. Extract the optional component name or path from the user's message (defaults to entire src/). Use after building components or before committing.
3 -
aibot88 Bundle Hyperframes 2Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
3 -
aibot88 Bundle Lead Review 2Autonomous comprehensive review. Once-through pipeline over /review-health, /review-arch, /review-security, /review-perf, /review-a11y, /review-test, /review-release. Operator-configurable ticket creation at startup — when ON, auto-approves sub-skill ticket proposals per the orchestrator-family contract; when OFF, uniformly declines and surfaces findings in the consolidated report. Auto-detects sub-skills that do not apply (no web content → skip /review-a11y; no tests → skip /review-test).
3 -
aibot88 Bundle Touch Audit 2Mobile audit — app size, startup time, crash reporting, store compliance, accessibility, offline behavior. Use when asked for "mobile review", "app store readiness", "mobile performance", or "crash analysis".
3 -
aibot88 Bundle A11Y Checker 2Accessibility audit for CSS covering focus styles, color contrast, text sizing, screen reader support, and WCAG compliance. Provides actionable fixes. Use when auditing accessibility or fixing a11y issues.
3 -
javiertarazon Skill Wcag Audit Patterns 2Conduct 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...
-
ntizar Skill Static Digest Pipeline 3Pipeline 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 2Usa a convertir HTML a vídeo con HyperFrames CLI.
-
ntizar Skill Lieflat Charts Dataviz 2Use al convertir datos en gráficos HTML editoriales.
-
ntizar Bundle Personal Tracking Database 2Patró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 2Use al crear una tool HTML interactiva: táctil-first.
-
ntizar Bundle Browser Local Tools 2Herramientas 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 2Use al minar ideas de colecciones de demos HTML.
-
ntizar Skill Plandemovilidad Patterns 2Patrones 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 2Pipeline 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 2Usa a generar horarios HTML desde GTFS.
-
ntizar Bundle Ocr Quirurgico PDF Md 2Pipeline 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.
-
javiertarazon Skill React Native Architecture 2Build 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...
-
ntizar Skill Mapcn 2MapCN — componentes de mapa React listos para usar (MapLibre GL + Tailwind + shadcn/ui), de AnmolSaini16/mapcn.
-
ntizar Bundle Esios Complete 2Conocimiento completo de ESIOS/REE: API, indicadores, unidades, deploy en NaN, troubleshooting frontend, informes Telegram, Open-Meteo, Yahoo Finance. Unificado de 5 skills en 1.
-
ntizar Bundle PDF To Landing 2Patrón completo para crear una webapp que convierte PDFs de propuestas de diseño en landing pages generadas por IA — extracción de texto, análisis de diseño, generación HTML, descarga directa o deploy.
-
ntizar Skill AI Website Cloner 2Usa a clonar webs con template Next.js (AI).
-
ntizar Bundle Budget Comparison 2Extraer, estructurar y comparar presupuestos de obra (PEMs) de construccion generados en PDFs (CYPE Arquimedes, Presto). Comparar oferta de constructora contra presupuesto base de ejecucion material. Generar informes y herramientas HTML interactivas.
-
ntizar Bundle Audit HTML Project 2Procedimiento sistemático para auditar proyectos HTML masivos: detectar errores de navegación rota, atribuciones incorrectas, páginas huérfanas, inconsistencias de diseño y consistencia de contenido. Incluye formato de salida estructurado con severidades.
-
ntizar Skill M3e Canvas 2Usa al sketchear Material 3 y sacar prompt de AI coding.
-
ntizar Skill Map3d R3f 2map3d — generar mapas 3D de ciudades con React-Three-Fiber, datos OSM y exportación GLB
-
ntizar Bundle Business Model Canvas 2Business Model Canvas interactivo en HTML — los 9 bloques clásicos del BMC con layout grid, zonas por color, bloques editables, timeline de fases y visión de futuro ERA. Template reutilizable para cualquier proyecto.
-
ntizar Bundle Matematicas Curso Educativo 2DeSumarIntegrar — Curso completo de matemáticas de 1º Primaria a 1º Carrera: 107+ HTML interactivos con KaTeX, Plotly.js, ejercicios con feedback. Sistema de mejora continua con cron cada 30min. CALIDAD sobre cantidad — variedad de ejercicios, visuales solo si aportan.
-
ntizar Bundle PDF To Artifacts David Antizar 2Pipeline de transformación de PDF a 3 artefactos — análisis técnico, post LinkedIn, infografía HTML + comparativa. Con marca Ntizar David Antizar, sistema Aurora, atribución correcta.
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 md-review, md-slides, theme-factory. 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.