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.
-
kreerc Skill AccessibilityQuality assurance for web accessibility and usability, particularly for users with disabilities. Use when involved in any web project.
-
kreerc Skill Accessibility TestingUse for testing the accessibility of a web project
-
kriasoft Bundle ShadcnManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
-
kriasoft Skill Merge SeedMerge upstream React Starter Kit updates (the `seed` remote) into main, preserving this project's identity, scope, and behavior. Use when asked to sync, pull, or merge the seed / starter kit / upstream template.
-
kugamon Bundle Sf Message CatalogGenerate a comprehensive catalog of every user-facing error, warning, info, and confirmation message across a Salesforce managed package. Extracts messages from Apex classes, Apex triggers, Lightning Web Components (LWC), Aura Lightning Components, Visualforce Pages, and Visualforce Components. Produces a professional .docx document organized by component type with an executive summary table. Use this skill when the user mentions 'error catalog', 'message catalog', 'list all errors', 'list all warnings', 'user-facing messages', 'error messages document', 'warning messages report', 'managed package messages', 'Q2C messages', or asks to catalog, inventory, or document the error and warning messages in any Salesforce app. Also triggers on 'what messages does the app show', 'customer-facing errors', or 'generate message documentation'. This skill can be scheduled to run monthly to keep the catalog current across releases.
-
kugamon Bundle Sf Message Grammar AuditAudit user-facing messages in a Salesforce managed package for grammatical issues and generate a prioritized remediation report. Extracts messages from Apex classes, Apex triggers, LWC, Aura Components, Visualforce Pages, and Visualforce Components — same extraction as sf-message-catalog — then runs each through grammar analysis to flag article errors, subject-verb agreement, plural/singular mismatches, spelling, capitalization, punctuation, and cross-component wording inconsistencies. Produces a .docx report with current message, issue, suggested fix, component reference, and priority. Use when the user mentions 'grammar audit', 'message quality', 'fix error messages', 'grammatical issues', 'proofread messages', 'message consistency', 'clean up error messages', 'improve error messages', or asks to review messages for grammar, spelling, or consistency. Also triggers on 'typos in our messages' or 'message style review'. Internal-facing; can be scheduled monthly.
-
lahfir Bundle Agent DesktopReliable computer use via native OS accessibility trees. Use when an AI agent needs to see and operate desktop applications (click buttons, fill forms, navigate menus, read UI state, toggle checkboxes, scroll, drag, type text, take screenshots, manage windows, use clipboard, manage notifications). Covers 59 command names (55 operational; four held-input names fail closed until daemon ownership exists) across observation, interaction, keyboard/mouse, app lifecycle, notifications (macOS), clipboard, wait, session lifecycle, and a `skills` command that bundles docs straight from the binary. Triggers on: "click button", "fill form", "open app", "read UI", "computer use", "operate desktop", "accessibility tree", "snapshot app", "type into field", "navigate menu", "toggle checkbox", "take screenshot", "desktop automation", "agent-desktop", or any desktop GUI interaction task. Supports the macOS Phase 1 adapter, with Windows and Linux planned against the same core contracts.
-
lakreame Bundle Build LoopAgentic loop skill for building SaaS, DaaS, and AIaaS projects as a Senior Software Developer. Activate this skill whenever the user wants to build, plan, scaffold, or develop any software project — especially SaaS platforms, data services, or AI-powered services. Always trigger on phrases like "build me a SaaS", "start a new project", "scaffold this", "I want to create a service that...", "agentic loop", "let's build X", or any product or feature request involving this tech stack: React, TypeScript, Node.js, C#, .NET, Python, PostgreSQL, Docker, Vercel, Playwright, HuggingFace, YOLOv8, Alpaca, Stripe, Blazor, Scalar, OpenAPI, GitHub, Flutter, WinUI. Also trigger mid-project when adding features, debugging architecture, or resuming a build. Do not wait for the user to say "use the skill" — just activate it.
-
lakreame Bundle Agentic Project BuilderAgentic loop skill for building SaaS, DaaS, and AIaaS projects as a Senior Software Developer. Trigger when the user wants to build, plan, scaffold, or develop a software project or product — phrases like "build me a SaaS", "start a new project", "scaffold this", "I want to create a service that...", "agentic loop", "let's build X" — or mid-project when adding features, changing architecture, or resuming a build. Preferred stack: React, TypeScript, Flutter, Node.js, C#, .NET, Python, PostgreSQL, MSSQL, Docker, Vercel, Playwright, HuggingFace, YOLO, Alpaca Markets, Stripe, Blazor, Scalar, Swagger, OpenAPI, GitHub. Do NOT trigger for one-off coding questions, single-file scripts, debugging an isolated snippet, or conceptual questions that merely mention these technologies without a project to build.
-
lanamaysu Bundle Jest Rtl TestingUse when writing, reviewing, or debugging Jest + React Testing Library tests, before writing test code or when tests fail
-
lanamaysu Bundle Taiwan Traditional ChineseTaiwan Traditional Chinese (zh-Hant-TW) house style: terminology, punctuation, de-AI tone. Judge by the deliverable, not keywords — if your output will contain Chinese, this applies; read it before the first Chinese character, not after. A git, React or JSON task counts once its output is Chinese: commit messages, PR descriptions, ADRs, README, specs, slide decks, code comments, test-case names, zh-TW locale files. Not for ephemeral chat replies, which follow the conversation style rules already in effect. Also for repairing Chinese: mainland wording (數據/組件), mainland software-industry jargon (落地/對齊/閉環), Taiwan terms (元件/資料/函式), AI 味. Default zh-Hant-TW unless 簡體 is asked. Skip when Chinese is the bug not the output (fonts, encoding, full-width spacing, 繁簡轉換) or when translating into another language.
-
xiehan Bundle Medium Publication ExportUse this skill to export every post from a multi-author Medium publication into a ZIP of HTML files that matches Medium's personal "Download your information" export, so it can feed the medium-to-ssg skill. Triggers whenever a user wants to migrate or archive a whole Medium publication that they cannot export from Settings — for example a company or team engineering blog where many people published from their own personal accounts. Also use this skill when a user says Medium won't let them export a publication, asks to scrape or crawl all posts from a Medium publication or custom domain, wants to back up a Medium publication, or needs to produce a Medium-export-compatible ZIP for a multi-author blog before running medium-to-ssg.
-
y-a-v-a Bundle Session ExportExport the current (or a specified) Claude Code or OpenAI Codex session to a single self-contained HTML file, including any subagent transcripts. Use when the user asks to "export this session", "save the chat as HTML", "share this conversation", or wants an offline-readable record of a coding-agent session.
-
y-a-v-a Bundle Render LoopProject-local dev feedback loop for the session-export renderer. Use when asked to check, fix, or improve how a Claude Code / Codex session renders in the exported HTML — e.g. "check the rendering of tool call X around Y, see session <uuid>". Exports the session to HTML, screenshots the relevant card with headless Chrome so the result can be viewed, then guides editing skills/session-export and re-validating.
-
yangyunfu-ht Skill Vue SkillsVue 3 专家技能。当用户询问 Vue、Nuxt、Pinia、组件开发、TypeScript 配置或性能优化时调用。
-
yangyunfu-ht Skill React SkillsReact 专家技能。当用户询问 React、Next.js、Hooks、组件设计、性能优化或状态管理时调用。
-
yaniv-golan Bundle Telegram WebappsBuild Telegram Mini Apps (Web Apps) — interactive web applications embedded inside Telegram. Use when the user asks to "create a Telegram Mini App", "build a Telegram Web App", "add a web app to my Telegram bot", "make a TWA", or wants to use window.Telegram.WebApp API, integrate a bot with a frontend, implement initData validation, accept Telegram Stars payments, add navigation between pages, set up local development for a Mini App, or implement proactive messaging to users. Covers HTML boilerplate, mock for browser dev, JavaScript SDK (MainButton, SecondaryButton, BackButton, HapticFeedback, CloudStorage), bot setup via BotFather, server-side initData validation (Node/Python/Go), SPA navigation, Telegram Stars payments, and advanced APIs (location, QR, fullscreen, accelerometer).
-
yansongda Skill Frontend Miniprogram ReleaseUse when releasing a WeChat mini-program from a monorepo, especially when creating release PRs, bumping versions, updating CHANGELOGs, or creating version tags
-
yaoapp Bundle Sui DevelopmentGuide for developing web applications using Yao SUI framework. Use when building SUI pages, components, templates, handling data binding, event handling, backend scripts, routing, i18n, or integrating with CUI. Trigger when user mentions SUI, Yao web development, page templates, or frontend/backend integration in Yao applications.
-
yildizberkay Bundle I18nextComprehensive guide for implementing internationalization (i18n) with i18next in JavaScript/TypeScript projects. Use this skill whenever the user asks about i18next setup, configuration, translation functions, pluralization, interpolation, formatting, context, namespaces, TypeScript integration, language detection, or any localization-related task involving i18next. Also trigger when the user mentions react-i18next, next-i18next, i18next plugins, translation JSON files with i18next format, or wants to add multi-language support to a web/mobile/Node.js application using i18next. Even if the user just mentions 'i18n', 'internationalization', 'localization', or 'translations' in a JavaScript/TypeScript context, this skill is likely relevant.
-
yildizberkay Bundle React I18nextHow to implement internationalization (i18n) in React applications using react-i18next and i18next. Use this skill whenever the user wants to add multi-language support to a React app, translate UI content, set up i18next configuration, use the useTranslation hook, withTranslation HOC, Trans component, handle namespaces, plurals, interpolation, or any localization-related task in React. Also trigger when the user mentions 'i18n', 'i18next', 'react-i18next', 'localization', 'translation', 'multi-language', 'internationalization', 'locale', 'language switcher', or wants to translate strings/JSX in React components — even if they don't explicitly name the library. Trigger for Next.js/Remix/Gatsby i18n questions too, as react-i18next is the underlying solution.
-
yumeiriowl Bundle Code WalkthroughSplit source code into segments and generate a self-contained explanatory HTML that embeds the full code, commentary, SVG diagrams, and a glossary panel (multiple files are combined into a single HTML with tabs). Use it for "explain this code", "make a walkthrough", "create a code-explanation HTML/report", "make it readable with diagrams", and similar. When a source path is given and an explained HTML is wanted, use it even without an explicit instruction.
-
yunyoujun Bundle ValaxyValaxy static blog framework built with Vue 3, Vite, and pnpm workspaces. Use when working with Valaxy projects: (1) creating or configuring Valaxy blog sites (site.config.ts, valaxy.config.ts), (2) writing blog posts with frontmatter, (3) developing Valaxy themes (valaxy-theme-*), (4) developing Valaxy addons (valaxy-addon-*), (5) customizing components/layouts/styles, (6) working with the Valaxy monorepo core framework, (7) debugging Valaxy builds or dev server, (8) deploying Valaxy sites. Triggers on: valaxy.config.ts, site.config.ts, theme.config.ts, defineValaxyConfig, defineSiteConfig, defineThemeConfig, defineTheme, defineAddon, valaxy-theme-*, valaxy-addon-*, pages/posts/, ValaxyMain, useSiteConfig, useFrontmatter, #valaxy/config.
-
yutori-ai Bundle Frontend VisualqaVerify a running frontend with explicit visual claims, viewports, and screenshot evidence using the frontend-visualqa MCP server or CLI.
-
yysun Skill React Tailwind Layered WebBuild, refactor, review, or organize a React + Tailwind web app using a layered UI architecture: `src/foundations`, `src/primitives`, `src/patterns`, `src/features`, `src/pages`, `src/shell`, and `src/shared`. Use this skill whenever the user asks to create or change pages, routes, layouts, components, styling, feature UI, or app structure, especially when deciding where code belongs, how dependencies should flow, how to keep routes thin, or how to avoid dumping code into catch-all folders like `components` or `lib`.
-
zakelfassi Bundle DeckifyCreate self-contained HTML presentation decks and companion downloadable guides for content creators, educators, technical talks, YouTube lives, workshops, explainers, launch narratives, and media-rich essays. Use when the user wants a presentable deck, speaker notes, run-of-show, demo plan, PDF/guide output, image-generation plan, or screenshot-backed visual narrative rather than a flat markdown answer.
-
zakelfassi Bundle HtmlifyCreate self-contained HTML artifacts from agent or repo context, including operator briefs, build plans, implementation maps, PR/release packets, incident timelines, decision briefs, reports, explainers, diagrams, prototypes, and lightweight editors. Use when the user asks to turn dense text, code evidence, plans, reviews, or status into browser-ready HTML instead of a markdown wall.
-
zeon-studio Bundle Hugo Template GuidanceUse whenever you need to understand how this theme works — adding pages, managing content, configuring the site, using partials/components/modules, project architecture, scripts, or styling/theming (Tailwind v4, Bootstrap 5, or a hybrid — verify which). Use for ANY question about the structure, usage, or customization of the template or theme.
-
zeroz-lab Bundle Gm Data ChartGenerate data visualization charts from natural language descriptions. Creates single-file HTML with inline SVG that can be opened in any browser. Use this skill whenever the user asks to create, draw, or generate: bar chart, column chart, 柱状图, 条形图, pie chart, donut chart, 饼图, 环形图, line chart, area chart, 折线图, 面积图, scatter chart, scatter plot, 散点图, radar chart, spider chart, 雷达图, 蜘蛛图, funnel chart, 漏斗图, conversion, bubble chart, 气泡图, data table, table chart, 表格, 数据表, data visualization, chart, 数据可视化, 图表, or wants to visualize data, compare values, show trends, show proportions, analyze correlation, multi-dimensional comparison. Supports 9 chart types and 12 visual styles. Supports 4 output formats: html, svg, mermaid, png/pdf (via export script).
-
zeroz-lab Bundle Gm ArchitectureGenerate professional architecture diagrams from system descriptions. Creates single-file HTML with inline SVG that can be opened in any browser. Use this skill whenever the user asks to create, draw, or generate: architecture diagrams, system diagrams, infrastructure diagrams, layered architecture, component diagrams, platform capability maps, process architecture, microservice architecture, system design diagrams, architecture visualization, tech stack diagrams, flowchart, flow chart, decision tree, process flow, mind map, mindmap, brainstorm, concept map, ER diagram, entity relationship, database schema, data model, sequence diagram, interaction diagram, message flow, API flow, protocol flow, social card, knowledge card, comparison card, quote card, ranked list card, 知识卡片, 社交卡片, 分享图, 对比卡片, 引用卡片, 排行卡片, 分层架构图, 系统架构图, 架构图, 流程图, 思维导图, ER图, 序列图, 时序图, or wants to visualize how a system works. Supports 9 diagram types and 12 visual styles: dark-professional, hand-drawn, light-corporate, cyberpunk-neon, blueprint,
-
zhaoolee Bundle Notes Export API通过 Token 或首次使用的用户名与密码连接调用方明确配置的锤子便签服务,管理当前账号的云端工作区并导出内容。支持便签列表与全文查询、新增、更新 Markdown、软删除、回收站恢复、显式永久删除、文件夹分类、星标、置顶、生成可粘贴到微信公众号的富文本 HTML,以及把 Markdown 或本地 .md 文件导出为带图的锤子便签长图 PNG;导出支持 default 暖白纸感、smartisan-dark 暗黑主题和自定义底部文案。用户提到锤子便签、用 AI 增删改查便签、便签查询或自动维护、分类、收藏、置顶、公众号复制格式、Markdown 转便签图片或批量长图导出时使用。服务地址没有默认值,调用方必须通过 .env 或命令行明确提供。
-
zhouwei713 Bundle Workbuddy Skin MakerCreate, refine, diagnose, and release adaptive WorkBuddy Dream Skin themes in this project, including image driven light or dark UI selection, lively nonblocking decorations, readable chat and artifact surfaces, external CDP injection, and strict visual auditing. Use for WorkBuddy skin design, theme JSON or CSS changes, ornament work, historical task readability, artifact panel improvements, compatibility fixes, QA evidence, or release readiness checks.
-
zjgulai Skill Composition PatternsEnforce well-designed React component composition — compound components, explicit variants, decoupled context, maintainable state models — instead of boolean-prop explosion or render-prop abuse. Use for design systems, component libraries, complex forms, Modal/Dropdown/Select/Tabs-style composable components.
-
babandeepsingh Bundle React TailwindOpinionated assistant for installing and configuring Tailwind CSS in React projects, then revamping components using Tailwind utility classes and semantic design tokens. Use when working on React (CRA, Vite, Next.js, Remix, plain SPA) and you need guidance on Tailwind setup, dependency selection and installation order, configuration, semantic theme design, and common UI recipes (forms, data tables, navigation, modals, layout).
-
hugorcd Skill NucleoWorkflow guidelines and slash command execution for Nucleo App SVG icons and local Iconify collections in Nuxt/Vue projects. Use whenever the user asks for /nucleo, nucleo icons, importing or converting local Nucleo SVGs, configuring custom collections, or handling currentColor styling.
-
mithunyc Bundle Awesome Design MdUse curated DESIGN.md references to guide AI-generated UI and visual design. Use when building or improving frontend UI, landing pages, dashboards, design systems, visual style, brand-inspired interfaces, or when the user asks for a UI to look like a known product, company, or design reference from the VoltAgent awesome-design-md catalog.
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 accessibility, accessibility-testing, shadcn. 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.