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.
-
2233admin Bundle Remotion VideoThis skill should be used when the user asks to "make a video with Remotion", "create a programmatic/data-driven video in React", "render an MP4/GIF from code", "animate with useCurrentFrame/interpolate/spring", "sync video to audio/beats", or "render a templated video per record headlessly". Covers building React compositions and rendering them via CLI or @remotion/renderer.
-
2233admin Bundle Motion BackgroundThis skill should be used when the user asks to "add an animated background", "build a mesh/gradient background", "make an aurora/shader background", "add constellation/particle background", "animated hero background", or "a subtle looping background behind content". Covers CSS mesh gradients, GLSL shader gradients (Three.js), canvas particle constellations, seamless loops, and reduced-motion/performance handling — fully self-contained.
-
2233admin Bundle Video Delivery SpecsThis skill should be used when the user asks "what are the specs for Instagram Reels / TikTok / YouTube / broadcast", "export settings for social", "what aspect ratio and bitrate", "how do I repurpose 16:9 to 9:16", "safe area / title-safe for vertical", "pre-delivery checklist", or "collect files for handover". It outputs per-platform spec sheets, a cutdown matrix, captioning/accessibility notes, and a QC + collect-files checklist.
-
2233admin Bundle Brand Motion GuidelinesThis skill should be used when the user asks to "write motion guidelines", "create a brand motion system", "define easing and timing tokens", "document our animation principles", "build a motion language like Slack/IBM/Klarna", "set up entrance/exit/transition rules", or "add a reduced-motion / accessibility section". It outputs a fill-in-ready brand motion guidelines document.
-
vs4vijay Bundle Remotion Best PracticesBest practices for Remotion - Video creation in React
-
chattocorp Bundle Svelte Core BestpracticesGuidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.
-
markus41 Skill TestingTesting MUI components with React Testing Library — theme mocking, portal components, DataGrid, DatePicker, and accessibility testing
-
markus41 Skill Code ReviewThis skill should be used when the user asks to "review code", "check changes", "analyze a PR", "do a security review", or "assess code quality" — providing comprehensive review across correctness, security, performance, accessibility, and testing.
-
markus41 Skill CSS GenerationGenerate CSS, Tailwind, and styled-components code from design style selections
-
markus41 Skill Agentic Patterns 11Patterns from "Agentic Design Patterns" (Gulli & Sauco, 2025) applied to design token management, component scaffolding, multi-tenant theming, and accessibility-compliant UI generation.
-
netvar1337 Skill Initial AccessUse when gaining initial access to a target — phishing, payload delivery, HTML smuggling, ISO/IMG/MOTW bypass, supply-chain, credential stuffing, exposed-service exploitation
-
netvar1337 Bundle Mobile PentestUse when pentesting an Android/iOS app — Frida 17 instrumentation, SSL-pinning & root/jailbreak bypass, Android 14/15 CA injection, exported-component/content-provider abuse, deep-link/WebView chains, biometric bypass, Flutter/React-Native RE
-
netvar1337 Bundle JS API ExtractJavaScript 静态分析提取隐藏 API 端点。当目标是 SPA/前后端分离架构、页面使用 Vue/React/Angular、或常规目录扫描收效甚微时使用。通过分析 JS bundle 提取 API 路径、密钥、内部域名、WebSocket 端点。是 API 渗透的信息收集阶段。发现端点后 → api-fuzz 进行语义化 fuzz
-
netvar1337 Skill Cot Injection思维链 (Chain-of-Thought) 注入攻击方法论。当目标系统使用 ReAct/CoT 框架进行多步推理、 Agent 依赖中间推理结果做决策、或需要测试思维链完整性时触发。 覆盖: 思维链干扰注入(伪造中间 Agent 结果)、思维链操纵注入(跳过验证步骤直接调度敏感操作)、 查询注入(在数据查询 Agent 中注入恶意查询语句)。
-
netvar1337 Bundle Ctf Flag VerificationCTF/靶场 Flag 强制验证流程。当通过**任何方式**发现疑似 flag 字符串(含 flag{、FLAG{、ctf{ 等格式)时**必须立即**使用此 skill 验证,不要直接提交。防止因字符截断、编码错误、HTML 实体、base64 不完整解码、hex 截断等原因导致提交错误 flag。即使 flag 看起来完整,也可能存在隐藏字符或编码问题。覆盖 SQL 注入分段提取、命令执行输出截断、文件读取编码、Web 页面解析等所有 flag 提取场景。任何时候看到 flag{ 字样都应触发此 skill
-
netvar1337 Bundle Xslt InjectionXSLT 注入测试方法论。当目标存在用户可控的 XSLT/样式表输入、XML 转换端点、报表生成器、XML→HTML 转换器时使用。覆盖处理器指纹识别(Xalan/Saxon/libxslt/MSXML)、XXE via XSLT(DTD外部实体)、document() SSRF/文件读取、EXSLT 文件写入、PHP php:function RCE、Java Saxon/Xalan 扩展 RCE、.NET msxsl:script RCE。完全零覆盖漏洞类型——任何涉及 XSLT、XML 样式表、XML 转换的测试都应使用此 skill
-
netvar1337 Bundle Java Frontend AuditJava 源码前端安全类漏洞审计。当在 Java 白盒审计中需要检测前端安全漏洞时触发。 覆盖 5 类风险: XSS(JSP/Thymeleaf/FreeMarker 输出转义)、CSRF(Spring Security/自定义 Token)、 开放重定向(sendRedirect/forward)、CRLF 注入(Header/Cookie)、Session 管理(固定/超时/并发)。 需要 java-audit-pipeline 提供的数据流证据。
-
26zl Bundle Testing Android Intents For VulnerabilitiesTests Android inter-process communication (IPC) through intents for vulnerabilities including intent injection, unauthorized component access, broadcast sniffing, pending intent hijacking, and content provider data leakage. Use when assessing Android app attack surface through exported components, testing intent-based data flows, or evaluating IPC security. Activates for requests involving Android intent security, IPC testing, exported component analysis, or Drozer assessment.
-
eturkes Bundle XLSXCreate, edit, analyze, or convert Excel spreadsheets (.xlsx, .xlsm) where the workbook file is the primary deliverable. Use for formulas, formatting, financial models, multi-sheet workbooks, and tabular cleanup exported to Excel. Also applies to .csv/.tsv when the user wants spreadsheet output. Do NOT use for Word documents, HTML reports, standalone Python scripts, database pipelines, or Google Sheets API work.
-
eturkes 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.
-
shadcn-labs Bundle InkComprehensive Ink skill for building CLI applications with React. Covers components (Text, Box, Static, Transform), hooks (useInput, useApp, useFocus), Flexbox layout, testing, and accessibility.
-
invergent-ai Bundle ShadcnManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. 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".
-
docling-project Bundle DoclingUse Docling to understand the content of documents in any supported format — PDF (born-digital or scanned), DOCX, PPTX, XLSX, HTML, Markdown, AsciiDoc, CSV, images, audio, and XML — by converting them into a unified DoclingDocument (Markdown or structured JSON). Use this skill whenever you need to read, parse, convert, extract, or chunk a document you cannot read directly: "what's in this PDF", "convert this to markdown", "extract the tables", "chunk this for RAG", "read this scanned document", "parse this DOCX/PPTX". Covers the `docling` CLI, the Python SDK (DocumentConverter + PipelineOptions), the remote Service Client (self-hosted or managed docling-serve), and the docling-slim install extras for a minimal dependency footprint.
-
ultroncore Skill Uniapp Frontend 2uni-app cross-platform frontend development with Vue 3 + TypeScript. Use for: (1) Creating new uni-app projects or pages, (2) Integrating UI libraries (uView Plus, uni-ui, TuniaoUI), (3) Implementing multi-theme design systems, (4) Building WeChat Mini Programs, H5, and other platforms, (5) Setting up SCSS theming and global styles, (6) Configuring Vite build system. Includes reusable templates, component patterns, and best practices applicable to any uni-app project.
-
foldkit Bundle Vendored AssetsVendored assets. Use when importing or updating checked-in third-party or externally generated JavaScript, CSS, registries, schemas, snapshots, or Scalar, Swagger, and MIME artifacts.
-
xberg-io Skill Converting HTML 2Use when converting HTML to Markdown, Djot, or plain text. Covers output formats, heading and code-block styles, lists, escaping, wrapping, and HTML preprocessing.
-
xberg-io Bundle HTML To Markdown 2Convert HTML to Markdown, Djot, or plain text with structured extraction. Use when writing code that calls html-to-markdown APIs in Rust, Python, TypeScript, Go, Ruby, PHP, Java, C#, Elixir, R, C, or WASM. Covers installation, conversion, configuration, metadata extraction, tables, document structure, inline images, URL fetching, and CLI usage.
-
xberg-io Skill Extracting Metadata 2Use when extracting metadata from HTML — title, description, language, Open Graph, JSON-LD / Microdata / RDFa, headers, links, and images. Covers the --json output shape and the --extract-metadata flag.
-
undermybelt Bundle ArchifyCreate professional architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as standalone HTML files with SVG graphics, a built-in dark/light theme toggle, and one-click export to PNG / JPEG / WebP / SVG. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, technical workflows, approval flows, runbooks, CI/CD flows, process diagrams, API call sequences, request lifecycles, interaction diagrams, data pipelines, analytics flows, ETL/ELT maps, PII boundaries, governance/data lineage diagrams, state machines, lifecycle diagrams, status transitions, or terminal/retry paths.
-
williamcorrea23 Skill Fix Manifest JSONFix manifest.json issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs these rules: - `no-outdated-manifest-version` - For _version not being 2.x - `no-legacy-ui5-version-in-manifest` - For minUI5Version below 1.136 - `no-deprecated-library` - For deprecated libraries in dependencies - `no-deprecated-component` - For deprecated components in dependencies - `no-deprecated-api` - For deprecated view types, resources/js, deprecated model types - `no-removed-manifest-property` - For async flags in manifest v2 Trigger on manifest.json files with errors about version, libraries, components, view types. Automatically updates manifest.json to be modern UI5 compatible.
-
williamcorrea23 Skill Fix Csp ComplianceFix Content Security Policy (CSP) compliance issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs: - `csp-unsafe-inline-script` with message "Use of unsafe inline script" Trigger on: inline JavaScript in HTML files, script tags without src attribute, onclick/onload handlers in HTML. Also use when user mentions 'security headers', 'inline script warning', 'CSP policy', 'unsafe-inline', or 'Content-Security-Policy'. Provides guidance on moving inline scripts to external files for CSP compliance.
-
williamcorrea23 Bundle Fix Component AsyncFix Component.js async configuration issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs these rules: - `async-component-flags` - For missing IAsyncContentCreation interface, missing manifest declaration, redundant async flags, async:false errors - `no-removed-manifest-property` - For async flags in inline manifest v2 Trigger on Component.js files with errors about async loading, IAsyncContentCreation, manifest declaration. Automatically adds the IAsyncContentCreation interface and configures manifest properly.
-
williamcorrea23 Skill Fix XML Native HTMLFix native HTML and SVG usage in XML views/fragments that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs: - `no-deprecated-api` with message "Usage of native HTML in XML Views/Fragments is deprecated" - `no-deprecated-api` with message "Deprecated use of SVG in XML View or Fragment" Trigger on: HTML elements in XML views (html:div, html:span, html:a), SVG elements in XML views, xmlns:html namespace usage. Provides guidance on replacing native HTML with UI5 controls and SVG with UI5 icons or custom controls.
-
williamcorrea23 Skill Btp Abap EnvironmentHelp with SAP BTP ABAP Environment setup and development including service instance creation, ADT connectivity, communication arrangements, communication scenarios, inbound/outbound services, destination configuration, identity and access management, software components, and first-project scaffolding. Use when users ask about BTP ABAP Environment, SAP BTP ABAP, Steampunk, ABAP environment service instance, ADT connection to BTP, communication arrangement, communication scenario, communication system, outbound communication, inbound communication, destination service, software component, ABAP system on BTP, or cloud ABAP development setup. Triggers include "set up BTP ABAP", "connect ADT to BTP", "communication arrangement", "communication scenario", "create service instance", "ABAP on BTP", "outbound service", or "first ABAP project on BTP".
-
williamcorrea23 Skill Fix Bootstrap ParamsFix HTML bootstrap parameter issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs these rules: - `no-deprecated-api` - For missing/deprecated bootstrap parameters (async, compat-version, animation, binding-syntax, etc.) - `no-deprecated-theme` - For deprecated theme values in data-sap-ui-theme - `no-deprecated-library` - For deprecated libraries in data-sap-ui-libs Trigger on error messages containing: "Missing bootstrap parameter", "Abandoned bootstrap parameter", "Redundant bootstrap parameter", "deprecated value", "bootstrap" Automatically applies safe fixes to HTML files containing UI5 bootstrap script tags.
-
williamcorrea23 Skill UI Theme Designer HelpProvides customer-facing UI theme designer help from help.sap.com (BTP / Cloud Foundry edition). Use whenever you need to check what is — or is not — documented for customers about UI theme designer: setup, user/role management, themes and theme sets (creating, editing, publishing, transporting, fallback), quick/detailed/expert theming, writing themeable CSS for custom UI5 controls, best practices for custom control theme files, theming integrations with Build Work Zone / S/4HANA / SAPUI5 / SAP GUI, UI theme designer service constraints (rate limits, size limits, theming-specific security and permissions, accessibility), theming error messages and troubleshooting, what's-new. Also use for 'is X documented?' or 'what does the help say about Y?' questions. SKIP: questions about which themes or parameters exist or what values they have (use ui-theme-designer-design-tokens). SKIP: tenant-specific operational questions about a running system ("which themes do we have?", "which users are assigned?").
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 video-delivery-specs, remotion-video, motion-background. 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.