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.
-
bitfoundation Skill Bitify UIModernizes Blazor pages by replacing raw HTML elements and custom CSS with Bit.BlazorUI components and theme-aware styling, using the bit BlazorUI MCP tools to discover components and verify their exact APIs. Use when the user asks to bitify a page, replace HTML/div/button/input markup with Bit components, remove hardcoded colors, make a page theme-aware or dark-mode ready, or says "run bitify".
-
bitfoundation Skill Localize StringsMoves hardcoded user-facing strings out of Razor/C# files into AppStrings.resx and rewrites the call sites to use IStringLocalizer with nameof(AppStrings.Key). Use when the user explicitly asks to localize a page or component, extract hardcoded text, apply translations, fix missing resource strings, or says "run resx" / "move these strings to resx".
-
excellence-wh Skill Pbl Style GuideParcoach 教案统一输出规范 —— 锁死品牌主题、版式 token 与内容→版式映射。保证所有生成的 PBL 教案(文档/PPT/HTML)视觉与模板统一。被 pbl-lesson-builder(生成内容)与 pbl-workflow-orchestrator(导出阶段)共同引用。Use whenever producing or exporting any Parcoach lesson plan / 教案 deliverable — enforce the fixed brand theme, tokens, and layout mapping. Triggers: "统一", "模板统一", "UI 统一", "按规范输出", "brand", "style guide".
-
excellence-wh Skill Pbl Feedback IterationPBL 教案/交付物交付后的反馈与迭代 —— 编排流水线的阶段4。收集老师/家长对教案或导出文件的反馈,定位需要改的地方,决定回到哪个阶段修订。Use AFTER a lesson plan (pbl-lesson-builder) or deliverable (pdf/pptx/html-ppt) is produced and the user gives feedback. Triggers: "不满意", "改一下", "再调整", "孩子进度不对", "太简单/太难", "换格式", "重新做". Routes feedback to the correct earlier stage; does NOT silently regenerate.
-
excellence-wh Skill Pbl Workflow Orchestrator编排 Parcoach(亲导)项目端到端执行流程 —— 从知识点到可交付的 PBL 教案文档/PPT。Use as the entry orchestrator when a parent or teacher brings a knowledge point (知识点) / 主题 and wants the full pipeline run. Pipeline: ① 澄清盘对知识点(knowledge-point-clarifier)→ ② 生成 PBL 教案 → ③ 导出交付物(pdf / pptx / html-ppt)。Triggers: "生成一套 PBL 教案", "帮我按流程做一份教案", "从知识点到 PPT 全流程", "orchestrate / 编排 / 走全流程". Delegates to sibling skills; does not re-implement what they already own.
-
gigs-slc Bundle React NativeComplete React Native and Expo optimization guide combining Callstack profiling with Vercel code patterns. Covers FPS, TTI, bundle size, memory, lists, animations, state, UI, and React Compiler. Use for any React Native performance, debugging, or best practices task.
-
gigs-slc Skill Data FetchingUse when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.
-
skillmedev Skill Prototype SpecTurns a static design into a numbered, testable, dev-ready specification covering every state, interaction, breakpoint, motion detail, and edge case the mockup cannot show. Use when someone asks "write the spec for this screen", "engineering keeps asking what happens when", "document the interactions before handoff", "what states does this component need", or a build came back wrong because behavior was never written down. Do NOT use for the motion token details themselves - use motion-spec instead; for verifying a finished build against the spec, use design-qa-checklist.
-
skillmedev Skill Color AccessibilityAudits and repairs color palettes against WCAG contrast thresholds - 4.5:1 for body text, 3:1 for large text and UI components, 7:1 for AAA - and makes them safe for color-blind users, delivering a verified pairing table. Use when someone asks "does this color pass contrast", "make my brand color accessible", "is this palette color-blind safe", "why did my contrast check fail", or is remediating color findings from an audit. Do NOT use to invent a brand palette from scratch - use color-palette-builder instead; for a full accessibility review beyond color, use accessibility-audit.
-
taosheng777 Bundle Stock Screener问财选股——按筛选意图筛池子 + 数据化打分排序,输出 Top-N 名单(HTML + 对话精简版),软提示交给 stock-buddy 深度分析。只筛不分析。触发:选股、筛股、筛选股票、筛池子、找票、选几只票、按条件选股、强势股、放量突破、低位反转、业绩成长、主力异动。不触发:分析某只持仓、要不要买、某只股票怎么样、企稳了吗(这些归 stock-buddy)。
-
xindaan Bundle Spec DiffErstellt einen vollständigen, bijektiven Vergleichsreport zwischen zwei Versionen einer technischen Spezifikation (PDF, DOCX, Markdown, HTML, XML/XSD oder Textdateien). Verwende diesen Skill immer wenn der User zwei Versionen eines Dokuments oder einer Spezifikation vergleichen will — egal ob "Vergleich", "Diff", "Delta", "was hat sich geändert", "Änderungsanalyse", "compare versions", "changelog erstellen", "Unterschiede finden", "v6 vs v7", "alt gegen neu", oder ähnliche Formulierungen. Auch geeignet wenn der User ein Änderungsdokument, eine Migrationsübersicht, ein Delta-Dokument oder eine Impact-Analyse zwischen Dokumentversionen erstellen will. Funktioniert mit einzelnen Dateien ebenso wie mit ganzen Dokumentfamilien (z.B. mehrteilige TRs, Normen, Standards mit Schema-Paketen).
-
youren1320 Bundle API ContractReview and plan API contract changes across producers and consumers. Use for endpoint paths, methods, request or response fields, pagination, errors, uploads, status values, authentication context, or frontend/backend contract mismatches such as 404 and undefined fields.
-
a2uicatalog Bundle A2ui Atomic CatalogRenders real interactive UI — charts, gauges, steppers, dashboards, decision trees — for AI agents instead of generating raw HTML. Use this skill when a user needs to SEE something rather than read a description of it, and the host (Claude, another MCP client, a Gemini Enterprise agent) can display rendered visuals or open a link. Do not use for plain prose answers, for data retrieval (this renders data, it does not fetch it beyond a few declared sources), or on hosts that cannot display HTML.
-
a2uicatalog Skill A2ui ComposeCompose an A2UI payload (typed atom blocks) and render it into real HTML — a chart, dashboard, status board, decision tree, or any structured UI, once the right atoms are already known (see the a2ui-catalog skill for picking them). Use when asked to SHOW something rather than describe it, and the host can display HTML or open a link. Not for connecting a new agent/host to the MCP server itself (see a2ui-mcp).
-
abh80 Bundle ScalajsBuild, scaffold, debug, and explain Scala.js applications — full-stack browser apps, Node.js targets, cross-platform libraries, and everything in between. Use this skill whenever the user mentions Scala.js, scalajs, sbt-scalajs, ScalaJS, or wants to compile Scala to JavaScript. Trigger also for tasks like: writing Laminar/Tyrian UI code, creating JS façade types for npm libraries, integrating ScalablyTyped, setting up Vite + Scala.js, cross-compiling JVM/JS code with sbt-crossproject or Mill's CrossJSModule, debugging fastLinkJS / fullLinkJS output, or adding scalajs-dom / cats-effect / ZIO to a Scala.js project. This skill covers sbt AND Mill build tools, Scala 2 AND Scala 3, and all common UI stacks (Laminar, Tyrian, scalajs-react, Slinky). Always use this skill — do not rely on general Scala knowledge alone — because Scala.js has unique constraints around JS interop, module splitting, WebAssembly output, and build wiring that differ significantly from JVM Scala.
-
adobe Bundle S2 DocsLook up Spectrum 2 (S2) component documentation, design guidelines, and usage patterns when building with React Spectrum or Spectrum Web Components. Use when the user mentions Spectrum, S2, React Spectrum, RSP, Spectrum Web Components, or SWC, or names a Spectrum component (Button, Picker, ComboBox, TextField, ActionButton, etc.). Helps prevent drift from documented S2 design decisions during prototyping.
142 -
adobe Skill Design DataLook up Spectrum design tokens, component schemas, and design-system decisions when building with or extending Adobe Spectrum. Use when the user asks about token values, component options, naming conventions, or wants to validate/explore design-token data. Also triggers when a .design-data.toml config is involved or the user mentions the design-data CLI.
142 -
agentpub-io Bundle Agentpub PublishUse when asked to publish, host, deploy, or share an HTML page, report, dashboard, visualization, or static files to a live URL, or when agentpub is mentioned. Static sites only (no server-side compute).
-
agusabas Bundle Google Merchant FeedGenerate a valid Google Merchant Center product feed (RSS 2.0 / XML) from any backend. Use this skill when the user needs to create or fix a Google Merchant feed, product XML feed, Google Shopping feed, or integrate products with Google Merchant Center. Covers all required and recommended fields, validation rules, common pitfalls, and backend-specific implementations for Django/Python, Node.js, and Next.js API routes.
-
foodhy Skill Page ResourcesCreate full-page Library templates (category pages, type page) with HTML/CSS/JS snippets and Lab demos. Use when adding copy-paste page layouts like about-page, landing-page, or portfolio templates.
-
gu-zt Bundle Write Readme HeaderCreate or revise README opening headers with a centered HTML block containing a project icon, H1 title, bold one-line tagline, and language navigation, including a complete Simplified Chinese counterpart when README.md exists but README.zh_CN.md is missing. Use when Codex needs to polish a README introduction, reproduce a GugleFS-style centered masthead, standardize bilingual README files, add README branding, or complete a missing Simplified Chinese README translation.
-
intellihelper Skill Compose UICompose production pages and Expo screens with IntelliHelper UI components — settings, dashboards, auth, CRUD tables, empty/loading/error states, mobile nav, and glass-stage layouts. Use when building screens, layouts, or multi-component flows rather than installing a single primitive. Prefer registry composition over custom shells. Triggers include Expo / React Native screens using @native/ components.
-
intellihelper Skill Add ComponentInstall IntelliHelper UI components into a project correctly: init components.json, resolve dependencies, run CLI add (web slugs or @native/<name> for Expo), verify imports, and audit. Use when the user wants to add, install, scaffold, update, or diff IntelliHelper/shadcn-style or React Native components, fix missing components.json, or wire the registry. Triggers: "add button", "add @native/button", "install dialog", "npx @intellihelper/cli", "init components.json", "update components", "registry add", "expo components".
-
jonathanbeck1 Bundle Ether ScrollLenis + GSAP ScrollTrigger bridge for Astro + three.js sites built on the ether engine (ether/scroll exports ScrollBridge + createScrollProgress). Documents the rAF-shared loop, conditional smooth-scroll by quality tier, the canonical trigger patterns (progress-scrub via the engine factory; class-toggle and body-flag inline), and the scroll-progress-to-3D handoff. Triggers on Lenis, ScrollTrigger, smooth scroll, scroll-driven animation, scroll progress, scroll-bound camera, scroll-bound shader uniform, parallax, scroll pinning, scrollytelling, scroll restoration, scroll cue, scroll cascade, persistent canvas + scroll, scroll-driven shader uniform. Do NOT use for non-scroll GSAP timelines, CSS scroll-snap, or basic anchor-link smooth scrolling.
-
jonathanbeck1 Bundle Ether ThreejsPremium three.js technique reference for studio-grade WebGL. Use this skill BEFORE writing any three.js code on a premium-tier deliverable. Contains annotated reference work, vetted technique recipes, reusable GLSL shader snippets, performance budgets, and a slop checklist for self-review. Triggers on writing three.js code, building WebGL scenes, designing 3D web experiences, scene architecture, geometry strategy, instancing, camera and render-loop setup, performance budgets, scroll-driven 3D, persistent-canvas routing, premium agency-grade WebGL. Do NOT use for non-3D TypeScript, plain DOM/CSS animation, or review-only passes — use the threejs-audit command to critique existing 3D code. For GLSL, fragment/vertex shaders, ShaderMaterial, the iridescent material, vertex displacement, MSDF/extruded 3D text, or the bloom+dither postprocessing composer, use ether-shaders instead.
-
lucas-fong Bundle HTML Report Stable BaseUse when supplied content or an existing HTML report needs a stable editable browser shell in either long-screen single-page mode or 16:9 PPT mode, including global and per-element styling, ECharts canvas support, standalone HTML delivery, or optional PPTX export in PPT mode.
-
lucas-fong Bundle Echarts ChartsCreate interactive Apache ECharts charts and dashboard-ready HTML from Excel, CSV, JSON, tables, or pasted data. Use when Codex needs to make charts, visualizations, dashboards, ECharts options, interactive HTML charts, or convert analysis results into bar, line, pie, scatter, heatmap, radar, funnel, map, or combination charts.
-
maoyuanyang Bundle Project DevUse ONLY when the user explicitly asks to implement, change, fix, refactor, or deliver work on one selected feature or component of a project that already has (or will get) its documents: new features, changes, bug fixes, refactors, technical-debt paydown, and dependency upgrades. Drives read context, interview, Feature Spec, implementation plan, tests, code, verification, and documentation sync, plus GitHub delivery (issue, branch, pull request, CI, review) when the project has collaboration enabled. MUST NOT be used for read-only review, diagnosis or explanation only, ordinary Q&A, Greenfield initialization (project-start), recovery of an undocumented repository (project-onboard), or independent whole-project verification against the documents (project-verify).
-
michaelyochpaz Bundle Playwright CLIBrowser automation via playwright-cli for coding agents. Open browsers, navigate pages, take accessibility snapshots, interact with elements including canvas and WebGL content, capture screenshots, inspect network and console, manage cookies and storage, and generate Playwright test code. Use when the user mentions browser testing, web page inspection, taking screenshots, investigating page elements, UI testing, end-to-end testing, web scraping, data extraction, userscripts, or any browser-based interaction. Do not use for ordinary execution of existing Playwright test suites (use npx playwright test) or simple static page fetching. Use for interactive test debugging, authoring, or healing when browser inspection or control is needed.
-
mineru98 Bundle Webapp ConsultantTransform vague requirements into detailed specifications for HTML + Tailwind + vanilla JS web apps. Use when customers describe features vaguely, need project documentation, or want technical specifications without backend.
13 -
raghavganesh7 Bundle Contract AnalyzerAnalyze an employee contract or offer letter to find red flags, calculate in-hand salary after taxes, research local labor laws, and generate a beautiful HTML dashboard report.
-
rahuldas-dev Bundle A2ui DevelopmentGoogle's A2UI (Agent-to-UI) protocol — declarative agent-generated UI, message envelopes, component catalogs, and data binding. Use when an agent needs to render rich interactive UI (not just text) declaratively across web/mobile/desktop, when parsing or emitting createSurface/updateComponents/updateDataModel/deleteSurface messages, when building a native A2UI renderer or emitter from the wire spec, or when validating a payload against the official A2UI schema. Do NOT use for agent event/streaming lifecycle concerns (run/step/tool-call/reasoning events) — this skill covers only the UI-rendering payload format, not the transport or event stream carrying it.
-
serennity007 Bundle Deep Analysis个股深度分析的核心工作流。当用户要求"深度分析 / 全面分析 / 帮我看看 / 值不值得买 / DCF / 机构建模 / 首次覆盖 / 投委会备忘录"等涉及个股研究的请求时触发。覆盖 A 股、港股、美股,产出 22 维数据 + 66 位大佬量化评审 + 6 种机构级估值建模 (DCF/Comps/LBO/3-Stmt/Merger) + 7 种研究产物 (首次覆盖/财报解读/催化剂日历/投资逻辑追踪/晨报/量化筛选/行业综述) + 6 种决策方法 (IC Memo/DD/Porter/单位经济/VCP/再平衡) + 杀猪盘检测,最终生成 Bloomberg 风格 HTML 报告 + 社交分享战报。关键词:股票、个股、深度分析、估值、DCF、comps、首次覆盖、IC memo、杀猪盘、龙虎榜、akshare。
-
connorwhite-online Skill IterateSet up iterate in the current project. Detects one or more React apps (Next or Vite) in a monorepo, discovers dev-script quirks and env files, wires up the adapter, and configures the MCP server.
-
coralogix Bundle Opentelemetry CollectorOpenTelemetry Collector deployment, configuration, and troubleshooting for Coralogix users. Use when writing or debugging collector configs — the `coralogix` exporter (`domain:` vs `endpoint:`, `${env:CORALOGIX_PRIVATE_KEY}` bracket syntax, `coralogix/resource_catalog` variant), the universal processor chain, agent → cluster-collector → gateway topology, spanmetrics/tail_sampling/k8sattributes placement, component stability checks, data-safety/redaction routing including `url_sanitizer`, `sanitize_span_name`, `allow_all_keys`, and before/after validation for broad sanitizer over-sanitization, spanmetrics cardinality protection, and Coralogix-specific presets. Covers the `otel-integration` Helm chart (EKS/GKE/AKS/ OpenShift, GKE Autopilot Warden, EKS Fargate), ECS EC2 daemonset, ECS Fargate sidecar, Linux/Windows/macOS standalone, Docker, and the universal installer. Not for OTTL authoring (use the `opentelemetry-ottl` skill) or OpAMP supervisor/Fleet Manager internals beyond the config-precedence callout.
-
craft-studio-marketplace Bundle MarkitdownConvert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more. Use when converting documents to markdown, extracting text from PDFs, processing office files, or when user mentions document conversion, PDF to markdown, or file extraction.
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 bitify-ui, localize-strings, pbl-style-guide. 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.