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.
-
micronaut-projects Bundle Micronaut Release BlogCreate a Micronaut main-site release announcement from a public GitHub release URL, including the dated Markdown entry, frontmatter, component links, and upgrade guidance.
-
mingli30119 Bundle Stock Analysis Enhanced一句话搞定个股分析 — 说"分析XXX",自动采集30+数据源 → AI完成基本面(Step 0-8)+技术面+资金面的完整研报 → 生成交互式HTML报告。支持增量更新(K线/行情/技术指标自动刷新)。触发词:"分析XXX股票"(首次)或"更新XXX股票"(增量)。
-
minicoursegenerator Bundle Edu Role PlayCreate interactive AI role-play training activities as self-contained HTML. Use when the user asks to generate a role-play, persona practice, sales simulation, customer conversation drill, compliance scenario, or any learner-vs-AI-character training exercise.
-
minjikim89 Bundle Mmu StartupUse this skill when the user is brainstorming a SaaS or AI product idea, validating a startup idea, drafting a launch checklist, preparing for Product Hunt, or asking which blueprint applies to their stack. Provides the Make Me Unicorn (MMU) launch operating system — 15 core blueprints (frontend, backend, billing, security, etc.), industry-specific blueprints (AI products, marketplaces), and a Product Hunt launch kit.
-
mishka-group Skill Mob Component FixDefinition of done for fixing a Mob component. Use when the user reports a bug in, or asks you to check, any component under development/mob — it enforces the seven things that ship with the fix (usage rule, showcase handlers, e2e, props/eex/exs checks).
-
initia-labs Bundle Initia Appchain DevEnd-to-end Initia development and operations guide. Use when asked to build Initia smart contracts (MoveVM/WasmVM/EVM), build React frontends (InterwovenKit or EVM direct JSON-RPC), launch or operate Interwoven Rollups with Weave CLI, or debug appchain/transaction integration across these layers.
-
instructure Skill Instui DocsLook up authoritative Instructure UI (InstUI, @instructure/ui-*) documentation — component APIs, props, theme variables, usage examples, and guides — by querying instructure.design's plaintext docs. Use whenever the user asks how to use an InstUI component, which props/prop types exist, how to theme/style it, accessibility/i18n/RTL guidance, or which component fits a need. Prefer this over guessing InstUI APIs from memory.
-
intentui Bundle React AriaBuild accessible UI components with React Aria Components. Use when developers mention React Aria, react-aria-components, accessible components, or need unstyled accessible primitives. Provides documentation for building custom accessible UI with hooks and components.
-
intentui Bundle IntentuiEnforces Intent UI component library conventions. Use when writing React components, reviewing UI code, or building pages/features that involve UI elements. Ensures semantic color tokens, correct form and overlay patterns, the `intent` variant prop, and that existing components from src/components/ui/ are used.
-
intopia Bundle Intopia Web AccessibilityBuild accessible web user interfaces that meet WCAG 2.2 Level AA. Use whenever generating HTML, CSS, JSX, TSX, React, Vue, or Svelte components, pages, forms, modals, or email templates - including small snippets.
-
invertase Skill TS JS ValidationValidate React Native Firebase changes by running the CI-equivalent prepare, TypeScript, lint, Jest, formatting, and compare-types scripts. Use before handoff, commit, or push when package sources, native bridge code, or docs changed.
-
isdou Bundle Cyber Fantasy UIGenerate dark neon cyber-fantasy dashboards, glassmorphism surfaces, and gamified React and Tailwind UIs.
-
isomoes-video Bundle RevealjsCreate polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required.
-
itchernetski Bundle Threads CarouselConvert text posts into visual carousel images or presentations for Threads, Instagram, LinkedIn, TikTok, YouTube. 12 slide types (incl. image/emoji/number), 6 format presets (incl. 1920×1080 wide), 8 background styles (incl. ruled paper), 3-axis style system (font × color × purpose), highlighted keywords with optional italic-box style. Generates PNG or single-file PDF via Next.js preview + browser export. RU/EN toolbar. Triggers: threads carousel, instagram carousel, linkedin carousel, tiktok carousel, карусель, slides, carousel images, presentation deck, presentation pdf.
-
itsssssjack Bundle Power DesignGenerate beautiful, on-brand HTML — presentation decks or full responsive websites — in any brand's design language, combining brand DNA extracted via Firecrawl with codified, research-backed design principles (20 rules for slides, 20 for the web).
-
itsyuvallavi Bundle Monochrome ParticleBuild or port a configurable full-viewport Three.js layered particle wave background using Points, ShaderMaterial, GLSL waves, soft sprite textures, additive blending, and mobile/desktop density tiers. Use for Next.js/React canvas backgrounds, Three.js Points shaders, monochrome dots, particle wave, animated hero backdrop, or requests to change particle colors, speed, direction, density, point size, opacity, or camera zoom. Portable Markdown instructions: applies in any coding agent or IDE that loads SKILL.md (Cursor, Claude Code, OpenAI Codex, Google Gemini, Windsurf, JetBrains AI, Copilot Chat, VS Code–based agents, or paste into web UIs). Does NOT cover page transitions, SandstormProvider, sandstorm hooks, button-triggered navigation, or route orchestration; only the static/ambient background.
-
ivantsxx Bundle Better UploadUse when working with better-upload, adding file uploads to a React or Next.js app using pre-signed S3 URLs, configuring upload routes or callbacks (onBeforeUpload, onAfterSignedUrl, RejectUpload), setting up S3 clients (AWS S3, Cloudflare R2, MinIO, Backblaze, DigitalOcean Spaces, Tigris, Wasabi), using useUploadFiles or useUploadFile hooks, implementing multipart uploads, managing upload progress or abort, using uploadFile/uploadFiles imperatively, integrating with TanStack Query or React Hook Form, working with S3 helpers (deleteObject, presignGetObject, moveObject), or using UploadDropzone/UploadButton components.
-
ivklgn Bundle Create LandingCreate or improve a complete landing page from a plain-language business description. Use when someone asks to make, fix, or improve a landing, sales, or conversion page. Researches the business, asks only essential questions, builds an Astro site, checks it in a real browser, and reports readiness in plain words. Not for a single UI component, an audit-only request, one image, or deployment-only work.
-
jackywxsz Bundle Jacky Motion2 0 SrtJacky Motion 2.0 的独立 SRT 自动录屏版。把中文口播稿与对应 .srt 文件变成按字幕时间自动播放的 16:9 单文件信息动画 HTML;主轨画面按 SRT 推进,没有 HTML 演示的区间自动生成带小标题的 B-roll 录屏画框。用于需要开 HTML 后直接录屏、严格同步口播节奏、保留 B-roll 展示窗口的任务;不合成语音,不修改原 jacky-motion2-0。
-
jackywxsz Bundle Video ShotcraftCreate cinematic product videos from shot recipe cards, a validated template, and code/audio assets (Remotion + real page screenshots + 2.5D camera moves + beat-synced cuts + sound design). Use when the user asks to turn a frontend project or webpage into a product video, says "use video-shotcraft to make a video/promo", names the Ink Press template or asks to reproduce its effect, or wants a single shot card's motion. 用镜头配方卡 + 已验收模板 + 代码/音频资产制作电影感产品视频(Remotion + 真实页面截图 + 2.5D 运镜 + 节奏卡点 + 声音设计)。当用户要求"用 video-shotcraft 做视频/宣传片"、把前端项目/网页做成产品视频、点名 Ink Press 模板或要求复刻模板片效果,或要用镜头卡做单个动效镜头时使用。
-
jaderson-bit Bundle Mindmap Markmap ViewerTurn Markdown outlines, notes, docs, or plans into an interactive mind map — a single self-contained HTML file that opens offline anywhere (markmap.js, white-on-dark, zoom/expand/export toolbar, search that keeps matches in context). Use whenever the user asks for a mind map, markmap, or concept map, wants to visualize or diagram the structure of a document or topic, summarize notes as a navigable tree, make an outline clickable or explorable, or embed such a map in Streamlit — even when they don't literally say 'mind map'.
-
mistyhx Skill Frontend Design AuditEvaluate and improve the usability of existing front-end interfaces — either local source code or live websites by URL. Use this skill whenever the user has existing front-end code OR a live website URL and wants to understand why users struggle with it, find usability problems, or make it easier to use. Triggers on direct requests like "review my UI", "audit my interface", "check accessibility", "evaluate my design", "improve the UX", "audit this website", "review https://example.com" — but ALSO on indirect symptom descriptions like "users keep abandoning this form", "something feels off about this page", "we're getting complaints about the checkout flow", "conversion dropped after the redesign", "people say it's confusing", or "make this less painful to use". If someone has a front-end component, page, or URL and the problem sounds like usability, user confusion, or poor interaction design rather than a bug or performance issue — use this skill. NOT for building new interfaces from scratch, performance opti
-
mizchi Bundle MmmdRender Markdown as terminal-friendly text or an HTML fragment. Mermaid fenced blocks become ASCII-art diagrams in TUI output.
-
mizok Bundle Angular Scss Bem StandardsUse when writing, reviewing, or refactoring Angular component styles (SCSS/CSS). Triggers on BEM naming issues, deep nesting, non-flat selectors, or hard-coded values instead of design tokens.
-
mizukaizen Bundle Astro TransitsAstrological transit calculator with natal chart support. Daily transits, weekly forecasts, void-of-course Moon, aspects, stations, and ingresses. Uses Swiss Ephemeris.
-
mksglu Skill BrowsiraiControl your live Chrome browser session via MCP tools. Navigate, click, fill forms, take screenshots, read accessibility trees, inspect source code locations, and automate browser interactions.
-
mobile-next Skill Mobile AutomationControl Android and iOS devices, emulators and simulators — launch apps, tap, swipe, type, take screenshots, read the accessibility tree. Use when a task involves a mobile device or app, mobile UI testing, or reproducing a bug on a phone.
-
mohebifar Bundle Sample CodemodMove React components defined inside other components to module scope to prevent state resets and re-render bugs
-
moihars Bundle CarouselUse this skill to turn a blog post, or any source article, into a finished social carousel for LinkedIn and Instagram. Trigger whenever someone asks to make a carousel, a slide post, a document post, a swipe post, or to "turn this blog into social", or asks to repurpose, atomize, or break a post into slides. Also use when asked to restyle or re-cut an existing carousel, change its angle, or regenerate it at a different length. Produces 1080x1350 PNGs, a LinkedIn PDF, captions, alt text, and a shareable HTML review page. Do not use for single-image graphics, video scripts, or plain social captions with no slides.
-
mono0926 Skill Bloc Provider BlocUse when providing, accessing, and automatically disposing BLoC (Business Logic Component) instances across Flutter widget subtrees using bloc_provider.
-
moostjs Bundle AtscriptUse when working with `@atscript/*` packages or `.as` files. `.as` = single source of truth for types, metadata, and validation constraints. Covers `.as` syntax, `@meta.*` / `@expect.*` / custom annotations, primitives, the `asc` CLI + `atscript.config.*`, generated `.as.d.ts` / `.as.js` / `atscript.d.ts`, runtime helpers (`Validator`, `coerceForType`, JSON Schema, serialize), `unplugin-atscript`, `@atscript/moost-validator` (validation + coercion pipes), VSCode LSP, and plugin authoring. Out of scope: `@db.*` annotations, schema sync, DB adapters → use the atscript-db skill; `@ui.*` annotations, vue-form, vue-table → use the atscript-ui skill.
-
morvanzhou Bundle Data Driven ProductData-driven product analysis and iteration decision tool. Collects data via GA4, GSC, Bing Webmaster, and Microsoft Clarity to provide pre-analysis (product/direction selection), post-analysis (optimize existing products), and decision analysis (upgrade or abandon), outputting interactive HTML reports.
-
motiondivision Bundle MotionAnimation skill for Motion (prev Framer Motion) and CSS animation. Provides: animation best practices (including specific advice for vanilla JS, React, Vue, Base UI and Radix), documentation and example search, CSS spring and bounce generation, MotionScore code and runtime performance audits, and the visual transition editor. Use when writing animations, working with Motion (motion, motion/react, motion-v, framer-motion), animating a UI, writing CSS linear() springs, auditing performance/jank/layout thrash via code or runtime, searching Motion docs or examples, adding a Motion UI section, or upgrading between Motion versions.
-
mrwadams Bundle Attackgen TabletopTurn a MITRE ATT&CK/ATLAS threat group or case study — or a frontier AI agent deployed inside the organisation — into a full incident-response tabletop exercise (MSEL): scenario narrative, kill chain or agent threat scope, timestamped injects, discussion questions, and a detection-coverage scorecard, using the AttackGen MCP server. Use when the user wants a tabletop, MSEL, or purple-team IR exercise for a specific threat actor, ICS group, ATLAS case study, set of ATT&CK/ATLAS techniques, or an AI insider-threat / rogue-agent scenario (autonomous coding agent, agent data exfiltration, evaluation environment escape, agent supply-chain sabotage), or asks for one as a printable HTML report.
-
msg-01 Bundle Clean ArchitectureApply Robert C. Martin's Clean Architecture principles (SOLID at the module level, component cohesion/coupling, the Dependency Rule, boundaries, the Humble Object pattern) whenever planning a new system/feature or reviewing an existing one for structural health. Trigger proactively any time the user is designing, structuring, architecting, building, or refactoring software — not just when they say "clean architecture." Covers: sketching a new tool before writing code, splitting a single-file HTML app into sections, organizing a Flask/SQLite project into modules, reviewing code for tangled dependencies or mixed responsibilities, or judging whether a design doc's structure will hold up as the system grows. Also use for "how should I structure this," "does this design make sense," "is this over-engineered," or when a file/spec is shared for a general structural check — even without the words "clean architecture" appearing.
-
msrbuilds Bundle Animate CSSAdd CSS animations to HTML elements, React/JSX components, or WordPress PHP templates using Animate.css (v4.1.1). Use this skill whenever the user wants to animate UI elements, add entrance/exit effects, attention-seeker animations, or any CSS-based motion to their markup. Trigger on phrases like "add animation", "animate this", "make it bounce/fade/slide/zoom", "add transitions", "CSS animations", or any request to bring elements to life visually. Works with raw HTML snippets, full HTML files, React JSX, and WordPress PHP templates. Claude picks the most contextually appropriate animation — no guesswork needed from the user.
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 micronaut-release-blog, stock-analysis-enhanced, edu-role-play. 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.