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.
-
caizongyuan Bundle Expo UIThis skill should be used when users need to work with Expo UI (@expo/ui) for integrating SwiftUI components into React Native applications. It provides comprehensive guidance on installation, Host component, SwiftUI primitives, layouts, modifiers, native tabs navigation, and v10 preview features.
-
caizongyuan Bundle Expo SdkThis skill should be used when users need to work with Expo SDK and Expo Router for building React Native applications. It provides comprehensive guidance on navigation patterns, media handling (camera, image, video, audio), data storage (SQLite, filesystem, SecureStore), authentication, device features (location, notifications, biometrics), and third-party integrations (Stripe, linking, sharing).
-
caizongyuan Bundle Tentap EditorThis skill should be used when users need to implement or work with the TenTap rich text editor for React Native. It provides comprehensive guidance on installation, basic setup, advanced customization, API reference, and real-world examples for building rich text editing experiences in mobile applications.
-
flowerf19 Skill HTML SlidesCreate HTML-based presentations using reveal.js — interactive, responsive slides with animations, code highlighting, speaker notes, themes, and transitions. Use when generating slide decks/presentations as standalone HTML.
-
skillmedev Skill Vercel Rendering And CachingChoose a rendering, runtime, and caching strategy on Vercel - Fluid Compute as the default runtime (Edge Functions are deprecated), ISR/PPR, Next.js 16 Cache Components ('use cache', cacheLife, cacheTag, updateTag, revalidateTag), and the Vercel Runtime Cache API (getCache, expireTag, invalidateByTag) with tag-based invalidation. Use when someone asks "should this page be static or server rendered on Vercel", "how do I set up ISR in Next.js", "revalidate this page on demand", or "why is my Vercel page serving stale content" - including streaming vs PPR decisions, caching an API response across regions, and migrating off unstable_cache. Do NOT use to set env vars (use vercel-env-management), wire git/preview/promote deploys (use vercel-deploy-pipeline), route LLM calls (use vercel-ai-gateway), or block bots/rate-limit (use vercel-firewall-and-botid). For pure Core-Web-Vitals/bundle tuning, hand to next-on-vercel-perf.
-
full-stack-skills Bundle Huashu Design花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审,需求模糊时给设计方向。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。
-
full-stack-skills Bundle Theme FactoryToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
-
liangdabiao Bundle Edu Sci Viz科学可视化科普技能:把任何数学或科学概念(日食、月食、太阳系、四季、月相、潮汐、 卫星轨道、板块运动、光的折射、彩虹、时区、极昼极夜、氧化还原、铝热反应……)做成一页 "单文件互动科普 HTML"。采用编辑部科学手册风(暖米白纸底 + 深海军蓝实验区 + 红/琥珀强调 + 宋体大标题 + 等宽参数)。核心流程:事实核验→直觉模型→正式定义→互动实验(滑杆+实时反馈)→ 边界说明→来源追溯→单文件组装→自检交付。三维用 Three.js(CDN importmap),二维用 HTML Canvas;每个主题交付一个可直接在浏览器打开的自包含 .html。触发词:科学可视化, 可视化科普, 互动科学实验, 科学交互演示, 把XX做成互动页面, 像挂谷猜想那样做个科普页, 科学科普页; 主题词: 日食, 月食, 潮汐, 卫星轨道, 板块运动, 光的折射, 折射, 全反射, 太阳系, 四季, 月相, 彩虹, 氧化还原, 配平, 化学方程式, 化学反应, 铝热反应, 燃烧, 镁条燃烧, 镁, 厄尔尼诺, 拉尼娜, ENSO, 气候, 洋流; English: interactive science visualization, science experiment page, science popularization page.
-
lukeberrypi Bundle A11Y MaxxingAudit or remediate web accessibility barriers, optimizing accessible task completion against a WCAG 2.2 AA floor.
-
mcgrass-ops Bundle Android PolishFinal polish + ship-readiness gate for a built Android app. Use LAST in the pipeline - after the MCP has written the code and the app builds - to take it from "works" to "passes Google Play review and feels finished." Runs a severity-ordered checklist (P0 ship-blockers first - target-API gate, AAB + Play App Signing, 16 KB page size, themed-icon monochrome layer, release crashes/ANRs; then P1 quality - states, accessibility, performance, tests, static analysis, localization, process-death; then P2 spit-shine) and attaches a concrete verification method (a command, tool, or snapshot) to every item. Pulls store/icon assets from the asset library when one is available, with a manual fallback when it is not. Trigger on "polish my app", "is this ready to ship", "final pass", "prep for release", "store assets", "code cleanup", "make it feel finished".
-
mcgrass-ops Bundle Android Compose DesignAndroid-specific UI/UX and engineering system for Jetpack Compose apps. Use this skill whenever building, modifying, reviewing, or designing any Android app screen, component, or layout - even if the user doesn't explicitly mention design, Compose, or Material. Routes between five distinct visual styles (m3-expressive-default, dark-product-minimal, playful-warm, data-dense, trust-signaling) based on the app's purpose, then applies an engineering track covering architecture, state, platform integration (edge-to-edge, splash, predictive back, permissions), accessibility, performance, and build defaults. Use this proactively for any Android development work, not just when "design" is named in the prompt.
-
oqiodev Skill EcranCode une interface en exécutant la direction visuelle déjà tranchée du projet. Use when une tranche touche à l'écran, ou l'utilisateur demande de construire une page, un composant, un formulaire, une vue.
-
pawlakcamille Skill Cami Design EngineerSenior design-engineer code review of front-end code — component composition, design-system fidelity, state and data flow, behavior changes and regressions, cross-file completeness, accessibility, i18n, performance, security, TypeScript. Use when asked to review front-end, React, or UI code, to check a branch or PR for regressions, before handing a project to a tech team, or to make a prototype ship-ready.
-
phuc710 Skill Web Portfolio BuilderChuyên gia thiết kế, xây dựng và tối ưu hóa Web CV / Trang Portfolio cá nhân tương tác cao từ dữ liệu cache JSON. Tự động căn chỉnh bố cục in ấn A4 chuẩn mực không rớt trang (Zero-Overflow Print Engine), tích hợp showcase dự án GitHub kèm metrics thực chiến, xuất bản mã nguồn HTML/CSS/JS thuần hiện đại và hỗ trợ triển khai nhanh lên GitHub Pages / Vercel.
-
rkelln Skill TypstCompile Typst documents to PDF/PNG/SVG/HTML, use templates from Typst Universe, and manage packages — a modern LaTeX alternative.
-
sdv-g-deploy Bundle Ant Product MapProduct-map skill for AI agents helping non-technical builders turn an idea, repo, feature brief, messy notes, or product discussion into a simple evidence-based HTML product map. Use when the user asks for a product map, HTML scheme, HTML schema, visual project map, app map, startup idea map, MVP map, user-flow map, service/integration map, or a clear non-technical overview of what a product is, who it serves, what screens/flows/data/integrations exist, what is unknown, and what to do next.
-
sagargupta16 Skill React PatternsReact best practices covering functional components, hooks, state management, performance, and accessibility. Use when writing or reviewing React components, hooks, or state logic.
-
vincentshipsit Skill Refactoring UIApply Refactoring UI design principles to improve frontend code and UI decisions
-
aakashg Bundle Product DesignerUse when the user asks to review a design, critique a UI or mockup, give design feedback, or check a screen for usability and accessibility issues. Do NOT use for visual brand or aesthetic preference debates, or for reviewing copy before layout is settled.
-
ai-dynamo Skill Aic Silicon AlignUse when validating AIC predictions against real GPU serving measurements and root-causing fidelity gaps (prediction-vs-measured issues, memory/concurrency mismatches, per-op latency divergence). Covers dummy-weight methodology, measurement parity traps, component-isolation ladders, and ledger reconciliation.
-
aiden0z Bundle Email DesignerGenerate Outlook-compatible email templates (EML + HTML) through conversation. Three modes: Design (create from scratch), Import (replicate an existing .eml), Production (fill Excel data into a crystallized template). Use when user wants to: create or design an email template, generate an .eml file, make a newsletter, format an email for Outlook, import/replicate an email (导入/复刻邮件), design a 邮件模板, do 邮件排版 or 邮件设计, build pixel-perfect HTML email with Outlook compatibility. Triggers: weekly report email (周报邮件), product update email, event invitation (活动邀请邮件), announcement (公告邮件), company newsletter, .eml import, replicate email template, or make an email look professional/beautiful for Outlook. Handles visual design, EML generation, and EML import — not SMTP, sending, or account management. Without this skill, Outlook emails break because Outlook uses Word rendering which ignores modern CSS.
-
augmnt Bundle Organizing Project FilesProvides file organization conventions for React and Next.js projects. Use when creating new files, components, hooks, utilities, or services. Triggers on questions like "where should this go?", "where do I put this?", or when deciding between colocating vs grouping files.
-
aws-samples Skill Sdpm Style再利用できるスライドのスタイルガイド(HTML デザイントークン)を対話で作るとき。 「うちのブランドカラーでテンプレートを作りたい」「この見た目を使い回したい」で起動。 Create a reusable presentation style guide (HTML design tokens) through dialogue.
-
bartwaardenburg Bundle Content SemanticsFixes content and semantic HTML issues — implements server-side rendering, heading hierarchy, semantic HTML elements, ARIA landmarks, image alt text, language attributes, descriptive link texts, question-based headings, form labels, autocomplete hints, keyboard navigability, document titles, button accessible names, and aria-hidden misuse so AI agents can navigate and understand page content via the accessibility tree. Use when asked to "fix semantic HTML", "add SSR", "fix heading hierarchy", "add alt text", "improve semantics score", "fix accessibility for AI", "add ARIA landmarks", "fix language attribute", "add question headings", "fix form labels", "add autocomplete", "fix keyboard navigation", "fix document title", "fix button names", "fix aria-hidden", or any semantic HTML task.
-
benwaffle Bundle Slack CopyPut formatted content on the macOS clipboard so it renders correctly when pasted into a Slack message composer (bold/italic/lists via HTML, tables via TSV).
-
benwaffle Bundle Claude StatsGenerate an interactive HTML report of your Claude Code usage (sessions, messages, tokens, active days, streaks, peak times, model usage by day, top projects/tools) by parsing ~/.claude/projects/*.jsonl. Use when the user asks for their Claude stats, usage, activity, streaks, token breakdown, or wants to see how they use Claude over time.
-
benwaffle Bundle Session RenderRender a single Claude Code session transcript (.jsonl) as a self-contained, minimal HTML file — left-aligned threaded log with syntax-highlighted code/bash and collapsible tool output, no external assets. Use when the user wants to view, export, share, or "render" a session by id or .jsonl path as HTML.
-
atovk Skill Component Builder生成 UI 组件代码,支持 React、Vue、Svelte 等框架
-
fatima367 Skill Chatkit FrontendSkill: ChatKit Frontend Setup
-
blair2004 Bundle MCP DevelopmentUse this skill for Laravel MCP development. Trigger when creating or editing MCP tools, resources, prompts, servers, or UI apps in Laravel projects. Covers: artisan make:mcp-* generators, routes/ai.php, Tool/Resource/Prompt/AppResource classes, schema validation, shouldRegister(), OAuth setup, URI templates, read-only attributes, MCP debugging, MCP UI apps, the x-mcp::app Blade component, createMcpApp(), default AppResource handle() auto-infers view from class name, Response::view(), AppMeta/Csp/Permissions/appMeta() configuration, #[RendersApp] attribute, Library enum for CDN libraries (Tailwind, Alpine), and host theming via CSS variables. Use this whenever the user mentions MCP apps, MCP UI, interactive MCP resources, styling MCP apps with Tailwind or Alpine, or building visual interfaces for AI agents.
-
blair2004 Bundle Nexopos ThemingCreate, style, review, or refactor theme-aware NexoPOS user interfaces. Use for Vue or Blade components, dashboard and POS UI, component CSS under resources/css, semantic color utilities, theme tokens, light/dark/phosphor compatibility, visual states, or new NexoPOS themes. Trigger whenever frontend work must follow the existing NexoPOS theming system.
-
blair2004 Bundle Create Nexopos ModuleCreate, extend, or repair modules for the NexoPOS Laravel application. Use when a request involves scaffolding a module under modules/, module routes, controllers, models, migrations, permissions, settings, CRUD, menus, widgets, events, view injections, Blade/Vue, module Vite assets, dashboard Vue mounting (nsExtraComponents vs createApp), Tailwind module prefixes, POS cart (product-row meta, line-extra, unit price, order types, pay queue, cart buttons), or tests while following NexoPOS module conventions. Also use whenever the task is about mastering or extending the live POS cart.
-
evotecit Bundle Powerforge Website StarterCreate, refactor, or standardize PowerForge.Web websites. Use when setting up or fixing site.json/pipeline.json, dev vs CI modes, baselines and budgets, theme.manifest.json contracts (features/requiredPartials/slots/CSS selectors), navigation consistency, API docs (header/footer + multi-CSS), and agent handoff docs to prevent half-cooked websites and regressions across multiple sites.
-
facebook Skill Eden ResearchLoad FIRST before searching code in eden/. Contains component-to-file maps, key type names, and architecture diagrams for EdenFS, Sapling, and Mononoke. Tells you exactly which files to read for any task. References contain per-component quick reference tables.
-
facebook Skill Structured Error LoggingAdd or review structured error logging in EdenFS daemon (C++) — the ErrorLogger / EdenErrorInfo system that feeds the edenfs_errors table. Use when writing a catch block or handling a boxed/async exception (folly::Try / exception_wrapper / .thenError), instrumenting a failure path, or debugging a wrong stack trace or wrong component. Covers throw-site trace rules, component choice, errorType, noise filtering, gating, and testing.
-
fayazara Skill Emil Design EngThis skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
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 expo-ui, expo-sdk, tentap-editor. 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.