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.
-
peterbamuhigire Bundle Saas AI Sustainability And EthicsUse when producing or reviewing the saas ai sustainability and ethics component of a business plan; applies its specialist evidence, decisions, and acceptance tests instead of neighbouring pipeline skills.
-
peterbamuhigire Skill Saas Agent Implementation TimelineUse when producing or reviewing the saas agent implementation timeline component of a business plan; applies its specialist evidence, decisions, and acceptance tests instead of neighbouring pipeline skills.
-
peterbamuhigire Bundle Saas Agent Sla Economics In ProjectionUse when producing or reviewing the saas agent sla economics in projection component of a business plan; applies its specialist evidence, decisions, and acceptance tests instead of neighbouring pipeline skills.
-
peterbamuhigire Skill Saas Agent Sustainability And EthicsUse when producing or reviewing the saas agent sustainability and ethics component of a business plan; applies its specialist evidence, decisions, and acceptance tests instead of neighbouring pipeline skills.
-
peterbamuhigire Bundle Saas Agent Deferred Revenue And Credit ReservesUse when producing or reviewing the saas agent deferred revenue and credit reserves component of a business plan; applies its specialist evidence, decisions, and acceptance tests instead of neighbouring pipeline skills.
-
vodouai Bundle QA TestingComprehensive QA testing workflow that validates projects through browser audits, accessibility, performance, console errors, and system health checks
-
vodouai Skill UI DesignerUI design agent that designs components, audits interfaces, builds design systems, and improves accessibility
-
legioncodeinc Bundle Preact StingerPreact 11 specialist skill: signals-based reactivity (v2 API with createModel/useModel), preact/compat migration from React, third-party embed widgets (shadow DOM isolation, IIFE bundles), Astro island integration (client:* directives, 5.0.1 or newer useId fix), and Fresh 2.x framework (Deno-native, islands + serializable props). Use when building Preact components, evaluating Preact vs React, migrating from React to Preact, embedding a widget on third-party pages, or working with Astro or Fresh projects. Do NOT use for React architecture in general (react-worker-bee), Next.js App Router configuration (react-worker-bee), or Deno infrastructure beyond Fresh (devops-worker-bee).
-
legioncodeinc Bundle Svelte StingerSvelte 5 specialist for runes, snippets, lifecycle, universal reactivity, SvelteKit 2 load/actions/remote functions, and Svelte 4 migration. Use for any .svelte, .svelte.js, or .svelte.ts work.
-
legioncodeinc Bundle Vercel StingerVercel deployment for SvelteKit (Svelte 5) + Neon - adapter-vercel config, runtimes, ISR/caching, env vars, cron, image optimization, middleware, WAF/rate limiting, cost control, rollbacks.
-
legioncodeinc Bundle API Docs Stinger'API documentation authority: Swagger UI / Redoc / Scalar / Mintlify / Stoplight / Bump.sh tool selection, OpenAPI spec enrichment with JSON examples, self-hosted and managed hosting, SDK generation (TypeScript / Python / Go via openapi-generator-cli and Fern/Speakeasy), and changelog discipline. Invoke when the user says \\\"set up API docs\\\", \\\"which docs renderer should I use\\\", \\\"generate an SDK from my spec\\\", \\\"deploy my OpenAPI docs\\\", \\\"write an API changelog\\\", \\\"compare Redoc vs Scalar\\\", or \\\"publish API reference to GitHub Pages\\\". Do NOT invoke for general documentation sites (library-worker-bee), API security scheme audits (security-worker-bee), or backend route design (python-worker-bee / react-worker-bee).'
-
legioncodeinc Bundle Tailwind StingerTailwind CSS v4 the framework itself, CSS-first config, @theme, the Vite plugin, v3-to-v4 migration, dark mode, container queries, class ordering. Generic, any codebase, not OSPRY-specific.
-
legioncodeinc Bundle Tanstack StingerTanStack libraries in SvelteKit (Svelte 5) - Query SSR/caching/mutations, Table runes state, Form snippet validation, Virtual; states plainly that Router and Start have no official Svelte support.
-
legioncodeinc Bundle Queen Bee StingerForge new rules, plugins, commands, agents (Bees), and skills (Stingers) for The Hive across Claude Code, Cursor, Codex, and Cowork. Use when creating, updating, or validating any Hive component.
-
legioncodeinc Bundle Discord Bot StingerDiscord bot and application specialist for discord.js (v14/v15), discord.py 2.x, and Serenity (Rust). Covers slash commands, interactive components (buttons, select menus, modals), voice pipeline (Lavalink 4 + DAVE-compliant clients), gateway-vs-HTTP-endpoint architecture, rate-limit handling, shard management, and the bot verification path past 100 servers. Use when building, reviewing, or debugging any Discord bot or application: SDK selection, command registration, component flows, voice queues, scaling, or the bot-verification checklist. Do NOT use for general Python packaging (python-worker-bee), container/CI shapes (devops-worker-bee), credential vault integration (security-worker-bee), or database schema design for bot state (db-worker-bee).
-
legioncodeinc Bundle Icon System StingerIcon-system specialist for React/Next.js: library selection (Lucide, Heroicons, Tabler, Phosphor, Iconify), tree-shake-vs-SVG-sprite trade-off, dynamic-import-by-name pattern, custom SVG component authoring, and the accessibility contract (aria-hidden for decorative icons, aria-label for semantic icons, accessible name for icon buttons). Use when choosing an icon library, debugging bundle-size regressions from icon imports, wiring a dynamic icon loader, building a custom SVG wrapper, or auditing icon accessibility. Paired with `icon-system-worker-bee`.
-
legioncodeinc Bundle Kanban Flow StingerKanban method specialist: WIP limit design and enforcement, flow-metric calculation (cycle time, lead time, throughput, flow efficiency), Little's Law diagnostics, visual-board design, class-of-service policies, cumulative-flow-diagram interpretation, and tool-specific implementation (Linear, Jira, GitHub Projects). Use when the user says \\\\\\\"set up WIP limits\\\\\\\", \\\\\\\"calculate cycle time\\\\\\\", \\\\\\\"apply Little's Law\\\\\\\", \\\\\\\"design our Kanban board\\\\\\\", \\\\\\\"Kanban vs Scrum\\\\\\\", \\\\\\\"our WIP is always exceeded\\\\\\\", \\\\\\\"why is our cycle time so long\\\\\\\", or when `kanban-flow-worker-bee` is invoked. Do NOT use for sprint ceremonies / velocity (Scrum domain, no peer Bee yet), CI/CD pipeline design (devops-worker-bee), database schema for a custom metrics store (db-worker-bee), or building custom Kanban tooling in code (react-worker-bee / python-worker-bee).
-
legioncodeinc Bundle Telegram Bot StingerTelegram Bot specialist: Bot API (up to 10.0 / May 2026 including guest mode and managed bots), grammY v1.x (TypeScript, recommended) and aiogram 3.x (Python), webhook vs long-polling decision with quantitative thresholds, Telegram Mini Apps initData validation (HMAC-SHA256 + Ed25519), Telegram Stars payments (mandatory for digital goods in 2026), inline mode, and MTProto escalation via Telethon/TDLib. Invoke when building a new bot, debugging webhook delivery, wiring Mini Apps, implementing payments, or deciding between frameworks. Do NOT invoke for the Mini App frontend UI (react-worker-bee), hosting/CI beyond bot-specific concerns (devops-worker-bee), or external payment processor integrations beyond Telegram Payments (payments-worker-bee).
-
legioncodeinc Bundle Crm Integration StingerCRM connectivity specialist for HubSpot, Salesforce, Pipedrive, Attio, Folk, Close, and Copper -- bi-directional sync design, the contact-vs-lead-vs-account taxonomy, merge/dedupe, and the native-vs-Zapier-vs-Merge.dev architecture trade-off. Use when the user says "integrate with HubSpot", "bi-directional CRM sync", "CRM field mapping", "Merge.dev or native API?", "dedup contacts in our CRM", "lead enrichment strategy", "sync conflict resolution", "Salesforce Lead vs Contact", "Attio API production-ready?", or "audit our CRM sync code". Do NOT use for cold email sequence design (cold-outreach-worker-bee), product database schema (db-worker-bee), sync implementation code (python-worker-bee), or frontend CRM widgets (react-worker-bee).
-
legioncodeinc Bundle React To Svelte StingerReact-to-Svelte 5 porting: hooks-to-runes translation, TanStack Router to SvelteKit, RTK Query and Radix conversion, contract-first port waves. Use when porting React components or dashboards.
-
legioncodeinc Bundle Typescript Node StingerModern TypeScript/Node practice for this Hive's stack. SvelteKit (Svelte 5) on Vercel as the primary case: tsconfig (bundler resolution, verbatimModuleSyntax), typed load functions/form actions/+server.ts, Drizzle type inference, zod vs valibot at boundaries, Vitest plus Playwright, Biome vs ESLint, pnpm and monorepo choice, Node-on-Vercel policy. Also fully supports the legacy npm library/CLI publishing case (Hivemind stack: strict ESM on Node16 resolution, esbuild bundling, zod v3/v4 MCP split, jscpd, no ESLint/Prettier). Use when reviewing, refactoring, or authoring TypeScript or Node code in either context.
-
legioncodeinc Bundle Dark Mode Theming StingerAudits and implements dark mode for React/Next.js: CSS tokens, next-themes wiring, FOWT prevention, SSR hydration, Tailwind v4 config, multi-brand theming. Use for dark mode setup or flashing bugs.
-
legioncodeinc Bundle Image Optimization StingerImage optimization specialist for React/Next.js and HTML contexts: AVIF/WebP format selection (AVIF is the 2026 production default), responsive srcset/sizes calculus, blur placeholders (LQIP via Sharp, BlurHash-as-CSS-gradient, ThumbHash), next/image remote patterns and the Next.js 16 priority→preload shift, and CLI tooling (Sharp Node API, Squoosh CLI for one-offs). Use when the user says \\\"optimize my images\\\", \\\"convert to AVIF\\\", \\\"set up srcset\\\", \\\"add blur placeholders\\\", \\\"next/image remote patterns\\\", \\\"LCP image is slow\\\", \\\"fix layout shift from images\\\", \\\"AVIF vs WebP\\\", or when auditing a codebase for unoptimized image delivery. Do NOT use for SVG icon systems (icon-system-worker-bee), general Lighthouse audits beyond image-specific findings (lighthouse-pagespeed-worker-bee), CDN/caching architecture beyond image Cache-Control (devops-worker-bee), or CSS animation performance (ux-ui-svelte-worker-bee).
-
legioncodeinc Bundle Modal Toast Dialog StingerAccessible overlay specialist for React: primitive selection (Radix Dialog, AlertDialog, Vaul Drawer, Sonner toast, cmdk command menu, Headless UI), the six-point accessible-modal contract (focus trap, escape, scroll lock, aria-modal, aria-labelledby, focus return), and the four-tier toast-vs-notification taxonomy. Use when choosing an overlay primitive, debugging focus trap regressions, implementing a drawer/sheet, wiring Sonner toasts into a React app, building a command palette, or auditing overlay stacking behavior. Paired with `modal-toast-dialog-worker-bee`.
-
legioncodeinc Bundle Harness Integration StingerCross-harness capability integration for The Hive's four harnesses (Claude Code, Cursor, ChatGPT Codex, Claude Cowork). Covers per-harness component placement (rules, commands, agents, skills, plugins), the wiring-mechanism decision (hooks vs MCP vs native extension vs plain instruction file), hook/lifecycle events per harness, MCP registration per harness (JSON vs TOML, Cowork connector reachability), capability detection/graceful degradation, and portability (spec-six frontmatter, AGENTS.md baseline, plugin manifests). Includes a worked six-host case study. Use for \\\"wire this into Claude Code and Cursor\\\", \\\"add a hook event\\\", \\\"register an MCP server across harnesses\\\", \\\"audit a harness adapter\\\", \\\"will this work in Cowork\\\", or when harness-integration-worker-bee is invoked. Do NOT use for vector-store schema (vector-store-stinger), embeddings runtime (embeddings-runtime-stinger), MCP protocol internals (mcp-protocol-stinger), or CI/CD topology (ci-release-stinger).
-
legioncodeinc Bundle App Store Submission StingerApp store submission specialist for iOS (App Store Connect + TestFlight) and Android (Google Play Console). Covers App Store Optimization (keywords, screenshots, preview assets), submission workflow, privacy compliance (Apple nutrition labels, PrivacyInfo.xcprivacy, Google data safety forms), rejection diagnosis and remediation, age rating questionnaires, In-App Purchase setup (StoreKit 2, Google Play Billing Library), and realistic timeline expectations. Invoke when the user says \\\"submit my app\\\", \\\"App Store rejection\\\", \\\"ASO strategy\\\", \\\"privacy nutrition label\\\", \\\"set up IAP\\\", \\\"Google Play review\\\", \\\"expedited review\\\", or when preparing any mobile app for store publication. Do NOT invoke for UI design of the app itself (ux-ui-svelte-worker-bee), client-side StoreKit / billing implementation code (react-worker-bee / python-worker-bee), or app security audits (security-worker-bee).
-
legioncodeinc Bundle Lighthouse Pagespeed StingerRuns Lighthouse and PageSpeed Insights for React/Next.js: CI setup (LHCI), audit categories, performance budgets, lab-vs-CrUX gap. Use when setting up or debugging Lighthouse CI.
-
legioncodeinc Bundle CSV XLSX Import Export StingerThe \\\"upload your spreadsheet\\\" implementation arsenal for React/Next.js products. Covers library selection (papaparse, SheetJS, exceljs), streaming-parse for 100MB+ files, the column-mapping UX wizard, managed importers (OneSchema, Flatfile, dromo) vs self-hosted (react-spreadsheet-import), Zod row validation, CSV injection prevention, encoding edge cases, and styled XLSX export. Use when the user says \\\"build a CSV import\\\", \\\"add XLSX upload\\\", \\\"spreadsheet import feature\\\", \\\"column-mapping wizard\\\", \\\"export to Excel\\\", \\\"streaming parse large file\\\", \\\"CSV injection safety\\\", or when csv-xlsx-import-export-worker-bee is invoked. Do NOT use for file drop-zone UI (ux-ui-svelte-worker-bee), database bulk-insert tuning (db-worker-bee), or upload endpoint security audit (security-worker-bee).
-
legioncodeinc Bundle Product Tour Onboarding UI StingerIn-app product tour and onboarding UI specialist. Selects the right tour tool (Userpilot, Appcues, Userflow, Pendo Guides, Driver.js, Shepherd.js, Intro.js), implements tooltip/modal/hotspot/checklist components, wires segment-based trigger logic, and establishes a tour maintenance protocol that survives iterative UI changes. Invoke when the user says \\\"set up a product tour\\\", \\\"build an onboarding checklist\\\", \\\"compare Driver.js vs Shepherd.js\\\", \\\"our tours keep breaking after deploys\\\", \\\"which product tour tool should we use\\\", \\\"add segment-based tour triggers\\\", or \\\"our tour is showing to the wrong users\\\". Do NOT invoke for broader onboarding email sequences (lifecycle-email Bee), user-auth flows (auth-worker-bee), design token work (ux-ui-svelte-worker-bee), or analytics instrumentation (posthog/mixpanel Bees).
-
legioncodeinc Bundle Markdown Mdx Content Pipeline StingerMarkdown/MDX processing specialist - MDX 3/compiler selection, remark/rehype plugin pipelines, Shiki v4/expressive-code/starry-night syntax highlighting, GFM, AST manipulation, custom directive plugins, math/Mermaid diagram embedding, and XSS sanitization. Use when building or auditing any content processing pipeline that takes .md/.mdx source to HTML/JSX output.
-
coldbox Skill Testbox RunnersUse this skill when running TestBox tests: CommandBox CLI (testbox run), BoxLang CLI (./testbox/run), HTML web runner, programmatic TestBox instantiation (run/runRaw/runRemote), configuring test directories or bundles, using the streaming runner (--stream flag / StreamingRunner), watcher mode, all CLI flags (--show-failed-only, --dry-run, --slow-threshold-ms, --stacktrace, --max-failures), or setting up box.json testbox configuration.
-
coldbox Skill Testbox ListenersUse this skill when implementing TestBox run listeners (callbacks): onBundleStart, onBundleEnd, onSuiteStart, onSuiteEnd, onSpecStart, onSpecEnd; building progress indicators, custom loggers, or live dashboards that react to test lifecycle events; or passing listener callbacks to TestBox's run(), runRaw(), or the standalone runner.
Audited -
coldbox Skill CbantisamyUse this skill when sanitizing HTML/XML user input to prevent XSS attacks using the OWASP AntiSamy library via the cbantisamy module. Covers installation, policy selection (strict/relaxed/slashdot/ebay/myspace), custom XML policy files, fluent sanitization API, ColdBox validation integration, and safe rendering of rich user-generated HTML.
-
coldbox Skill CbmarkdownUse this skill when converting Markdown to HTML in a ColdBox/BoxLang application using the cbmarkdown module. Covers installation, injecting the Processor, converting Markdown strings to HTML, using in views, supported syntax (GFM, tables, code blocks), and security considerations for user-generated Markdown.
-
coldbox Skill Coldbox Testing ModelUse this skill when unit testing ColdBox model objects (services, repositories, entities, or utility classes) in isolation using BaseModelTest, accessing the pre-wired model variable, leveraging the built-in mock helpers (mockLogger, mockLogBox, mockCacheBox, mockWireBox), calling model.init() to initialize the component, mocking injected properties with prepareMock(), or scaffolding model tests with CommandBox.
-
coldbox Skill Docbox GenerationUse this skill when configuring DocBox to generate API documentation, choosing output strategies (HTML, JSON, UML, CommandBox), setting up single or multiple source directories, running DocBox from BoxLang CLI or CommandBox CLI, customizing HTML themes, excluding files/folders from output, or building custom output strategies.
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 saas-ai-sustainability-and-ethics, saas-agent-implementation-timeline, saas-agent-sla-economics-in-projection. 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.