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.
-
rustam-z Bundle Render StyleHouse style for the render_html tool — dark dashboard / architecture-diagram look with stat tiles, bar rows, numbered timeline steps, two-panel grids, status pills, connector arrows, callout bands, and verdict blocks. Read this skill before calling render_html so the output is visually consistent. Provides CSS tokens, layout rules, color semantics, and three copy-paste HTML skeletons to adapt.
-
tetratheta Bundle Coding StandardsCodex-first coding standards bundle for reusable local skills. Primary target is OpenAI Codex with secondary compatibility for Claude Code. Includes general, frontend, Java, JavaScript/TypeScript, Kotlin, and Python rules.
-
zusu12 Skill Research HarvesterFetches and saves web content from multiple public sites based on a user-provided topic or keyword. Use this skill when the user wants to collect raw HTML or plain text from several URLs related to a research topic and save the results to local files for later review. Do NOT use this skill if authentication (API keys, login, tokens) is required.
-
a2v10 Bundle A2v10Work with the A2v10 platform: endpoints (model.json), XAML/HTML views, SQL stored procedures, template.ts, localization. USE when the request mentions A2v10, model.json, view.vxaml (or view.xaml), template.ts, an A2v10 endpoint, or files matching the A2v10 layout — including when it merely asks what A2v10 is, what can be built with it, or how to start. Do NOT use for generic SQL, XAML, or TypeScript unrelated to A2v10.
-
b101systems Skill Test Spec AuthoringTurn a schematic or a bill of materials into a test spec using the ATE MCP: component test methods, required instruments, DUT connections, measurable parameters and station pinout. Use when given a schematic or asked to create a test spec for a component or an electronic assembly. Read-only: it does not create TestStand sequences, edit limits or run tests. Pairs with the ts-seq-authoring and hal skills, which take the spec into a sequence.
-
dcoupe Bundle Courseweaver Interactive Weaver课织匠互动织造引擎。将知识点/教学内容转化为完整的浏览器可运行HTML互动教材,支持3D动画、交互模拟、测验、视觉隐喻、响应式布局。输入一个知识点(如"光的折射""牛顿第二定律"),输出一份可直接打开的HTML页面。
-
dcoupe Bundle Courseweaver Knowledge Structurer课织匠知识织构引擎。从教材文件(PDF/Word/Markdown)中自动提取章节结构、知识点层级,生成交互式知识图谱HTML(含树形视图和图谱视图)。输入一本教材文件,输出浏览器可直接打开的知识图谱页面。
-
dxos Bundle Composer Plugins 2Use when working on files in packages/, adding new plugins, refactoring plugin components/containers, writing storybooks for plugins, or wiring capabilities like react-surface or operation-resolver. For the UI/design-system details of plugin components (layout, theming, forms, toolbars, lists, storybook), pair this with the composer-ui skill.
-
effect-ts Bundle Audit Program 2Audit an existing Foldkit program against the architecture, conventions, and quality bar. Use when the user wants to review their Foldkit code, check for anti-patterns, accessibility gaps, or quality regressions. Triggers on phrases like "audit my app", "review this Foldkit code", "check for anti-patterns", "is this idiomatic?", or "what would the reviewer find?"
-
githubxsy Bundle MarkitdownConvert files, documents, images, and URLs into clean Markdown for LLM consumption with Microsoft's MarkItDown. Use for extracting or reading PDF, Word, PowerPoint, Excel, HTML, CSV, JSON, XML, EPUB, ZIP, Outlook, or image content; converting one file or a folder; ingesting documents into a knowledge base; preparing content for summarization, search, RAG, or other analysis; using a configurable OpenAI-compatible vision model to extract text and meaning from standalone images or images embedded in PPTX, DOCX, PDF, and XLSX; or troubleshooting MarkItDown dependencies. Trigger on requests such as "convert to Markdown," "extract text," "read this document into text," "ingest these files," or "turn this PDF/deck/spreadsheet/image into text," even when MarkItDown is not named. Audio and video transcription are intentionally unsupported. Do not use to author or edit Office/PDF files; use the format-specific skill for those tasks.
-
githubxsy Bundle Explain Diff For Human Review将提交、分支、PR/MR、暂存区或工作区代码差异整理为供人类检视的自包含 HTML 报告,以最小有效视图解释行为变化、系统形状、风险和验证证据。当 reviewer 需要快速理解改动并保留最终判断权时使用;不依赖特定代码托管平台或文档服务。
-
mustbesimo Bundle Cinematic Scroll 5Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps; includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards or unrelated animation.
-
mustbesimo Bundle Cinematic Scroll 6Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps; includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards or unrelated animation.
-
mustbesimo Skill Cinematic Scroll 7Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps; includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards or unrelated animation.
-
eva813 Bundle Logic Coder 2Vue 3 前端邏輯技能(邏輯 Agent)。將切版完成的純展示元件(Dumb Components)注入狀態管理、API 呼叫、loading/error handling,產出可執行的容器層與 composable。觸發情境包含:接續 vue3-layout 切版後的邏輯實作、「幫我串 API」、「實作資料邏輯」、「加上 loading / error 狀態」、「幫我寫 composable」、「實作 Pinia store」、「沒有 API 但要實作功能」、提到 component_paths handoff payload 的情境。無 API 可串時,會主動產出 mock 資料結構並與使用者確認後繼續實作。
-
nikiforovall Skill Quality Gates 2This skill should be used when the user wants to run code quality checks (linting, formatting, type checking, tests) on the lazyopencode project. Use this skill when asked to "run quality gates", "check the code", "run tests", "lint the code", or verify code quality before committing.
-
tencentcloudbase Bundle Cloudbase 3Use this skill when you develop, design, build, deploy, debug, migrate, or troubleshoot CloudBase (腾讯云开发, 云开发, TCB, 微信云开发) projects. Covers Web, 微信小程序, 小程序, uni-app, mobile (iOS, Android, Flutter, React Native). UI (页面, 界面, 表单, form, dashboard, prototype, 原型); auth (登录, 注册, OAuth, 微信登录, publishable key); databases (NoSQL 文档数据库, MySQL 关系型数据库, PostgreSQL/CloudBase PG, app.rdb(), queryPgDatabase/managePgDatabase, CRUD, 查询, security rules); 云函数/cloud functions (serverless, scf_bootstrap); CloudRun (云托管, Dockerfile); 云存储. Built-in AI (内置大模型, AI 对话, streaming, 流式输出, 图片生成, generateText, streamText, createModel, generateImage, TokenHub, Hunyuan, hunyuan-exp, DeepSeek, deepseek, GLM, Kimi, Token Credits 资源包, 小程序成长计划). 第三方大模型, 大模型接入, 大模型调用, LLM API, AI agent, 智能体, AI Agent, AG-UI, LangGraph. Ops (巡检, 诊断, health check, 日志, troubleshooting). Spec (需求文档, 技术方案, requirements, tasks.md). Do NOT use for non-CloudBase projects, pure frontend without CloudBase, or self-hosted backends without CloudBase.
-
posthog Skill Building Canvases 2Create or edit a PostHog freeform canvas — a sandboxed browser application (data board, document, form, small tool, graphics experiment) stored in PostHog and rendered by the desktop/web app. Use when a task asks to build, generate, update, or fix a standalone canvas app, or when a freeform canvas id is given as the publish target. For grid/home canvases, widget placements, or reusable components, use composing-grid-canvases instead. Covers resolving or creating the target canvas, choosing an implementation approach (React + Quill vs plain HTML/browser APIs), the read → edit → validate → publish → build loop, and which companion canvas skills to load for the details.
-
crimsonblazezero Bundle Graphic Overlays 3Package 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.
-
forcedotcom Bundle Commerce B2b Open Code Components ReplaceMap OOTB Salesforce B2B Commerce component definitions to open source `site:` equivalents, or replace those definitions in site metadata `content.json` files. Use this skill for lookup-only and replacement workflows. TRIGGER when: the user asks for an OOTB-to-open-code mapping, names `commerce_builder:` definitions, requests equivalent `site:` components, or wants selected definitions replaced in a store or view. DO NOT TRIGGER when: the user needs to install or copy the official component library (use commerce-b2b-open-code-components-integrate), create or retrieve a B2B store (use commerce-b2b-store-create), author custom LWCs, or make general Experience Builder changes unrelated to OOTB-to-open-code mapping.
-
forcedotcom Bundle Commerce B2b Open Code Components IntegrateIntegrate the official Salesforce B2B Commerce open source component library from GitHub into an existing store's site metadata. Use this skill to copy the library's components and labels so they become available in Experience Builder. TRIGGER when: the user asks to integrate or add open code components, names forcedotcom/b2b-commerce-open-source-components, or wants the official open source library copied into a B2B store. DO NOT TRIGGER when: the user needs to create or retrieve a B2B store (use commerce-b2b-store-create), only map or replace OOTB component definitions (use commerce-b2b-open-code-components-replace), author custom LWCs, or perform general Experience Builder work unrelated to this library.
-
whyzsm Bundle Oliver AccessibilityWCAG 无障碍合规实现
-
bannylon Bundle HTML Slides Generator零依赖、单文件、极致美观的 HTML 网页幻灯片生成器。当用户提到"幻灯片"、"PPT"、"演示文稿"、"slides"、"网页PPT"、"HTML 演示"、"做一份 slides"、"生成 PPT"、"keynote 风格的网页"、或任何将内容转化为演示文稿的意图时,必须调用此技能。即使用户只是说"帮我做一个关于 X 的 slides"而没有明确说 HTML,也应主动触发——这是默认的输出格式。
-
bianyanhui Bundle Iconfont SearchSearch and download SVG icons from iconfont.cn (阿里巴巴矢量图标库) via its public search API, no login required. Use when the user asks to search/download icons from iconfont — e.g. "图标从 iconfont 里面自己搜", "从 iconfont 搜索图标", "去 iconfont 下载图标", "iconfont 找几个 icon", "用 iconfont 的图标", "从 iconfont 搜 xxx", "find icons on iconfont", "download icons from iconfont.cn", or when the user says the agent should fetch icons itself from iconfont to use in code/UI/markdown/slides. The skill downloads clean standalone .svg files (inline style/class stripped) plus an optional HTML preview grid, and can take multiple keywords in one call.
-
bytepioneer-ai Bundle Codexhost Update Impact AuditDiagnose whether a Codex Desktop update changed codexhost Composer/CDP bindings, private Renderer DOM or React state, Host bridges, routing, or injected UI. Use after an installed Codex update or when compatibility regresses and the affected surface is unknown.
-
getstream Skill Flutter A11Y 2Apply when adding or modifying Flutter accessibility (a11y) — Semantics widget properties, MergeSemantics, Tooltip placement, focus management, screen reader announcements, live regions, accessibility testing. Use whenever an icon-only button needs a label, a composite widget needs to be one accessible region, a modal/dialog needs announcement, a picker / autocomplete overlay opens or closes, or a meetsGuideline regression test is being written. Also applies to debugging "TalkBack focus is wrong / too small / not announced" issues.
-
huyquocvq-lang Skill Portfolio Site 3Work on the Jenny Tang React+Vite portfolio: homepage data, routes, per-project pages, styles, and mandatory doc sync. Use when editing this repo, adding a project, changing Hero/Nav/projects, or when the user mentions AGENTS.md, USAGE_GUIDE, or portfolio documentation. Invoke with /portfolio-site.
-
huyquocvq-lang Skill Portfolio Site 4Work on the Jenny Tang React+Vite portfolio site: edit content, routes, per-project pages, styles, and mandatory documentation sync. Use when modifying this portfolio repo, adding projects, changing homepage sections, or when the user mentions AGENTS.md, USAGE_GUIDE, or portfolio documentation.
-
nativewind Skill Triage 2Triage a Nativewind or react-native-css GitHub issue. Reads the issue, determines version/repo, creates a reproduction, tests against latest published and local HEAD, then drafts a comment.
-
nativewind Skill Add Test 2Scaffold a test for a react-native-css feature following the project's testing conventions.
-
nativewind Skill Architecture 2Explain the react-native-css architecture, compiler pipeline, and key files. Use when a contributor wants to understand how the codebase works.
-
diodeinc Skill Registry SearchFind reusable registry modules and component packages for a board or specification.
-
gocallum Skill Shadcn SkillsInstallation, components, blocks, forms, theming, and MCP guidance for shadcn/ui in modern Next.js projects using pnpm
-
ghaida Skill LocalizeAdapts experiences across cultures and languages — not just translation, but cultural reconception. Part of the Intent design strategy system. When a product enters a new market, everything is in play: information density, navigation patterns, color meaning, icon comprehension, date formats, trust signals, payment flows, and the fundamental assumptions about how people make decisions. Trigger when: planning international expansion, auditing i18n readiness, adapting designs for RTL languages, reviewing cultural assumptions in a design, preparing localization test plans, or when someone says "we need to launch in [country]" and the plan is "just translate it." Also trigger for compliance reviews across markets (GDPR, PIPL, accessibility laws).
-
sreenivasanac Skill Web Design GuidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
-
cdcore09 Skill Panel DashboardsMaster interactive dashboard and application development with Panel and Param. Use this skill when building custom web applications with Python, creating reactive component-based UIs, handling file uploads and real-time data streaming, implementing multi-page applications, or developing enterprise dashboards with templates and theming.
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 render-style, coding-standards, research-harvester. 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.