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.
-
chrisliu298 Skill JinaFetch web pages or search the web via Jina AI (r.jina.ai / s.jina.ai). Use when WebFetch fails, returns empty/garbage, or for JS-heavy sites: x.com, Notion, SPAs, PDFs at a URL, Cloudflare-gated pages. Also use for grounded web search with full-page content. Triggers on "fetch this URL", "read this page", "search for", or after a WebFetch error. Do NOT use for simple static HTML.
-
chrisliu298 Skill Arxiv ReaderRead arxiv papers via their TeX source for full-fidelity math, tables, and figures. Use whenever the user shares an arxiv URL or paper ID and wants to discuss or understand the paper — even without "read". Triggers on arxiv URLs (abs, pdf, html), bare IDs like "2401.12345", or "explain this paper". Do NOT use for note generation (use note-gen).
-
digi4care Bundle SvelteSvelte core concepts - reactivity ($state, $derived, $effect), components, stores, transitions, and animations. Use for Svelte language questions. For SvelteKit routing/server features use svelte-kit skill. For CLI/scaffolding use svelte-cli skill.
-
digi4care Bundle TailwindTailwind CSS v4 utility classes - @theme, @utility, @plugin, grid, container queries, flexbox, spacing, responsive design. Use for CSS-only styling with Tailwind utilities. For pre-built components use shadcn-svelte skill. For UX principles use frontend-design skill.
-
digi4care Bundle Svelte CLISvelte CLI (sv) - project scaffolding, add-ons installation, dev/build commands. Use when creating new Svelte/SvelteKit projects or adding features via CLI. For Svelte code questions use svelte skill. For SvelteKit routing use svelte-kit skill.
-
digi4care Bundle Svelte KitSvelteKit framework - file-based routing, load functions, server endpoints, form actions, hooks, adapters, SSR/SSG, and deployment. Use for SvelteKit-specific features. For Svelte reactivity/components use svelte skill. For project scaffolding use svelte-cli skill.
-
digi4care Bundle Svelte MCPSvelte MCP server - AI-assisted Svelte development with documentation access, svelte-autofixer analysis, and playground links. Use specifically for MCP server features. For Svelte code use svelte skill. For SvelteKit use svelte-kit skill.
-
digi4care Bundle Frontend DesignUI/UX design principles for developers - visual hierarchy, spacing, contrast, accessibility (WCAG), component states, interaction patterns, forms, mobile UX. Use for design decisions and UX guidance. For Tailwind CSS use tailwind skill. For shadcn components use shadcn-svelte skill.
-
facebook Skill Test EnvironmentTest environment system (authored DomeGradient and IBLGradient, component schemas) against the poke example using the iwsdk CLI.
-
fixmyberlin Bundle React DevReact 19 + TypeScript for FMC TanStack Start apps: typed components, events, generics, ref-as-prop, Compiler-first memoization, and useEffect discipline (naming, when not to use Effect, alternatives). Use when typing React components/hooks/events, or writing/reviewing useEffect, useEffectEvent, derived state, data-fetch effects, or oxlint React Compiler / Rules of React effect rules. Not for routing/server boundaries (see tanstack-start-* skills).
-
fixmyberlin Bundle Tech StackDefault FMC tech stack for geo-heavy React SPAs: Bun/Vite, React 19, TanStack, maps, styling, TypeScript editor/CLI alignment, tsconfig templates, browserslist client targets, Cursor MCP (Postgres, agent-browser), and when to pick sibling skills. Use when scaffolding a new app, evaluating libraries, setting up Bun install/global store or Knip, changing supported browsers or compat lint, setting up Cursor MCP, or making stack/architecture decisions on existing apps.
Audited -
fixmyberlin Bundle React Map Glreact-map-gl/maplibre patterns for FMC geo apps: declarative Source/Layer (never addSource/addLayer), MapProvider + useMap(), interactiveLayerIds, flat Source/Layer, map-loaded guard, window.__mainMap debug exposure, Map event handlers (not useEffect), URL map state, initialViewState, cursor, feature state, missing images. Use when building or reviewing Map components, layers, click/hover handlers, setFeatureState, map URL sync, or agent/test map inspection in TanStack Start / Vite apps. Reference implementation: tilda-geo/app.
-
fixmyberlin Bundle Rust Wasm GeoRust/WASM geo for FixMyBerlin FMC geo-heavy React apps: when to leave Turf for WASM, crate selection (geo, rstar, fast_paths, osm-reader, i_overlay, …), wasm-bindgen boundaries, and Vite integration for SPAs and TanStack Start. Use when adding WASM geo crates, profiling slow Turf, OSM/routing/isochrones, spatial indexes, or wiring wasm-pack into Vite.
-
fixmyberlin Bundle Playwright SkillE2E testing and browser automation for TanStack Start apps (FMC/TILDA). Use @playwright/test for committed suites/CI; agent-browser MCP (skill tech-stack) for agent exploration; this skill for smoke tests, stubbed auth, map hooks, and quick /tmp scripts. Not for Next.js.
-
fixmyberlin Bundle Touch Ipad ReviewReviews React web apps for iPad and touchscreen usability with Tailwind CSS fixes. Audits touch targets, hover failures, touch-over list highlighting (Headless UI data-focus, Radix data-highlighted, inline rows), Safari/iPadOS quirks, layout fluidity, and FMC cursor conventions. Use when the user asks to review an app for touch, iPad, tablet, or touchscreen-optimized usage.
-
fixmyberlin Bundle Tanstack Better UploadDirect-to-S3 uploads in TanStack Start with @better-upload/server and @better-upload/client (presigned PUT, API route POST handlers, useUploadFiles/useUploadFile, S3 object helpers). Optional react-dropzone add-on only for multi-file drag-and-drop UX. Use for upload API routes, presigned S3, upload progress, post-upload DB persistence, or the dropzone component stack.
-
fixmyberlin Bundle Zustand State ManagementFMC conventions for Zustand v5 in React: file naming, custom-hook-only exports, atomic selectors, actions namespace, small focused stores. Use when adding or reviewing client global state, or debugging unnecessary re-renders and SSR/persist hydration issues. Not for server/async data (TanStack Query) or URL state (nuqs). For API details, middleware, slices, and migration, use the official llms.txt index below.
-
fixmyberlin Bundle Tanstack Router ConventionsTanStack Router conventions for FixMyBerlin/FMC (SPA or Start): validateSearch with Zod, parseSearch/stringifySearch for clean share URLs, map=zoom/lat/lng search param, loader + React Query patterns, typed Link/params, and TanStack devtools. Use when scaffolding a Vite + TanStack Router SPA, wiring router.tsx search serialization, route search params (including map viewport URLs), loaders, or Query integration — without TanStack Start server/SSR topics.
-
internscience Bundle Mol 3d Viewer将 SMILES 或化学名称转换为分子 3D 结构。支持生成 SDF 文件、3D 分子图片和可交互 HTML 网页(可旋转观察)。
Audited -
luka-zivkovic Bundle Publish Pr FeedbackPublish an already-reviewed, digest-locked plan of GitHub PR thread replies and optional resolutions. Use only when the user explicitly invokes $publish-pr-feedback with the exact sealed plan path and SHA-256 digest, or explicitly asks this skill to seal a supplied draft plan for later approval. Verify host, repository, PR node, open state, current remote head, action scope, and plan digest before mutation. Do not judge feedback, edit code, invent or broaden replies, commit, push, merge, rebase, react, approve a PR, or run implicitly.
Audited -
luka-zivkovic Bundle Resolve Pr FeedbackHandle reviewer feedback on an open GitHub pull request. Use whenever the user asks to address, handle, work through, or resolve review comments, open review threads, or bot feedback; this includes prefetched thread data such as review/threads.json and a later approval message that asks the resolver to prepare its unsealed local plan. Fetch unresolved threads plus PR comments and review bodies, judge every item against actual code, apply valid local fixes within authorized scope, and draft replies. After a separate approval names an exact subset and root-confined plan path, prepare only that unsealed local plan. Never post, react, resolve, commit, push, merge, rebase, or approve; remote publication belongs only to explicit $publish-pr-feedback. Do NOT use to produce a new review, discuss one pasted comment, handle feedback without a PR, work on non-GitHub forges, or summarize without changes.
Audited -
olzn Skill PrototypeGenerate N different HTML implementations of a UI feature, preview them, and iterate a few times, a fast "show me the options" loop for exploring what a feature could look like. Default N is 5. Use when the user wants to prototype a UI, explore or compare designs for a feature, says "prototype this", "try a few designs", "explore some options for X", "what could this look like", or hands over a feature with no spec. Marks a quiet pick but does NOT collapse to one winner, research, implement, verify, or open a PR; a chosen direction hands off to the build skill, whose review gates check the result. For editable Paper artboards rather than throwaway HTML, use paper-prototype instead; for whether a state model, business logic, or data shape feels right, use logic-prototype.
-
olzn Bundle Logic PrototypeBuild a single-file HTML demo that answers whether a state model, business logic, or data shape feels right — a pure liftable module driven by free-play buttons and tabbed guided walkthroughs a non-developer can click through. Use when the user wants to sanity-check a state machine or reducer, probe an edge case ("what happens if X then Y"), feel out a data model or API shape before building it, or hand a domain expert something to poke at. For what a UI could look like use prototype; for editable Paper artboards use paper-prototype.
-
olzn Bundle Paper PrototypeCreate Paper-first UI prototype directions, especially after grill-with-docs has settled product and domain decisions. Use to explore layout, hierarchy, density, flow, or visual framing as editable Paper artboards before committing to code, to compare structurally distinct directions, or to turn settled product decisions into an interface. For throwaway HTML explorations rather than editable Paper frames, use the prototype skill instead. For business-logic or state-machine prototyping use logic-prototype, unless the user explicitly asks for Paper output.
-
olzn Skill Post Build ReviewRun a post-implementation review that checks a built change against the intent that was set. Run lint, typecheck, tests, and build; confirm the result matches the chosen design direction and covers its promised states (loading, empty, error, disabled, permission, offline, long content, maximum volume, and partially complete data); check accessibility and responsive behaviour; flag any risky surface; and assemble the handoff evidence a reviewer needs. Read-only — it reviews and reports, it never edits. Invoked automatically by the build skill after implementation, and available manually after a build or a meaningful change, after ui-craft and before opening or finalising a PR, especially when the user asks to verify, review, sign off, sanity-check a built change before handoff, or asks whether a change is ready to ship.
-
kreek Bundle UI DesignUse for frontend UI, layouts, components, responsive behavior, accessibility, WCAG, keyboard, focus.
-
lefant Bundle Mermaid DiagramsBest practices for creating clear, well-structured Mermaid diagrams to visualize hierarchies, file structures, and component relationships.
Audited -
wang-q-l Bundle Vue Admin Generator管理后台框架生成器。采用Vue3 + Element Plus + Vite + TypeScript + Mock.js 。用于快速创建完整的 Web 管理后台系统。使用场景:(1) 需要创建新的管理后台项目,(2) 用户描述了登录页样式、布局方式(左右布局/顶部导航等)、菜单结构、主题颜色等需求,(3) 用户提供参考图或手稿图,通过分析图片中的布局结构、配色方案、菜单结构来生成后台系统,(4) 需要一个带 Mock 数据的前端项目(无需后端),(5) 快速搭建管理系统原型。
Audited -
alexxiang2008 Bundle Hlzd Data VizB2B 销售数据交互式可视化 —— 销售漏斗 / 询盘分析看板 / 客户地理分布地图 / 通用 D3 图表(柱/折/饼/热力/散点/弦图/力导向)。D3.js v7 CDN,输出自包含 HTML。
Audited -
alexxiang2008 Bundle Hlzd Market IntelB2B 跨境贸易市场情报 v0.2 — 抓取 Reddit/X/YouTube/TikTok/Bluesky/HackerNews/GitHub/arXiv 等 14+ 平台 30 天真实用户声音,输出 Top 5 痛点 + 用户原话 + 跨境 actionable 的自包含 HTML 报告(融合 4-agent pipeline + Pain Profile 行业预设 + Voice Contract 7 LAWS)。受众:B2B 跨境贸易老板 / 业务团队 / 选品经理。Use when 用户要做海外产品调研 / 选品 / 痛点分析 / 竞品监控 / 客户声音采集。
Audited -
alexxiang2008 Bundle Hlzd Pipeline VizB2B Skill 链路可视化 —— 消费各 Skill trace JSON,输出 8 KPI 仪表盘 + 漏斗图 + 评级分布 + 决策分布 + halt 警报 self-contained HTML(纯 stdlib + inline SVG,零依赖)。Use when 用户说'链路可视化'、'Pipeline 仪表盘'、'B2B 转化漏斗'、'Funnel Dashboard'、'pipeline metrics'、'trace aggregate'、'B2B analytics'。
Audited -
alexxiang2008 Bundle Hlzd Market ReportB2B 工业品海外市场情报报告生成 —— 9 节结构 HTML 自包含报告(cover / TOC / signals / platforms / comparison / actions / methodology / sources)+ Markdown 简化版。从 hlzd-b2b-research 输出或原始 web 信号自动组装。Use when 用户说'出报告'、'海外调研报告'、'市场情报'、'跨境选品报告'、'做份 deliverable'、'跨境市场扫描 HTML'、'generate B2B market report'、'market intelligence brief'。
Audited -
alxxpersonal Bundle Charm LipglossCSS-like terminal styling for Go with lipgloss v2 - styles, colors, borders, layout, tables, lists, and trees. Use when styling Go terminal output, lipgloss, terminal layout composition, or building styled tables/lists/trees in Go.
-
ankitjh4 Bundle Namma YatriBuild, contribute to, and deploy Namma Yatri — India's open-source, zero-commission ride-hailing platform. Covers Haskell backend, PureScript frontend, Rust services, Beckn/ONDC mobility protocol, Nix-based dev setup, and API integration. Use when working with Namma Yatri, ride-hailing, Beckn protocol, or open mobility.
-
antdigital-ai Skill Agentic UI UsageGuides how to use @ant-design/agentic-ui in applications (install, import, layout, chat, editor, i18n). Use when integrating the library, building chat/agent UI, or asking about component API from consumer perspective. Triggers on 使用 agentic-ui, 集成, 引入, 安装, chat UI, 智能体界面, 接入, import from agentic-ui, ConfigProvider, locale.
-
antdigital-ai Skill Component BubbleDevelop and extend Bubble components (AIBubble, UserBubble, Bubble list) for AI chat messages in @ant-design/agentic-ui. Use when building chat bubbles, message content, streaming display, thought chain in bubble, or voice/copy actions. Triggers on bubble, chat message, AIBubble, UserBubble, message list.
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 svelte, hlzd-market-intel, namma-yatri. 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.