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.
-
fajjarnr Bundle Frontend ArchitectPayU frontend architecture for Next.js 16 and React 19 web applications plus Expo 52 and React Native mobile applications, with BFF security, money-safe UI, accessibility, testing, performance, and Context7-first library verification.
-
fajjarnr Bundle Web Artifacts BuilderBuild standalone, self-contained HTML artifacts (interactive demos, PRDs, prototypes, offline tools) with Vite, Tailwind CSS, shadcn/ui, React, and single-file bundling. Covers scaffolding with the shadcn CLI, Vite configuration, Tailwind theming, component patterns, motion, charts, and producing one portable HTML file. Use when creating, building, or bundling a web artifact or demo in any frontend project.
-
flameskydexive Bundle Aibridge Prefab PatchUnity Prefab asset patch workflow for AIBridge. Use when modifying complex prefab assets with prefab patch operations, child or component creation, SerializedProperty writes, array edits, internal GameObject/component references, dry-run validation, or when deciding between prefab patch, inspector set_property, scene object commands, and direct Unity YAML fallback.
-
flameskydexive Bundle Et CodeET framework C# code authoring and review workflow. Use when creating or modifying Entity, Component, System, Helper, message handlers, package dependencies, assemblies, module analyzer boundaries, C# file placement, .meta handling, ECS layering, or component contract logic in WOW/ET packages.
-
fossasia Skill Adding PaneStep-by-step guide for adding a new visualization pane type to Visdom (client, server, frontend, tests)
-
fossasia Skill Environment ViewsWork on environments, compare mode, persistence, and view layouts across server and frontend
-
fossasia Skill Python Client APIAdd or modify Visdom Python client methods with correct server/frontend parity and typing updates
-
fossasia Skill Performance StreamingOptimize high-throughput visualization updates across server broadcast and frontend batching paths
-
fossasia Skill Frontend Pane LifecycleBuild and debug pane lifecycle behavior in the React frontend. Use when adding pane actions, layout behavior, rendering updates, or pane-level interactions.
Audited -
fradser Bundle SwiftuiBuild, refactor, or review modern SwiftUI. Prioritize macOS 26 and iOS 26 Liquid Glass, while covering architecture, state, concurrency, navigation, accessibility, performance, and code quality. Use for any SwiftUI implementation, migration, or review.
580 -
get-convex Skill SuggestProactively suggest the right Convex component when the user hand-rolls what already exists: setInterval polling → crons, counter increments → sharded-counter, .collect() counts → aggregate, email → resend, DB-counter rate limiting → rate-limiter, uploads → storage, search, presence, multi-step actions → workflow, vector DB → rag, collaborative editing → prosemirror-sync. TRIGGER on noticing the pattern in a Convex app, AFTER completing the user's request. NEVER for non-Convex code.
-
gigio1023 Bundle Frontend DesignUse for frontend work that can change what users perceive or operate: components, pages, layout, styling, responsive behavior, forms, data views, interface states, motion, accessibility, visual assets, and UI review. Includes user-visible frontend bug fixes. NOT for backend-only work or frontend configuration and data changes with no interface effect.
-
e-marchand Bundle 4d Add DependencyAdd dependencies to a 4D project. Use when the user wants to add a component, library, or dependency to their 4D project. Supports GitHub repos (owner/repo format), GitHub URLs (with automatic tag extraction from release URLs), and local folder paths. Handles dependencies.json and environment4d.json configuration.
-
fernando-bertholdo Skill AccessibilityUse when building or reviewing UI components to ensure WCAG 2.1 compliance, keyboard navigation, semantic HTML, ARIA attributes, color contrast, and assistive technology support.
-
fernando-bertholdo Skill Animation MotionUse when designing or reviewing UI animations, transitions, and motion interactions. Triggers for animation decisions, performance optimization, accessibility compliance, and gesture handling.
-
jxnl Bundle Audit AI FrontendAudit AI-generated, AI-shaped, or AI-looking frontend code, UI screenshots, and design diffs. Use for prompts like "audit AI frontend", "de-slop UI", "componentize this screen", "parameterize this React/Tailwind/shadcn UI", "make it responsive/accessible", or "review design-system drift"; check component APIs, reusable props/data models, modular composition, shared primitives/tokens, responsive resilience, accessibility, copy quality, hard-coded fixture screens, one-off CSS piles, and generic cards/gradients/fonts.
-
veegee82 Skill Define MetricUse when the agent or the user wants to introduce a new measurable quantity as a first-class loss component — e.g., tracking cyclomatic complexity alongside test_pass_rate, or adding a domain-specific rubric to a reasoning chain. Forbids ad-hoc arithmetic on observations and forbids using a new metric as a load-bearing decision gate until calibration has passed. Extends LDD's loss framework to agent-defined objectives without touching LDD core.
-
oxi-717 Bundle PentestOutside-in black-box security audit of a running web application. Use when the user asks to check a web app / Telegram mini app for vulnerabilities, find security issues, audit an app from the outside, do a pentest / security review of a deployed app. Keywords: pentest, проверь на уязвимости, security audit, найди дыры, vulnerability scan, mini app audit, Telegram mini app, vercel app security, Next.js security, Supabase RLS check. Produces a human-readable report, an evidence log, and per-finding fix files that a coding agent can consume. Four aggression levels L0-L3. NOT for load testing (use loadtest instead) and NOT for hardening the user's own server (use security-hardening instead).
-
maxedapps Bundle Create Changes ReportCreates a self-contained, interactive HTML report that explains completed repository changes as the primary code-review artifact. Use this skill whenever an agent changed code, tests, configuration, schemas, or infrastructure and is about to finish, summarize the work, or hand it off—even when the user did not request a report. Also use when asked to explain or report on completed repository changes. Do not use for read-only code reviews, tasks without repository changes, pre-implementation plans, or live-data dashboards.
-
microsoft Bundle Azuresql DB ScaffoldScaffolds a NEW app (.NET Aspire, FastAPI, Next.js, NestJS) wired to the local Azure SQL Database container as its default dev database. Use when starting/bootstrapping/initializing a project that needs SQL Server or Azure SQL locally, or when adding "set up the database", "docker compose for the db", "create the local DB", ".env connection string", "first migration", or a data-access layer. Use this INSTEAD of the mssql/server SQL Server image, because this is the Azure SQL engine (EngineEdition 5). Triggers include "scaffold app with SQL", "spin up Azure SQL locally", "compose service for the database", "wire up Prisma/EF/SQLAlchemy/TypeORM to SQL Server". Reach for this even when the user only says "add a database" to a fresh project.
2.7k -
microsoft Bundle Azuresql DB FunctionsBuilds a serverless API and event-driven handlers over the local Azure SQL Database container using Azure Functions with the Azure SQL bindings. Use when a user wants "a serverless API over SQL", "Azure Functions with a database", "HTTP CRUD with SQL input/output bindings", "run code when a row changes", "react to inserts/updates/deletes", "event-driven on Azure SQL", or "SQL trigger function". The Azure SQL trigger binding (backed by Change Tracking) is the local event-driven mechanism; Change Event Streaming (CES) is cloud-only and cannot run against the local container. Triggers include "func start with SQL", "SqlTrigger", "SqlInput/SqlOutput binding", "local.settings.json SqlConnectionString". Reach for this when building serverless endpoints or change-driven logic on the local Azure SQL engine.
2.7k -
motion-creative Skill Weekly PerformanceGenerate a week-over-week creative performance slide deck comparing the last 7 days to the previous 7 days. Detects the week type (breakout, fatigue, shift, steady, launch), then builds a narrative arc around the biggest creative insight. Outputs a self-contained HTML slide deck. Activate when users ask for "weekly report", "weekly performance", "week over week", "WoW analysis", "weekly creative report", "performance deck", "weekly slide deck", or "what changed this week".
-
nanford Bundle Hootoolai Ppt为真实工作场景生成高可读、强叙事、网页化展示的 HTML 演示文稿。强调信息压缩、版式决策、设计一致性与企业表达,而不是单纯堆砌卡片和装饰。输出 index.html + assets,可直接浏览器演示。当用户提到"生成PPT"、"做演示文稿"、"创建幻灯片"、"做presentation"、"做汇报材料"、"做slides",或提供了一段内容希望制作成PPT/演示文稿时,必须触发此Skill。
-
nanford Bundle Prototype Orchestrator Pro将口语化需求、会议纪要、聊天记录或半结构化需求文档编排为可交互的单文件 HTML 产品原型。用于”帮我做原型””把需求变成界面””根据会议纪要出后台页面””做个低保真/中保真页面””prototype from requirements””convert notes to UI”等场景;先归一需求,再输出 ProductSpec、页面方案与 frontend-design 渲染指令。
-
nanford Bundle Architecture DiagramDesign polished architecture diagrams, system overviews, platform maps, solution blueprints, technical landscape slides, and layered capability views. Use when creating or revising an architecture visual in HTML, SVG, slides, images, or other visual formats. Default to a connector-free composition with no arrows or relationship lines; communicate structure through containment, aligned layers, grouping, spacing, labels, and restrained color.
-
naticorrea-03 Bundle Meta PromptBuilds ready-to-paste Meta AI (Muse Spark) prompts for reading Instagram, Facebook, and Threads directly. Describe a research goal (find micro-influencers or ambassadors, find videos to react to, monitor brand mentions, scan niche trends, check saturation, mine comments, tear down a competitor, verify handles, study a creator's voice before a pitch) and this skill asks a few clarifying questions, fills the variables (niche, follower range, brand, time window, etc.), and outputs a copy-paste prompt for the meta.ai app. It also hands out the Hook Machine, a full multi-turn workflow that analyzes a creator's top reels, extracts why the winners win, builds a grading rubric, then generates, grades, and rewrites hooks. It never calls Meta AI itself and never invents capabilities. Trigger on "/meta-prompt", "build a meta ai prompt", "meta prompt for <goal>", "find microinfluencers on instagram", "find videos to react to", "monitor mentions of <brand>", "what's trending on instagram for <niche>", "hook machine", "ana
-
naticorrea-03 Skill Working With ClaudeAnthropic's official best practices for collaborating with Claude well, distilled from the Anthropic Academy courses. Covers the 4D framework (Delegation, Description, Discernment, Diligence), Claude's real capabilities and limitations, the prompting techniques that actually move quality, and the operating discipline for Claude Code. Use when starting a build / code / design / strategy task, when deciding what to hand to AI vs keep human, when a prompt is not landing, when evaluating whether Claude's output is trustworthy, or whenever you want to work with Claude the way Anthropic teaches. Complements build-mode (teach-while-building), frontend-design (UI aesthetics), and claude-api (API/model reference); this skill is the high-level "how to collaborate with Claude" layer.
-
nerymurillohnd Bundle Astro CommandsUse when planning or executing Astro project work that depends on Astro CLI behavior, dev or preview servers, integrations, type generation, CI checks, flags, version drift, or official command selection.
-
nerymurillohnd Bundle Svelte ArchitectUse when planning Svelte 5 or SvelteKit app architecture, major features, migrations, routing models, state ownership, adapter strategy, or shared component systems before implementation.
-
nerymurillohnd Bundle Sveltekit EngineerUse when implementing, reviewing, or debugging SvelteKit routes, layouts, load functions, form actions, endpoints, hooks, cookies, auth, env, adapters, redirects, or server-only modules. Do not use for component-only work.
-
nerymurillohnd Bundle Svelte VerificationUse when verifying Svelte or SvelteKit work before completion, including MCP docs, Svelte CLI commands, autofix, checks, tests, builds, preview servers, browser validation, diagnostics, or failure recovery.
-
nerymurillohnd Bundle Svelte Component EngineerUse when writing, editing, reviewing, or debugging Svelte 5 components, .svelte.ts modules, props, runes, snippets, bindings, events, accessibility, styles, or component tests. Do not use for route/server-only SvelteKit work.
-
nguyenvanphituoc Bundle Hill ChartUse this skill whenever the user wants to see how their Shape Up build(s) are progressing — a Hill Chart, a build dashboard, or a portfolio view across pitches. Triggers on: "show me the hill chart", "how's my build doing", "how are my pitches doing", "visualize my pitches", "render the dashboard", "what's the status of my runs", "build portfolio", or any request to see a Shape Up run's progress visually rather than read as prose. Renders a self-contained HTML dashboard: a portfolio card per pitch, and per-pitch detail with a mechanical Hill Chart, an attention list, a scope board, round history, and the full run graph one click deeper.
-
aarvion-ai Bundle Vue ExpertUse when working with .vue single-file components, nuxt.config.ts, vite.config.ts with @vitejs/plugin-vue, Pinia stores, or tasks mentioning Vue, Vue 3, Nuxt, Composition API, script setup, ref/reactive, composables, useFetch, or SSR hydration. Builds Vue 3.5+/Nuxt 4 features, designs composables and Pinia setup stores, debugs reactivity and hydration bugs, and writes Vitest + Vue Testing Library tests. Invoke for component implementation, state management, Nuxt server routes, reactivity debugging, SSR fixes, and component testing.
-
aarvion-ai Bundle React ExpertUse when working in a React 19 / Next.js 15 codebase - .tsx/.jsx files, next.config.ts, app/ router directories, "use client"/"use server" directives, package.json with react or next dependencies. Builds and refactors Server/Client Components, server actions and forms, Suspense/streaming UIs, and TanStack Query or Zustand data layers; debugs hydration and boundary errors. Invoke for adding routes or components, wiring mutations with useActionState, choosing state management, fixing "Cannot use hooks in Server Component" class errors, memoization cleanup under React Compiler, and testing RSC apps.
-
aarvion-ai Bundle Remix ExpertUse when working in a React Router 7 / Remix v2 framework-mode codebase with app/routes, loaders and actions, react-router.config.ts, useLoaderData / useActionData, Form, useNavigation, Outlet, or ErrorBoundary. Builds and refactors route modules, server data loading, mutations, pending UI, nested routing, and route-level error handling. Invoke for adding routes, replacing unnecessary useEffect data fetching, implementing Form/action mutations, fixing nested routing or revalidation bugs, and debugging route errors.
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 swiftui, performance-streaming, frontend-architect. 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.