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.
-
broomva Bundle UnslopRemove the "vibecoded" / AI-slop look from an arbitrary frontend codebase at the ROOT, autonomously, and prove the result clears a crafted floor. Full-repo traversal (any framework) → root-cause attribution (the one file that declares each default: font, icons, color/radius/shadow tokens, gradient/glass, motion, copy voice) → fix once at the root, never at forty call sites → the substance tells no detector covers (legal routes, loading/empty/error states, placeholder and fake content, real product evidence) → render at 1280+390 → deterministic gate (scripts/unslop_gate.py, exit 0 = clear). Composes the impeccable detector (64 rules) and commands, Anthropic frontend-design for direction, broomva-design as the house example; reimplements none of them. USE WHEN: a site or app "looks vibecoded", "looks AI-generated", "looks like every other AI site", "feels generic/templated/slop", "make it feel premium / crafted / intentional", "de-slop / unslop this", "does this pass the vibecoded test", or before shipping any
-
broomva Bundle Ccrccr — reversible payload compression: shrink any blob (tool output, log, RAG chunk, file) BEFORE it enters an LLM's context, while caching the full original locally so it can be expanded byte-for-byte on demand. The payload-axis counterpart to a knowledge-graph loader (the retrieval axis): the model sees a compact lossy view + a handle (ccr://<sha256>), and calls retrieve(handle) only when it needs the bytes back. Content-routed deterministic compactors (json skeleton / code outline / text head-tail); stdlib-only, no ML. Lifted from the CCR component of github.com/chopratejas/headroom. USE WHEN — a tool output / log / RAG chunk / file is too large for context and you want to compress it reversibly; "compress this payload", "shrink this before the model", "reversible compression", "cache the original and give me a handle". NOT FOR — loading knowledge-graph entities (that's the kg loader, the retrieval axis); lossless whole-file compression (use gzip); semantic summarization that does not need byte-exact recove
-
broomva Bundle LivecodingAlgorave-grade livecoded music workflow — TidalCycles patterns (Haskell DSL driving SuperDirt over OSC) + Hydra-synth visuals (browser or VS Code Simple Browser via a local HTML page that loads hydra-synth from CDN). Wraps the boot ritual (SuperCollider → SuperDirt → Tidal → Hydra), a vibe-descriptor pattern generator (industrial, ambient, DnB, footwork, techno, algorave-glitch), and a reference tunnel-visuals page for the @lo.fi.sci.fi-projected aesthetic. Mac-first; ports to Linux with package-name swaps.
-
broomva Skill Bstackbstack primer — the Broomva Stack: twenty irreducible automation primitives (P1–P20) that turn an agent-driven workspace into a self-operating system. This is the AGENT-READABLE PRIMER (primitive contract + short-name index + when each fires), NOT the CLI. The bstack CLI + governance substrate (bin/, doctor, templates, hooks) is a separate product installed by clone + bootstrap (git clone https://github.com/broomva/bstack && ./bin/bstack bootstrap) — do NOT `npx skills add broomva/bstack` (it drops bin/scripts, the repo-root SKILL.md case of vercel-labs/skills#1523). Use this primer to reason with the primitives: Bridge (P1), Gate (P2), Tickets (P3), Pipeline (P4), Fanout (P5), Bookkeeping (P6), Freshness (P7), Janitor (P8), Wait (P9), Hygiene (P10), Empirical (P11), Persist (P12), Dream (P13), Dep-Chain (P14), Snapshot (P15), Crystallize (P16), Lens (P17), Audience (P18), Orchestrate (P19), Cross-Review (P20). Triggers on 'bstack', 'Broomva Stack', 'the primitives', 'P1'..'P20', 'primitive contract', 'bstack
-
broomva Bundle Arcan GlassBroomVA trademark web styling system — Arcan Glass design language for Next.js + Tailwind v4 + shadcn/ui projects. Use when creating or styling BroomVA web interfaces, implementing glass/frosted UI effects, setting up brand-consistent dark-first themes, or integrating ArcanBG brand tokens (AI Blue
-
broomva Bundle Audit Harness UsageAudit token usage and estimated API-equivalent cost across local agent harness traces from Codex CLI, Claude Code, Gemini CLI, and Cursor usage exports, plus quota-window status from a running Google Antigravity app, IDE, or CLI. Ships a read-only, standard-library Python scanner that normalizes incompatible cache/input/output semantics, deduplicates streaming records, implements CodexBar-derived lineage-aware Codex accounting locally, preserves Cursor list cost separately from charged cost, reports pricing coverage, renders self-contained HTML dashboards with improvement signals, and never copies prompt or response content into output. USE WHEN: the user asks how CodexBar or ccusage-style accounting works; wants token or cost statistics across coding agents; wants to find expensive models, cache efficiency, usage concentration, anomalous spikes, or unpriced models; says "token usage", "agent costs", "CodexBar cost", "Claude usage", "Gemini stats", "Antigravity quota", "Cursor usage export", "compare harnesse
-
broomva Bundle Tribe V2 Bci AppliedApplied BCI research and neuro-informed content optimization using Meta's TRIBE v2 brain encoder. Predicts neural responses to media, UI, and content without brain scanners — enabling stimulus optimization, attention ranking, and BCI groundwork research. Use when: (1) Predicting neural responses to video, audio, or text content, (2) Ranking content by predicted brain engagement (visual cortex, attention, emotion), (3) Optimizing stimuli to maximize activation in a target cortical region, (4) BCI research using non-invasive population priors, (5) Accessibility research (testing presentation formats for language/auditory processing), (6) Computational neuromarketing research (CC BY-NC, non-commercial only), (7) Any task involving brain response prediction for media, UI design, or BCI applications using TRIBE v2.
-
cratis Bundle Cratis Arc Authentication Authorization And IdentityWire authentication, authorization and identity in a Cratis Arc application — IProvideIdentityDetails and the /.cratis/me endpoint, the [Authorize]/[Roles]/[AllowAnonymous] attributes Arc actually evaluates, IAuthenticationHandler, the Microsoft Identity Platform header contract, tenant resolution, and the React identity hooks. Use for Arc identity providers, endpoint protection, roles, or frontend identity integration. Do not use for isolated command validation, and do not use for Chronicle tenant namespaces alone.
-
yknothing Bundle Pc AccessibilityUse when a user interface, user-facing flow, or acceptance criteria need accessibility requirements, audits, or remediation guidance so the system stays usable for people with disabilities.
-
yknothing Bundle Pc System DesignUse when reviewed requirements or specifications are ready and the team must decide high-level architecture, component boundaries, integration seams, or brownfield coexistence strategy before API design, technology selection, or task planning.
-
yknothing Skill System DesignUse when reviewed requirements or specifications are ready and the team must decide high-level architecture, component boundaries, integration seams, or brownfield coexistence strategy before API design, technology selection, or task planning.
-
frankxai Skill Next Best PracticesArcanea Next.js 16 Best Practices
-
frankxai Skill React Best PracticesArcanea React Best Practices
-
frankxai Skill React PatternsReact Patterns Skill (External)
-
frankxai Skill Tailwind PatternsTailwind Patterns Skill
-
stuffbucket Bundle Design CritiqueEvaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.
-
stuffbucket Bundle Design FrontendCreate distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when building web components, pages, dashboards, applications, or when any design skill needs project context. Also triggers on requests to style, beautify, or redesign UI.
-
stuffbucket Bundle Tauri Setup ViteUse when wiring Vite into a Tauri v2 project — writing `vite.config.ts`, setting `package.json` scripts, configuring `frontendDist`/`devUrl` in `tauri.conf.json`, exposing `TAURI_ENV_*` vars to the frontend, fixing iOS/Android HMR over `TAURI_DEV_HOST`, or diagnosing port/host mismatches between Vite and Tauri.
-
stuffbucket Bundle React CompositionReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
-
stuffbucket Bundle Tauri Plugins HTTPUse when making HTTP requests from a Tauri v2 frontend — `fetch()` from `@tauri-apps/plugin-http`, the URL-pattern + method allowlist scope, why this exists (CORS bypass, no preflight, custom headers, proxy support), streaming responses, the `http:default` and per-method permissions, and when to use it instead of browser `fetch`.
-
stuffbucket Bundle React Best PracticesReact and Next.js performance optimization guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
-
stuffbucket Bundle Tauri Setup ScaffoldingUse when standing up a new Tauri v2 project from scratch or bolting Tauri onto an existing JS app — running `bun create tauri-app` (or `npm create tauri-app@latest`), picking the framework/package-manager flags, understanding the generated `src-tauri/` layout (`Cargo.toml`, `tauri.conf.json`, `capabilities/`, `icons/`, `src/lib.rs` vs `main.rs`), or invoking `tauri init` to inject Tauri into a repo that already has a Vite/Next/SvelteKit/etc. frontend.
-
stuffbucket Bundle Tauri Debug Test Mock IpcUse when unit-testing the frontend of a Tauri v2 app under jsdom/happy-dom — intercepting `invoke()` calls with `mockIPC`, faking multiple windows with `mockWindows`, spying on `__TAURI_INTERNALS__.invoke` for call-count assertions, simulating Rust→JS events with `shouldMockEvents` (Tauri 2.7+), wiring `clearMocks()` into `afterEach`, polyfilling `globalThis.crypto.subtle` under jsdom, and the Vitest-vs-bun-test compatibility notes.
-
stuffbucket Bundle Tauri Architecture Size OptimizationUse when shrinking a Tauri v2 release binary — tuning the Cargo release profile (`opt-level`, `lto`, `codegen-units`, `panic`, `strip`), enabling `build.removeUnusedCommands`, pruning default features on `tauri` and plugin crates, frontend tree-shaking via Vite `manualChunks` and dynamic imports, optional UPX compression with its platform caveats, and measuring with `cargo bloat` and `du`.
-
equinor Bundle Neqsim Unisim ReaderReads Honeywell UniSim Design / Aspen HYSYS .usc files via COM automation and converts them to NeqSim ProcessSystem / ProcessModule structures. USE WHEN: a user has UniSim/HYSYS simulation files and wants to recreate or compare the model in NeqSim. Covers COM API navigation, column AttachedFeeds/AttachedProducts connectivity, component mapping, E300 fluid transfer, operation-handler registry strategy, topology reconstruction, sub-flowsheet handling, batch regression against the UniSim sample library, and result verification.
-
equinor Skill Neqsim Trapped Liquid Fire RuptureFire rupture study workflow for blocked-in liquid-filled pipe segments and blowdown pipe fire heat-up / time-to-rupture strain-rate screening. USE WHEN: a task asks for trapped liquid, blocked-in liquid, thermal expansion rupture, fire exposure without relief, PFP demand, flange/pipe rupture screening, supplied blowdown pressure profile, pipe wall heat-up, strain-rate rupture time, or generating a Word/HTML safety study from P&IDs, line lists, piping specifications, material certificates, and fire documents. Anchors on neqsim.process.safety.rupture plus trapped inventory, document retrieval, pressure-profile handoff, and source-term handoff.
-
equinor Skill Paperlab Source PDF To HTMLSkill: PaperLab Source PDF to HTML
-
equinor Skill Paperlab Interactive HTML LabsDesign safe interactive HTML labs from PaperLab notebooks, with bounded inputs, static fallbacks, and student prompts. Use when turning computational examples into guided learning activities.
-
equinor Skill Paperlab Book Typesetting ReleaseFinal production review for PaperLab books across HTML, PDF, DOCX, and ODF. Use for responsive layout, page breaks, equation rendering, table overflow, caption style, running headers, figure placement, and release-candidate polish.
-
equinor Skill Paperlab Figure Accessibility StyleAudit PaperLab figures for accessibility, readability, engineering plotting conventions, print safety, and style consistency across chapters.
-
the-utopia-studio Bundle Platform Vs VentureDraws the ownership line for an AI build. For every component it decides one of three things: Daedalus (the studio platform) builds it once and the fellow inherits it, the fellow builds it because it is their moat, or it is a rented commodity. Fires on "build vs buy", "build or use the platform", "what does Daedalus give me", "do we build our own eval harness / RAG / router", "what's ours vs the studio's", "should we build our own model". Returns a build/buy boundary map that splits each component into platform substrate (inherit) and domain signal (build), and kills two errors: rebuilding a platform primitive, or buying/outsourcing what is actually the moat. Not for sequencing the moat into dated gates (use moat-design-canvas), not for laying out the component pipeline and effort split (use compound-system-architecture — run it first), not for writing the actual guardrail rules and thresholds (use guardrail-design).
-
the-utopia-studio Bundle Vercel React Best PracticesReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
-
the-utopia-studio Bundle Compound System ArchitectureFires when a fellow is ready to design how the AI product is actually built — "architect the product", "how do we build the AI system", "design the AI system", "what's the system architecture", "what does the stack look like". Returns a compound-system architecture (input → router → retrieve/reason/act → validate & guardrails → output over a data layer), a 40/20/30/10 effort-allocation plan, and named model-swap points, then kills any monolithic one-big-prompt design. Do NOT fire to write the pass/fail scope (use eval-first-spec), to render the HTML/SVG picture (use design/architecture-diagram), or to argue defensibility (use moat-design-canvas).
-
viktorsbaikers Skill Devrites API InterfaceShape stable API, type, module, or frontend/backend contracts before implementation. Use when a slice crosses a boundary; not for internal helpers.
-
viktorsbaikers Bundle Devrites Frontend CraftBuild accessible production UI and all states during /rite-build. Use for frontend or design-system implementation; not for polish or design exploration.
-
oleg-koval Skill Macos Menubar AppBuild a production-quality macOS menubar or notch app in SwiftUI, covering MenuBarExtra setup, sandbox entitlements, keyboard shortcuts, sound effects, accessibility permissions, and /critique-driven polish cycles. Use when starting or extending a macOS agent app that lives in the status bar or Mac notch area.
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 pc-accessibility, unslop, ccr. 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.