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.
-
clueso-ai Skill Accessibility PassMake one video accessibility-ready: captions on, on-screen text sized and contrasted to be readable, pacing checked so every step can be followed. Use when the user says "accessibility pass", "make this video accessible", "check WCAG for my video", "is this readable for everyone", or "prep this for an accessibility review".
Audited -
delorenj Bundle God DocsImplement and maintain the GOD doc system - a documentation strategy for multi-component repositories. Use when: (1) a task requires any code modifications or analysis, (2) adding or modifying any documentation, (3) auditing doc freshness and detecting drift
1 -
delorenj Bundle Bmad HTML WorkspaceBMAD HTML Workspace
1 -
jordancoin Bundle Uikit PatternsPure UIKit patterns for state management, data binding, and component design without SwiftUI bridging
-
jordancoin Bundle Swiftui WebkitEmbeds and controls web content in SwiftUI with WebKit for SwiftUI, including WebView, WebPage, navigation policies, JavaScript execution, observable page state, link interception, local HTML or data loading, and custom URL schemes. Use when building iOS 26+ article/detail views, help centers, in-app documentation, or other embedded web experiences backed by HTML, CSS, and JavaScript.
-
databricks-solutions Bundle 04 Appkit Plugin AddAdd plugins to an existing Databricks AppKit project. Covers Lakebase (PostgreSQL), Analytics (SQL queries + dashboards), Genie (natural language AI/BI), Files (UC Volumes), and Serving (Model Serving / Agent endpoints). Guides through plugin registration, environment variables, app.yaml configuration, and frontend integration. Use when asked to add a plugin to an existing app, integrate Lakebase, add analytics, connect a Genie space, enable file uploads, add a serving endpoint, or extend an AppKit project with new capabilities. Triggers on "add plugin", "add lakebase", "add analytics", "add genie", "add files plugin", "add serving", "add agent endpoint", "integrate postgres", "add database", "add dashboards", "add file browser", "extend app", "connect genie space", "model serving plugin". Not for creating a Lakebase project or managing Lakebase via CLI -- use the databricks-lakebase agent skill for that.
-
databricks-solutions Bundle 06d Appkit Agent App ProxyWire an AppKit frontend (Databricks App) to a separate Agent App backend (Databricks App hosting mlflow.genai.agent_server or ResponsesAgent) with OBO token forwarding via x-forwarded-access-token, app-to-app service principal auth, dual-format SSE streaming, and the /api/chat contract. Use this skill when the agent is deployed as its own Databricks App — not as a Model Serving endpoint. Triggers on "agent app backend", "two apps", "appkit plus agent app", "proxy agent app", "agent-backend resource", "x-forwarded-access-token", "migrate agent to apps", "agent app proxy".
-
databricks-solutions Bundle Project PlanningCreate multi-phase project plans for Databricks data platform solutions with Agent Domain Framework and Agent Layer Architecture. Includes interactive Quick Start with key decisions, industry-specific domain patterns, complete phase document templates (Use Cases, Agents, Frontend), Genie Space integration patterns, deployment order requirements, and worked examples. Supports both acceleration mode (plan on a completed Gold layer) and workshop mode (`planning_mode: workshop`) that plans from the best available layer with hard artifact caps. Use when planning any Databricks solution post-Gold layer — observability, analytics, agent-based frameworks, or multi-artifact projects.
-
databricks-solutions Bundle Documentation OrganizationEnforces documentation organization standards and provides comprehensive framework documentation authoring for Databricks projects. Operates in two modes: (1) Organizational Enforcement — validates file placement (root directory rules, docs/ hierarchy), naming conventions (kebab-case, date-prefixed), and proactively suggests cleanup for misorganized files. (2) Framework Documentation — orchestrates creation of complete technical documentation sets using fill-in-the-blank templates (index, introduction, architecture, component deep dives, implementation guides, operations guides, troubleshooting guides) with requirements gathering, quality checklists, and worked examples. Use when creating any .md file, organizing existing documentation, maintaining project structure, or creating comprehensive framework documentation sets.
-
microsoft Bundle Accessibility PassUse this skill whenever the user asks to check, review, or fix the accessibility of a PowerPoint deck, Word document, HTML page, or Markdown file, and before handing over any deck or document this agent just generated, so it does not ship with missing alt text, untitled slides, or unreadable colour contrast.
2.7k -
microsoft Bundle Regulation MonitorUse when the user asks to set up, run, or check a scheduled regulation, law, or regulatory-guidance monitor or tracker — triggers include "set up a regulation tracker for X", "monitor [regulation] for me", "run my regulation monitor", "what changed on [regulation] this week", or an unattended scheduler invoking a saved profile. On first invocation walk interactive setup (topics, jurisdictions, cadence, delivery), auto-discover the top authoritative sources per topic, and STOP for user confirmation before any monitoring. On subsequent runs visit only the locked source list plus user seeds, classify items, flag team-relevant ones via a WorkIQ-derived keyword match, and render a self-contained HTML dashboard with client-side sortable columns. Do NOT use for one-off legal research, reading a single document, computing compliance liability or filing position, or non-regulatory news monitoring.
2.7k -
microsoft Bundle Scrollytelling DataTurns an uploaded dataset (.xlsx, .csv, .json, or PDF tables) into a self-contained, scroll-driven HTML data story with animated Plotly charts, counting stat cards, and narrative chapters. Use when the user asks for a data story, scrollytelling report, or an interactive narrative write-up of a dataset. If the user asks for a demo or example with no dataset of their own, build the story from the bundled sample workbook at assets/Basketball_Demo_Data.xlsx.
2.7k -
microsoft Bundle Wcag Power PlatformEnsure web apps, HTML pages, and Power Platform components meet WCAG 2.1 accessibility guidelines. Use this skill WHENEVER building, reviewing, or refactoring any web UI or Power Platform artifact — standalone HTML/CSS/JS pages, websites and single-page apps, React/web artifacts, PCF (PowerApps Component Framework) controls, HTML/JS web resources, model-driven apps and forms, canvas apps, or Power Pages — even if the user does not say "accessibility". Trigger on requests to create pages or components, build forms, style UI, add buttons/inputs/grids/charts, theme an app, apply a Power Apps modern theme / CustomTheme, implement dark mode / high-contrast / design tokens, fix a control, write HTML/CSS/React, or audit a page against WCAG/ADA/Section 508/EN 301 549. Also trigger on "make this accessible", "a11y", "screen reader", "keyboard navigation", "colour contrast", "dark mode", "theme", "ARIA", or "WCAG". Apply the checks proactively so output conforms to WCAG 2.1 AA by default, across every theme variant.
2.7k -
microsoft Bundle Work Iq SignalboardBuild a lively, quantitative Work IQ Signalboard as a self-contained HTML dashboard of the signed-in user's last 28 days of Calendar, Mail, and Teams chat activity. Use whenever the user asks "show me my Work IQ signals", "build my Work IQ Signalboard", "make a Work IQ dashboard", or wants a visual of recent Microsoft 365 work patterns. Use Work IQ before responding, tolerate unavailable sources without guessing, and return the rendered HTML file.
2.7k -
microsoft Bundle Doc Format ConverterUse this skill whenever the user asks to convert a document or file from one format to another — Markdown, HTML, PDF, Word (.docx), PowerPoint (.pptx), Excel (.xlsx), CSV, or plain text (e.g. "turn this Word doc into a PDF", "make slides from this markdown", "save this page as markdown"). Only for producing a converted file as a deliverable. Do NOT use this skill to answer questions about a document's content — the analyzing-* skills handle that. Run the bundled scripts/convert.py instead of writing ad-hoc conversion code, BEFORE attempting any conversion yourself.
2.7k -
microsoft Bundle Route Map VisualizerUse this skill to visualize routes and locations on a map — especially after an upstream tool call (routing connector, Azure Maps, Bing Maps connector, HERE, Mapbox, Dataverse, CRM, SharePoint, or any connector that returns coordinates) has returned ordered stops, coordinates, distances, or road geometry. Produces PNG, interactive HTML, GeoJSON, KML, deep links, and QR codes. Also use for marker maps (weather, CRM data, site lists) and for any request to "show these on a map", "map these locations", or "visualize this route". DO NOT use this skill to compute routing — call a routing connector first, then pass the result here for visualization.
2.7k -
microsoft Bundle AI Usecase AssessmentUse this skill whenever the user says "assess this use case", "score my AI use case", "prioritise these agent ideas", "generate a use case assessment report", or "update my AI use case report" — or when they attach a use-case document, SDR, or prior `*_AI_UseCase_Assessment_Report_*.html` and ask you to assess, strengthen, score, or refresh it. Invoke BEFORE writing any assessment content and BEFORE generating any report.
2.7k -
microsoft Bundle Persona Reaction PanelPre-simulate how a defined set of role-based personas will react to an internal comms, launch, or enablement artefact before it ships. Use when the user asks to "run the persona panel", "pressure-test this comms against our personas", "QA this launch email/deck before it goes out", "how will each team react to this", or wants persona- and domain-level feedback on a broad internal artefact. Requires a personas file — bring your own (see references/personas.template.md). Do NOT use for 1:1 private comms, HR/performance matters, or legal/contractual language.
2.7k -
microsoft Bundle Call For Speakers DigestWeekly digest of open conference Call for Speakers (CFP) opportunities matching the person's topics of interest, delivered as an HTML email. Use this skill when someone asks to be notified about speaking opportunities, wants a recurring CFP digest, asks "what conferences are taking submissions right now", or wants to set up a weekly speaker opportunity search. Also use on the skill's own recurring weekly run to refresh the digest, and when the person wants to update their topics, location or format preferences, or exclude a conference they're already committed elsewhere for.
2.7k -
microsoft Bundle Cowork Use Case One PagerTurn a Cowork conversation or workflow into a high-value Cowork use case one-pager as a printable HTML page. Use when the user asks to "write up a Cowork use case", "make a one-pager for this workflow", "document what this scheduled task does", "turn this into a case example", "create a slide-style use case summary", or capture a task as a shareable internal case example. Do NOT use for a multi-slide deck, an editable Word or Excel document, or a plain written summary — this skill produces a single printable HTML page.
2.7k -
crimsonblazezero Skill Design Taste FrontendAnti-slop frontend design taste system. Set visual dials, override default AI aesthetics, and enforce high-fidelity layouts.
Audited -
crimsonblazezero Bundle RemotionComprehensive guide for programmatically creating videos with React using the Remotion framework. Use this skill when the user wants to: (1) Create or edit motion graphics and videos using React code, (2) Handle video rendering pipelines, (3) Implement complex animations like text effects, transitions, or 3D scenes, (4) Manage media assets like audio, images, GIFs, and Lottie animations, (5) Automate video generation based on data.
-
crimsonblazezero Bundle Graphic OverlaysPackage an existing talking-head / interview / podcast video by layering timed, designed GRAPHIC OVERLAY cards onto the playing video — titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript. The source video plays in full; the agent designs and writes each card's HTML in conversation, then renders to MP4 via hyperframes. Use when the user asks for graphic overlays, on-screen graphics / lower-thirds / data callouts / kinetic titles on a video, "package / dress up my video", "add overlay cards / graphic cards", or AI-composed graphic packaging of an existing video. NOT for plain subtitles (→ embedded-captions) or building a video from scratch (→ the creation workflows); when unsure overlays-vs-captions, see /hyperframes-read-first.
-
crimsonblazezero Bundle Guizang Ppt Skill生成横向翻页网页 PPT(单 HTML 文件),含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格:① "电子杂志 × 电子墨水"(衬线 + 流体背景 + 暖色) ② "瑞士国际主义"(无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮)。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT,或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。
-
crimsonblazezero Bundle Browser InspectionInspect web applications: API endpoints, network traffic, frontend code, backend routes, and debugging techniques using browser tools and terminal.
-
crimsonblazezero Bundle Skill用本地微信公众号抓取器批量识别并拉取某个公众号作者的历史文章,输出 Markdown、HTML 和 articles.json,供后续做作者语料库、风格拆解、仿写模板、事实核验和内容归档。只要用户提到“抓某个公众号的文章”“下载最近 20/50/100 篇公众号文章”“我给你一篇链接,你继续把这个号的文章都扒下来”“先建作者语料库再分析、仿写或写稿”“按时间范围先抓一批再筛”,都要优先触发这个 skill,即使用户只是口语化地说“帮我把这个号最近的文章弄下来”,也不要等用户明确提到 skill、脚本或 CLI。
-
crimsonblazezero Skill Lingxing Weekly Report KanbanUse when the user wants to pull Amazon sales/ad profit data from LingXing ERP (跨境电商ERP), build a weekly/monthly business dashboard (经营周报/月报/数据看板/排名环比/父ASIN), or send the report to a DingTalk group (钉钉群). Triggers: "拉上周数据/拉上个月数据", "父ASIN销售广告利润", "经营周报看板", "BSR排名环比", "发送到钉钉/欧洲群", "lingxing周报", "lingxing看板", "月报/月度复盘/全年完成表/退款率/退货率/仓储费/库销比". Pulls order-profit reports at parent-ASIN granularity, cross-validates ads spend, enriches Chinese product names, optionally fetches BSR rank trends, builds a self-contained Chart.js HTML dashboard (monthly variant adds fee-structure/rating/refund-rate/annual-target columns), and sends it to a specified DingTalk group via the dws CLI.
-
crimsonblazezero Skill Design Taste Frontend V1The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
-
crimsonblazezero Bundle Kovascape Daily Report从领星 MCP 拉取 15 个亚马逊站点(KovaScape 品牌)的真实库存和利润数据,运行规则引擎检测异常,生成 HTML 日报,分发钉钉待办,推送 Action Card。当用户要求"执行日报"、"生成 KovaScape 日报"、"跑日报流程"或自动化定时器触发日报任务时使用。
-
pinkpixel-dev Bundle Pollinations APIComplete reference for building apps with the Pollinations API — a multi-modal AI generation platform supporting text, image, video, audio, and embeddings. Use this skill whenever working with Pollinations, gen.pollinations.ai, pollinations.ai, or any of their models. ALWAYS trigger on: text generation with Pollinations models, image generation via URL or API, video generation, TTS/audio generation, embeddings, BYOP (Bring Your Own Pollen) OAuth flows, MCP server setup, CLI usage, account/balance/usage APIs, or safety filtering. Also trigger when the user mentions "pollen", "flux model", "pollinations image", "polli CLI", device flow for Pollinations, or wants to integrate Pollinations into any TypeScript/Node/Python/React app. If the user wants to generate any media with AI without paying OpenAI directly, this is a strong candidate — check this skill.
-
pinkpixel-dev Skill UI Quality AuditRun technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.
-
pinkpixel-dev Bundle React Native Best PracticesProvides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
-
pinkpixel-dev Skill Frontend UI EngineeringBuilds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components, implementing layouts, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
-
jordancoin Bundle IOS AccessibilityImplement, review, or improve accessibility in iOS/macOS apps with SwiftUI and UIKit. Use when adding VoiceOver support with accessibility labels, hints, values, and traits; when grouping or reordering accessibility elements; when managing focus with @AccessibilityFocusState; when supporting Dynamic Type with @ScaledMetric; when building custom rotors or accessibility actions; when auditing a11y compliance; or when adapting UI for assistive technologies and system accessibility preferences.
-
jordancoin Bundle Uikit Accessibility AuditorAudit UIKit-based screens for accessibility issues with concrete VoiceOver and Dynamic Type fixes
-
jordancoin Bundle Appkit Accessibility AuditorAudit macOS AppKit interfaces for accessibility, focusing on VoiceOver, keyboard navigation, and semantics
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-pass, god-docs, bmad-html-workspace. 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.