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.
-
skilld-dev Bundle Unhead Vue SkilldFull-stack head manager built for Vue. ALWAYS use when writing code importing "@unhead/vue". Consult for debugging, best practices, or modifying @unhead/vue, unhead/vue, unhead vue, unhead.
-
skilld-dev Bundle Unovis Vue SkilldModular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript. ALWAYS use when writing code importing "@unovis/vue". Consult for debugging, best practices, or modifying @unovis/vue, unovis/vue, unovis vue, unovis.
-
skilld-dev Bundle Vue Router SkilldALWAYS use when writing code importing "vue-router". Consult for debugging, best practices, or modifying vue-router, vue router, router.
-
skilld-dev Bundle Tresjs Core SkilldDeclarative ThreeJS using Vue Components. ALWAYS use when writing code importing "@tresjs/core". Consult for debugging, best practices, or modifying @tresjs/core, tresjs/core, tresjs core, tres.
-
skilld-dev Bundle Vue Data UI SkilldA user-empowering data visualization Vue 3 components library for eloquent data storytelling. ALWAYS use when writing code importing "vue-data-ui". Consult for debugging, best practices, or modifying vue-data-ui, vue data ui.
-
skilld-dev Bundle Vueuse Core SkilldCollection of essential Vue Composition Utilities. ALWAYS use when writing code importing "@vueuse/core". Consult for debugging, best practices, or modifying @vueuse/core, vueuse/core, vueuse core, vueuse.
-
skilld-dev Bundle Pinia Colada SkilldThe smart data fetching layer for Vue.js. ALWAYS use when writing code importing "@pinia/colada". Consult for debugging, best practices, or modifying @pinia/colada, pinia/colada, pinia colada, pinia-colada.
-
skilld-dev Bundle Vee Validate SkilldPainless forms for Vue.js. ALWAYS use when writing code importing "vee-validate". Consult for debugging, best practices, or modifying vee-validate, vee validate.
-
skilld-dev Bundle Vueuse Motion SkilldVue Composables putting your components in motion. ALWAYS use when writing code importing "@vueuse/motion". Consult for debugging, best practices, or modifying @vueuse/motion, vueuse/motion, vueuse motion, motion.
-
skilld-dev Bundle Vue Test Utils SkilldALWAYS use when writing code importing "@vue/test-utils". Consult for debugging, best practices, or modifying @vue/test-utils, vue/test-utils, vue test-utils, vue test utils, test-utils, test utils.
-
skilld-dev Bundle Floating UI Vue SkilldFloating UI for Vue. ALWAYS use when writing code importing "@floating-ui/vue". Consult for debugging, best practices, or modifying @floating-ui/vue, floating-ui/vue, floating-ui vue, floating ui vue, floating-ui, floating ui.
-
skilld-dev Bundle Tanstack AI Vue SkilldVue hooks for TanStack AI. ALWAYS use when writing code importing "@tanstack/ai-vue". Consult for debugging, best practices, or modifying @tanstack/ai-vue, tanstack/ai-vue, tanstack ai-vue, tanstack ai vue, ai.
-
skilld-dev Bundle Tanstack Vue Form SkilldPowerful, type-safe forms for Vue. ALWAYS use when writing code importing "@tanstack/vue-form". Consult for debugging, best practices, or modifying @tanstack/vue-form, tanstack/vue-form, tanstack vue-form, tanstack vue form, form.
-
skilld-dev Bundle Tanstack Vue Query SkilldHooks for managing, caching and syncing asynchronous and remote data in Vue. ALWAYS use when writing code importing "@tanstack/vue-query". Consult for debugging, best practices, or modifying @tanstack/vue-query, tanstack/vue-query, tanstack vue-query, tanstack vue query, query.
-
skilld-dev Bundle Tanstack Vue Store SkilldFramework agnostic type-safe store w/ reactive framework adapters. ALWAYS use when writing code importing "@tanstack/vue-store". Consult for debugging, best practices, or modifying @tanstack/vue-store, tanstack/vue-store, tanstack vue-store, tanstack vue store, store.
-
skilld-dev Bundle Tanstack Vue Table SkilldHeadless UI for building powerful tables & datagrids for Vue. ALWAYS use when writing code importing "@tanstack/vue-table". Consult for debugging, best practices, or modifying @tanstack/vue-table, tanstack/vue-table, tanstack vue-table, tanstack vue table, table.
-
skilld-dev Bundle Tanstack Vue Router SkilldModern and scalable routing for Vue applications. ALWAYS use when writing code importing "@tanstack/vue-router". Consult for debugging, best practices, or modifying @tanstack/vue-router, tanstack/vue-router, tanstack vue-router, tanstack vue router, router.
-
skilld-dev Bundle Tanstack Vue Virtual SkilldHeadless UI for virtualizing scrollable elements in Vue. ALWAYS use when writing code importing "@tanstack/vue-virtual". Consult for debugging, best practices, or modifying @tanstack/vue-virtual, tanstack/vue-virtual, tanstack vue-virtual, tanstack vue virtual, virtual.
-
tencentcloudbase Bundle CloudbaseUse this skill when you develop, design, build, deploy, debug, migrate, or troubleshoot CloudBase (腾讯云开发, 云开发, TCB, 微信云开发) projects — Web, 微信小程序, 小程序, uni-app, mobile (iOS, Android, Flutter, React Native). Covers UI (页面, 界面, 表单, dashboard, prototype, 原型); auth (登录, 注册, OAuth, publishable key); databases (NoSQL 文档数据库, MySQL 关系型数据库, PostgreSQL/CloudBase PG, app.rdb(), queryPgDatabase/managePgDatabase, CRUD, security rules); 云函数/cloud functions (serverless, scf_bootstrap); CloudRun (云托管, Dockerfile); 云存储; built-in AI (内置大模型, AI 对话, streaming, 流式输出, 图片生成, generateText, streamText, createModel, generateImage, TokenHub, Hunyuan, DeepSeek, GLM, Kimi, Token Credits 资源包, 小程序成长计划); third-party/custom model onboarding (第三方大模型接入, 大模型调用, LLM API); AI agent (智能体, AG-UI, LangGraph); ops troubleshooting (巡检, 诊断, 日志); spec workflow (需求文档, 技术方案, requirements, tasks.md). Do NOT use for non-CloudBase projects, pure frontend without CloudBase, or self-hosted backends without CloudBase.
-
hexbee Bundle Vibe DesignDesign, specify, implement, or review AI-native and Agent product interfaces with explicit product intent, domain semantics, controlled GenUI/A2UI behavior, design-system constraints, complete interaction states, and evidence-based evaluation. Use for Agent dashboards, copilots, conversational interfaces, generative reports, AI workflows, design specs, information architecture, component selection, anti-generic visual direction, UI critique, or turning an ambiguous AI product request into reusable design declarations and acceptance criteria.
-
hexbee Skill X Tweet Ego用 ego-browser 在 X (Twitter) 上发推文/发帖/引用推文。当用户要求发布推文、测试发帖、引用某条推文发自己的评论、或提到 x.com 发帖流程时使用。包含实测验证过的可靠流程和已知坑位(contenteditable composer、双 composer 选择器、后台 tab rAF 冻结、截图不可用兜底、视口外点击落空、引用入口键盘导航、标签页被替换、React 状态同步等),避免 agent 重新踩坑。
-
hexbee Bundle Bento SlidesCreate, edit, and validate self-contained Bento slide decks (`.bento.html`) by authoring the plain JSON document inside the `#bento-doc` script block. Use when Codex needs to turn source material into an interactive presentation, create a deck from the bundled Bento template, revise an existing Bento deck, or add charts, tables, morph transitions, state slides, motion, media, and speaker notes while preserving the embedded editor runtime.
-
hexbee Bundle Resume BuilderGenerate and revise job resumes from raw notes, existing resumes, career histories, or profile snippets. Use when Codex needs to create, redesign, tighten, or review a resume/CV, especially for Chinese or English A4 resumes, PDF/HTML output, first-screen hiring signal, skill ordering, pagination balance, header/contact layout, or reframing an engineering background for AI-focused roles.
-
astronomer Skill Airflow PluginsBuilds Airflow 3.1+ plugins that embed FastAPI apps, custom UI pages, React components, middleware, macros, and operator links directly into the Airflow UI. Use when building anything custom inside Airflow 3.1+ that involves Python and a browser-facing interface - creating an Airflow plugin, adding a custom UI page or nav entry, building FastAPI-backed endpoints inside Airflow, serving static assets from a plugin, embedding a React app, adding middleware to the API server, creating custom operator extra links, or calling the Airflow REST API from inside a plugin; also when AirflowPlugin, fastapi_apps, external_views, react_apps, or plugin registration come up.
-
astronomer Skill Delegating To OttoDrives Astronomer's Otto agent (`astro otto`) as a delegated sub-agent for Airflow, dbt, and data-engineering work. Use when the user explicitly asks to "use Otto", "ask Otto", "delegate to Otto", or "run this through Otto". Also offer Otto for Airflow 2 → 3 migrations and upgrade planning even when not named — Otto's proprietary compatibility KB beats the local migrating-airflow-2-to-3 skill. Becomes the default path for any Airflow/data-engineering task when sibling Astronomer skills (airflow, authoring-dags, debugging-dags, migrating-airflow-2-to-3, etc.) are NOT loaded in the current session. Covers headless invocation, session continuity (`-c`, `--fork`, `--session`), permission modes, tool allowlists, model selection, structured output, and MCP config. **Do not load this skill if you are Otto** — Otto must not delegate to itself.
-
astronomer Skill Deploying Go Sdk BundlesBuilds, packs, and deploys compiled Airflow Go SDK bundles so the ExecutableCoordinator can run them. Use when the user wants to compile a Go task bundle, asks about `go build`, `go tool airflow-go-pack`, the AFBNDL01 self-contained executable bundle, packing or inspecting a bundle, placing it under `executables_root`, cross-compiling a bundle for workers, `go-sdk` module versioning/tags/pseudo-versions, or getting the bundle onto an Airflow worker (Docker, Kubernetes, or Astro). For the task code see authoring-go-sdk-tasks; for the shared coordinator settings see configuring-airflow-language-sdks.
-
astronomer Skill Deploying Java Sdk BundlesBuilds and deploys compiled Airflow Java SDK bundles so workers can run them. Use when the user wants to package a JVM task bundle into a JAR, asks about the `org.apache.airflow.sdk` Gradle plugin, `./gradlew bundle`, the Maven shade/BOM setup, fat vs thin JARs, the logging integration artifacts (JPL, SLF4J, Log4j 2, JUL), preview/snapshot builds, or getting the JAR onto an Airflow worker (Docker, Kubernetes, or Astro). For the task code see authoring-java-sdk-tasks; for the Airflow coordinator settings see configuring-airflow-language-sdks.
-
astronomer Bundle Migrating Dagster To AirflowGuide for migrating Dagster projects to Apache Airflow 3 on Astro. Use when the user mentions migrating, converting, or porting Dagster (or Dagster+) code to Airflow or Astro, wants to plan or assess such a migration, or asks what a Dagster construct maps to in Airflow. Covers assets, partitions, schedules, sensors, declarative automation, resources, IO managers, ops/jobs, dbt, Pipes, Components, and Dagster+ platform config. Always load this skill as the first step for any Dagster-to-Airflow request.
-
cycleuser Bundle Verify Deliver先验证后交付(Verify Before Deliver):一切任务的交付前强制验证协议。核心主张——任何交付物在汇报给用户之前,必须先真实执行产出、用可复现的方法自测、修复发现的问题、确认无损,最后才汇报。绝不"只描述不执行",绝不"改了不验证"。 Triggers when: 任何需要交付产物的任务(写代码、改文档、生成表格/图片/PDF、整理文件、填表、论文排版、教材编写、批量处理),特别是用户有"先自己完整测试验证,解决所有问题再汇报""要真实执行不要只描述"期望的场景;也用于交付前的自查清单。 Commands: - /先验证 - 进入交付前验证模式:列出产物、校验、修复、汇报 - /先验证 check <产物> - 对指定产物运行校验清单 - /先验证 报告 - 输出验证结果与修复记录 - /verify <artifact> - English alias Capabilities: 产物可打开性校验(docx/xlsx/pdf/图片/HTML)、内容正确性校验(数字/姓名/奖项/引用一致性)、格式保真校验(字体/合并单元格/页眉页脚)、文件完整性校验(字节级对比、无文件丢失)、跨源一致性校验(统计表/名单/证书多源对齐)、修复-重验循环、交付前汇报规范(先验证→再报结论)
-
cycleuser Bundle DOCX To KnowledgeConverts .docx documents (manuals, textbooks, reference books) into self-contained, searchable, mobile-friendly HTML knowledge bases with embedded images, chapter navigation, and full-text search. Triggers when: User provides a .docx file and requests a knowledge base, searchable HTML, mobile-friendly reader, or GangDan-compatible JSON. Commands: - /知识库 <docx路径> [输出目录] - Full pipeline: extract → clean → generate HTML + JSON + images - /知识库 extract <docx路径> - Extract text + images from docx, save to structured JSON - /知识库 clean <json路径> - Clean and polish the extracted JSON (spacing, headers, captions) - /知识库 generate <json路径> - Generate standalone HTML with search + nav + embedded images - /知识库 verify <html路径> - Run automated quality checks (images, spacing, search function) Capabilities: docx text+image+table extraction, CJK spacing normalization, stray header removal, image caption grouping, English diagram label separation, data-URI embedding for single-file output, full-text search with result excerpts, m
-
vinvcn Bundle Improve Codebase Architecture扫描代码库中的深化机会,生成可视化 HTML 报告,然后围绕你选中的候选项继续追问。
-
itechmeat Bundle ViteVite next-gen frontend tooling: dev server, HMR, build, config, plugins, Environment API, Rolldown. Use when setting up or running a Vite project, configuring vite.config.*, authoring plugins, working with HMR or JS API, or managing environment variables and modes. Keywords: vite.config, bundler, Vite, HMR, Rolldown.
-
itechmeat Bundle Base UIBase UI unstyled React components. Covers forms, menus, overlays, composition. Use when building accessible, unstyled React UI components with @base-ui/react, composing with render props, or implementing custom-styled form controls, menus, and overlays. Keywords: @base-ui/react, render props, unstyled components.
-
itechmeat Bundle Refine DevRefine.dev headless React framework for CRUD apps: data providers, resources, routing, authentication, hooks, and forms. Use when building admin panels, dashboards, or internal tools with React and various backends (REST, GraphQL, Supabase, Strapi), or configuring Refine data providers and authentication. Keywords: Refine, CRUD, admin panel, data provider, React.
-
itechmeat Bundle Mantine DevMantine UI library for React: 100+ components, hooks, forms, theming, dark mode, CSS modules, and Vite/TypeScript setup. Use when building React applications with Mantine components, configuring theming/dark mode, or working with Mantine hooks and forms. Keywords: Mantine, React, UI components, CSS modules, theming.
-
itechmeat Bundle React Testing LibraryReact Testing Library: user-centric component testing with queries, user-event simulation, async utilities, and accessibility-first API. Use when writing React component tests, selecting elements by role/label/text, simulating user events, or testing async UI behavior. Keywords: React Testing Library, @testing-library/react, user-event, queries, render.
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 unhead-vue-skilld, unovis-vue-skilld, vue-router-skilld. 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.