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.
-
tanstack Bundle Render MarkdownParse Markdown with parseMarkdown or parseInline, render HTML with renderHtml, renderDocument, renderBlock, or renderInline, configure frontmatter and heading IDs, and reuse the serializable MarkdownDocument AST. Load for @tanstack/markdown core syntax, parser options, HTML output, references, footnotes, lists, tables, or AST work.
-
tansuo2021 Bundle Altium Circuit InvestigatorEvidence-led analysis of Altium schematic and PCB designs using netlist tracing, full symbol-pin coverage, connector and PCB pad inventories, local schematic screenshots/SVG labels, component topology, and explicit uncertainty. Use when Codex must understand, document, review, or map hardware from .SchDoc, .PcbDoc, .PrjPcb, Gerber, screenshots, or exported schematic images, including MCU pin maps, external port definitions, firmware/software functions, sensors, actuators, power rails, and unclear circuit blocks.
-
tegnike Bundle AI Break Duel Card AdditionAdd or modify AI Break Duel cards end-to-end across the React/TypeScript game, headless simulation, decks, UI text, generated card art, documentation, tests, and commits. Use when the user asks to add a summon, command, relic, card effect, deck entry, card wording change, card image, or card-balance rule in the ai-break-duel repository.
-
theultimateshyam Bundle Vault IngestAutonomously ingest any content into an Obsidian-style knowledge graph vault. Accepts URLs, pasted text, uploaded files (.md, .txt, .pdf, .html, .docx). Outputs entry notes, atomic concept notes, and MOC updates written directly into the vault. Use this skill when the user says "ingest this", "add to vault", "add to knowledge graph", "capture this", "save this article", "save this to my second brain", "process this into my vault", "add this to obsidian", or pastes a URL/article text and asks to save, capture, or process it, or uploads a document and asks to add it to their knowledge graph.
-
theultimateshyam Bundle Website BuilderAgent-based static website builder. Uses a multi-agent iterative pipeline (Architect, Builders, Inspector, QA Lead, Guardian) to build a Next.js static site from existing assets or specs, with autonomous planning, parallel execution, critic-driven review, and static export. Only use this skill when the user explicitly invokes it by name ("website-builder") or asks for "agent-based website building". Do NOT trigger on general web dev questions, simple code help, or casual mentions of Next.js. The user must clearly want the full orchestrated build pipeline.
-
thomascasali Skill Deploy ProductionWorkflow unificato per deploy Docker+Traefik su VPS. Supporta deploy backend-only, frontend-only, full, e no-cache per tutti i progetti con Docker Compose + Traefik + Let's Encrypt.
-
timeplus-io Bundle Pulsebot App BuilderBuild real-time Timeplus data processing and analysis applications in Pulsebot. Creates pure frontend HTML/JavaScript apps that connect directly to Timeplus Proton via @timeplus/proton-javascript-driver (UMD), visualize live streaming data with @timeplus/vistral (UMD), and follow the Timeplus UI style guide. No npm build or bundler required — output is a single self-contained HTML file.
-
tmoody1973 Bundle Prod Readiness CoachScans repository controls and scripts, not user journeys: access control on request handlers, CI/CD pipeline, structured logging, error tracking, secrets management, CLAUDE.md/AGENTS.md, resilience and runbooks, multi-surface deployment and coordinated rollback risk, irreversible migrations, test coverage, and dependency security. Runs a deterministic script, then produces two plain-English documents: a beginner-friendly audit explainer and a phase-gated Claude Code fix brief. Detects the repo's stack (frameworks, deploy platforms, runtimes) and loads matching stack-specific reference material so advice reflects real platform gotchas instead of generic checklist language. Repository-level checks run on any language; stack-specific checks are strongest on Node and Next.js, good on Python, and report what they could not check elsewhere. Use when a user asks to audit, check, or review a repo for production readiness, best practices, or launch-blockers, or asks to turn code-quality/DevOps findings into something
-
tomasz-tomczyk Skill CritReview code changes, a plan, a live page (running dev server), or a local HTML file with crit inline comments. Use when asked to review code, a plan, a diff, or a running web app, when you want structured human feedback on your work, or when authoring crit comments programmatically. Covers the interactive review loop plus crit comment, crit share, and GitHub PR sync.
-
tomasz-tomczyk Skill Design ExploreGenerate multiple design explorations for a UI feature, each inspired by a different company's design language. Spawns parallel agents that research a company's style, then implement a standalone HTML prototype. Use when asked to "explore designs", "design options", "compare UI approaches", or "design sprint".
-
typecellos Skill Debug SkillInstructions for navigating and debugging BlockNote in a browser. Shows how to open specific menus & toolbars, as well select content. Should be used when prompted to fix a bug that requires inspecting the editor's appearance or rendered HTML.
-
nbsp1221 Bundle React Performance ReviewReviews React components for avoidable rerenders.
-
neur0map Skill Prowl Repo ExplorationUse when reviewing or understanding a code repository, exploring an unfamiliar codebase, finding where a function, symbol, component, setting, or keybind is defined, tracing who calls or imports a file, or extracting how a specific feature works. Reach for prowl-agent before grepping and reading many files to answer these structural questions; keep grep and glob for literal text and filename scans.
-
newesp Bundle HTML To NextConvert native HTML files in temp/ into a maintainable, reusable Next.js component system and pages while preserving visual and layout fidelity.
-
newesp Bundle Frontend Visual QAReview or implement frontend UI/UX changes with visual QA. Use when Codex works on layout, responsive behavior, toolbars, buttons, modals, panels, forms, overflow/clipping, text fitting, overlap, drag/drop affordance, loading/download feedback, or any user-visible interface polish.
-
newesp Bundle Elementor Compatible WebpageCreate one self-contained, browser-previewable HTML webpage whose structure can be deterministically converted into native editable WordPress Elementor Containers and Widgets. Use when a page must be delivered as exactly one HTML file for preview and later Elementor conversion.
-
nikiforovall Bundle Run AI SdlcUse when the user wants to run, serve, build, export, screenshot, smoke-test, or otherwise drive the ai-sdlc site — a team folder of YAML rendered as three interactive figures. Covers the dev server, the ai-sdlc CLI (serve/export/check), the one-file HTML export, and browser-driven verification of the drawer, view switch, and role filter.
-
nikiforovall Bundle Quality GatesThis skill should be used when the user wants to run code quality checks (linting, formatting, type checking, tests) on the lazyclaude project. Use this skill when asked to "run quality gates", "check the code", "run tests", "lint the code", or verify code quality before committing.
-
nirholas Skill API RouteCreate new Next.js API route handlers with rate limiting, auth, and validation. Use when: adding REST endpoints, webhook handlers, public API routes, or authenticated API routes. Covers GET/POST handlers, rate limiting with Redis, Zod validation, and error responses.
-
nirholas Skill New ComponentScaffold React components using shadcn/ui and project patterns. Use when: creating new UI components, feature components, client components with interactivity, or server components for data display. Covers props, imports, Tailwind styling, and optimistic updates.
-
onatm Bundle Docs ArchitectureMaintain system and domain architecture docs such as `docs/ARCHITECTURE.md`, `web-architecture.md`, or `api-architecture.md`. Use when topology, shared patterns, cross-component flows, deployment model, or ownership boundaries change.
-
one-ie Skill SdkUse the ONE backend (@oneie/sdk) from this frontend via the plugin-backend wrapper. Invoke when reading/writing ONE data in API routes or SSR.
-
one-ie Skill AstroAstro 7 conventions for ONE sites — plugin wiring via one.config.ts, OneChat/OneTrack placement, Cloudflare SSR. Invoke when editing .astro files or astro.config.mjs.
-
one-ie Skill React19React 19 conventions in ONE sites — client islands, @oneie/react hooks, no useEffect for ONE data. Invoke when editing .tsx components.
-
onejs Bundle One GuidesGuides and recipes for One framework. Covers authentication, images, CSS optimization, dark mode, Tamagui, MDX, OpenGraph images, ISR, skew protection, native iOS builds, EAS, CRA migration, and common issues.
-
onejs Bundle Building With OneComplete guide for building full-stack React apps with One framework. Covers routing, layouts, navigation, components, hooks, typed routes, styling, configuration, devtools, and cross-platform (web + native) development.
-
openchoreo Bundle Openchoreo DeveloperApplication-level OpenChoreo work via the control-plane MCP server — deploying services, configuring workloads, consuming managed-infrastructure Resources, promoting releases, managing secret references, inspecting runtime. Use when the user says 'deploy my service', 'add a component', 'rebuild from source', 'use a database', 'promote to staging', 'rollback', or 'why is my pod crashing'.
-
buiducnhat Bundle VisualizeCreate source-adjacent HTML visualizations for /visualize requests, docs, markdown, standardized plans, process flows, charts, Mermaid diagrams, context maps, and recommendation diagrams.
-
getstream Skill Dev PatternsStyling and structure conventions for stream-chat-react. Use when adding or editing components, SCSS, or icons in this repo—file layout, styling folder structure, SCSS imports, and icon placement.
-
getstream Skill AccessibilityMaintain WCAG-focused accessibility in stream-chat-react. Use when changing interactive components, dialogs, menus, forms, media controls, notifications, focus behavior, keyboard flows, aria attributes, or screen-reader announcements.
-
ghosttypes Bundle JestComprehensive JavaScript testing with Jest 30.0. Use when writing tests, debugging test failures, setting up Jest in projects, configuring test runners, mocking modules and functions, writing async tests, snapshot testing, framework integration with React or React Native, or any Jest-related task
-
grafana Bundle AI Sdk Parity ReviewReview any requested ai-sdk scope against the registered upstream Vercel AI SDK parity baseline. Use for PRs, the current git diff, a branch range, a package or directory such as providers/anthropic, a reported bug, a new feature, stream chunks, SSE framing, provider messages, provider request conversion, orchestration, tools, output, provider options, frontend interop, or conformance fixture changes.
-
jhd3197 Skill Code ReviewRun a full-codebase audit of CachiBot using 8 parallel review agents (DRY, Security, API, Data, Frontend, Tests, State, Observability). Each agent reports findings with file paths and line numbers, compiled into a dated report.
-
joe-bell Skill Tailwind CSS V4Reference for Tailwind CSS v4 syntax and the differences from v3.x. Use when configuring Tailwind (CSS-first @theme config, @import "tailwindcss"), using new v4 features (container queries, 3D transforms, gradients, composable variants, @utility/@custom-variant/@plugin), or migrating v3 patterns. This repo is on v4 — do NOT emit v3 syntax like tailwind.config.js, @tailwind directives, or bg-gradient-*.
-
nullpond Skill Minimax PDFHTML-first PDF production skill for reports, papers, and structured documents. Must be applied before generating PDF deliverables from HTML.
-
shadcn-labs Bundle Tailwind To StylexMigrate TailwindCSS to StyleX. Use when converting Tailwind `className` utility strings into `stylex.create` with `stylex.props` or `stylex.attrs`. Use for one component or a whole codebase in React, Preact, Solid, Svelte, Vue, Qwik, react-strict-dom, and other JavaScript frameworks supported by StyleX. Trigger on tailwind-to-stylex, tw-to-stylex, or any request to move code from Tailwind to StyleX.
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 render-markdown, altium-circuit-investigator, ai-break-duel-card-addition. 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.