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.
-
full-stack-skills Bundle Uniappx ProjectProvides comprehensive uni-app-x component and API integration guidance. Use when the user needs official uni-app-x components or APIs, wants per-component or per-API examples, or needs cross-platform compatibility details for uni-app-x.
-
full-stack-skills Bundle Uniappx Project CreatorProvides one-command project creation for uni-app-x including Vue 3 + TypeScript + Vite setup, configuration, and template generation. Use when the user asks to create a uni-app-x project with a single command, needs to initialize a new uni-app-x project, or generate uni-app-x project structure.
-
gnurio Bundle Profile CompetitorBuild a comprehensive competitor profile using Porter's four-component framework. Use when asked to analyze a competitor, predict competitor moves, or assess competitive threats.
-
gul-labs Bundle Craft LintThe Craftsman standard for linting and static quality gates — ESLint version policy, resolved-rule extraction, typed TypeScript linting, React/Next/a11y/security rule hardening, zero-warning CI gates, pre-commit alignment, and migration from weak default configs to an enterprise-grade lint setup. Use this WHENEVER the work touches ESLint, lint rules, lint failures, lint config migration, quality scripts, pre-commit linting, or "standardize linting". Scope is **JS/TS ESLint surfaces** — with no ESLint surface (Python/Ruff, Biome-only, Go), mark the domain N-A rather than forcing a migration. Whole-project readiness → craft-audit.
-
gul-labs Bundle Craft AuditThe front door to the craft skills — a whole-project production-readiness orchestrator that drives the ten per-domain craft skills (ux, frontend, backend, db, security, infra, observability, testing, lint, ai) instead of auditing one surface at a time. It discovers the project's shape, plans an audit per surface, and tracks findings in a resumable `.craftsman/` workspace. Use WHENEVER the user wants a whole-project assessment rather than a single-file review: "is my app production-ready", "take this from MVP to production", "I vibe-coded this with Lovable/Replit/Claude and want it enterprise-grade", or "what would a senior engineer fix here". Trigger even without a named surface area — the whole point is finding the applicable ones. Does NOT fire on single-surface requests ("how do I fix this one bug", "add a feature to this component") — use that domain's craft skill directly.
-
gul-labs Bundle Craft FrontendThe Craftsman standard for frontend application architecture — components, state management, data fetching, forms, routing, client/server boundaries, performance, error boundaries, and bundle size. Use this WHENEVER the work touches the application layer of a frontend: building components, wiring up API calls, deciding where state lives, handling loading/error/empty states, managing form validation, splitting bundles, or diagnosing slow pages. Trigger even when the user only says "wire up the API", "this page is slow", "manage this state", or "build the form" without naming a framework. Visual polish and design tokens → craft-ux; further handoffs in "Scope boundaries".
-
gusibi Bundle MarkitdownConvert various document formats (PDF, PowerPoint, Word, Excel, Images, Audio, HTML, CSV, JSON, XML, ZIP) into text Markdown format. Use when asked to read, parse, or extract text from rich documents, slides, spreadsheets, or images, making them accessible to LLMs.
-
hanzhangzzz Bundle Md2viewRe-encode a Markdown document into a traceable human-reading view: a single-file HTML with the original on the left and a model-designed visual re-organization on the right (architecture diagrams, flow chains, comparison matrices, argument maps, annotated cards), where every element carries data-sources anchors back to the source, visible text keeps lexical anchors and numbers are copied verbatim. Use when the user wants a retrospective, report, spec, README or long technical document turned into something easier to absorb and share, or says /md2view, md2view, 信息重组, 双栏阅读, 文档可视化, 把文档做成图. Do not use for plain faithful Markdown rendering.
-
hanzhangzzz Bundle Doc ReaderTranslate an English technical article (web URL) or a local PDF into accurate Chinese, section by section with consistent terminology, keeping 100% of the images, and build a local three-column preview HTML (original · translation · AI slides). Slides are generated through the local Codex CLI built-in imagegen, so no image API key is needed. Use when the user shares an English blog post, paper, docs page or PDF and wants a faithful, side-by-side Chinese version, or says /doc-reader, 翻译这篇文章, 翻译文档, 翻译博客, 翻译 PDF, translate this article. Options: --no-ppt skips slide generation, --quick translates only.
-
hanzhangzzz Bundle Hkr RenderWeChat Official Account (微信公众号) publishing pipeline: format Markdown or plain text into WeChat-compatible inline-style HTML with 7 polished themes (dark mode and mobile font sizes tuned), optionally generate a cover image with brightness check and auto-darkening, and push one or many articles to the WeChat draft box (多图文). Use when the user wants to format, typeset or publish a WeChat article, or says 排版, 微信排版, 公众号排版, 公众号发布, 格式化文章, format, /format. Requires a config.json with WeChat AppID/Secret (see SKILL.md).
-
hanzhangzzz Bundle Wechat Article Md LocalDownload and read a single WeChat Official Account article (微信公众号文章) from a public mp.weixin.qq.com link, save it in the workspace as local Markdown with all images downloaded locally, falling back to HTML when Markdown conversion is impossible. ALWAYS use this skill first whenever the user sends a single WeChat article link — even without asking to download it — and especially before summarizing, extracting, analyzing, quoting, rewriting or translating that article. Triggers: mp.weixin.qq.com link, 下载公众号文章, 公众号文章转 Markdown, 保存这篇公众号, wechat article to markdown.
-
hmans Bundle Scrapbot Feature DevelopmentUse when adding, changing, documenting, or auditing Scrapbot engine features, public APIs, ECS components, rendering, scripting, native extensions, examples, or project tooling. Covers cross-surface implementation, component documentation, generated types, and verification expectations.
-
hmans Bundle Scrapbot Architecture InventoryMaintain and audit Scrapbot's source-oriented architecture inventory in docs/architecture. Use when adding, removing, renaming, or changing engine systems, component registrations, component ownership/lifecycle, project resources, runtime registries, UUID/handle/version semantics, load/spawn/playback/persistence/hot-reload lifecycles, authoritative or derived state, dirty queues/revisions/caches, frame/render/UI data flows, package responsibilities, or architectural documentation; also use for architecture overviews and inventory drift audits.
-
hoangsonww Bundle Devverse UI RoutesRoute and UI conventions for the DevVerse Next.js app. Use when modifying app routes, layout, navigation, page components, global styling, route-scoped CSS, article rendering, favorites UI, or chat UI.
-
hoangsonww Bundle Estatewise EngineeringExecute production-safe code changes in the EstateWise monorepo. Use when implementing or fixing behavior in backend, frontend, MCP, agentic-ai, gRPC, deployment-control, tests, or repo docs. Do not use for pure brainstorming, skill installation, or work outside this repository.
-
aarshsharma2803-stack Skill UI UX Pro MaxDesign intelligence for frontend work — component critique, layout review, accessibility checks, dark mode, responsive design, UX patterns. Trigger: /ui-ux-pro-max, "design review", "ux check", "accessibility audit", "review my UI", "is this accessible", "dark mode", files contain .tsx/.jsx/.css/.vue
Audited -
alexpizarro Bundle Deploying Azure Static Web AppsDeploys React + Azure Functions apps to Azure Static Web Apps with managed API functions, including the CommonJS / index.ts import / route-registration gotchas that make new functions 404 silently. Provides the SWA Bicep module, staticwebapp.config.json routing + security headers, and the API entrypoint convention. Use when scaffolding a SWA-based project, adding a new API function, or fixing a deployed function that returns 404 even though it compiled successfully.
-
alexpizarro Bundle Scaffolding Azure Bicep InfrastructureGenerates a subscription-scoped Bicep stack + GitHub Actions workflows for an Azure web app, with opt-in module toggles (SQL, Storage, Observability) and the {org}-{project}-{component}-{env} naming formula. Use when bootstrapping a new Azure project's IaC, adding a Bicep module, or refactoring into the modular-toggle pattern.
-
justincordova Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
mshadmanrahman Skill Animation PrinciplesDisney's 12 animation principles applied to web and mobile UI. Use when implementing CSS animations, JS transitions, micro-interactions, page transitions, loading states, hover effects, or motion design. Covers timing, easing, accessibility (prefers-reduced-motion), and framework patterns (Framer Motion, CSS native, GSAP). Triggers: animate, transition, motion, hover effect, loading animation, page transition, micro-interaction, easing, spring physics.
-
rocketchat Skill Dev App VerifyDrive and screenshot the running Rocket.Chat Desktop dev app (yarn start) through the main-process inspector on port 9339 — trigger menu items (Simulate Download/Update), evaluate in the renderer DOM, capture titlebar screenshots. Use whenever a UI change needs runtime/visual verification that component tests can't see (paint, clipping, colors, animation, layout).
-
marmelab Skill Frontend DevCoding practices for frontend development in Atomic CRM. Use when creating or modifying React components, forms, list pages, detail views, filters, data fetching, or responsive layouts.
-
marmelab Skill Shadcn CustomizationShadcn/ui theming and component customization — CSS variables, OKLCH colors, dark mode, variants, wrappers. Load for any ticket involving colors, theme, UI layout, or component styling.
-
quan0715 Bundle Qjudge UI Carbon OwnerUse when implementing or reviewing QJudge frontend components, Carbon React usage, styling, layout, Storybook stories, accessibility, or overflow behavior.
-
quan0715 Bundle Qjudge AI Model RegistryUse when adding, updating, removing, renaming, or changing the default of a QJudge AI model across the AI service, Django compatibility BFF, and frontend model consumers.
-
quan0715 Bundle Qjudge Quality Gates OwnerUse when auditing or enforcing QJudge naming, architecture, Carbon practices, accessibility candidates, style restrictions, or CI quality profiles.
-
quan0715 Bundle Qjudge Carbon Overflow UX FixUse when QJudge Carbon React pages show double scrollbars, clipped content, broken split-pane height chains, mobile viewport jumps, or header/sidenav layout collisions.
-
qwedsazxc78 Skill PainterDraw clear, easy-to-understand architecture diagrams, flow charts, and feature explainer graphics from code, system architecture, or DevOps pipelines. Output is an HTML artifact (inline CSS and SVG) styled with a blue-white tech palette, flat vector icons, a card-based multi-step layout, flow arrows, and dark code blocks. Supports two output levels: `basic` (single-page overview) and `detailed` (overview plus clickable drill-down per-component pages), and can use multi-agent parallel scanning to speed up analysis of large architectures. Triggered when the user asks to "draw an architecture diagram / flow chart" or invokes `*diagram` / `devops:painter`. Output renders directly in a browser for review and screenshots, suitable for technical documentation and presentation material.
-
langchain-ai Skill React ComponentsModern React component patterns with hooks and TypeScript
-
zivtech Bundle A11Y TestUse when you need to run real accessibility tests — Playwright keyboard interactions, axe-core scanning, visual regression, and WCAG 2.2 compliance checks. The measurement layer that feeds evidence into a11y-critic reviews.
-
zivtech Bundle A11Y CriticUse when you have an existing component, flow, or interface and need an evidence-backed accessibility design review after basic checks pass. Best for WCAG 2.2 compliance, focus management, ARIA pattern quality, semantics, and state communication gaps automated tools miss.
-
zivtech Bundle A11Y PlannerUse when you know what component, flow, or interface you need but not yet the right accessibility approach. Best for turning WCAG 2.2 requirements into an accessible implementation plan with WAI-ARIA APG patterns before code hardens bad interaction and state patterns.
-
zivtech Skill Acr ReportingLoad this skill whenever you are converting a finished audit-scope accessibility evaluation into an Accessibility Conformance Report (ACR) draft in the OpenACR format, validating or rendering OpenACR YAML, or preparing the handoff to GSA's ACR Editor (https://acreditor.section508.gov/). Report-level companion to bug-reporting: findings→issues is bug-reporting; evaluation-report→ACR is this skill. Output is always a DRAFT for human review and sign-off — never a final or signed ACR. Under no circumstances map an untested Level A/AA criterion to any adherence term, derive a conformance term from finding severity, or invent metadata values (contacts, dates, versions).
Audited -
zivtech Bundle Bug ReportingLoad this skill whenever you are filing, reviewing, or generating accessibility bug reports — whether from automated tool output, manual testing, or AI agent scans. The purpose of this skill is to make accessibility errors easier to report accurately, so that developers can reproduce, understand, and fix them without additional back-and-forth. Absolutely always include the required fields (URL, XPath, HTML snippet, WCAG SC, rule ID, severity, frequency) in every report. Under no circumstances file a vague report that omits the failing element, the WCAG criterion, or the steps to reproduce.
-
zivtech Skill A11Y WorkflowOrchestrate the a11y accessibility lifecycle: scout → plan → critique → [perspective audit] → test → critique. Dual-mode: full lifecycle automation or step-by-step dispatch. Spawns specialist agents at depth-1 from the main session.
Audited -
zivtech Skill A11Y Role AuditARRM-based accessibility role audit — responsibility-based review lenses
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 uniappx-project, profile-competitor, scaffolding-azure-bicep-infrastructure. 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.