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.
-
dobroslavradosavljevic Bundle Tanstack Start 3Build, review, debug, configure, migrate, or plan TanStack Start React applications with current docs. Use for TanStack Start, @tanstack/react-start, file-based routing, route colocation (-components/-hooks/-lib beside routes), feature modules (src/modules reusable code), pathless layouts, TanStack Router integration, Vite/Rsbuild setup, SSR, streaming, server functions, server routes, middleware, loaders, TanStack Query integration, environment variables, sessions/auth, deployment, hosting, and Next.js migrations.
-
zytedata Bundle Scrape 3Build a full-site or multi-page Scrapy spider to get structured data from a website, in a new project or added to an existing one. Do not use for analyzing locally saved HTML, fixing or debugging an existing spider, schema-only or existing-spec work, Scrapy Cloud operations, or advisory questions.
-
zytedata Bundle Scrape PlanPlan a web scrape and author a validated extraction spec — explore a detail page, discover fields, confirm the schema, then validate it with more pages, HTML-variant comparison, extracted values, and an optional browser review, and present the plan for approval.
-
zytedata Bundle Scrapy ExtraRead this BEFORE writing, modifying, debugging, or explaining any Scrapy or web-poet code — spiders, page objects, pipelines, settings, selectors — down to a one-line fix, or scaffolding/configuring a Scrapy project, scrapy-poet, scrapy-zyte-api, or browser rendering. These libraries moved on since your training cutoff; invoke this FIRST. NOT for building a scraper for a given site (scrape), a saved HTML file (scrape-analyze-page), or Scrapy Cloud deploy/jobs (zyte).
-
zytedata Bundle Scrape Analyze Page 3Extract structured data (all available fields with values) from a page saved locally as an HTML file, optionally following a schema. Do not invoke when the user provides a URL. When invoking, pass the user's full request verbatim as args — do not pre-parse file paths and don't rephrase it.
-
xiaohanzhao123 Bundle PlanboardBrowser-reviewable L1 acceptance-spec planning for non-trivial code or data changes. Use when the operator asks for planboard, a plan they can annotate in the browser, or a spec of "what must be true and how we verify it" before code. The Orchestrator runs a GQM intent interview, elicits requirements each fused to an acceptance gate, hardens every gate with a mutation-style attack via Codex sub-agents, then renders an annotatable HTML spec. Do not use for trivial one-file edits, quick questions, or research/docs tasks whose success has no writable verifier.
-
cyhzzz Bundle Platform Adaptation 2多平台改写子技能:将审校后的初稿改写为各平台适配版本。 输入:初稿 + 风格档案 + 平台列表 输出:7个平台的文件(微信HTML/小红书/微博/知乎/头条/抖音/哔哩哔哩) 由主管道 Step 6 调用。
-
incluud Skill Migrate 2Plan and execute migrations to Astro or between Astro versions with minimal regressions.
-
incluud Skill Docs Lookup 2Look up official Astro documentation and answer version-sensitive Astro questions accurately.
-
incluud Skill Add Integration 2Add and configure Astro integrations, adapters, and UI framework tooling.
-
incluud Skill Create Component 2Create Astro components, pages, and layouts with accessible markup and minimal client-side JavaScript.
-
incluud Skill Content Collection 2Set up and evolve Astro content collections with typed schemas and reliable querying patterns.
-
carlsz Skill UX AuditSuite roll-up — fan out to the default UX auditors (usability, accessibility, cuj) against one target, with web performance available opt-in, normalize all findings into the shared .ux/audits contract, and produce one combined go/no-go roll-up. Use for "full UX audit", "audit everything", "ux-audit".
-
carlsz Skill Render ReportRender existing .ux/audits reports into self-contained, offline HTML pages — findings as cards, the captured screenshots as an interactive walk-through flipbook, plus the roll-up dashboard and an index landing page. Use for "render the report to HTML", "HTML view of the audit", "open the audit in a browser", "flipbook walkthrough", "make a shareable report page".
-
hassancs91 Skill Make VoxBuild a Vox-style LAYERED-COLLAGE vertical short end-to-end — script + scene dissection into image layers, layer production (AI images via gen_image.py + cutout.py, HTML→PNG, SVG-in-TSX), choreographed TSX assembly on the collage kit (CollageBoard camera, parallax, cutouts, chips, routes), frame QA, render, then voice/SFX via the shared machinery. Use when the user wants a "vox style", documentary, or explainer-collage short, a map-travel or archival-history sequence, or to continue the vox-N series — the paper-collage look, not plain TSX animation (that is make-short) and not video-model pixels (that is make-ai-short). Defers raw TSX crash rules to vidtsx-2d-generator and SFX taste to suggest-sfx.
-
hassancs91 Bundle Vidtsx 2d GeneratorGenerate production-ready 2D TSX video files for VidTSX (Remotion-based) from a shot, scene, or video description. Use whenever the user wants to create or generate a VidTSX video, a 2D TSX shot or scene, an animated clip, title card, or rendered motion graphic — including when they describe a visual animation they want built, or say "make a shot", "build this scene", "generate the TSX", or "turn this into a video". Covers the mandatory file structure and composition config, dimension presets (horizontal/vertical/square), six style presets (minimalist, memphis, neo-brutalism, glassmorphism, neon, corporate), and the hard rules that keep renders from crashing, covering frame-based animation only (no useState/useEffect/setTimeout), strictly monotonic interpolate ranges, Easing.bezier not wrapper syntax, and the chroma-js and @remotion/paths import gotchas. Not for 3D/three.js compositions, general React work, or editing video files.
-
kelly-griffith Skill Openapi To Full StackOrchestrates openapi-to-spring-api, spring-api-to-service, and openapi-to-web-ui into one sequential pipeline that turns an OpenAPI spec into a complete, tested backend service and frontend web app in a single run. Expects three inputs — an OpenAPI spec (file, URL, or pasted), a backend directory, and a frontend directory — and runs each phase as its own subagent so the orchestrating context stays small. Verifies the running service's generated OpenAPI document against the source spec before handing that document to the frontend, and finishes with e2e tests against the live backend. Use when the user provides an OpenAPI spec and asks for a full stack, a backend plus frontend, or an end-to-end app built from the spec in one shot.
-
mae616 Skill UI Designer 2Design UI as information architecture + interaction + visual tone, then translate into implementable specs. Apply when discussing screen design, component design, design systems, or visual hierarchy.
-
mae616 Skill Creative Coder 2Translate motion, interaction, and visual experience into implementable constraints while preserving accessibility and performance. Apply when working on animations, transitions, scroll effects, or micro-UX.
-
mae616 Skill Accessibility Engineer 2Apply semantic HTML/JSX and WAI-ARIA correctly and minimally. Apply when implementing any UI, especially forms, interactive components, or when accessibility is mentioned.
-
mae616 Skill Usability Psychologist 2Evaluate UI/flows from cognitive load, error prevention, and accessibility perspectives. Apply when reviewing UX, discussing user confusion, high drop-off, or form usability issues.
-
mae616 Skill Frontend Implementation 2Translate designs and UI requirements into robust, extensible implementations. Apply when converting designs to code, implementing components, fixing broken UI, or handling responsive layouts.
-
majico-xyz Skill UI Motion ExpressiveApply per-brand expressive motion from DESIGN.md §7 — ask user about intensity, recommend Motion One for React repos, always respect prefers-reduced-motion.
-
maskshell Bundle Parallel Development 2Parallel-development orchestrator: runs multiple AI agents in parallel on independent dev tasks. Use it whenever the user wants to implement several features or components at once, work in parallel, do TDD (red-green-refactor, tests first), safely refactor code modules, coordinate backend and frontend simultaneously, or manage multi-agent tasks. Also trigger on "同时做", "并行实现", "test first", "red green refactor", or whenever multiple independent subtasks are identified. Platforms: iOS/Apple (Xcode, Swift, SwiftUI, XCTest, XCUITest, SPM, Simulator); Python (FastAPI, Django, Flask, SQLAlchemy, Pydantic, pytest, poetry, uv, pyproject.toml); Rust (Rust, cargo, Cargo.toml, clippy, rustfmt); Web/frontend (React, Vue, Svelte, TypeScript, JavaScript, Node.js, Express, Next.js, Playwright, ESLint, dependency-cruiser); Java (JDK 17+, Maven, Gradle, JUnit, Checkstyle, google-java-format); Go (Go, golang, go.mod, go vet, golangci-lint, go test). Trigger readily, even without an explicit "parallel" or "TDD" keyword.
-
mihaideyu Bundle Obcloud UX Issue TriageOBCloud 用户反馈自动化分发:从用户反馈(文本、语雀文档、截图、表格)提取问题, 按角色职责分流分析,输出结构化评估,并在对应 Dima 空间和项目创建需求或缺陷。 只要用户提到体验问题打捞、用户反馈分拣、设计师问题清单、语雀问题表解析、 OBCloud UX 问题、非设计师功能问题、自动建 Dima 需求/缺陷、体验问题转需求,就应使用本 skill—— 即使用户未明确说「skill」或「triage」。 非 Cursor/Codex Agent 默认交付交互式独立 HTML(非纯文本清单); MCP 反馈须结合 queryObUserDataV2 与 queryObUserBehaviorInfoV2 做画像与行为综合分析。
-
leksgg Bundle Security AuditAudita la seguridad de un repositorio, una ruta o los cambios de una rama cuando el usuario lo pide. Verifica origen, recorrido e impacto de cada vulnerabilidad y presenta hallazgos priorizados y correcciones propuestas. Soporta Node/TS, MongoDB, Cloudflare y React/Next.
-
nadernabil216 Skill Review PrUniversal PR review workflow for any AI assistant to verify architecture, clean code, SOLID design, and test quality in any programming language. Two modes: simple (default) reviews the diff with severity-ranked findings; advanced adds existing-comment dedup (never repeat what reviewers already said — agree/reply/react instead), security/performance/dependency review, and optional build+test verification in a temporary worktree. Use when asked to "review PR 123", "review this MR", "review this branch against develop", "compare and review feature/x", or "do a deep/advanced/thorough review of this PR".
-
andydixon Bundle SecurityauditRun a deep, evidence-based (secure code review, adversarial or blackhat-style assessment, threat modelling, cryptography, credential hygiene, memory safety, dependency and configuration review, denial-of-service analysis, frontend robustness, application security and security-focused code hardening) security audit of a software project, or repair confirmed findings when invoked with --fix. Fix mode applies evidence-backed repairs in Git, runs appropriate tests, and commits successful fixes while preserving existing functionality.
-
damien-xai Bundle FrontendSvelteKit frontend workflows: compact layout, components, API routes, state, and Vitest. Use when adding a page, component, CSS, +server.ts endpoint, client/server state, or unit tests, or when the user runs /frontend.
-
moonshine-software Bundle Moonshine Component 2Create custom MoonShine display components for dashboards, widgets, badges, and UI decoration. Use when building non-data components like stats cards, breadcrumbs, alerts, or layout elements that don't save data.
-
moonshine-software Bundle Moonshine Components 2Build MoonShine admin panel UI with Blade components — tables, forms, cards, modals, navigation, and page layouts. Use when creating admin interfaces, data tables with actions, form layouts, or any UI using MoonShine's component library.
-
novelsavage Bundle Mori UIDesign, implement, redesign, and review web interfaces in Mori's subject-driven, operational UI style while preventing generic AI-generated aesthetics. Use for UI/UX, frontend, dashboards, admin panels, forms, data visualizations, landing pages, design systems, or visual audits, especially when the user asks for MoriらしいUI, AIっぽさを消す, AI slopを避ける, 紫グラデを使わない, 影付き角丸カードを減らす, or ポエミーな文章をやめる.
-
podman-desktop Skill Unit Testing 2Guides writing and maintaining Vitest unit tests for the bootc extension's backend, frontend, and shared packages. Covers mocking @podman-desktop/api, RPC clients, Svelte stores, and Node.js modules. Triggers when creating or modifying .spec.ts files, fixing Vitest failures, or adding test coverage.
-
podman-desktop Skill Svelte UI Design 2Guides designing and building Svelte 5 UI components in the bootc extension. Covers @podman-desktop/ui-svelte components, Tailwind CSS, Svelte 5 runes, page layouts, tables, forms, and upstream component patterns. Triggers when creating or modifying Svelte components, building UI pages or forms, working with the component library, or asking about frontend design patterns.
-
podman-desktop Skill Extension Development 2Guides end-to-end feature development in the bootc Podman Desktop extension. Covers the extension lifecycle, architecture overview, RPC communication, build system, and extension points. Triggers when adding features spanning backend and frontend, understanding the extension lifecycle, or needing an architectural overview of how the pieces connect.
-
qqqqqf-q Skill Activity RecordQuery and orchestrate Arkloop Activity Record local activity data. Covers browser history, search terms, screen time, bluetooth, shell commands, window focus, keyboard, mouse, clipboard, screen content (accessibility tree), microphone audio transcription, and Codex sessions.
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 tanstack-start, scrape, scrape-plan. 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.