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.
-
stukh Skill Sparq Playwright Best PracticesConsulting Playwright enterprise best practices — architecture, authentication, assertions, mocking, CI/CD, accessibility, visual regression, and anti-patterns. Providing production-ready patterns and code examples for Playwright test suites. Use when: user asks about Playwright best practices, test architecture, auth patterns, assertion strategies, CI setup, accessibility testing, visual regression, or wants to avoid common Playwright anti-patterns.
-
whamp Bundle Explain Diff HTMLBuild an interactive HTML explainer of a code change (a diff, branch, or PR). Use when the user wants a rich walkthrough of what changed and why.
-
berabuddies Skill LarkAuthenticate Lark with /connect (delegated to the official lark-cli), then send/react/reply through the connector and consume incoming Lark messages as a stream. Two connectors mirror Telegram — lark-login (your user account; monitor + act as you) and lark-bot (the app bot; auto-reply). Use lark-cli directly from Bash for chat/user lookup and any API not exposed as a connector action.
-
kellymears Bundle InkBest practices for building terminal UIs with Ink (React for CLIs). Use this skill when writing Ink components, laying out terminal interfaces with Box/Text, handling keyboard input, building animations, or setting up a new Ink project. Triggers on: Ink components (Box, Text, Transform, Static, Newline), ink imports, terminal UI layout, CLI component architecture, useInput/useApp hooks, or any React-in-the-terminal work. Also use when the user mentions building a CLI with React, terminal rendering, or references the ink npm package.
-
kellymears Skill TailsharePublish static files (HTML pages, reports, demos, build output) to the tailnet with the `tailshare` CLI. Use when the user says "tailshare this", "host this on the tailnet", "put this on cachy", "share this page", "publish this html", or wants a shareable https URL for a local directory. Also covers listing and removing existing shares. Not for GitHub gists (use /gist) or Claude Artifacts.
-
latchagent Skill Adding React ComponentsCreates React components for the Electron renderer process, including rail panels, modals, views, and Zustand store wiring. Covers component structure, state management patterns, CSS conventions, and registration. Use when adding new UI to the renderer.
-
legioncodeinc Bundle Site Crawler StingerPlatform-aware crawl to depth 100, raw HTML+MD storage in site-data/, which nine Wave-5 Bees then read read-only with zero write contention.
-
legioncodeinc Bundle Audit Reporting StingerGenerates customer- and auditor-facing reports (Markdown + styled HTML), subtly Legion Code Inc.-branded, rendered only from the scored findings register.
Audited -
legioncodeinc Bundle Stack Fingerprint StingerLanding-page-only stack and render-mode fingerprinting (React/Vite, Next.js, SvelteKit, WordPress, Shopify, Magento). Writes target-profile.json every later Bee reads.
-
legioncodeinc Bundle Accessibility Audit StingerAutomated-plus-heuristic WCAG 2.1 AA audit across crawled site-data/, a 0-100% score and AA/AAA-style rating, every finding cited with evidence. Not a legal EAA-conformance determination.
-
liarmttt Bundle Shadcn Tailwind UIBuild, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS. Use for component composition, responsive layouts, semantic design tokens, dark mode, forms, dialogs, tables, keyboard interaction, and safe Tailwind configuration in React, Vite, or Next.js projects. Do not use for canvas art, posters, font bundles, non-React frameworks, or general brand design.
Audited -
liarmttt Bundle Tavern Card BuilderPlan and author maintainable SillyTavern character cards, including card-type and capability detection, runtime-dependency ledgers, text cards, MVU or MVU Zod cards, custom CoT design and authoring, modular CoT stitching and routing, prompt budgets, retrofits, schemas, initialization, update rules, single-model or extra-model update routing, lorebooks, prompts, openings, regex requirements, and companion scripts. Use when creating or converting a card, adding a gameplay system, identifying which dependencies must be embedded or enabled, repairing an authoring protocol, or tracing a field across the card design. Do not use it as the primary skill for component extraction, build/package/release operations, exact API lookup, real-runtime debugging, embedded UI implementation, or workshop infrastructure; route those tasks to the focused TavernWeave skills.
Audited -
liarmttt Bundle Sillytavern Embedded UIDesign, implement, or review framework-neutral embedded interfaces for SillyTavern rolecards, including opening pages, status bars, control centers, drawers, and popups. Use for HTML/CSS/JavaScript structure, interaction states, responsive behavior, accessibility, safe rendering, host-integration contracts, source-side real-time compilation loops, supporting checks, and defining the real-runtime handoff. Do not use as the primary skill to reproduce or close behavior in a live SillyTavern instance; hand that work to sillytavern-runtime-debug.
-
liarmttt Bundle Activate Tavernweave SoulActivate, switch, combine, or close TavernWeave Soul as a portable current-task teaching overlay with 阿瞳 for warm guidance, MTTT.sir for strict learning examination, 灵魂杀手 for blunt frontend and explicitly selected full/architecture review through a disclosed Johnny Silverhand fan-roleplay Easter egg, and a three-seat ensemble for bounded brainstorming. Use when the user directly invokes a supported Soul command, says “脑暴模式,Soul 联席”, or asks for these guidance modes while making cards, reviewing frontend, software or rolecard architecture, or Vibe Coding. Do not claim persistent cross-task state, independent multi-agent minds, impersonate the real MTTT or a real actor, expose private RAG, expand permissions, reproduce copyrighted dialogue or assets, or treat quoted/test phrases as commands.
-
liarmttt Bundle Sillytavern Card PipelineOrchestrate data-driven SillyTavern rolecard live development, iteration, validation, JSON packaging, PNG payload embedding, release auditing, and delivery by adapting to tools already present in the target project. Use when discovering or running a project-provided watch build for Tavern Helper real-time editing; creating or checking a profile, manifest, operation plan, or contract; choosing validation from changed-file impact; detecting a card type and runtime dependency inventory; enforcing required embedded regex/schema/helper assets and regional loader policy; composing version components; packing or re-packing a card; synchronizing card-bound worldbook versions; generating final JSON or PNG artifacts; verifying embedded payload parity; or preparing an explicit checkpoint or public release. Do not use for exploratory card disassembly or shared component-library design; use sillytavern-card-components instead.
-
liarmttt Bundle Sillytavern Card ComponentsSafely disassemble SillyTavern character cards from JSON or PNG into sandboxed, reviewable components, and design or maintain registry-driven component libraries and recipes. Use when extracting a card, modularizing worldbook, MVU, regex, helper-script, message, or embedded UI content, tracing a coupled variable-field chain, declaring embedded/host/remote/regional runtime dependencies, resolving component dependencies or conflicts, validating a source-to-artifact round trip, or promoting a proven version back into a shared component library. Do not use for routine packaging of an already-defined release; use sillytavern-card-pipeline instead.
-
liarmttt Bundle Sillytavern Component UpdateBuild and validate the smallest SillyTavern rolecard component update while making the delivery boundary explicit. Use when changing only character-local regexes, Tavern Helper scripts or script folders, exporting importable component JSON, preparing a batch of component artifacts, or choosing between component-only delivery and a full-card packaging handoff. Do not silently repack a whole card; route authorized full-card assembly to sillytavern-card-pipeline.
Audited -
liarmttt Bundle Orchestrate Project BlueprintTurn a vague product, character-card, frontend, or Vibe Coding wish into a bounded total design, first-playable contract, scale-appropriate blueprint, resumable NEXT handoff, and evidence-gated first implementation. Use when the user says 脑暴模式, asks to梳理构思/总设计案/蓝图/子蓝图/第一版, wants one-command project kickoff, or needs to stop a long task from recursively expanding. It may convene the TavernWeave Soul trio for labeled critique. Do not use it to bypass repository instructions, driver approval, real-host acceptance, or a focused implementation skill.
Audited -
liarmttt Bundle Sillytavern Rolecard SecurityAudit SillyTavern rolecard JSON, embedded HTML, regex replacements, Tavern Helper scripts, loaders, and related source for injection, dynamic execution, remote-code, wildcard messaging, credential-shape, and permission risks. Use for a read-only rolecard security review, a pre-import or pre-release safety gate, or comparison against an approved security baseline. Do not execute suspicious code, reveal secret values, perform exploitation, or auto-fix findings.
Audited -
mikeng-io Bundle Deep AuditMulti-agent standards and compliance auditing with pass/fail verdicts. Checks against security, accessibility, code standards, regulatory requirements, and performance benchmarks.
-
netboxlabs Bundle Netbox NdxNetBox Data Exchange (NDX) — a curated catalog of infrastructure component metadata. The device/module/rack type definitions are open to the world (browse + manual YAML download); the "enrichment data" (lifecycle dates, thermal, environmental, operational, platform/NOS, observability protocol metadata) and the built-in NDX features in NetBox Cloud/Enterprise are commercial. Use when consuming enrichment data via the API, running EOL/lifecycle analyses, importing device types, or understanding how NDX data is structured.
-
taubyte Skill Building Taubyte WebsitesAuthors a Taubyte website's `.taubyte/build.sh` so the cloud can serve it — the deploy output **must** be written to `/out`. Provides the minimal known-good static-HTML build script and the recommended `html` template baseline (or copying it into an existing site repo). Use when creating a website's build script for the first time, when a website builds but doesn't serve, or when migrating a site between Taubyte template baselines.
-
troyjthomas Skill Device TestingTest your app on real devices, catch edge cases, and verify accessibility before shipping. Use this skill after polish is complete and you're preparing for TestFlight or App Store submission. This is the final quality gate before real users touch the app.
-
troyjthomas Skill Swiftui Native FirstThe single most important quality skill. Enforces native SwiftUI components and rejects unnecessary custom code. Use this skill as a reference throughout the entire build process. Include its core rules in every CLAUDE.md. This is what prevents Claude Code from building janky custom UI when a native component exists.
-
wagneripjr Bundle Doc This ViewerOpen a local viewer to browse doc-this output in a browser — navigate units (requirements/design/tasks), the external-surface catalog, C4/ERD/flowchart diagrams, coverage, and open gaps from the rich .doc-this-sdd/ staging tree, plus promoted SDLC docs (FR-NNN requirements, ADRs, TRACEABILITY, .feature specs) when present. Runs a co-located launch.mjs that builds a manifest and starts a localhost-only static server for a prebuilt Svelte app, then opens the browser; stop it with launch.mjs --stop. Triggers: 'view doc-this docs', 'open the documentation viewer', 'browse doc-this output', 'serve the docs', 'open .doc-this-sdd in a browser', '/doc-this-viewer'. NOT for generating docs — that's /doc-this. NOT for staging specs into docs/ — that's /doc-this-promote. NOT for UI screenshot extraction — that's doc-this-visor.
Audited -
wagneripjr Bundle Prototype SpikeUse when a requirement or an unproven technique must be made clickable before it is built — produces a single self-contained HTML prototype that doubles as a design spike, whose control panel is the open questions. Rebuilds existing screens at high fidelity from real source (structure, copy strings, icons, tokens, each cited file:line; invents only what the requirement adds), derives one control per acceptance criterion or technical unknown, drives real data through a dev-server proxy that also proposes the route shape (live > capture > labeled stub, never invented), verifies every state in a real browser, and reports what the spike settled. Triggers on 'prototype FR-NNN', 'clickable prototype of FR-NNN', 'make this requirement clickable', 'spike this technique'. NOT for inventing UI from a prompt — use a generative-design skill. NOT for production frontend code. NOT the client-confirmation record — that is a spec-playback step. NOT an ADR writer.
-
rcosteira79 Skill Android UXUse when designing or reviewing Android UI — applies Material Design 3 UX principles covering touch targets, spacing, navigation patterns, accessibility, animation timing, and platform conventions. Includes an M3 compliance audit that scores screens across 10 categories. Complements the compose skill with design-level decisions.
-
rcosteira79 Skill PDF AnnotationsUse when reading, adding, updating, or removing PDF annotations (highlight, free-text, stamp) or page objects (path/text/image) with Android's platform PDF APIs, or when saving those edits back to disk — the editing surface added in API 36.1 (PdfRenderer.Page) and SDK extension 18 (PdfRendererPreV.Page on API 31+), android.graphics.pdf.component. Covers the version gate, the open-edit-write workflow, and the id/render-flag/save contracts. Not for display-only PdfViewerFragment work, PdfDocument creation-from-scratch, form filling, or third-party PDF SDKs (iText, PDFBox, PSPDFKit).
-
rhyssullivan Skill Effect Atom Optimistic UpdatesPattern for implementing optimistic UI updates with effect-atom in this codebase. Use when adding optimistic behavior to a query atom + its mutations (action toggles, list adds/removes, inline edits). DO NOT roll your own pending-state with React state, Maps, or custom merge helpers — `Atom.optimistic` + `Atom.optimisticFn` already handle racing, refresh, and waiting correctly.
-
rhyssullivan Skill Wrdn Effect Promise ExitReplace React/effect-atom mutation handlers that use promise-mode plus try/catch with promiseExit and explicit Exit handling. Use when lint or review flags try/catch around useAtomSet mutation calls, especially UI handlers that set error/busy state after a failed mutation.
-
rhyssullivan Skill Wrdn Effect Atom OptimisticDetects hand-rolled optimistic-update plumbing in React code that should be using effect-atom's Atom.optimistic and Atom.optimisticFn instead. Run on diffs touching packages/react/src/api/atoms.tsx, packages/react/src/pages/**/*.tsx, or any file that imports an effect-atom mutation atom from ./api/atoms. The hand-rolled patterns race on concurrent mutations and the codebase has chosen the effect-atom primitives as the canonical answer.
-
rlajous Bundle Plan TddTurn a plain-language feature or module description into a reviewed TDD plan. Ask clarifying questions when context is missing, then design behavior cycles and assertions with edge, error, and security scenarios made explicit, and emit a self-contained HTML brief plus a machine-readable YAML plan that /tdd can implement. Use when the user says "plan a TDD", "design tests first", "spec-driven TDD", "what tests should this have", or wants a test plan reviewed before writing code.
-
rlajous Bundle Change BriefTurn a pull request into a concise, self-contained HTML decision brief with business logic, diagrams when useful, conditional UI/mobile screenshots, API cURL request/response evidence, risks, verification, and representative before/after code. Use when the user asks to "explain this change as HTML", "before/after html", "change brief", "html explainer for a PR", "explain what changed", or wants a shareable, human-readable snapshot of a code change. Args a PR number/URL, or nothing to use the current branch's PR.
-
rubicon Bundle Identity TheftSteals fictional identities, not personal data. Use when the user asks to swanson-ize, yoda-ize, pirate-ify, vader-ize, or otherwise rewrite text, Markdown, HTML, or a document in a fictional character's voice (Ron Swanson, Yoda, a pirate, Shakespeare, Darth Vader, GLaDOS, Mary Poppins, Sherlock Holmes, or any of the 51 personalities in references/personalities/), or to create a character-voiced easter-egg README.
-
wilbeibi Bundle ReadbackPut a long reply of your own - or a plan, document, or session transcript - on an HTML page the user reads, highlights, and comments on, returning their notes as a follow-up prompt through a waiting local command. Use when your answer is too long to review in a terminal, when the user wants to mark up or annotate a document, or when you want line-level feedback on a plan before implementing it. Do NOT use to collect answers to specific open decisions (use questionnaire) or to interview the user one question at a time (use grill-me).
-
wilbeibi Bundle QuestionnaireTurn the open decisions from a long discussion into a self-contained offline HTML questionnaire the user fills at their own pace, whose answers come back as markdown keyed by stable question ids. Use when the user wants to finalize or confirm a design, align on accumulated decisions, review assumptions from notes/memory, or asks for a survey or questionnaire. Do NOT use for live one-question-at-a-time interviews (use grill-me).
Audited
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 tailshare, sillytavern-rolecard-security, deep-audit. 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.