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.
-
vishuwa2004 Bundle Materialization Aware Refresh EscalationReact to marketplace materialization diffs by refreshing plugins when new installs land and escalating to needsRefresh when updates or refresh failures occur.
-
malekokour Bundle Review Signals Exposure ComponentReviews Signals with an exposure component evidence pack for the L3 task «Signals with an exposure component». Produces a source-linked finding register with denominators and an explicit refuse list. Use when a practitioner asks to work this topic — e.g. "Please review the materials for Signals with an exposure component and produce a sourced finding register \u2014 do not decide the clinical or regulatory outcome.". Do not use to decide the outcome of signals with an exposure component; approve or submit related documents; select or adjust a dose; speak for the sponsor to an agency.
-
aiunlocked1412 Bundle Mobile App Builderสร้าง mobile app iOS/Android ด้วย React Native Flutter Swift Kotlin พร้อม deploy ขึ้น store
-
bdambrosio Bundle BrowseBrowser automation via agent-browser CLI. Navigate, snapshot accessibility tree, interact by element ref.
-
bdambrosio Bundle Fetch TextFetch the text content of a web page or PDF from a URL. Handles HTML, PDF, Markdown, plain text — auto-detects format. Research PDFs come back as a section index you can then read section by section.
-
bdambrosio Bundle Osworld ObserveGet the current observation from the OSWorld environment. Returns screenshot (base64 PNG) and accessibility tree (JSON).
-
bdambrosio Bundle Mc Map VisualizeGenerates zoomable HTML visualization of the spatial map showing walkability, hazards, resources, and observation confidence.
-
aiunlocked1412 Bundle Web Designer Proออกแบบเว็บไซต์ครบทั้ง wireframe component spec style guide พร้อม handoff ให้ dev
-
nvidia-omniverse Skill Omniverse Dev Variant Presenter UIThe visual design + layout for the Dev Variant Presenter frontend — the GitHub-dark + NVIDIA-green theme, the header / viewport+timeline / right-side tabbed control panel layout, and the component styles (pill chips with swatches, segmented buttons, blocks, the NLE timeline strip). Use when building or styling the Variant Presenter browser UI — also known as the "variant studio" UI in the walkthrough video and earlier releases — so it looks and feels like the product, not just functions like it.
Audited -
haomingz Bundle PDFProfessional PDF solution. Create PDFs using HTML+Paged.js (academic papers, reports, documents). Process existing PDFs using Python (read, extract, merge, split, fill forms). Supports KaTeX math formulas, Mermaid diagrams, three-line tables, citations, and other academic elements. Also use this skill when user explicitly requests LaTeX (.tex) or native LaTeX compilation.
-
haomingz Bundle Theme Kit主题样式工具箱,为演示文稿、文档、报告、HTML页面等内容提供专业的主题样式设计,内置10种预设风格(含配色与字体),也支持按需生成自定义主题。当用户需要美化内容、统一视觉风格,或提及“主题”、“配色”、“风格”、“设计幻灯片”、“美化文档”等关键词时触发。
-
haomingz Bundle Chrono Flow根据JSON数据生成精美的交互式时间线HTML页面,支持垂直、水平、双侧三种布局,可自定义主题色、展开详情,并适配移动端。适合展示项目里程碑、产品版本记录、公司发展历程或个人简历。当用户提及制作时间线、历程图、历史记录可视化,或需要将一系列事件、日期与描述数据转换为网页时触发。
-
haomingz Bundle Data Viz Gen从 JSON 数据生成自包含的 HTML/SVG 信息图,支持 KPI 统计卡片、分组柱状图对比、流程图和混合仪表盘四种类型,提供 8 套配色方案和 24 个内置图标,输出完全自包含的 HTML 文件,无需外部依赖。当用户需要数据可视化、信息图、图表、仪表盘,或提及生成图表、制作 dashboard、展示统计数据等请求时触发。
-
haomingz Bundle Locale Guard在前端代码库(React/TypeScript、Vue等)中搭建、审计和规范国际化/本地化流程,包括配置i18n框架、将硬编码字符串替换为翻译键、确保en-US/zh-CN等语言文件覆盖完整、映射本地化错误消息,并校验翻译键一致性、复数规则和格式化。当用户需要实施或审查多语言支持,提及i18n、本地化、翻译键、多语言文件,或询问如何替换硬编码字符串、配置react-i18next/next-intl、处理复数规则、进行语言审计时触发。
-
haomingz Bundle Lp Proto Gen一键生成结构完整的落地页HTML原型,包含Hero主标题、Social Proof合作品牌、Features产品特性、Pricing定价方案和CTA行动召唤五大核心板块,输出为自包含HTML文件(CSS内联)可直接在浏览器中预览。当用户请求生成落地页、营销页、产品主页的HTML原型、线框图或快速demo,或提及“Landing Page”、“营销页”、“产品主页”等关键词时触发。
-
haomingz Bundle Risk Heatmap项目风险管理工具:录入风险条目(概率、影响、类别、责任人、应对措施),自动计算风险评分并生成可交互的HTML风险热力图(5×5概率-影响矩阵)。当用户提到风险登记册、风险矩阵、风险热力图、概率影响矩阵,或请求进行风险评估、项目风险管理、梳理项目风险、做个风险分析时触发。
-
haomingz Bundle Event Etf Study基于关键事件进行ETF研究。从概念或事件出发,识别相关股票,构建市值加权ETF指数,分析事件窗口期间的市值变化,并生成交互式HTML仪表盘。当用户询问概念股、概念ETF、事件驱动分析或事件研究时使用。触发条件:提及影响A股概念板块的热门话题、政策或事件;请求构建主题ETF或概念指数;分析特定事件前后的股票表现。
-
haomingz Bundle Guizang Ppt Skill生成横向翻页网页 PPT(单 HTML 文件),含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格:① "电子杂志 × 电子墨水"(衬线 + 流体背景 + 暖色) ② "瑞士国际主义"(无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮)。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT,或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。
-
haomingz Bundle HTML Mail Builder生成兼容 Gmail/Outlook/Apple Mail 的 HTML 邮件模板,采用 table 布局和 inline CSS 确保一致渲染,支持响应式设计。适用于欢迎邮件、促销邮件、密码重置、通知邮件和订单确认邮件等场景。当用户需要创建或设计营销邮件(EDM)、事务性邮件、Newsletter,或提及邮件模板、HTML 邮件、兼容性设计等关键词时触发。
-
haomingz Bundle HTML Email Builder生成兼容 Gmail/Outlook 等主流邮件客户端 HTML Newsletter,使用 table 布局和 inline CSS 确保渲染一致,支持单栏、双栏、Hero Banner、内容摘要等多种版式。当用户需要制作公司周报、产品公告、营销邮件、活动邀请函或内容摘要邮件,或提及 Newsletter、HTML 邮件、邮件模板、兼容 Outlook 等关键词时触发。
-
haomingz Bundle Video Compare Tool对比两个视频的压缩质量,计算画质指标(PSNR、SSIM),并生成包含逐帧视觉对比的交互式 HTML 报告。当用户需要评估压缩效果、比较视频画质,或提及“视频对比”、“压缩分析”、“压缩前后对比”等关键词时触发。
-
haomingz Bundle Gantt Chart Builder根据任务列表和依赖关系生成交互式HTML甘特图,支持关键路径分析(CPM),可视化项目时间线、依赖关系和可延迟的浮动时间。当用户提到甘特图、项目时间线、关键路径、任务排期、项目进度图、依赖关系可视化、工期计算或直接说“帮我排一下项目时间”、“生成一个项目进度图”、“分析一下哪些任务是关键路径”时触发。
-
haomingz Bundle Journalistic Portrait Cn创建复刻《南方人物周刊》视觉设计的中文杂志风格 HTML 网页。适用于特稿版面、带红色边框的封面页、配肖像照片的目录页,以及带编辑章节标题的双栏内页,复刻中文周刊的排版与配色。
-
haomingz Bundle Astro Observation Report Cn用于撰写 LIGO、Virgo、KAGRA 探测到的致密双星合并事件(BNS、BBH、NSBH)引力波观测结果论文的 Skill。覆盖论文架构、首页版式、参数估计图、不确定度标记、可信区间图、统计约定、页眉等,复刻《Physical Review X》双栏期刊风格。
-
build-with-dhiraj Bundle Cra To Next MigrationMigrate Create React App projects to Next.js — React Router to file-based routing, Server Components, App Router.
-
build-with-dhiraj Bundle Stitch Upload To StitchUpload local assets (images, mockups, extracted HTML, design markdown) to a Stitch project. ALWAYS use this skill when you need to upload visual assets, HTML pages, or design docs to Stitch, particularly when direct MCP tool calls fail or truncate due to base64 token limits.
-
build-with-dhiraj Bundle Typescript React ReviewerTypeScript + React 19 code reviewer. Triggers on PR reviews, React architecture evaluation, anti-patterns, useEffect abuse, type safety, state management review.
-
build-with-dhiraj Skill Flutter Improving AccessibilityConfigure a Flutter app for assistive tech like Screen Readers. Use to support users with disabilities.
Audited -
build-with-dhiraj Skill AI ElementsAI Elements component library guidance — pre-built React components for AI interfaces built on shadcn/ui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.
-
build-with-dhiraj Bundle Vercel ServicesVercel Services — deploy multiple services within a single Vercel project. Use for monorepo layouts or when combining a backend (Python, Go) with a frontend (Next.js, Vite) in one deployment.
-
uphiago Skill Hunt DomHunt client-side DOM vulnerabilities — DOM Clobbering (overwrite JS globals via HTML injection), PostMessage hijacking (missing origin check), Service Worker abuse (intercept requests from same-origin script), CSS Injection/Exfiltration (attribute selectors → token char-by-char via OOB), client-side template injection, dangerouslySetInnerHTML. Grounded in named public research: Gareth Heyes / PortSwigger DOM-clobbering + DOM-Invader, Michał Bentkowski DOMPurify clobbering bypasses, jQuery htmlPrefilter XSS (CVE-2020-11022 / CVE-2020-11023), d0nut CSS-exfil research. Use when hunting DOM-XSS, client-side auth bypass, or token exfiltration without server-side interaction.
-
uphiago Skill Hunt NextjsHunt Next.js specific vulnerabilities — Server Actions arbitrary function execution, Middleware auth bypass via static asset paths, ISR cache poisoning, Image Optimization SSRF (/_next/image), RSC payload leakage, getServerSideProps injection, source map exposure, debug endpoint leakage. Use when target runs Next.js 13/14/15 or any React SSR framework.
Audited -
uphiago Skill Hunt File UploadHunt file upload bugs — RCE via webshell, XSS via SVG/HTML, SSRF via XXE in DOCX, path traversal via filename. Bypass tables (10 techniques): double extension (shell.php.jpg if server checks last ext only), magic bytes spoofing (PNG header on PHP), null byte (shell.php.jpg), case (PHP, .Php, .pHP), .htaccess upload to enable execution, SVG with <script>, HTML/SVG XSS, DOCX with embedded XXE, ZIP slip (../../../etc/passwd in archive), polyglot files. Detection: any /upload, /avatar, /profile-picture, /attachment, /import endpoint. Test: upload PHP/JSP/ASPX shells, request via direct URL, check response. Validate: actual code execution (whoami output) for RCE; reflected XSS in profile-photo URL. Use when testing file upload features, avatar/attachment endpoints, import/export functions, XML/DOCX/ZIP processors. Real paid examples.
-
uphiago Skill Apk Redteam PipelineEnd-to-end Android APK red-team pipeline — automated APK acquisition (Play Store + apkpure + apkmirror fallback), jadx decompilation, secret/URL/JWT/Firebase grep, pinned-cert extraction, exported-component enumeration, Frida runtime instrumentation templates, intent-injection probes. Built from an authorized external red-team engagement where 7 APKs were pulled manually, 4 download attempts truncated, and a hardcoded JWT + 30 internal API endpoints were recovered from one of the apps. Use when target has a mobile app catalogue (Play Store developer page), when you find an APK URL hosted on a web server, or when post-recon mentions "mobile app" in scope.
Audited -
uphiago Skill Hardcoded Credential HuntDetect hardcoded passwords in HTML forms, JavaScript, and API responses.
-
build-with-dhiraj Bundle A11Y AuditAudit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
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 html-mail-builder, materialization-aware-refresh-escalation, review-signals-exposure-component. 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.