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.
-
bastidood Bundle Svelte Best PracticesSvelte 5 and SvelteKit conventions for explicit reactive ownership and component lifecycles. Use when creating or reviewing Svelte components, runes, context, or form actions.
-
bastidood Bundle Shadcn Svelte Best Practicesshadcn-svelte and Bits UI conventions for accessible primitive composition and customization. Use when creating, wrapping, restyling, or reviewing those components.
-
bastidood Bundle Tanstack React Query Best PracticesTanStack Query conventions for cache-backed React server state. Use when creating or reviewing React queries, mutations, query keys, or cache updates.
-
bastidood Bundle Tanstack React Table Best PracticesTanStack Table v9 conventions for stable React table schemas and instance behavior. Use when creating or reviewing React tables, columns, metadata, or rendering.
-
bastidood Bundle Tanstack Svelte Query Best PracticesTanStack Query conventions for reactive, cache-backed Svelte server state. Use when creating or reviewing Svelte queries, mutations, query keys, or cache updates.
-
bastidood Bundle Tanstack Svelte Table Best PracticesTanStack Table v9 conventions for static Svelte table schemas and reactive instance data. Use when creating or reviewing Svelte tables, columns, metadata, or rendering.
-
dmitriyyukhanov Bundle RenderRenders an existing tour-spec.json to a single-file interactive HTML guide via the bundled Node renderer. Use when the user has hand-edited a tour-spec.json, when learning-guide:analyze hands off after drafting, or when the user explicitly asks to "render the tour", "regenerate the HTML", or "update the embedded sources". Idempotent for generated artifacts; preserves user-edited README and tour-spec.json.
-
dmitriyyukhanov Skill Unity ArchitectUse when designing Unity architecture, creating component hierarchies, defining interfaces, or generating test stubs and Mermaid diagrams for Unity projects
-
dmitriyyukhanov Skill Learning GuideUse when the user asks to "create a learning guide", "make an interactive tour", "generate onboarding doc", "build a learning module", or any variant of turning an artifact (codebase, planning session, refactor plan, design doc) into an interactive HTML guide. Dispatches to learning-guide:analyze for new tours or learning-guide:render for re-renders after spec edits. Also use when the user is uncertain which step they need.
-
ag2ai Skill Ag2 Ag UIExpose an AG2 `Agent` over the AG-UI protocol so a frontend (CopilotKit, custom React/Next.js, or any AG-UI client) can stream responses (text and reasoning), render tool calls, sync shared state, and track sub-task steps. Wraps the agent with `AGUIStream(agent)` and mounts it in FastAPI via `stream.dispatch(...)` or `stream.build_asgi()`. Use when the user wants a web frontend in front of an AG2 agent rather than a CLI / script.
Audited -
anbanai Bundle Content WritingWrites articles with style guidance, removes AI traces, converts Markdown to WeChat HTML, and checks content compliance. Use when writing articles, removing AI traces, converting Markdown to WeChat HTML, or checking content compliance.
-
anbanai Bundle Article PublishingCreates and manages WeChat news article drafts (图文草稿) with HTML formatting. Use when creating or managing WeChat news article drafts. Also use when user mentions '发草稿', '发布文章', '创建草稿', 'publish draft', '草稿箱', or when the article pipeline reaches the draft publishing step.
-
anbanai Skill Remotion Video OverlaysUse when video-use needs React/Remotion-based parameterized motion graphics, reusable video templates, data-driven animated cards, or component-based overlays.
Audited -
arjuncrevathi Skill MayaReact frontend standards for a Supabase + FastAPI stack — components, hooks, state, data fetching, forms, and chat UI. Use when writing or reviewing React components, hooks, JSX/TSX, frontend state management, client-side data fetching, or building chat/streaming UI.
-
arjuncrevathi Skill GarudaPerformance and latency optimization across backend, frontend, and LLM calls. Use when something is slow, when investigating latency, or when asked to optimize or improve performance.
-
arjuncrevathi Skill PushpakaVercel deployment standards for the React frontend — environments, env vars, preview deployments, domains, caching, and rollback. Use when deploying the frontend, configuring Vercel projects or environment variables, debugging a Vercel build or preview, or setting up domains and rollbacks.
-
getstoreconnect Bundle Storeconnect ComponentsStoreConnect reloadable Liquid components and storefront interactivity — the {% component %} tag and its reload events, {% context %} state that survives a reload, lazy and deferred rendering, remote {% form %} wiring, the JSON page-response API, and HTMX/Alpine integration. Use when part of a StoreConnect page must update without a full page load (live cart, cart badge, cart drawer, quick view, live filters, vouchers, shipping rates, stock), when wiring JavaScript into a theme so it survives a component reload, or when choosing a frontend architecture for a theme.
-
getstoreconnect Bundle Storeconnect Sync DeploySafely deploy changes to a StoreConnect store with connected StoreConnect tools, storeconnect-cli, or an explicitly approved Salesforce workflow. Covers target confirmation, rollback baselines, validation, preview, human approval, supported cache refresh, verification, and cleanup. Load before pushing or publishing any theme file, CSS, content block, translation, or store configuration, and before taking a store live.
-
getstoreconnect Bundle Storeconnect Theme DevelopmentChange how a StoreConnect storefront looks or is structured — override base-theme templates by key (pages/blocks/snippets/layouts/components/helpers), ship brand CSS through theme-supplement.css or the store's custom styles, author custom content-block templates, and set theme variables. Use for storefront styling, header/footer/layout work, new block templates, theme assets and packs, starting a theme from scratch, or diagnosing an override that silently does not apply. For template logic and record data inside a file use storeconnect-liquid.
-
carlnaddy Skill React FrontendSkill: react-frontend
-
carlnaddy Skill Spring React IntegrationSkill: spring-react-integration
-
cody-sims Bundle Security ReviewPerforms threat-focused security review of a code change or component using STRIDE, checking authentication, authorization and ownership, input validation, injection, deserialization, SSRF, secrets handling, dependency and supply-chain risk, cryptography, and untrusted data including prompt injection. Use when reviewing a diff, feature, endpoint, or integration for vulnerabilities, threat modeling, or hardening before merge or release.
-
dolphinllc Skill Nextjs Attack ProbeAuthorized self-pentest probe targeting Next.js App Router-specific weaknesses. Tests NEXT_PUBLIC_* secret leakage in client bundles, server-action invocation without auth, ISR/cache poisoning via Vary mishandling, route-handler CORS misconfig, image proxy SSRF, and middleware matcher gaps. Use when the user asks to "pentest" their own Next.js app.
-
dolphinllc Skill Nextjs Security ScanDefensive security scan for Next.js App Router projects. Detects environment-variable leakage to the browser bundle, unauthenticated server actions, missing middleware auth, unsafe CORS on route handlers, and trust-boundary violations in revalidatePath/revalidateTag. Invoke when the user asks to "review", "audit", or "scan" a Next.js codebase, or when editing files under app/ or middleware.ts.
-
dolphinllc Skill Openai Sdk Security ScanDefensive security scan for code using the OpenAI SDK (openai Python, openai Node). Detects API keys in client bundles, function-calling handlers without argument validation, missing structured-output schema, untrusted attachments fed to vision/Assistants, model output rendered as HTML, and verbose logging of full prompts. Invoke when the user asks to "review", "audit", or "scan" code that calls openai.chat.completions, responses, or assistants APIs.
Audited -
dolphinllc Skill Vercel AI Sdk Security ScanDefensive security scan for the Vercel AI SDK (`ai` package). Detects unbounded experimental_attachments, streamText output rendered as HTML, tool execute handlers running shell from args, useChat endpoints without auth, generateObject schemas missing strict mode, and onFinish leaking content to telemetry. Invoke when the user asks to "review", "audit", or "scan" code using the AI SDK.
-
anthropics Bundle GraphingCompose polished charts (timeseries, bar, line, area, pie, scatter, or anything else the data calls for) from tabular data using the chartkit primitives, producing PNG, SVG, or self-contained interactive HTML. Use when the user asks to chart, graph, plot, or visualize data and wants something better than raw matplotlib defaults.
Audited -
ascend Bundle AI Daily Report收集并生成AI领域热门报告。触发条件:用户要求获取AI相关信息,如"收集AI新闻"、"获取AI信息"、"有什么AI新动态"、"AI今天发生了什么"、"生成AI报告"、"AI摘要"、"AI周报"、"AI今日动态"等。支持用户指定具体领域(如LLM、CV、NLP、机器人等),支持指定收集条数(不指定默认10条),支持指定时间段(不指定默认"今日"),输出包含md、html、pdf多个版本的文件。
Audited -
ascend Bundle Smtp Email Sender通过SMTP发送邮件。触发条件:(1) 用户要求"发送邮件";(2) 用户要求"发邮件到xxx";(3) 用户要求"把内容发送到邮箱"。支持纯文本和HTML格式,需要用户提供SMTP服务器、端口、邮箱地址和授权码/密码。
Audited -
ascend Bundle AI Content VerifierDetect AI-generated text, analyze content credibility (credible/suspicious/fabricated), and verify resource accessibility (URLs, citations, package names). Use when users want to check if text is AI-written, verify facts in AI-generated content, validate links and references, or assess the trustworthiness of generated content.
Audited -
dandacompany Bundle Tally APIInteract with the Tally.so form platform REST API and webhooks — list and read forms, fetch and export submissions, read analytics, manage workspaces and organization users, and create/verify webhooks. Use when the user mentions Tally, tally.so, a Tally form, Tally submissions/responses, Tally webhooks, or wants to pull form data from Tally or react to Tally form submissions. Trigger phrases include "Tally API", "Tally 폼", "Tally 제출/응답 가져와", "Tally webhook", "tally.so form data".
Audited -
dandacompany Bundle Remove AI MarksRemove multi-vendor AI provenance marks: invisible Unicode (Layer A), statistical text watermarks via rewrite (Layer B, always offer), and C2PA/EXIF/XMP/container metadata on PNG/JPEG/SVG/PDF/DOCX/ODT/HTML/MD. Covers Claude, Gemini/SynthID-class, OpenAI provenance, and open-LLM sampling marks. Use when the user asks to strip watermarks, remove C2PA/Content Credentials, clean AI metadata, remove invisible Unicode, anti-detect clean AI output, or runs /remove-ai-marks (aliases: /remove-claude-marks).
Audited -
dandacompany Skill Marp Slide BuildMarp 마크다운으로 임원 보고용 시장조사 보고서 슬라이드 12~15장을 빌드해 PDF·HTML로 출력하는 표준 패턴. 단테랩스 paper+ink+rust 디자인 가드와 12장 구성 골격을 강제한다. Brand Intelligence Lab 의 슬라이드 제작자 에이전트가 사용한다.
-
dandacompany Bundle Nextjs Tremor ReportBrand Intelligence Lab 의 임원 보고용 시장조사 보고서를 Marp 정적 PDF 대신 Next.js 15 + Tailwind + ECharts 인터랙티브 웹앱으로 빌드해 Vercel 에 배포한다. 단테랩스 paper+ink+rust+slate 디자인 토큰을 Tailwind config 로 강제하고, 5 페이지(홈/SWOT/차트/팩트체크/경쟁사) 표준 구조 · 더미 데이터 컨벤션 · 메타 disclaimer 금지 · ECharts 4종(SerpChart/PriceDistChart/RevenueChart/SocialChart) 패턴을 모두 강제한다. 슬라이드 제작자 에이전트가 깨어날 때마다 이 스킬을 켜고, 분석가 산출물 5종을 받아 동일한 완성도의 보고서를 빌드한다.
Audited -
dcl-regenesislabs Bundle Build UIBuild 2D screen-space UI for Decentraland scenes using React-ECS (JSX). Create HUDs, menus, health bars, scoreboards, dialogs, buttons, inputs, and dropdowns. Use when the user wants screen overlays, on-screen UI, HUD elements, menus, or form inputs. Do NOT use for 3D in-world text (see advanced-rendering) or clickable 3D objects (see add-interactivity).
-
howarewoo Bundle Woostack VisualizeUse to render one self-contained HTML visualization from an exact verified Linear, Plane, or GitHub project/work item/issue, exact PR attribution, or immutable Git source for a chosen audience. Development context is explicit and read-only. The HTML is disposable and never authoritative.
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 remotion-video-overlays, woostack-visualize, render. 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.