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.
-
adithya-s-k Bundle Create HTML Embed 2Create self-contained D3 HTML embed charts for the research article template. Use when the user asks to create a chart, visualization, embed, D3 chart, line chart, bar chart, scatter plot, sankey diagram, or any data visualization as an HTML embed file.
-
alexanderop Bundle Vue 2Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.
-
alexanderop Bundle Vueuse Functions 2Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
-
apexbusiness-systems Bundle Omnidev Apex Pro Native 2The single canonical dev and debug skill for APEX-OmniHub. Use for developing, debugging, restoring, repairing, scaling, optimizing, or enhancing any OmniHub component. Corrected path registry (live tree is apps/omnihub-site, not src/), two-surface integration ownership, and an all-viewport responsive mandate. Does not cover non-OmniHub products.
-
apexbusiness-systems Skill Webapp Testing 2Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
-
cabinet-fe Bundle Frontend Expert 2指导 AI 像多年经验的前端专家一样写出简洁代码,克制代码膨胀与过度设计。 在编写或修改前端页面、组件、表单、样式、重构前端代码,或用户提到简洁、代码膨胀、 过度封装、兼容性代码、造轮子时使用。
-
callstackincubator Skill IOS Simulator 2Verify and debug native, React Native, Expo, or Flutter apps on an iOS Simulator with agent-device. Use when an agent needs to launch an app, inspect its live UI, tap, type, scroll, validate a code change, collect failure evidence, or reproduce a workflow on an iPhone or iPad Simulator.
-
callstackincubator Skill Android Emulator 2Verify and debug native, React Native, Expo, or Flutter apps on an Android Emulator with agent-device. Use when an agent needs to launch an app, inspect its live UI, tap, type, scroll, validate a code change, collect failure evidence, or reproduce a workflow on an Android virtual device.
-
cogine-ai Bundle Image2 With Codex 2Route image generation to the local image2-with-codex HTTP service at http://127.0.0.1:4312, which delegates to the user's Codex CLI. Use only when the user explicitly asks for this route. Default behavior is raw prompt pass-through; do not substitute HTML layout, infographic tooling, or other image tools.
-
cogine-ai Bundle AI Slide Templates 2Use the Cogine AI ai-slide-templates repository to help users create polished slide decks from real content. Trigger when the user asks to make slides, a PPT, a presentation deck, an HTML deck, choose a presentation template, use Cogine AI slide templates, or install/use the ai-slide-templates workflow in Codex, OpenClaw, or another agent.
-
docling-project Bundle Docling 2Use Docling to understand the content of documents in any supported format — PDF (born-digital or scanned), DOCX, PPTX, XLSX, HTML, Markdown, AsciiDoc, CSV, images, audio, and XML — by converting them into a unified DoclingDocument (Markdown or structured JSON). Use this skill whenever you need to read, parse, convert, extract, or chunk a document you cannot read directly: "what's in this PDF", "convert this to markdown", "extract the tables", "chunk this for RAG", "read this scanned document", "parse this DOCX/PPTX". Covers the `docling` CLI, the Python SDK (DocumentConverter + PipelineOptions), the remote Service Client (self-hosted or managed docling-serve), and the docling-slim install extras for a minimal dependency footprint.
-
emdash-cms Bundle Building Emdash Site 3Build and customize EmDash CMS sites on Astro. Use when creating pages, defining collections, writing seed files, querying content, rendering Portable Text, setting up menus/taxonomies/widgets, configuring deployment, or any task involving an EmDash-powered Astro site. Assumes basic Astro knowledge but provides all EmDash-specific patterns.
-
fedify-dev Skill Fedify 2Use this skill whenever writing JavaScript or TypeScript code that uses Fedify to build an ActivityPub server, handle federation activities, implement fediverse features, or integrate Fedify with a web framework such as Hono, Express, Next.js, Nuxt, Fastify, Koa, NestJS, Astro, SvelteKit, Fresh, h3, Elysia, or Cloudflare Workers. Covers the `Federation` builder pattern, actor/inbox/outbox/collection dispatchers, inbox listeners, vocabulary objects from `@fedify/vocab`, key pair management, HTTP Signatures, Object Integrity Proofs, the `KvStore` and `MessageQueue` interfaces, database adapter packages, structured logging with LogTape, OpenTelemetry tracing, the `fedify` CLI toolchain, and common mistakes. Also apply when the user mentions ActivityPub, federation, fediverse, WebFinger, NodeInfo, FEPs, or Mastodon interoperability, even if they do not name Fedify explicitly.
-
geoffjay Skill Nemo XML Reference 2Complete configuration reference for Nemo applications including all component types, properties, data sources, expressions, bindings, and templates. Use when writing or debugging Nemo config files (app.nemo SFC entries and imported .nemo components).
-
geoffjay Skill Nemo Component Patterns 2Reference for contributing new built-in components to the Nemo source tree (Rust) — the 4-file workflow, NemoComponent derive, RenderOnce vs Render, stateful vs stateless patterns, sizing gotchas, and color resolution. NOT for authoring app.xml configs — use nemo-xml-reference for that.
-
ankurjain1121 Bundle Frontend Design 2Create distinctive, production-grade frontend interfaces with high design quality
-
konete326 Bundle Shadcn 2Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
-
lazily01 Bundle Multi Agent Workflow 2Guide for coordinating PM, Frontend, Backend, Mobile, and QA agents on complex projects via CLI
-
quantumlynx Bundle Testing 2Principles and patterns for writing effective React tests with React Testing Library (Jest/Vitest). Use during implementation for test structure guidance, choosing test patterns, and deciding testing strategies. Emphasizes testing user behavior, not implementation details.
-
quantumlynx Bundle Documentation 2Generate comprehensive feature documentation including Storybook stories, JSDoc comments, and feature guides. Use after completing a feature (may span multiple commits). Creates documentation for humans and AI to understand features, usage patterns, and design decisions.
-
quantumlynx Bundle Linter Driven Development 2META ORCHESTRATOR for complete implementation workflow - design, test, lint, refactor, review, commit. Use for any code change that should result in a commit (features, bug fixes, refactors). Ensures clean code with tests, linting passes, and design validation.
-
seckatie Bundle Mermaid 2Generate diagrams and flowcharts from mermaid definitions using the mermaid-cli (mmdc). Supports themes, custom CSS, and various output formats including SVG, PNG, and PDF. Mermaid supports 20+ diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams, user journeys, Gantt charts, pie charts, quadrant charts, requirement diagrams, GitGraph, C4 diagrams, mindmaps, timelines, ZenUML, Sankey diagrams, XY charts, block diagrams, packet diagrams, Kanban boards, architecture diagrams, radar charts, and treemaps. This skill is triggered when the user says things like "create a diagram", "make a flowchart", "generate a sequence diagram", "create a mermaid chart", "visualize this as a diagram", "render mermaid code", or "create an architecture diagram".
-
sleepyvani Bundle Qt Qml 2QML and Qt Quick — declarative UI language for modern Qt applications. Use when building a QML-based UI, embedding QML in a Python/C++ app, exposing Python/C++ objects to QML, creating QML components, or choosing between QML and widgets. Trigger phrases: "QML", "Qt Quick", "declarative UI", "QQmlApplicationEngine", "expose to QML", "QML component", "QML signal", "pyqtProperty", "QML vs widgets", "QtQuick.Controls", "Item", "Rectangle"
-
sleepyvani Skill Pyside6 Qml Views 2Use this skill when creating QML view files, designing QML component hierarchies, building layouts, styling QML controls, creating reusable QML components, implementing QML navigation / page switching, or working with QML resources. Covers QML file structure, component patterns, Material/Controls styling, resource management, and common QML idioms for desktop applications.
-
stickerdaniel Skill Emil Design Eng 2This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
-
tale-project Bundle Write Docs 2Use this skill whenever you write or edit end-user documentation — a page under a docs content tree, a docs navigation or sidebar file, a docs landing or overview page, a screenshot or code example embedded in docs, or a failing docs structural check. It owns the journey-first method — organize every page around what the reader is trying to do, show the UI before describing it, prove behaviour with runnable examples, and use the docs component vocabulary (steps, tabs, code groups, callouts, frames, cards) with discipline instead of walls of prose. Before writing anything, discover the repo's own docs contract — its docs guide, its component registry, its structural test suite — and let that contract override this skill's defaults. Never write a docs page from imagination, never describe a UI you have not driven, and never ship a hand-captured screenshot. Page-type playbooks, component rules, screenshot doctrine, worked examples, and mechanics live in companion files here.
-
untitled-data-company Bundle Dlt Dagster 2Runs dlt pipelines in Dagster as software-defined assets (Component or Pythonic @dlt_assets) or as a single standard Dagster asset. Use when orchestrating dlt with Dagster; scaffolding loads.py/defs.yaml; jobs/schedules; secrets/env; incremental/backfill via apply_hints; parallelization (one asset per resource); Dagster Cloud deployment; or external compute (ECS, Fargate — refer to dagster-integrations). Triggers: dagster-dlt, dlt on Dagster, deploy dlt with Dagster, standard Dagster asset, external compute.
-
usenotra Bundle Satori 2Expert guidance for Satori, the library that converts JSX/HTML and CSS into SVG (the engine behind dynamic Open Graph images and social cards). Use whenever writing or debugging Satori markup e.g. authoring JSX for OG images, choosing CSS that Satori actually supports, fixing layout that renders wrong, embedding fonts, rendering emoji or images, or resolving Satori errors like "Expected length unit" or unsupported property issues. Reach for this any time someone renders HTML/CSS to SVG or PNG with Satori, even if they do not name it.
-
vinayakkulkarni Bundle Vue Best Practices 2Vue.js performance optimization guidelines for building fast, maintainable applications. This skill should be used when writing, reviewing, or refactoring Vue.js code to ensure optimal performance patterns. Triggers on tasks involving Vue components, reactivity, Composition API, state management, or performance improvements.
-
volcengine Bundle Agentkit CLI 2Drive the agentkit CLI (aliases agentkit / ak) to scaffold, build, deploy, and manage agents on Volcengine AgentKit from the terminal — runtimes, knowledge bases, memory collections, tools, harnesses, invocation, SSO auth, sandboxes, and evaluation datasets. Use when a user wants to create/deploy an agent project, call or inspect a deployed runtime, manage AgentKit resources, or resolve a CLI/auth/deploy error. Does NOT handle non-AgentKit deployment, general Docker/k8s operations, Volcengine IAM management, or writing agent application code (use veadk-agent-development for that).
-
volcengine Bundle Veadk Agent Development 2Build, modify, debug, and cloud-validate VeADK Agents from an accepted product intent. Use for VeADK architecture, tools, workflows, memory, knowledge, executable AgentKit projects, local tests, and AgentKit build/deploy/invoke/log repair loops. Do not use for unrelated user requests, other Agent frameworks, standalone cloud administration, or production Runtime operations.
-
whisper-money Skill Wayfinder Development 2Activates whenever referencing backend routes in frontend components. Use when importing from @/actions or @/routes, calling Laravel routes from TypeScript, or working with Wayfinder route functions.
-
whisper-money Skill Inertia React Development 4Develops Inertia.js v2 React client-side applications. Activates when creating React pages, forms, or navigation; using <Link>, <Form>, useForm, or router; working with deferred props, prefetching, or polling; or when user mentions React with Inertia, React pages, React forms, or React navigation.
-
hugorcd Skill Unslop 2Remove AI-generated "slop" from codebases by deleting redundant comments and unused code, tightening formatting, and normalizing styling patterns (e.g., Tailwind class consistency, Nuxt UI color tokens). Use when a user asks to clean up code, remove unnecessary comments, reduce unused imports/variables, or align Tailwind/Nuxt UI conventions.
-
jasperpwang Bundle Drawio Diagram Builder 2Create, edit, replicate, and iteratively refine editable research and technical diagrams in diagrams.net/draw.io (.drawio XML) from prompts, papers, repositories, screenshots, or existing diagrams. Use when asked to generate a scientific figure, paper method diagram, ML/system architecture diagram, draw.io file, reference figure reproduction, browser screenshot feedback loop, Windows-safe draw.io preview, or layout fixes for text overlap, arrows, colors, icons, fonts, and component alignment.
-
jlevy Bundle Deep Transcribe 3Transcribe and analyze audio, video, podcasts, and YouTube URLs with Deepgram plus Anthropic or OpenAI models. Use for transcripts, speaker labels, timestamps, sections, summaries, research annotations, frame captures, HTML output, or a reviewed result that should be rerun with added context or processing while reusing cached work.
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 create-html-embed, vue, vueuse-functions. 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.