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.
-
iradoweck Skill Magic UI GeneratorUtilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.
-
iradoweck Skill Antigravity Design ExpertCore UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
-
lev-os Skill Backend For FrontendCreate client-specific backend services that aggregate and transform data from downstream microservices to match each frontend's unique needs
-
iradoweck Skill LanggraphExpert in LangGraph - the production-grade framework for building stateful, multi-actor AI applications. Covers graph construction, state management, cycles and branches, persistence with checkpointers, human-in-the-loop patterns, and the ReAct agent pattern.
-
iradoweck Skill React PatternsModern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
-
iradoweck Bundle Frontend DesignYou are a frontend designer-engineer, not a layout generator.
-
iradoweck Skill UI A11YAudit a component or page for accessibility issues and fix them
-
iradoweck Skill Algolia SearchExpert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning
-
lev-os Bundle Convex Create ComponentBuilds reusable Convex components with isolated tables and app-facing APIs. Use for new components, reusable backend modules, integrations, or component boundary work.
-
iradoweck Bundle Expo DeploymentDeploy Expo apps to production with EAS — build and submit to the iOS App Store, Google Play Store, and TestFlight, configure eas.json build and submit profiles, manage app versions and build numbers, publish App Store metadata and ASO, and deploy web bundles and API routes via EAS...
-
lev-os Skill Analyzing Inflation DynamicsStructures inflation analysis with component decomposition, expectations tracking, and Phillips curve assessment. Use when analyzing inflation, decomposing CPI/PCE, or tracking inflation expectations.
-
iradoweck Skill Frontend Security CoderExpert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns.
-
lev-os Bundle Superdesign Prompt LibraryQuery and retrieve Superdesign prompt-library entries (style prompts, layout prompts, and component prompts) from a local JSONL export. Use when you need reusable UI prompt building blocks or want to extract all prompts for a style/category/slug. Triggers: "superdesign", "design prompt", "prompt library", "style prompt", "layout prompt", "mosaic"
-
lev-os Skill Analyzing Financial ConditionsStructures financial conditions index analysis with credit, equity, funding, and volatility component tracking. Use when analyzing financial conditions, tracking financial stress, or assessing market tightness.
-
lev-os Skill Component Library DesignWhen building reusable UI component systems that scale across teams and products
-
lev-os Bundle Interactive Visualization CreatorBuild interactive visualizations for Next.js (SVG, Canvas, Three.js, Framer Motion). Use when creating diagrams, animations, simulations, or data visualizations.
-
lev-os Skill Managing Patient Portal ContentCreates patient-facing health information content with health literacy and accessibility standards. Use when developing portal content, writing patient communications, or managing digital health tools.
-
lev-os Skill Event Driven ArchitectureDesign systems that react to state changes through asynchronous events, enabling loose coupling and scalability
-
boisenoise Skill Slack AutomationAutomate Slack messaging, channel management, search, reactions, and threads via Rube MCP (Composio). Send messages, search conversations, manage channels/users, and react to messages programmatically.
-
0xbreadguy Skill MeganamesAI coding skill for MegaNames (.mega naming service on MegaETH). Covers name registration with USDM payments, forward/reverse resolution, text records, free subdomains, subdomain marketplace with token gating, Warren Protocol contenthash for on-chain websites, and frontend integration with wagmi/viem. Works with Claude Code, Cursor, Windsurf, and OpenClaw.
Audited -
1999azzar Bundle Mema MailerProfessional email delivery system using the Resend API and Jinja2 HTML templating with Swiss-Archival design. Use when user asks to "send email", "notify me", "send report", "send invoice", "send newsletter", "email alert".
-
2ykwang Bundle AbdiffCheck whether one change to Claude Code's instructions or context (CLAUDE.md, .claude/rules, referenced docs, skills) actually changes behavior. Runs the same prompts against HEAD and HEAD + the uncommitted diff, N times each, and builds an HTML report for a person to compare the runs side by side. Use it to test adding, deleting, rewording, or moving a rule, or to check whether an @import or a referenced doc is loaded and followed. Not for checking application code or anything automated tests already cover. Only run it when the user explicitly asks for it; never start an experiment on your own.
-
mxx1111 Bundle Wechat Mp Writer微信公众号发布流水线与排版模版库。提供可直接套用的政策解读、长期照护和技术长文模版,把 Markdown 编译成带内联样式、可直接粘进公众号编辑器的 HTML;并负责平台特有的硬约束——标题与摘要长度、正文外链不可点、代码块超宽、封面裁剪、发布后不可修改——用 check_mp.py 做发布前体检。写作和润色委托给专门的 skill,不重复造。当用户要排版公众号文章、要模版、要写公众号、要把已有稿子转成公众号能发的形态、要做发布前检查,或问公众号平台限制时使用。
-
mxyhi Bundle React Best PracticesReact and Next.js performance guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React components, hooks, client data fetching, rendering behavior, bundle imports, async request flows, or Next.js pages and server code.
-
nandanosql Skill React Native UIExpert React Native development with TypeScript, NativeWind (Tailwind CSS), and Shadcn UI components
-
nandodeejay Skill Appstore ReviewChecks an iOS/iPadOS/macOS app project against Apple's App Store Review Guidelines before submission. Works with native (Swift/Obj-C), Flutter, React Native, Expo, Kotlin Multiplatform, .NET MAUI, Cordova, Ionic, and Unity projects. Use when the user wants to verify their app complies with App Store rules, or when they mention 'app review', 'app store guidelines', 'submission check', or 'review rejection'.
-
myriad-dreamin Bundle Blog Comment ModeratorReview and moderate comments for the github.com/Myriad-Dreamin/blog-backend project by using the repository's Go blog-cli workflow. Use when Codex is asked to list pending blog comments, inspect a comment, decide whether a blog comment should be authorized, generate owner/author notification drafts, approve or reject comments, or replace the old Astro comment moderation frontend.
-
mystic-stars Bundle Animal Island UI StyleUse the animal-island-ui visual language to create or review React and Astro interfaces, components, layouts, and long-running blog features. Trigger for Animal Crossing-inspired, Animal Island, warm natural, rounded cute UI; use of the animal-island-ui React package; Astro integration through React islands or Astro-native CSS; and faithful extension of the upstream design tokens, component APIs, interaction rules, accessibility, or motion language.
-
n0an Bundle Rich HTMLRender content as a polished, self-contained HTML deck or document - with Mermaid diagrams, cards, tables, and a cohesive dark theme - instead of plain Markdown. Use when asked to create an HTML deck, slide presentation, visual recap of completed work, or a rich HTML page, report, or summary that Markdown cannot express.
-
naufalprakoso Bundle Compose Circuit SkillsBuild, review, refactor, debug, and test Kotlin Android, Jetpack Compose, Compose Multiplatform, Kotlin Multiplatform, and Slack Circuit app features. Use for Android UI, Compose UI, Kotlin app architecture, Circuit Screen, Presenter, Ui, CircuitUiState, CircuitUiEvent, navigation, overlays, retained state, SubCircuit, Compose performance and accessibility, repositories, networking, coroutines, cross-platform boundaries, and UI/presenter tests. Also use when migrating an existing Android Compose or ViewModel feature to Circuit. Do not use for generic Kotlin backend, server-side Kotlin, CLI tools, or non-app library work unless the user asks for Android, Compose, KMP, or Circuit guidance.
-
n3owise Bundle Brand LaunchpadGenerate a creative-director-level brand system and a polished standalone HTML brand board for startups, products, SaaS tools, portfolios, media brands, entertainment labels, agencies, creator businesses, fashion brands, and studios. Use when the user wants branding, visual identity, art direction, landing-page style, tone of voice, design language, or a presentation-ready concept board. The skill should create three clearly different directions, recommend one with conviction, and output browser-ready artifacts instead of chat-only text.
-
ncdai Skill Ncdai Writing Component DocsWrite and review component documentation (MDX) and registry descriptions. Covers doc structure, description writing, Features, Composition, Credits, and References sections. Use when creating new component docs, updating descriptions, adding Features sections, adding Composition sections, adding Credits sections, adding References sections, or reviewing component documentation quality.
-
neonwatty Bundle CSS AnimationGenerates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user says "css animation", "animate this feature", "create a css walkthrough", "animation walkthrough", or wants to create a CSS-based visual demo of an app feature.
-
naticha Skill BunwvHeadless browser testing via persistent Bun.WebView session. Use when testing frontend UI, verifying page content, filling forms, clicking buttons, taking screenshots, or interacting with local or staging web applications. Triggers on phrases like "test the page", "check the UI", "browse to", "fill the form", "click the button", "take a screenshot".
-
ndpvt-web Bundle CopycapyClone any website into a production-grade, template-ready codebase. Give it a URL and CopyCapy reverse-engineers the entire site: browses every page, captures screenshots, extracts structure, then rebuilds it as a clean Next.js project with a single config file that lets you rebrand it for any business. The chill capybara of website cloning -- adapts to anything, panics about nothing.
-
nealepetrillo Bundle EchartCreate and edit Apache ECharts v6 visualizations. Use when users want to build interactive charts, dashboards, or data visualizations. Supports line, bar, pie, scatter, radar, heatmap, treemap, sunburst, gauge, chord, and 20+ other chart types. Generates working HTML, JavaScript, React, or Vue component code.
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 interactive-visualization-creator, event-driven-architecture, magic-ui-generator. 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.