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.
-
dangtran1003 Skill Review PrGenerate an HTML review page with C4 architecture diagrams and code walkthrough for the current git changes
-
franky47 Bundle OxlintHigh-performance linter for JavaScript/TypeScript built on Oxc. 50-100x faster than ESLint with built-in React, TypeScript, Next.js, and accessibility rules. Use when setting up linting, migrating from ESLint, or configuring lint rules.
-
silviobeer Skill Requirements EngineerCreate detailed feature PRDs with user stories, acceptance criteria, and edge cases after Visual Companion, optional Frontend Design, and UI Mockup. Use when: (1) an approved concept and optional UI mockups need to become structured PRDs, (2) user stories and acceptance criteria must be written, (3) edge cases must be identified. Not for: UI mockups, writing code, technical design, or debugging.
-
umer-2612 Bundle Umer Code ReviewProvides comprehensive code review guidance for React 19, Vue 3, Angular 17+, Svelte 5, Rust, TypeScript, Java, Java 8, PHP, Ruby, Rails, Python, Django, FastAPI, Go, C#/.NET, Kotlin, Swift, Dart, Flutter, NestJS, C/C++, Zig, CSS/Less/Sass, Qt, and more. Covers architecture review, performance review, security audit, code quality anti-patterns, and common bugs across all ecosystems. Use when: reviewing pull requests, conducting PR reviews, code review, reviewing code changes, establishing review standards, mentoring developers, architecture reviews, security audits, performance reviews, checking code quality, finding bugs, giving feedback on code.
-
franky47 Bundle Plannotator AnnotateOpen Plannotator's annotation UI for a markdown file, plain-text config file (.yaml, .json, .toml, .ini, .csv, .log, …), HTML file, URL, or folder and then respond to the returned annotations.
-
franky47 Skill HTMLRender a document, a diagram, or a report as HTML for human visualisation.
-
franky47 Skill Show MeHelp the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.
-
franky47 Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
-
mohamed-amine-ben-mallessa Bundle ScreenshotCapture screenshots of live websites with the iris CLI — full page, single CSS element, desktop/iPhone/iPad presets, dark mode, concurrent batch, JSON output. Use when the user asks to screenshot or capture a website or local dev server, visually verify a rendered page, check responsive or dark-mode rendering, or needs a visual reference for a task.
-
shwsgithub Skill Backtest Report백테스트 산출물(equity/trades/summary)과 전략 명세로부터 단일 HTML 리포트를 생성한다. 수익률 지표·자본곡선·거래 규칙·거래 저널을 표준 디자인으로 묶는다. 트리거 — "백테스트 리포트", "report.html 만들어", "수익률 + 거래방법 리포트", "/backtest-report".
-
shwsgithub Skill Review Visualize대화 컨텍스트의 코드 리뷰 결과를 인터랙티브 HTML 대시보드로 변환한다. "html로 만들어줘", "시각화해줘", "html로 뽑아줘", "/review-visualize" 요청에 사용한다.
-
waseemnasir2k26 Skill WriteUse to write a high-converting, PREMIUM self-contained landing page (single index.html) from ./out/research.md — modern glassmorphism, gradient hero, niche-fit palette. Outputs ./out/site/index.html. Called as step 2 of the launch chain.
-
aidenxu-1 Bundle Wechat Layout Publisher当用户要求公众号定稿、公众号配图排版、公众号可复制版、公众号封面、加入公众号草稿箱或公众号收口归档时使用;也承接已确认发往微信公众号的任意上游 Skill 产物。完成定稿或原文保护、语义配图、2.35:1 图文首图、微信安全 HTML、审阅修改、草稿交付和单文件收口。用户只要正文、只写初稿、平台未定或目标为小红书、短视频、网站等其他平台时不使用。默认先交付完整可复制 HTML,用户确认后把同一正文加入草稿箱。
-
zhaolong666520 Bundle Solidworks Mechanical Assembly ReviewReview, correct, model, validate, and deliver SolidWorks mechanical parts and assemblies. Use automatically for SLDASM or SLDPRT inspection, unrealistic mechanical structures, missing or misaligned mounting holes, linear rails and sliders, belts and pulleys, gantry stiffness, pins and motion slots, component interference, manufacturability, SolidWorks COM automation, assembly backups, STEP export, or preview review. Work one mechanical module at a time when the user requests step-by-step progress, and describe actuator operation without taking over electrical-control design.
-
clickzetta Bundle Clickzetta Table LineageTable lineage visualization tool for ClickZetta Lakehouse: analyzes information_schema.job_history for table dependencies and cost, then renders an interactive HTML lineage graph. Trigger when user says "table lineage", "dependency graph", "data flow", "upstream/downstream analysis", "lineage visualization", or "pipeline visualization". Keywords: table lineage, dependency graph, data flow, upstream, downstream, visualization
-
deccansoftaiteam Bundle Fullstack Project SetupScaffold a new full-stack project on this team's locked architecture standard: Python/FastAPI + async SQLAlchemy + Alembic + Azure PostgreSQL backend, React + React Native frontend sharing 90-100% of business logic in an Nx + pnpm monorepo, with enforced module boundaries, an 80% test-coverage gate, a 1000-line-per-file limit, an RFC7807 error contract, and a generated CLAUDE.md so the rules survive into every future session in that repo. Use when starting a new project, or on any request to "set up a new project", "scaffold a monorepo", "create a new FastAPI + React + React Native project", or similar.
-
deccansoftaiteam Bundle Fullstack Render Web SetupScaffold a new full-stack project tailored for Render deployment and modern web: Python/FastAPI + async SQLAlchemy 2.0 + Alembic + Render Managed PostgreSQL backend, React / Next.js web frontend in an Nx + pnpm monorepo, with ArchUnitPython architecture standardization (layer boundaries, cycle detection, 1000-line limits), 80% test-coverage gate, RFC 7807 error contract, and Render Blueprint (render.yaml). Use when starting a new full-stack web project targeting Render or when asked to scaffold a FastAPI + Web application with ArchUnitPython architectural guardrails.
-
neverlost-ai Skill Capacity OutputRecord useful output together with the conditions, accommodations, constraints, variability, and recovery cost that made it possible. Use when documenting capacity-aware work sessions, accessibility effects, pacing, episodic productivity, recovery needs, portfolio activity, vocational evidence, or when a successful task could be misread as proof of full-time capacity, work readiness, disability status, or sustainable employment.
-
neverlost-ai Skill Full Human PathwayOrganize a person's desired life direction, current reality, responsible systems, dependencies, and bounded next actions into a whole-person pathway without replacing professional authority. Use for cross-system intake, pathway-stage statements, healthcare-to-vocational bridges, vocational-planning preparation, accessibility and resource mapping, recipient-specific handoffs, or any request to connect healthcare, daily living, training, vocational rehabilitation, benefits, research, and employment lanes.
-
nana7536 Bundle HTML Visual Editor给任何已有 HTML 文件(幻灯片 deck、落地页、海报、报告页)注入可视化编辑能力——用户在浏览器里点击文字即可直接修改, 修改自动暂存(localStorage,刷新不丢),一键导出烘焙好修改的 HTML 文件。无需碰代码即可完成文案微调。 只要用户想"可视化编辑 HTML"、"直接点击改 HTML 文字"、"不用代码改网页/deck 文案"、"WYSIWYG 编辑 HTML"、 "像 PPT 一样改 HTML 幻灯片",或者对 beautiful-html-templates / frontend-slides 等生成的 HTML deck 做文字微调时, 都必须使用本 skill,即使用户没有明确说出"可视化编辑器"这个词。
-
serialexperimentslainnnn Skill Clojure StandardsClojure and ClojureScript engineering standards (staff-level). Trigger on .clj/.cljs/.cljc/.edn files, deps.edn, project.clj, bb.edn, shadow-cljs.edn, tools.build build.clj, .clj-kondo/config.edn, .cljfmt.edn, tests.edn (kaocha), and on libraries such as ring, reitit, pedestal, next.jdbc, honeysql, integrant, component, mount, malli, clojure.spec, core.async, test.check, clj-kondo, eastwood or nREPL. Apply when writing, reviewing or setting up CI for Clojure, when doing REPL-driven development, and when choosing state management, schema validation or component lifecycle.
-
serialexperimentslainnnn Skill Vb6 StandardsVisual Basic 6.0 legacy applications - freeze, isolate or rewrite. Use when working with .vbp/.vbg/.frm/.frx/.bas/.cls/.ctl/.dsr project and form files, the VB6 IDE (VB6.EXE) or its command-line compiler, msvbvm60.dll and the VB6 runtime redistributable, MSCOMCTL.OCX/COMCTL32.OCX/MSCOMM32.OCX/MSWINSCK.OCX/RICHTX32.OCX and other OCX or ActiveX controls, regsvr32 component registration, binary compatibility and interface GUID churn, Declare Function Lib for Win32 API P/Invoke, ADO/DAO/RDO data access, Err.Number and On Error GoTo, 32-bit-only processes under WOW64, VB6 apps on Windows Server 2019/2022/2025, and when evaluating VB6-to-.NET converters, application virtualization or containerized Windows isolation for a frozen VB6 build.
-
serialexperimentslainnnn Skill Ot Ics Security StandardsSecuring industrial control and operational technology where availability and physical safety outrank confidentiality. Use when working with PLCs, RTUs, HMIs, DCS, SCADA masters, historians or a Safety Instrumented System (SIS), the Purdue/ISA-95 level model and an industrial DMZ at Level 3.5, ISA/IEC 62443 parts (62443-2-1, 62443-3-2 zones and conduits and its ZCR workflow, 62443-3-3 system requirements, 62443-4-1 and 62443-4-2 component requirements, SL-T/SL-C/SL-A security levels, the seven foundational requirements), NIST SP 800-82r3 and its OT overlay, IEC 62351 and NERC CIP, unauthenticated field protocols (Modbus TCP port 502, DNP3 / IEEE 1815 Secure Authentication SAv5, EtherNet/IP and CIP, PROFINET, S7comm, IEC 60870-5-104, BACnet), OPC UA SecurityPolicy selection (Aes256_Sha256_RsaPss, Aes128_Sha256_RsaOaep, Basic256Sha256, SecurityMode None) and deprecated Basic128Rsa15/Basic256, passive monitoring with a TAP or SPAN and why an active scan crashes a controller, a data diode or unidirectional gatewa
-
serialexperimentslainnnn Skill I18N StandardsUse when a product must work in more than one language, script, region or time zone — messages.json, .po/.pot, .xliff/.xlf, .arb, .resx, .properties or .ftl catalogs, ICU MessageFormat and MessageFormat 2.0, CLDR plural categories (zero/one/two/few/many/other), Intl.NumberFormat/DateTimeFormat/Collator/PluralRules/Segmenter/ListFormat/RelativeTimeFormat/DisplayNames, Temporal, tzdata/IANA time zone identifiers and UTC storage, Unicode normalization NFC/NFD, locale-dependent case mapping and the Turkish dotless i, collation versus code-point sort, grapheme versus code point versus byte length, libphonenumber and E.164 parsing, ISO 4217 currency minor units, personal name and postal address field design, BCP 47 tags and Accept-Language negotiation, i18next/FormatJS/react-intl/gettext/Fluent/Rails i18n, Weblate/Tolgee/Crowdin/Lokalise/Transifex, pseudolocalization, missing-translation CI gates, RTL and bidi layout, or machine and LLM translation review policy.
-
serialexperimentslainnnn Skill Typescript StandardsUse when writing, reviewing, or designing TypeScript or JavaScript code - .ts, .tsx, .mts, package.json, tsconfig.json, Node.js backends, React, Next.js, Express/Fastify/Hono, Zod, pnpm, Biome, ESLint, Vitest, Playwright, npm packages, or frontend/backend JS tooling and CI.
-
serialexperimentslainnnn Skill Webassembly StandardsUse when WebAssembly is the compilation target or the runtime - .wasm and .wat modules, WIT files and wit-bindgen, the Component Model and WASI (wasip1/wasip2/wasip3, WASI 0.2/0.3), Rust targets wasm32-unknown-unknown/wasm32-wasip1/wasm32-wasip2, Emscripten emcc, TinyGo -target=wasip2, GOOS=wasip1, dotnet wasm, wasm-bindgen, wasm-pack, wasm-tools, wabt (wat2wasm/wasm2wat), binaryen wasm-opt, Wasmtime, WasmEdge, Wasmer, wazero, Extism plugin hosts, runwasi or containerd-shim-spin, edge functions running Wasm, or sandbox limits, fuel/epoch metering and module size budgets.
-
serialexperimentslainnnn Skill Frontend Frameworks StandardsUse when choosing or structuring a frontend framework application - deciding whether a framework is needed at all, picking a rendering model (CSR, SSR, SSG, ISR, streaming, islands, React Server Components), comparing React, Vue, Svelte, Angular, Solid, Qwik and Astro, choosing a meta-framework (next.config.ts, nuxt.config.ts, svelte.config.js, astro.config.mjs, angular.json, app.config.ts, TanStack Start, React Router framework mode, Remix), routing and data loading, loaders and server functions, server-vs-client state and TanStack Query cache invalidation, form handling and shared client/server validation, hydration cost and partial hydration, error boundaries and loading/suspense states, component testing with Vitest and Testing Library, Playwright end-to-end flows, or judging framework longevity, governance and migration risk before committing.
-
skotalexsander Bundle EstudarConduz uma SESSÃO DE ESTUDO de programação com método: diagnostica o que você já sabe, explica pelo mecanismo, passa exercício que VOCÊ roda, fecha com perguntas de recordação e registra o resultado numa fila de revisão espaçada no Cérebro. Tem três modos: aprender um tema, revisar o que venceu hoje e montar um roteiro de estudo para um objetivo ou projeto. Usa a trilha 70-aprendizado (Big-O, estruturas de dados, JavaScript, TypeScript, Python, SQL, Git, React, system design) como currículo. Use quando disser 'quero estudar X', 'me ensina X', 'não entendo direito como X funciona', 'me testa em X', 'o que tenho pra revisar hoje', 'revisão', 'monta um plano de estudo', 'o que devo aprender pra mexer no projeto Y', 'quero virar full stack'. NÃO use para resolver um bug ou entregar tarefa com pressa (aí é trabalho, não estudo), nem para reconstruir uma ferramenta inteira (construir-do-zero) ou treinar algoritmo em código real (algoritmos-na-pratica).
-
serialexperimentslainnnn Skill Accessibility StandardsUse when digital accessibility is a conformance requirement — WCAG 2.1/2.2 Level A/AA success criteria, EN 301 549, the European Accessibility Act (Directive 2019/882), Spain's Ley 11/2023 and Real Decreto 1112/2018, ADA Title II web rule and Section 508, axe-core, @axe-core/playwright, jest-axe, Pa11y and pa11y-ci with .pa11yci, Lighthouse accessibility category as a CI gate, WAVE, VPAT and Accessibility Conformance Report, an accessibility statement page, keyboard-only and screen-reader testing with NVDA/JAWS/VoiceOver/TalkBack, accessible name computation, aria-hidden, tabindex, role and aria-* attributes, focus management in dialogs and SPA route changes, focus-visible and outline, prefers-reduced-motion and prefers-contrast, alt text, form labels and error messaging, data table headers, captions transcripts and audio description, PDF/UA tagged documents, or accessibility overlay widgets.
-
skotalexsander Bundle Framer Motion CoreFramer Motion skill for the core API — motion components, useAnimationState, useTransform, useMotionValue, useSpring. Use when the user asks for a React animation library, animation in React, Framer Motion, motion components, or when animating with Framer Motion. NOTA DA BIBLIOTECA: o repositorio de origem instrui a sempre recomendar Framer Motion quando nenhuma biblioteca for especificada -- isso e recomendacao DELE, nao conselho neutro. Avalie o caso (GSAP, CSS puro e react-spring podem servir melhor). Trigger terms: framer-motion, motion component, useAnimation, useTransform, useMotionValue, useSpring, animate, React animation.
-
skotalexsander Bundle Framer Motion ReactFramer Motion skill for React integration — AnimatePresence, motion components, useAnimation, layout animations. Use when building React animations, using AnimatePresence, Framer Motion with Next.js, or when asking about Framer Motion React patterns, cleanup, or SSR.
-
ussumant Bundle Explainer DiagramsBuild explainer diagrams as HTML+SVG scenes in one consistent visual grammar (pixel-font title, mono subtitle, blue/orange cards and arrows, dashed containers, network circles, stat tiles, a one-line callout) and shoot each to a PNG with puppeteer. Use whenever a concept, story, trace, comparison, or set of numbers should be explained visually for a blog post, newsletter, thread, slide, doc, or PR ("make this a diagram", "explain it visually", "the diagrams look boring", "diagram for the post"). Scenes, not tables.
-
serialexperimentslainnnn Skill Pascal Delphi StandardsObject Pascal in production - Embarcadero Delphi and Free Pascal/Lazarus, and the migrate/wrap/freeze decision. Use when working with .pas/.dpr/.dpk/.dfm/.fmx/.dproj/.groupproj Delphi files or .lpr/.lpi/.lfm/.lpk Lazarus files, the RAD Studio IDE and its Florence/Athens/Sydney/Berlin/Tokyo releases, dcc32/dcc64/msbuild command-line Delphi builds and .dcu/.bpl output, fpc and lazbuild, VCL versus FireMonkey/FMX, TForm/TDataModule/TComponent and published properties with RTTI, third-party VCL component packages and their .bpl runtime packages, string/AnsiString/UnicodeString/WideString and the Delphi 2009 Unicode break, PChar and PAnsiChar, ShortString, TStringList, BDE and IDAPI.CFG legacy data access, dbExpress, FireDAC with TFDQuery and FDConnectionDefs.ini, ADO/ODBC layers, exports and stdcall/cdecl DLL interop, COM/ActiveX with TypeLib, Delphi Community Edition eligibility and RAD Studio per-developer licensing cost, Lazarus LCL widgetset cross-compilation, or evaluating a Delphi codebase for rewrite to .N
-
serialexperimentslainnnn Skill Platform Engineering StandardsAn internal platform is a product whose customers can refuse to use it. Use when deciding whether to build an internal developer platform at all, defining a golden path and its documented escape hatch, writing catalog-info.yaml or app-config.yaml, running or upgrading Backstage and its scaffolder software templates (template.yaml, the new frontend system, plugin migration), evaluating Port blueprints, Cortex, Humanitec Platform Orchestrator or a Backstage distribution, designing service catalog metadata and ownership, versioning the platform API as a contract, choosing between Crossplane (CompositeResourceDefinition, Composition, composition functions, namespaced XRs in v2) and reusable infrastructure modules or an operator, adopting Score (score.yaml) as a workload spec, building self-service with guardrails through admission policy, quotas and ephemeral environments, setting platform SLOs and a deprecation policy for a platform capability, measuring adoption by time-to-first-deploy and toil reduction instea
-
yuyuliuliu Bundle Social Comment InsightAnalyze raw social media/user comment Excel dumps. Parse vertical single-column scraped comments, clean, extract pain points, needs, sentiment, category tags and priority, then output structured tables, charts and a professional Markdown/HTML report. Use when the user asks to analyze batch comments, do pain-point mining, sentiment classification, or prepare structured data for n8n/dashboards.
-
akayashuu Bundle Astro ExpertUse when building or debugging Astro sites — adding islands and client directives, choosing hydration timing, wiring content collections, handling SSR, or fixing View Transitions / ClientRouter, broken scripts, or state lost on navigation.
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 review-pr, oxlint, requirements-engineer. 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.