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.
-
tangledgroup Bundle Payloadcms Blank 3 82 1Minimal Payload CMS 3.82.1 starter template providing a clean foundation for building custom headless CMS applications with Next.js App Router, MongoDB, and Lexical editor. Use when starting new Payload projects from scratch, needing a minimal configuration without pre-built collections or content types, or requiring full control over data modeling and admin panel customization.
-
tangledgroup Bundle Payloadcms Blank 3 84 1Minimal Payload CMS 3.84.1 starter template providing a clean foundation for building custom headless CMS applications with Next.js App Router, MongoDB, and Lexical editor. Use when starting new Payload projects from scratch, needing a minimal configuration without pre-built collections or content types, or requiring full control over data modeling and admin panel customization.
-
tangledgroup Bundle Tailwindcss Browser 4 2 0In-browser Tailwind CSS v4.2 build (@tailwindcss/browser) that compiles utility classes at runtime without a build step. Use when prototyping, creating documentation sites, building static pages, or learning Tailwind CSS without setting up Node.js tooling. Not for production applications requiring optimized CSS bundles.
-
tangledgroup Bundle Tailwindcss Browser 4 2 4In-browser Tailwind CSS v4.2 build (@tailwindcss/browser) that compiles utility classes at runtime without a build step. Use when prototyping, creating documentation sites, building static pages, or learning Tailwind CSS without setting up Node.js tooling. Not for production applications requiring optimized CSS bundles.
-
tangledgroup Bundle Pandoc 3 10Convert documents between formats using Pandoc 3.10. Use when the user mentions pandoc, document conversion, format transformation, or needs to convert between Markdown, HTML, LaTeX, PDF, Word (docx), OpenDocument (odt), PowerPoint (pptx), Excel (xlsx), CSV, TSV, EPUB, reStructuredText, Org mode, AsciiDoc, RTF, Textile, CommonMark, GFM, or any markup/format conversion task. Also use when user asks about pandoc filters, templates, defaults files, citeproc, or Lua filters.
Audited -
marielynneblock Skill XLSXUse this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
Audited -
marielynneblock Bundle GenimlThis skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
-
domehahn Skill Doc SummarizerSummarizes long documents into three bullet points.
-
internscience Bundle Make Latex Model当用户明确要求"LaTeX 模板优化""样式参数对齐""make_latex_model"时使用。支持任意 LaTeX 模板的样式参数对齐、标题文字对齐、标题格式对比(加粗)、HTML 可视化报告、LaTeX 自动修复建议和像素级 PDF 对比验证。
-
ryan-brosas Bundle UI Ant Design FoundationUse when porting Ant Design's design-token kernel AND its component-consumer plane: seed→derivative→alias token ladder, per-component algorithm recursion, sync getDesignToken parity, dark/compact algorithm deltas, palette index semantics, radius clamps, CSS-var naming/unitless wiring for cssinjs-style style hooks, plus the Table-proven consumption contracts — prepareComponentToken externals, genStyleHooks registration with mergeToken renaming, fixed/RTL shadow machinery, size ladders, nested-border CSS-var protocol, and dual style/layout token consumption.
-
ryan-brosas Skill Frontend Markup PracticesUse when authoring or reviewing static HTML/CSS, semantic markup, accessibility, class-based low-specificity CSS, js-* hooks, formatting, HTTPS assets, and validation; distilled from Google HTML/CSS, CSS Guidelines, and Code Guide.
-
ryan-brosas Bundle Refined Github FoundationUse when building browser extensions/userscripts that overlay SPAs: feature lifecycle with per-run abort, CSS-animation element observation, API wrappers with write guards, hotfix kill-switches, and DOM-safe dedup.
-
ryan-brosas Bundle Semantic Kernel FoundationUse when porting Semantic Kernel's Python kernel-core machinery — filter call-stack onion, corrective tool-call feedback, bounded auto-invoke loop, exception smuggling, OTel-gated telemetry, decorator-time metadata, argument coercion, copy-on-add plugin registries, the {{...}} prompt-template block engine, HTML trust gates, AI service selection/registration, tool-view generation, prompt-config parsing ladders, Jinja2/Handlebars helper-binding/sandbox, streaming auto-invoke twin, .NET method-function/filter mirrors, and the agents plane (Assistant run lifecycle, requires-action handoff, Responses auto-invoke loop, agent merge twins, function-choice gate, Azure AI run lifecycle + approval gate, Azure streaming event plane, request-prep flattening, handoff turn-taking, .NET FunctionChoiceBehavior twin, the AutoGen-style actor runtime (envelope queue, intervention gate, routed handlers, subscriptions, serialization registry, telemetry links), Responses streaming item mapping, and the AgentChannel protocol).
-
ryan-brosas Skill Wordpress Coding PracticesUse when authoring or reviewing WordPress themes/plugins, WPCS PHP naming, Yoda conditions, late esc_* output, $wpdb->prepare, i18n text domains, HTML/CSS/JS handbooks, and PHPCS verification.
-
ryan-brosas Skill Mdn Code Examples PracticesUse when authoring MDN/Mozilla doc code examples, Prettier, 15–25 line vanilla snippets, JS const/let/textContent, HTML5 lowercase kebab markup, modern vanilla CSS, and example-good/bad fences.
-
ryan-brosas Bundle Paper Component ConsistencyUse when a reusable component in Paper must be created, audited, instantiated, migrated, or synchronized across pages while preserving intentional variants and content.
-
ryan-brosas Bundle Theagenticbrowser FoundationUse when building a Playwright browser agent: mmid↔accessibility-tree DOM representation with prune/unravel minimization, mutation-observer action feedback, JS-click degradation, planner→browser→critique loops with DOM-scrubbed critique input, unified OpenAI transcript synthesis, and pre/post screenshot VLM verification.
-
ryan-brosas Skill Wcag Accessibility PracticesUse when auditing or building web UI for WCAG 2.1 Level AA, POUR success criteria, keyboard/focus, contrast/reflow, forms/errors, name-role-value, and axe plus manual verification.
-
ryan-brosas Bundle Browser Harness JS FoundationUse when building a thin CDP/WebSocket bridge for browser agents: persistent eval daemon, target routing, a11y-tree compression and locators, consent-gated privacy-scrubbed action recording, hash-sealed evidence videos, and zero-dependency skill CLIs.
-
swan-gtm Skill Meta ReportingUse this skill when analyzing or reporting Meta Ads performance — pulls live Meta insights, reads them like an operator (leading vs vanity signals), and generates a shareable branded HTML dashboard. Triggers: Meta report, Meta dashboard, Meta performance, analyze Meta ads, cost per lead, CPL report, Meta account audit, weekly Meta report, client dashboard, ad spend report.
-
okhp3 Bundle Okhp3 Sharepoint Library Accessibility ReviewReview selected SharePoint library documents for supplied accessibility and structure checks, then return an evidence-led remediation draft. Use when document visitors need more usable content. Do not use to certify accessibility or alter files automatically.
-
marielynneblock Skill Technology Stack Blueprint GeneratorComprehensive technology stack blueprint generator that analyses codebases to create detailed architectural documentation. Automatically detects technology stacks, programming languages, and implementation patterns across multiple platforms (.NET, Java, JavaScript, React, Python). Generates configurable blueprints with version information, licensing details, usage patterns, coding conventions, and visual diagrams. Provides implementation-ready templates and maintains architectural consistency for guided development.
-
miuav Skill Ros2 ComponentROS2 组件技能 - Composable Nodes、组件加载器、组件容器、跨进程通讯
-
event4u-app Bundle Brand To TokensTurn a confirmed brand identity into a DTCG .tokens.json source of truth — emit CSS vars + Tailwind via design-tokens, export locked brand deck templates.
-
event4u-app Skill Nextjs PatternsWrites Next.js App Router code — Server Components, Server Actions, RSC boundaries, route handlers, caching, and streaming — matching framework conventions and project architecture.
-
event4u-app Bundle React Shadcn UIBuilding React UI on shadcn/ui primitives + Tailwind — the apply/review/polish skill dispatched by `directives/ui/*` for the `react-shadcn` stack; idiom from tailwind-engineer.
-
event4u-app Bundle UI Apply GenericUse when implementing a UI brief on a stack with no framework executor — Svelte, Astro, Angular, plain HTML. Stack-independent sibling of react-shadcn-ui; idiom from the stack corpus.
-
event4u-app Bundle Tailwind EngineerWriting or reviewing Tailwind CSS — utility-first, design tokens, no inline-style drift, responsive variants, dark mode — 'style this' or 'mach das hübsch'. Pairs with react-shadcn-ui.
-
event4u-app Skill Livewire ArchitectUse when shaping a Livewire component before code — full-page vs partial, parent/child split, event flow, state-vs-props boundary, hydration cost — even on 'add this Livewire component'.
-
event4u-app Skill React Native SetupUse when setting up React Native or Expo dev environments — Xcode, Android Studio, CocoaPods, EAS, Metro, New Architecture — even when the user just says 'my RN build won't start'.
Audited -
event4u-app Bundle Storybook WorkshopUse when a component library needs a workshop — one story per concept, JSDoc summaries the manifest can carry, stories run as tests, and an opt-in MCP channel that replaces guessing with querying.
-
event4u-app Bundle Accessibility AuditorUse when reviewing UI for accessibility — WCAG 2.2 AA, keyboard nav, focus, ARIA, contrast, screen-reader semantics — even on 'is this a11y-OK?' or 'mach das barrierefrei'.
-
event4u-app Skill Project Analysis ReactUse for deep React analysis: component tree, state flow, props flow, hooks usage, rendering behavior, and React-specific failure patterns.
-
event4u-app Skill UI Component ArchitectShaping a UI component tree — composition vs inheritance, slot patterns, prop API design, controlled vs uncontrolled, polymorphic — on 'split this component'. Feeds react-shadcn-ui.
-
event4u-app Skill Project Analysis NextjsUse for deep Next.js analysis: server vs client boundaries, routing, data fetching, caching, rendering modes, and hydration/runtime issues.
-
event4u-app Bundle Frontend Render SecurityWriting/reviewing client-side UI (React/Vue/vanilla) — insecure-render + client-trust gaps AI ships: XSS via innerHTML, client secrets, client-only auth, CORS wildcard, token in localStorage
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 payloadcms-blank-3-82-1, payloadcms-blank-3-84-1, tailwindcss-browser-4-2-0. 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.