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.
-
yeshwanthyk Bundle Deep Dive ExplainerResearch a topic and write a connected, long-form explainer with a reusable standalone HTML reading layout. Use for deep dives into technology, science, history, institutions, or practical processes; interactive simulations belong elsewhere.
-
yeshwanthyk Bundle Interactive ExplainerBuild a source-grounded interactive HTML explanation of behavior or state.
-
natejswenson Bundle PressThe one brand system for everything produced in Claude — design tokens, the visual laws, the run-presentation contract, and the universal voice core. Use when composing or restyling any artifact (report, résumé, card, cover, PDF, HTML page, chart), when asked about brand colors, fonts, the accent law or "the PRESS look", when adding a new skill that renders anything, or when a brand value needs to change everywhere at once. Also handles "check the brand is in sync", "why do my colors differ", and onboarding a new consumer repo.
-
natejswenson Bundle ShipreportWrite an executive summary of the work actually shipped over a chosen time frame, built from real GitHub contributions and real Claude Code session transcripts, ranked so only what mattered appears, and rendered as a press-styled HTML report. Use when the user says "what did I ship this week", "shipreport", "write my weekly summary", "executive summary of my work", "status report for my manager", "what did I get done last month", "summarize what I shipped in July", or wants their commits, merged PRs, cut releases and coding sessions turned into a report someone who wasn't there can read.
-
natejswenson Bundle City ReportPull US Census demographic, economic, housing and health data for any American city from the Data USA API, answer questions about it instantly, and generate a polished editorial HTML report. Use when the user asks for a city report, city profile, demographics, census data, population, median income, cost of living, or "tell me about <city>, <state>" — or wants to compare a city against its state and the nation.
-
natejswenson Bundle Press 2The one brand system for everything produced in Claude — design tokens, the visual laws, the run-presentation contract, and the universal voice core. Use when composing or restyling any artifact (report, résumé, card, cover, PDF, HTML page, chart), when asked about brand colors, fonts, the accent law or "the PRESS look", when adding a new skill that renders anything, or when a brand value needs to change everywhere at once. Also handles "check the brand is in sync", "why do my colors differ", and onboarding a new consumer repo.
-
natejswenson Bundle City Report 2Pull US Census demographic, economic, housing and health data for any American city from the Data USA API, answer questions about it instantly, and generate a polished editorial HTML report. Use when the user asks for a city report, city profile, demographics, census data, population, median income, cost of living, or "tell me about <city>, <state>" — or wants to compare a city against its state and the nation.
-
pvsundar Bundle Cgpt InsightsGenerate self-contained HTML activity reports from local Codex session evidence, project SESSION-LOG/HANDOFF/TASKS files, GitHub-root reports, or Claude/Cowork skill inventories. Use when the user asks for insights, usage report, activity report, weekly review, project status dashboard, what have I been working on, coding activity trends, or a polished REPORTS HTML summary.
-
pvsundar Bundle Cgpt Render CheckValidate rendered documents and presentation outputs after Quarto, Pandoc, python-pptx, document export, HTML generation, PDF export, or report build work. Use when the user asks to check, validate, QA, inspect, smoke test, or deliver a rendered DOCX, PPTX, PDF, HTML, Markdown, or generated report.
-
pvsundar Bundle Cgpt Netlify DeployPrepare, deploy, and verify Vite or React single-page apps on Netlify. Use when the user asks to deploy to Netlify, fix a Netlify build, add SPA routing redirects, configure VITE environment variables, link GitHub to Netlify, or diagnose deployment failures such as vite not found, blank screen, cached deploys, or direct-route 404s.
-
pvsundar Bundle Cgpt Canvas FlipcardsCreate self-contained HTML study flipcards and Canvas LMS embed instructions for teaching modules. Use when the user asks for flip cards, study cards, interactive HTML review tools, Canvas iframe embeds, or troubleshooting Canvas pages that strip JavaScript.
-
pvsundar Bundle Cgpt Data Viz AuditorAudit statistical figures, charts, maps, and plotting code for accessibility, labels, color, export quality, and academic journal readiness. Use when reviewing ggplot2, matplotlib, rendered figures, manuscript graphics, maps, or multi-figure submissions before delivery or journal submission.
-
pvsundar Bundle Cgpt Interactive HTML Export HardeningHarden self-contained editable HTML artifacts so export/import, localStorage, controls, and re-opened HTML round trips preserve user edits without JavaScript parse failures.
-
impertio-studio Bundle Cesium Core MemoryUse when a CesiumJS app leaks memory, slows down the longer it runs, crashes the browser tab, or shows a blank Viewer after navigating between views or remounting a component. Covers explicit WebGL teardown with destroy() and isDestroyed(), the order to tear down tilesets, primitives, data sources, and the Viewer, the tileset GPU budget (cacheBytes and maximumCacheOverflowBytes), the roughly 16 WebGL contexts per tab limit, WebGL context loss handling, and how to tell a real leak from a lost JavaScript reference. Keywords: destroy, isDestroyed, cacheBytes, maximumCacheOverflowBytes, maximumMemoryUsage, renderError, rethrowRenderErrors, webglcontextlost, CONTEXT_LOST_WEBGL, WebGL context budget, destroyPrimitives, DeveloperError, memory leak, heap grows, tab crashes, out of memory, context lost, app gets slow over time, too many active WebGL contexts, blank viewer after navigation, how do I clean up a Cesium viewer, why does my map slow down.
-
impertio-studio Bundle Cesium Impl ResiumUse when building a CesiumJS application in React with Resium, the declarative React component wrapper for CesiumJS. Covers the Viewer and CesiumWidget root components, nesting Entity and graphics components, the useCesium hook, and reaching the native Cesium object through a ref and CesiumComponentRef.cesiumElement. Keywords: Resium, reearth resium, React Cesium, useCesium, CesiumComponentRef, cesiumElement, Viewer component, Entity component, Cesium3DTileset component, CameraFlyTo, ImageryLayer, peer dependency, declarative Cesium, Resium viewer blank, cesiumElement undefined, ref is null, component must be inside Viewer, React Cesium not showing, how do I use Cesium with React, add a map to a React app.
-
impertio-studio Bundle Cesium Errors MemoryUse when a CesiumJS app's memory keeps growing, the browser tab slows down or crashes after running a while, or the console reports "Too many active WebGL contexts" or "DeveloperError: This object was destroyed". Covers WebGL resource leaks from missing destroy() calls, teardown ordering, reusing primitives after destruction, entity-removal memory retention, lost-reference bugs that only look like leaks, and exhaustion of the browser 16-context WebGL budget by single-page-app routing or React re-mounts. Keywords: memory leak, heap grows, tab crash, out of memory, browser freezes, app slow over time, WebGL context lost, too many active WebGL contexts, This object was destroyed, DeveloperError, destroy, isDestroyed, PrimitiveCollection, destroyPrimitives, viewer.destroy, how do I clean up a Cesium viewer, why does my Cesium app leak memory.
-
impertio-studio Bundle Cesium Impl Build DeployUse when a bundled CesiumJS app shows a blank globe, logs 404s for Workers, Assets, or Widgets, fails with a worker or bundler error, or when converting a Sandcastle example into a production build. Covers the cesium npm package, the four static directories, window.CESIUM_BASE_URL, the Vite and webpack integrations, ES6 named imports, and the Sandcastle to production workflow. Keywords: CesiumJS build, cesium npm package, CESIUM_BASE_URL, window.CESIUM_BASE_URL, vite-plugin-cesium, CopyWebpackPlugin, DefinePlugin, webpack, Vite, widgets.css, static directories, Workers, ThirdParty, Assets, Widgets, Sandcastle, Ion.defaultAccessToken, ES6 named imports, tree shaking, blank globe, Workers 404, bundler error, worker failed to load, Cesium is not defined, globe is blank, how do I bundle Cesium, how do I deploy a Cesium app, how do I use a Sandcastle example.
-
jie-meng Bundle Md To PDFConvert Markdown files to PDF via a bundled Python script. Supports custom CSS styling, table of contents generation, paper size selection, and landscape orientation. Trigger whenever the user asks to convert, export, or render a Markdown file as PDF, or says phrases like "markdown to pdf", "md to pdf", "convert md to pdf", "export markdown as pdf", "render markdown to pdf", "generate pdf from markdown", "markdown 转 pdf", "md 转 pdf", "把 markdown 转成 pdf", "导出 pdf", "markdown 导出 pdf", "md 导出", "生成 pdf". Also trigger when the user mentions a .md file and wants a PDF version of it.
-
jie-meng Bundle User JourneyDraft and iterate user journey maps and lo-fi wireframes for product managers and business analysts via natural language. Outputs a self-contained workspace with synchronized JOURNEY.md (business + mermaid), journey.json (structured data + screens + arrows), DESIGN.md (visual style), and a dual-view HTML: Canvas (Miro-style overview, all screens on one zoom/pan surface with arrows + minimap) AND Prototype (single-screen click-through with hotspots, breadcrumb, sidebar nav). No build step, double-click index.html. Trigger: "user journey", "journey map", "用户旅程", "用户旅程地图", "wireframe", "线框图", "low-fidelity", "低保真", "product flow", "客户旅程", "user flow map", "draft a journey", "画用户旅程", "出一份用户旅程", "before UX hi-fi", "在 UX 出高保真之前", "PM wireframe", "BA flow", "demo flow", or providing an existing user-journey workspace path to continue work. Also trigger when the user pastes a path to a directory containing JOURNEY.md or journey.json and asks to extend, refine, or present it.
-
ruicore Bundle Paper MCPUse when editing an open Paper board through the local Paper MCP server at http://127.0.0.1:29979/mcp. Prefer this over Computer Use for Paper canvas reads/writes, image placement, HTML writes, node inspection, screenshots, and exports.
-
hugobowne Bundle Here Nowhere.now lets agents publish websites and store private files in cloud Drives. Use Sites to publish HTML, documents, images, PDFs, videos, and static files to live URLs at {slug}.here.now or custom domains. Use Drives as private cloud folders where agents can store files (documents, context, memory, plans, assets, media, research, code, etc), share them with other agents, and continue across sessions and tools. Use when asked to "publish this", "host this", "deploy this", "share this on the web", "make a website", "put this online", "create a webpage", "generate a URL", "build a chatbot", "save this to my Drive", "store this for later", "write this to cloud storage", "share a folder with another agent", or "use my here.now Drive".
-
hugobowne Bundle Verified FrontendHelps an agent and human turn Chip Huyen's verified frontend pattern into a local skill matched to their browser tools, development environments, visual standards, and evidence workflow. Use when setting up or adapting visual verification for frontend changes.
-
tss-blue-ai-lab Skill Frontend DevBuild modern frontend applications with React, Next.js, and Tailwind CSS. Use when: creating web apps, UI components, landing pages, dashboards, or any browser-based interface.
-
tss-blue-ai-lab Skill Fullstack DevComplete full-stack development with frontend, backend, database, and deployment. Use when: building apps that need both a UI and a server, APIs with a database, or any project that spans the entire stack.
-
cryptopafi Bundle LLM CouncilRun decisions through Ole Lehmann's LLM Council: five advisor lenses, anonymous peer review, chairman synthesis, HTML report, and transcript. Use when the user says council this, run the council, war room this, pressure-test this, stress-test this, debate this, or asks for multi-perspective pressure testing of a real decision. ANTI-PATTERN: Do not use for factual lookups, simple yes/no questions, ordinary content generation, or summarization.
-
cryptopafi Bundle Shared ReporterGenerate premium HTML reports from any NexusOS agent. 3 tiers: Card, Full, Immersive. Dark-first glassmorphism. GitHub Pages deploy (primary). VPS fallback. Standardized across all agents.
-
cryptopafi Skill Casino Banner ProductionProduce LP-anchored casino affiliate display banners from a landing page URL and bonus copy. Runs brand harvest, HTML compositor authoring, headless Chrome render, visual critique, iteration, i18n variants, and final JPG delivery for Rewards Affiliates / Casino Rewards style campaigns. Use when asked to make casino banners, display creatives, IAB 250x250/500x500 casino assets, or brand-faithful casino affiliate creatives. ANTI-PATTERN: Do not use for unrelated visual design, generic research, or VOX SMS+ unless explicitly requested as an 800x418 no-CTA variant.
-
yafet-dev Bundle File ReadingAdvanced file read and path traversal testing methodology for bug bounty and application security work. Use when testing or reviewing local file inclusion, arbitrary file read, path traversal, SSRF-to-file-read, PDF/HTML export file inclusion, archive extraction traversal, client download path traversal, container or host file disclosure, metadata file access, and workflows where user-controlled paths, URLs, filenames, or rendering content can expose restricted files.
-
alexisbalayre Bundle Improve Codebase ArchitectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
-
shipshitdev Bundle Component Library 3Expert React/Next.js component architect specializing in creating consistent, reusable, and maintainable components for monorepo projects. Use when creating or refactoring UI components, reviewing component architecture, or setting up shared component patterns in a monorepo.
-
shipshitdev Bundle Tailwind Validator 3Validate Tailwind CSS v4 configuration and detect/prevent Tailwind v3 patterns. Use this skill when setting up Tailwind, auditing CSS configuration, or when you suspect outdated Tailwind patterns are being used. Ensures CSS-first configuration with @theme blocks.
-
rudironsoni Bundle Obsidian Theme Dev 3CSS/SCSS development patterns for Obsidian themes. Load when working with theme.css, SCSS variables, or CSS selectors.
-
rudironsoni Skill Obsidian Plugin Dev 3Comprehensive skill for Obsidian plugin development with TypeScript. Covers plugin lifecycle, CodeMirror 6 editor extensions, React/Svelte integration, Vault API patterns, settings with migration pipelines, SecretStorage, CSS theming, CLI debugging workflow, testing, CI/CD, and community plugin submission. Trigger on: create obsidian plugin, obsidian plugin dev, obsidian API, obsidian editor extension, obsidian CM6, obsidian view, obsidian modal, obsidian settings, obsidian command, obsidian manifest, obsidian publish, obsidian submit plugin, obsidian plugin test, obsidian vite config, obsidian react, obsidian theme, obsidian CLI debug.
-
autonomous-ai Bundle SensingReact to passive device events tagged [sensing:...] — presence, sound, light, fire hazard — with inline emotion markers and optional short speech. Does NOT handle motion.activity (→ wellbeing) or emotion.detected / speech_emotion.detected (→ user-emotion-detection).
-
skyfox675 Bundle XLSXUse this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
-
dailybothq Bundle Deepworkplan Addon Design System 3Optional DeepWorkPlan addon that gives a repo with a user-facing interface surface a DESIGN.md (under docs/, indexed from AGENTS.md) — a Markdown design-system file any coding agent reads to generate interface output consistent with the repo's OWN conventions. Covers three profiles detected independently from real files — visual-ui (rendered web/mobile/desktop UI), cli-output (styled terminal output — semantic colors, panels, spinners, prompts, TTY/NO_COLOR degradation), and conversational (chat/email messaging — voice and register, message anatomy, per-platform rendering). Reasons about the repo's ACTUAL design source (CSS custom properties, Tailwind config, token files, component styles, a CLI display/theme module, or message-composition helpers) rather than copying a brand file; checks contrast (WCAG AA), color-is-not-the-only-carrier, plain-text fallbacks, and token integrity. The visual-ui profile is default-on when detected (applied in trust mode, strongly recommended in guided mode); cli-output and con
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 deep-dive-explainer, interactive-explainer, press. 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.