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.
-
lioensky Bundle Android Native DevAndroid native application development and UI design guide. Covers Material Design 3, Kotlin/Compose development, project configuration, accessibility, and build troubleshooting. Read this before Android native application development.
-
ashchupliak Skill Tanstack QueryTanStack React Query patterns - use for data fetching, caching, mutations, optimistic updates, and server state management
-
julianromli Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
rmusser01 Skill CanvasCreate or revise a requested Canvas using Chatbook's supported HTML, interactive controls, and offline diagrams.
-
yaojingang Bundle GeoflowDevelop or operate GEOFlow across Laravel backend/admin/API/CLI, the default site, themes, leads, and GeoFlow Agent channel sites. Use for code changes, running-system operations, frontend or template edits, channel capability sync, legacy PHP migration, or retired yao-geoflow-cli, yao-geoflow-design, and yao-geoflow-template IDs. Discover real routes first. Excludes unrelated work, database shortcuts, invented routes, auth bypass, secret exposure, raw copying, and unapproved live or destructive actions.
-
devfirexyz Bundle DexiejsBuild and maintain Dexie.js data layers for IndexedDB-backed offline-first web applications. Use when tasks involve Dexie setup, schema/index design, CRUD/query implementation, transactions, live queries, migrations, or debugging in Vanilla JS, React, Next.js, TanStack Start, Svelte, or SvelteKit.
-
devfirexyz Bundle Inference Agent UIBuild agent chat interfaces with ui.inference.sh in React or Next.js projects using shadcn registry components (Agent, Thread, PromptInput, Response, Tool, and widgets). Use for tasks involving AI chat UX implementation, tool-driven widget rendering, Vercel AI SDK stream protocol wiring, or inference.sh runtime uiTransform integration.
-
openwebf Bundle Webf API CompatibilityCheck Web API and CSS feature compatibility in WebF - determine what JavaScript APIs, DOM methods, CSS properties, and layout modes are supported. Use when planning features, debugging why APIs don't work, or finding alternatives for unsupported features like IndexedDB, WebGL, float layout, or CSS Grid.
-
openwebf Bundle Webf Native UI DevDevelop custom native UI libraries based on Flutter widgets for WebF. Create reusable component libraries that wrap Flutter widgets as web-accessible custom elements. Use when building UI libraries, wrapping Flutter packages, or creating native component systems.
-
etewiah Skill Theme EvaluationEvaluate themes for accessibility, contrast, and design issues. Use when auditing themes for WCAG compliance, checking color contrast ratios, or identifying visual/UX problems.
-
hyk260 Bundle API Route ReadabilityReviews and optionally refactors Next.js App Router handlers under src/app/api for human-scannable style: nested ternaries in status/guards, early returns, named booleans, and JSDoc on routes. Use when the user mentions API 接口格式, route 可读性, nested ternaries in route.ts, src/app/api, 嵌套三元, or asks to clean up API handler formatting without changing behavior.
-
hyk260 Bundle Code Readability ReviewReviews and optionally refactors TypeScript/React code for readability: nested ternaries, enum-to-label maps, early returns, oversized JSX expressions, and conditional className composition (cn/cx/template literals). Use when the user mentions ugly/nested ternaries, messy className branches, unreadable JSX conditionals, code style review for readability, 不优雅, 嵌套三元, or asks to clean up similar structures.
-
hyk260 Skill Tailwind Style GuidelinesPureChatNext Tailwind-first styling
-
isatimur Bundle Presentation GeneratorCreate stunning slide decks from notes — vibe → preview → craft. Self-contained HTML plus editable PowerPoint. 75 themes, Studio share links, MCP craft gates. Use for pitch decks, investor updates, keynotes, product launches, sales demos, and any presentation request.
-
oekazuma Skill Setup Svelte VitalsSet up svelte-vitals in a SvelteKit project: inspect what the project already uses, derive a svelte-vitals.config from its markuplint / eslint-plugin-check-file config and its actual directory conventions, measure each candidate rule before adopting it, and hand the remaining targets to `svelte-vitals install`. Use when asked to set up, configure, adopt or onboard svelte-vitals, or to fill in the config file — including the first run on a project that has never used it.
-
prisma-labs-dev Bundle MotionMotion (Framer Motion) React animation library plus local polish and bar-raising guidance. Use for drag-and-drop, scroll animations, gestures, SVG morphing, motion audits, or refining the quality bar of interactive UI work.
-
prisma-labs-dev Bundle UI Animation DirectionHigh-bar guidance for creating UI animation across CSS, native platform primitives, and animation libraries. Use when the task involves transitions, micro-interactions, page motion, scroll effects, motion polish, or raising the animation quality bar so the result does not feel sloppy or generic.
-
sirius-zuo Skill Devops ReportUse when called by the devops dispatcher after config generation to produce a self-contained HTML report with architecture and workflow diagrams embedded as inline SVG
-
solar-luna Bundle Wechat Article Formatter将Markdown文章转换为美化的HTML格式,适配微信公众号发布。应用专业CSS样式、代码高亮、优化排版。当用户说"美化这篇文章"、"转换为HTML"、"优化公众号格式"、"生成公众号HTML"时使用。
-
wxkingstar Skill New CandidateScaffold a new AIO candidate component end-to-end — spec, JSON schema, registry entry, CLI validator, JS renderer, fixture, and SKILL.md update. Use when the user says "add a candidate", "new aio component", "scaffold timeline / progress / code-diff", or otherwise wants to extend the protocol.
-
zeon-studio Bundle Sitepins Cms SetupUse this skill to configure a project (repository) for the Sitepins git-based headless CMS by generating the `.sitepins/` folder — `config.json`, content `schema/*.json`, reusable `snippet/*.json`, and sidebar `arrangement`. Use it whenever the user asks to "set up Sitepins", "add Sitepins to this repo", "create Sitepins schemas/snippets/config", "configure the CMS", "generate .sitepins", or wants any Sitepins settings/schema/snippet file authored for a static-site project (Astro, Next.js, TanStack Start, Hugo, Eleventy, Jekyll, etc.).
-
zeon-studio Bundle Astro Template GuidanceUse this skill whenever you need to understand how the template works, including adding new pages, managing content, configuring pages, using components, understanding project architecture, using scripts, or styling and theming. Use it for ANY question related to the structure, usage, and customization of the project template.
-
awaik Skill Nextjs PatternsAdvanced Next.js patterns and best practices. Covers Server Actions, Route Handlers, cookies handling, useSearchParams with Suspense, parallel routes, intercepting routes, streaming, and common anti-patterns to avoid. CRITICAL for server actions ('use server' directive), setting cookies from client components, form handling, and URL query parameters. Use when implementing mutations, API routes, complex routing patterns, or reviewing code for Next.js best practices.
-
awaik Skill Nextjs FundamentalsComprehensive guide for Next.js App Router fundamentals. Covers layouts, routing, metadata, Server vs Client Components, dynamic routes ([id], [slug], [...slug]), params handling, data fetching in server components, and migration from Pages Router. Use when building Next.js 15+ applications, creating pages with URL parameters, choosing between Server and Client Components, or setting up App Router structure.
-
jacklandrin Bundle App Store ReviewEvaluates code against Apple's App Store Review Guidelines. Use this skill when reviewing iOS, macOS, tvOS, watchOS, or visionOS app code (Swift, Objective-C, React Native, or Expo) to identify potential App Store rejection issues before submission. Triggers on tasks involving app review preparation, compliance checking, or App Store submission readiness.
-
docusealco Bundle Docuseal CLIManage DocuSeal e-signature workflows from the terminal via the DocuSeal CLI - create templates from PDF/DOCX/HTML, send documents for signing, track submissions, and update submitters. Use when the user wants to run DocuSeal commands in the shell, scripts, or CI/CD pipelines. Always load this skill before running `docuseal` commands.
-
docusealco Bundle Docuseal CodeDocuSeal development reference. Embed signing forms and template builder into web and mobile apps (JS/React/Vue/Angular, WebView, JWT, CSS theming). REST API with all endpoints, request/response schemas, code examples (cURL, CLI, Node.js, TypeScript, Python, Ruby, PHP, Go, C#, Java), and webhooks. Use when the user wants to integrate DocuSeal document signing or template management into their application.
-
dotcms Bundle Dotcms Create SitesPlans and builds a complete dotCMS site in two phases. Phase 1 interviews the user and writes PLAN.md (purpose, sitemap, data model, every fact tagged) and DESIGN.md (visual identity tokens). Phase 2 hands off to the dotcms-best-practices skill, which owns the build sequence, and holds the verify-and-fix loop until every page type renders. Stops invented facts shipping as real. Supports both VTL-rendered and headless (Next.js) delivery. Use when someone wants to build, scaffold, or create a new dotCMS site or microsite.
-
dotcms Bundle Dotcms Best PracticesReference for doing any single thing in dotCMS correctly — create a content type, page, template or container; place content; author VTL; wire a headless Next.js frontend; or debug a page that renders blank. Indexed by intent, so you load one file for the task at hand. Use whenever working with dotCMS content types, fields, pages, templates, containers, content placement, VTL/Velocity, the Universal Visual Editor, or a headless dotCMS frontend — and especially when a page renders empty, a slot shows "no component", or a change doesn't appear in LIVE.
-
dqev Bundle Vercel DoctorFind ways to cut your Vercel bill. Run after making changes to catch cost-heavy patterns early in Next.js projects.
-
dqev Bundle Reicon Icon IntegrationInstructions for AI agents to search, select, and render Reicon vector icons across React, Vue, Svelte, React Native, and HTML/SVG formats.
-
dreamiurg Bundle Harness MapGenerate an interactive, self-contained HTML dependency map of a repository's AI harness — skills, slash commands, agents, and MCP servers, with typed evidence-backed edges showing which skills hand off to which, what delegates to which agents, and what uses which MCP servers. Use when the user asks to map, visualize, diagram, or audit their agent harness, skills, subagents, or MCP setup. Works on any repo with .claude/, skills/, or .mcp.json surfaces. Output is a single offline HTML file.
-
droidrun Bundle Mobilerun Task RunnerBuild, run, test, or troubleshoot TypeScript task runners that start Mobilerun tasks server-side and render a live device stream with @mobilerun/react. Use for device selection, tasks.run/status/stop flows, short-lived stream credentials, serial polling, cancellation, or the bundled Bun and React task-runner example. Do not use for Python webhook receivers, workflow triggers or actions, or direct browser-side Mobilerun API calls.
-
duruii Bundle Review Cet Writing四六级写作与翻译批改技能。用于对 CET4/CET6 作文或中译英文本做严格评分、错误定位、改写建议、提分建议,并按模板生成 HTML 批改报告;当用户提到“批改/评分/润色/提分/生成报告/四六级写作或翻译”时使用。
-
duyet Bundle SharehtmlDeploy and manage HTML/Markdown documents on html.duyet.net with collaborative commenting.
-
dwmkerr Bundle Integration TestRun the signalbox end-to-end integration evidence run: build the CLI, drive the hub / LAN mode / remote mode / forwarder / hooks / app through real commands with shellwright, screenshot every step, and assemble a self-contained HTML report. Use when the user says "run the integration test", "/integration-test", or wants an evidence run with a report.
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 android-native-dev, tanstack-query, frontend-design. 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.