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.
-
banibratachatterjee Bundle Flow Custom Property EditorsUse when designing or reviewing Flow custom property editor patterns for screen components or actions, including when Flow Builder needs guided design-time configuration, generic type mapping, or builder-context-aware validation. Triggers: 'Flow custom property editor', 'configurationEditor', 'builderContext', 'inputVariables', 'Flow screen component setup'. NOT for general LWC runtime behavior when Flow Builder customization is not involved.
-
banibratachatterjee Bundle Lightning Page Performance TuningUse when a Lightning record page, home page, or app page is slow to load or render — covers Experienced Page Time (EPT) analysis, component count reduction, progressive disclosure via tabs and conditional rendering, Lightning Experience Insights diagnostics, and DOM/XHR minimization strategies. Triggers: 'Lightning page is slow', 'EPT is high', 'record page takes too long to load', 'too many components on page', 'Lightning Experience Insights shows slow page', 'how to optimize Lightning page performance'. NOT for Visualforce page performance (separate concern). NOT for Apex or SOQL query optimization (use apex/apex-cpu-and-heap-optimization or data/soql-query-optimization). NOT for report or dashboard performance (use admin/report-performance-tuning).
-
banibratachatterjee Bundle Analytics Embedded ComponentsUse this skill when embedding a CRM Analytics dashboard into a Lightning App Builder page, Experience Cloud page, or when embedding a custom LWC inside an Analytics dashboard. Trigger keywords: wave-wave-dashboard-lwc, wave-community-dashboard, analytics__Dashboard target, embed dashboard, record-id context filtering, dashboard state JSON, analytics component. NOT for standard LWC development unrelated to Analytics dashboards, NOT for designing dashboard content or datasets, NOT for CRM Analytics app creation or dataset management.
-
banibratachatterjee Bundle Experience Cloud Member ManagementUse this skill when adding external users to an Experience Cloud site, configuring self-registration, managing external user licenses, or customising the login and registration pages. Trigger keywords: add members to community, external user license, self-registration, customer portal login, partner user onboarding, ConfigurableSelfRegHandler. NOT for internal (Employee) user management, internal profile or permission-set assignments, or Experience Cloud page-layout / component design.
-
banibratachatterjee Bundle Metadata Coverage And DependenciesAssessing metadata type coverage across Salesforce deployment channels (Metadata API, SFDX, unlocked packages, managed packages) and mapping component dependency graphs using Tooling API MetadataComponentDependency. Use when planning packaging strategies, evaluating deployment risk, performing impact analysis before component deletion, or mapping tightly coupled metadata for modular architecture. Trigger keywords: metadata coverage report, dependency graph, MetadataComponentDependency, impact analysis, unsupported metadata types, packaging eligibility. NOT for deployment mechanics (use destructive-changes-deployment). NOT for CI/CD pipeline design (use continuous-integration-testing).
-
banibratachatterjee Bundle Experience Cloud Deployment AdminUse this skill when deploying an Experience Cloud site (formerly Community) between Salesforce orgs or sandboxes — including metadata ordering, ExperienceBundle enablement, post-deployment publishing, and change-set or SFDX-based migration. NOT for: LWC component development within Experience Builder, CMS content migration via Managed Content REST API, or Aura/LWC code authoring.
-
banibratachatterjee Bundle Industries Integration ArchitectureUse when designing or reviewing the integration layer between Salesforce Industries clouds (Insurance, Communications, Energy & Utilities) and vertical backend systems such as policy administration systems, BSS/OSS platforms, or Customer Information Systems (CIS). NOT for generic Salesforce integration patterns unrelated to industry verticals, NOT for OmniStudio component design decisions (see omnistudio-vs-standard-architecture), NOT for FSC data model or module licensing (see insurance-cloud-architecture).
-
banibratachatterjee Bundle Embedded Analytics ArchitectureUse this skill to architect CRM Analytics dashboard embedding in Lightning pages, Experience Cloud, or Visualforce — covering dashboard context strategy, filter/state management, cross-dashboard context propagation, performance optimization, and LWC vs Aura component selection. Trigger keywords: embed CRM Analytics dashboard, embedded analytics Lightning page, analytics dashboard filter, wave dashboard LWC, analytics state attribute. NOT for CRM Analytics dashboard design/building (use analytics skills), standard Lightning report embedding, or Data Cloud analytics.
-
banibratachatterjee Bundle Headless Vs Standard ExperienceUse when choosing between Headless, LWR (Lightning Web Runtime), or Aura as the Experience Cloud frontend architecture: performance tradeoffs, developer cost, migration readiness, and flexibility. Trigger keywords: headless vs LWR, LWR vs Aura, Experience Cloud architecture decision, site performance architecture, community site technology choice. NOT for implementing a chosen architecture, NOT for Experience Builder component development, NOT for CMS headless content delivery via Connect REST API.
-
banibratachatterjee Bundle Experience Cloud Search CustomizationUse this skill when configuring or extending search on an Experience Cloud site — covering Search Manager scope configuration, LWR vs Aura search component selection, federated search setup, guest user search access, and custom search result components. NOT for SOSL/SOQL query development. NOT for internal Salesforce global search or Einstein Search for agents.
-
geegewu Skill Audio To Report会议录音完整处理流程:转录→提炼→HTML报告。用户说"处理会议录音"、"会议纪要"、"录音转纪要"时触发。
-
geegewu Bundle Meeting Summary将会议文字稿(带时间戳 Markdown)提炼为思维导图、会议纪要、待办事项,生成 HTML 报告。用户说"会议纪要"、"生成报告"、"meeting summary"时触发。
-
hwm09110 Bundle Vue Project Page Builder先分析目标 Vue 项目,再按项目现有规范创建或修改页面、页面级组件和业务组件。适用于需要在现有项目中开发或调整 Vue 视图、路由页面、列表页、表单页、详情页等场景,并要求优先复用已有组件、遵循仓库现有目录结构与代码风格、避免另起一套写法,同时判断页面局部内容应保留在页面内还是抽成可复用组件。
-
hwm09110 Bundle Vue Project Skill Builder先询问用户当前使用的 AI 编辑器,再分析已有 Vue Web 项目的结构、技术栈、页面规范、请求封装、API 组织、组件体系、状态管理和样式方案,最后基于分析结果为当前项目生成适配该编辑器目录结构的中文开发 skill。适用于需要把一个现有 Vue Web 仓库沉淀成仅供当前项目使用、且存放到正确编辑器目录下的专属开发规范场景。
-
hwm09110 Skill Electron Vue3 Typescript DesktopGuides building and maintaining Electron desktop apps with Vue 3, TypeScript, Vite, Pinia, SCSS themes, preload IPC, and tray/window lifecycle. Use when the user works on electron/main, preload, renderer integration, packaged paths, dark mode, or desktop-specific UX.
-
taiki-yoshida Bundle Azure Swa Functions StackScaffold and deploy a React+Vite frontend on Azure Static Web Apps (free plan) paired with a standalone Azure Functions backend. Use when user wants a full-stack app on Azure using SWA + Functions, needs cheap hosting for an admin/demo tool, asks about CORS setup between SWA and Functions, or wants a production-ready React+Functions deployment pattern.
-
idealzxz Skill Create Component基于模板创建通用 UI 组件(非弹窗、非页面),包含 JSX、LESS 和素材目录。当用户要求创建组件、新增组件、添加按钮组、创建 UI 模块时使用。
-
intrpom Skill Email Validation NextjsMulti-layer email validation for Next.js forms. Detects typos in email domains (gmail.cmo → gmail.com), blocks disposable/fake emails (mailinator, yopmail, tempmail, etc.), and validates format on both client and server. Use when adding email input validation, form email checking, or protecting lead forms from fake emails. Based on production pattern from ales-kalina.cz.
-
intrpom Skill DB Backup Postgres SqliteImplements a production database backup system for Next.js projects using PostgreSQL (production) and SQLite (development). Exports all tables to JSON files, validates record counts, rotates old backups, and optionally uploads to Dropbox. Includes a restore script that syncs production data to local SQLite for development. Use when setting up database backups, adding a backup script, implementing backup/restore workflow, or protecting production data before migrations. Based on a proven production pattern from ales-kalina.cz projects.
-
intrpom Skill Stripe Nextjs IntegrationIntegrates Stripe payments into a Next.js (App Router) project. Use when setting up Stripe checkout, webhooks, upsells, or payment processing in a Next.js app. Covers checkout session creation, webhook handling, product configuration, and success/cancel pages. Based on a proven production pattern from ales-kalina.cz Stripe account.
-
intrpom Skill Mailgun Nextjs IntegrationIntegrates Mailgun email sending into a Next.js (App Router) project. Use when setting up transactional emails, email templates, purchase confirmations, or any email sending via Mailgun API. No SDK needed — uses fetch directly. Based on a proven production pattern from ales-kalina.cz projects.
-
giulsposito Bundle R PlotlyExpert interactive data visualization in R with plotly - web-based graphics, animations, Shiny integration, and 3D plots. Use when user works with plotly, mentions "plotly", "plot_ly", "ggplotly", "interactive plot", "interactive visualization", "visualização interativa", "gráfico interativo", "animated plot", "animação", "animation", "plotly em R", "plotly for R", "plotly in R", "web graphics", "HTML widget", "3D plot", "3D surface", "choropleth", "mapbox", "plotly animation", "plotly shiny", "event_data", "plotlyOutput", "renderPlotly", "hover template", "plotly trace", "add_trace", "layout plotly", or discusses interactive/web-based visualization in R. Do NOT activate for static ggplot2 plots without plotly conversion.
-
feeicn Bundle Slide Writer把想法、大纲、文档或草稿变成结构清晰、设计精良的企业级 HTML 演示文稿。
-
kirillklem Bundle Module Boundary DesignDesign a new module or split a large code area into coherent modules with explicit boundaries. Trigger when the user wants to introduce a module, carve out a subsystem, split a large component, reduce coupling, clarify ownership, or phrases like "выдели модуль", "разрежь это на модули", "спроектируй границы", "как правильно выделить новый модуль", or similar. Define responsibilities, boundaries, ownership, input/output contracts, state model, extension points, anti-coupling rules, test strategy, and phased adoption plan. Keep the design concrete and implementation-oriented. Prevent vague helper, service, or utils architectures by making responsibilities and dependency directions explicit. Do not use for broad architecture option comparison, full implementation planning, or generic code cleanup.
-
andrewjmorrell Skill Code CheckRun a comprehensive code review on the current branch's changes compared to the base branch. Uses multiple specialized agents (code-reviewer, code-simplifier, test-analyzer, comment-analyzer, silent-failure-hunter, type-design-analyzer, documentation-reviewer) plus platform-specific agents (android-reviewer, ios-reviewer, react-native-reviewer, flutter-reviewer, web-reviewer) to analyze committed and optionally uncommitted changes. Use when the user asks to "check my code", "review my changes", "code check", "review this branch", or wants feedback before opening a PR.
-
uhdyindy Bundle Techstack IdentificationOSINT-based technology stack identification. Discovers company tech stacks using passive reconnaissance across 17 intelligence domains. Given a company name (and optional domain hint), infers frontend, backend, infrastructure, and security technologies using publicly available signals.
-
ranilf2005 Bundle Cisco Secure Firewall AuditConverts Cisco Secure Firewall health-check source files into structured audit reports. Use when the user provides Cisco Secure Firewall health check content in DOCX, Markdown, TXT, LOG, CFG, or CONF format and wants an HTML, Markdown, or JSON audit report. Evaluates findings using the project references for audit categories, extraction patterns, reference values, and report template guidance. Produces severity-based findings, positive findings, compliance mapping, methodology, and disclaimer sections. Performs a comprehensive Cisco Secure Firewall configuration and health check audit for FMC and FTD inputs. Use when the user uploads, shares, or references a Cisco Secure Firewall health check report, Word document, raw CLI output, show-tech, policy export, FMC notes, or log bundle and asks for a review, audit, compliance mapping, best-practice analysis, or HTML report. Evaluates against Cisco Secure Firewall best practices, covering software lifecycle, device registration, access control policy hygiene, intru
-
cnbb-design Bundle Deno JS LinterPure JavaScript/ECMAScript linting guidance based on Deno's lint rules, filtered to language-level concerns only. No React, JSX, Fresh, Deno-specific, Node.js-specific, or TypeScript type-system rules. Use when writing, reviewing, or refactoring vanilla JavaScript to catch bugs, avoid pitfalls, and enforce idiomatic style.
-
yiweiren123-arch Skill Frontend DesignGenerate production-ready frontend code from design descriptions and mockups
-
yiweiren123-arch Skill Creative FrontendBuild expressive, animation-rich frontend experiences that delight users
-
yiweiren123-arch Skill Correctness FrontendBuild reliable, accessible, well-tested frontend components
-
jj1guj Bundle Markdown To Textile CodeclassConvert Japanese technical Markdown to Textile. Use when asked to "textileに変換", especially when code highlighting must use explicit <pre><code class="..."> blocks. Prioritize user-specified class names (for example javascript/js/html/shell/cpp).
-
cnbb-design Skill TailwindcssTailwind CSS v4 utility-first styling with CSS-native configuration. Use when styling with Tailwind utility classes, configuring themes via @theme, building responsive/dark-mode layouts, creating custom utilities or variants, or working with container queries. Covers the complete v4 API including @theme, @utility, @custom-variant, @variant, @source, and all utility classes.
-
cnbb-design Bundle Biome JS LinterPure JavaScript/ECMAScript linting guidance based on Biome's lint rules, filtered to language-level concerns only. No React, Node.js, JSX, CSS, or framework-specific rules. Use when writing, reviewing, or refactoring vanilla JavaScript to catch bugs, avoid pitfalls, enforce idiomatic style, simplify code, and prevent performance or security issues.
-
cnbb-design Bundle Biome LinterJavaScript/TypeScript/JSX/CSS linting guidance based on Biome's 394 lint rules. Use when writing, reviewing, or refactoring JS/TS/JSX/CSS code to catch bugs, enforce style consistency, improve accessibility, avoid performance pitfalls, and prevent security vulnerabilities. Covers correctness, suspicious patterns, style, complexity, a11y, performance, and security categories.
-
jack-pision Skill Frontend Agent ExperienceDesigns and implements frontend experiences for agentic applications. Use for chat and non-chat agent UX, streaming state machines, plan and receipt surfaces, approvals, provenance, failure recovery, and trustworthy interaction design.
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 flow-custom-property-editors, lightning-page-performance-tuning, analytics-embedded-components. 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.