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.
-
abdullah4ai Bundle IOS Rules 438 battle-tested iOS development rules covering accessibility, navigation, architecture, dark mode, localization, App Review guidelines, and more. Targets the mistakes LLMs actually make when generating Swift/SwiftUI code.
-
abdullah4ai Skill Accessibility 2Accessibility: VoiceOver, Dynamic Type, reduce motion, tap targets, accessibility labels and hints. Use when implementing UI patterns related to accessibility.
-
abdullah4ai Skill Components 8Reusable UI component patterns: buttons, cards, input fields, loading states, badges, toggles, pickers, empty states. Use when creating any interactive UI element, building reusable views, or composing component hierarchies. Triggers: Button, TextField, Toggle, Picker, ProgressView, Label, badge, card, empty state.
-
abdullah4ai Skill Color Contrast 2Color contrast and accessibility: WCAG ratios, semantic colors, dark mode pairing, text on images, opacity rules. Use when choosing colors, ensuring text readability, or validating contrast ratios for accessibility. Triggers: contrast, WCAG, foregroundColor, background, opacity, semantic color, dark mode color.
-
abdullah4ai Skill Components 9tvOS UI components: card buttons, focus states, media tiles, text entry, progress indicators. Use when working on tvOS component patterns, focus styling, or card-based UI. Triggers: Button, card, focus, CardButtonStyle, component, tile.
-
abdullah4ai Skill Website Links 2External links and in-app browsing: Link component, openURL environment, SFSafariViewController, URL handling. Use when opening URLs, adding web links, or embedding an in-app browser. Triggers: Link, openURL, SFSafariViewController, URL, website, browser.
-
abdullah4ai Skill Components 10macOS UI components: button styles, context menus, tables, drag-and-drop, keyboard shortcuts. Use when working on macOS component patterns, desktop UI, or Mac app interactions. Triggers: Button, Table, Menu, contextMenu, keyboardShortcut, component.
-
abdullah4ai Skill Components 12visionOS UI components: glass backgrounds, hover effects, ornaments, 3D content views. Use when working on visionOS component patterns, spatial UI, or Vision Pro interactions. Triggers: Button, glass, hover, ornament, RealityView, Model3D, component.
-
lvtd-llc Bundle Responsive Layout Math 2Derive, review, and debug responsive web layout math for fluid widths, media query ranges, viewport units, percentages, and CSS clamp() formulas. Use when building responsive layouts, converting fixed designs to fluid CSS, calculating breakpoints, choosing vw/svw/lvw/dvw units, or deciding whether CSS math or JavaScript measurement should own a layout behavior.
-
lvtd-llc Bundle Color Math Accessibility 2Calculate, review, and generate web color systems using RGB, HSL, LAB, OKLCH, contrast ratios, luminance, opacity, blend modes, and light/dark mode transformations. Use when auditing accessible colors, converting color models, deriving palettes, checking WCAG contrast, building theme tokens, or debugging opacity and CSS blend math.
-
lvtd-llc Bundle Frontend Math Foundations 2Explain and apply foundational math for front-end development, including arithmetic, algebra, ratios, exponents, roots, linear equations, inequalities, geometry, trigonometry, coordinates, and choosing CSS versus JavaScript math. Use when a web design calculation needs first-principles explanation before applying CSS, JavaScript, Grid, Flexbox, responsive, or color-specific skills.
-
lvtd-llc Bundle Documentation Quality Metrics 2Audit and measure developer documentation quality using functional quality, structural quality, accessibility, purpose, findability, accuracy, completeness, clarity, concision, consistency, analytics, user goals, doc goals, and metric plans. Use when evaluating docs, designing documentation metrics, selecting dashboards, or linking docs work to user and business outcomes.
-
lvtd-llc Bundle Inclusive Experiment Analysis 2Evaluate A/B tests for inclusive product impact across user groups, accessibility needs, device constraints, privacy behavior, bandwidth, geography, and underrepresented segments. Use when checking whether an experiment benefits or harms different user groups, planning segmentation dimensions, auditing test/control balance, interpreting subgroup effects, or reviewing product changes for inclusive experimentation.
-
infrasity-labs Skill Sdk Docs Auditor 2Audits any SDK documentation site and produces a fully scored, downloadable HTML report. Use this skill whenever a user provides a documentation URL and asks to audit, review, analyse, score, or check the quality of SDK docs. Also trigger for phrases like "audit the SDK docs at X", "check if the docs at X are complete", "review this SDK documentation", "how good are these docs", "run an SDK audit on X", or any time a user pastes a URL alongside words like audit, review, crawl, check, analyse, quality, completeness, or gaps. ALWAYS use this skill — do not attempt the audit without following this structured crawl → analyse → cross-reference → report workflow.
-
carlvellotti Bundle Convert Doc 2Convert documents between formats using pandoc with custom styling. Supports markdown to PDF, HTML, Word, and more. Use when the user says 'convert to PDF', 'convert doc', 'export as PDF', 'make a PDF', 'convert doc <file>'.
-
henriquescastilho Bundle Implementing Browser Isolation For Zero Trust 2Deploys remote browser isolation (RBI) as a core component of a Zero Trust architecture. Implements isolation policies with URL categorization and risk-based routing, content disarming and reconstruction (CDR) for file sanitization, data loss prevention controls within isolated sessions, and integration with Secure Web Gateway and ZTNA platforms. Based on Cloudflare Browser Isolation, Menlo Security, and Zscaler RBI approaches. Use when hardening web access against zero-day exploits, phishing, credential theft, and browser-based data exfiltration.
-
legioncodeinc Bundle Preact Stinger 2Preact 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 Stinger 2Svelte 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 Stinger 2Vercel 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 2'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 Stinger 2Tailwind 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 Stinger 2TanStack 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 Stinger 2Forge 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 Stinger 2Discord 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 Stinger 2Icon-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 Stinger 2Kanban 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 Stinger 2Telegram 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 Stinger 2CRM 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 Stinger 2React-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.
-
agentik-os Skill Accessibility Test Plan 2Create accessibility testing plans covering assistive technologies and WCAG criteria.
-
agentik-os Skill Caio Implementation Runbook 2Use when a Chief AI Officer (or fractional CAIO) moves from blueprint to BUILD — taking caio-enterprise-workflow-architect's company-ai-os/ and EXECUTING the build of a centralized, federated Company-AI-OS: one dedicated client-owned server + one function-specific micro-SaaS per C-Level (CIO/CTO, CMO, CFO, CDO, COO, CHRO, CSO), wired by an inter-dashboard API contract so a COO metric can trigger a CFO alert, integrated via Composio's 6 critical connectors, with automated reports, built-in monitoring + cost/usage tracking, and a per-deliverable ship-gate that ships value in week 1 — anti-black-box, everything documented, readable, auditable, transferable. EN triggers: CAIO implementation, build the company AI OS, implementation runbook, realize the architecture, centralized federated dashboards, server provisioning, micro-SaaS per C-level, inter-dashboard API contract, dashboard federation, Composio wiring, automated reports, AI observability, instrumentation, ship-gate, go-live, Next.js Convex Clerk Stripe Co
-
eturkes Bundle XLSX 2Create, edit, analyze, or convert Excel spreadsheets (.xlsx, .xlsm) where the workbook file is the primary deliverable. Use for formulas, formatting, financial models, multi-sheet workbooks, and tabular cleanup exported to Excel. Also applies to .csv/.tsv when the user wants spreadsheet output. Do NOT use for Word documents, HTML reports, standalone Python scripts, database pipelines, or Google Sheets API work.
-
eturkes Bundle Geniml 2This skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
-
gaelic-ghost Bundle Safari MCP Workflow 2Inspect a scoped live site in Safari through Safari Technology Preview's local MCP server. Use for Safari-specific DOM, console, network, screenshot, accessibility, performance, interaction, responsive, or print-media evidence.
-
gaelic-ghost Skill Leaf Rendered Web Workflow 2Plan, implement, test, and diagnose Leaf-rendered Vapor sites and HTML email with typed contexts, layouts, partials, custom tags, escaping, accessibility, assets, caching, and rendering tests.
-
gaelic-ghost Bundle Tvos App Experience Workflow 2Guide remote-first tvOS SwiftUI and UIKit decisions: focus navigation, Large Text, Apple TV capability gates, and TVMLKit migration. Use for Apple TV interaction, focus geometry, accessibility, or platform-boundary questions.
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 ios-rules, accessibility, components. 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.