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.
-
prathmeshgupta Bundle Frontend Performance ChecklistUse when auditing or improving front-end performance — HTML/CSS/font/image/JS delivery, Core Web Vitals, page weight, render-blocking, caching, lazy-loading. A prioritised checklist (low/medium/high) with the why and the fix for each item.
-
shinpr-claude-code-workflows Skill Recipe Front Design 3Execute from repository evidence through applicable UI Spec and optional ADR decisions to complete frontend Design Doc approval
-
shinpr-claude-code-workflows Skill Recipe Front Review 3Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections.
-
mizoreww Bundle Paper Reading 2Read, summarize, and critically analyze an academic paper from a PDF, official HTML page, URL, or pasted full text. Use for requests such as "read this paper", "快速看懂", "精读论文", "analyze this paper", "paper summary", or strict paper critique. Produces evidence-traceable Markdown or a portable interactive HTML report at one complete, concise close-reading depth, with read-only inspection of authoritative source code when available and no reproduction run.
-
mizoreww Bundle Storage Analyzer 2macOS / Windows / Linux 只读存储分析助手(自动识别系统)。扫描整机磁盘占用,找出 占空间大户,把每一项分成 🟢可自动清理 / 🟡需人工判断 / 🔴谨慎清理 三级并给出 可执行处置方案,生成排版精美、可折叠、命令可一键复制的交互式 HTML 报告,并可 起本地服务在网页上一键删除(移废纸篓/直接删)。扫描全程只读。务必在以下场景 使用:用户说"存储分析""磁盘满了""C盘/硬盘满了""空间不够""清理空间" "清理磁盘""占空间""哪些东西占地方""帮我看看存储""看一下电脑存储/空间" "存储空间""电脑空间不够""内存满了/不够/不足""看下内存/存储"(中文口语里 "内存"常指存储空间)"storage analysis""disk cleanup""清缓存""磁盘清理" "No space left on device""inode 用完了";或用户抱怨电脑没空间、想知道什么 东西吃硬盘、想要清理建议时。注意:若用户明确 指运行内存/RAM(如"哪个进程吃内存""内存占用高"想看活动监视器),那是 RAM 不是存储,不属于本 skill。
-
wundercorp Skill Claude DesignDesign one-off HTML artifacts (landing, deck, prototype).
-
wundercorp Skill SketchThrowaway HTML mockups: 2-3 design variants to compare.
-
jiangeplus Bundle Fullstack DevFull-stack backend architecture and frontend-backend integration guide. TRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service, building todo/CRUD/real-time/chat apps, Express + React, Next.js API, Node.js/Python/Go backend, designing service layers, implementing error handling, managing config/auth, setting up API clients, implementing auth flows, handling file uploads, adding real-time features (SSE/WebSocket), hardening for production. DO NOT TRIGGER when: pure frontend UI work, pure CSS/styling, database schema only, simple scripts, bug fixes, single-file changes, adding a small feature to existing code. 触发词:全栈、后端服务、REST API、前后端联调、鉴权、WebSocket、生产加固。
-
wundercorp Skill ArchifyValidated interactive HTML diagrams, upstream-maintained.
-
prathmeshgupta Bundle Rare UIUse when the user wants a rare, distinctive, animated UI component in a React/Next + Tailwind + Motion codebase — sidebars, drawers, pickers, orbs, counters, nav, reveals, OTP inputs, activity graphs. A shadcn registry of ready-to-drop components that honour prefers-reduced-motion; you own the code, no runtime dependency.
-
wundercorp Bundle Concept DiagramsGenerate flat, minimal educational SVG visuals as HTML.
-
cumhur Bundle Gea UI EngineeringBuild, refactor, debug, optimize, and review ultra-light reactive web UIs with Gea (the @geajs/core ecosystem). Use for Gea/Vite/JSX projects, browser UI, SSR and hydration, routing, accessible headless UI, mobile UI, DOM animations, converting React/Vue/vanilla interactions to Gea, bundle-size work, and performance diagnosis. Do not use Gea as a backend framework; use it only for browser-facing UI, with @geajs/ssr when server-rendered HTML is needed.
-
wundercorp Skill ImpeccableFrontend design guidance, upstream-maintained (impeccable).
-
wundercorp Bundle Popular Web Designs54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
-
wundercorp Bundle HyperframesRender MP4/WebM videos from HTML compositions.
-
wundercorp Bundle Architecture DiagramDark-themed SVG architecture/cloud/infra diagrams as HTML.
-
patsnap Bundle Smart Intel智慧情报与政策孵化技能。面向企业/研究机构,一键生成集情报中心、政策孵化工作台、 技术路线研判、科技创新管理四大模块于一体的可交互HTML情报门户。 支持按目标企业/行业定制数据、调用Patsnap专利数据与网络情报,输出本地可用的单文件HTML。
-
patsnap Bundle Mab Fto Check单克隆抗体(mAb)药物专利自由实施(FTO)分析。基于智慧芽专利数据库(Patsnap)+ 序列比对(ls_sequence_alignment)+ 化学结构检索(ls_structure_search),执行9模块并行检索+M1.5修饰检索(含中文专项检索),遵循全面覆盖原则+等同原则,输出HTML格式FTO报告(七章标准结构)。
-
patsnap Bundle Opportunities技术方向专利机会评估与报告生成 Skill。输入细分技术方向或具体技术方案,自动调用智慧芽专利检索、趋势分析、子技术方向统计等 MCP 工具,生成含交互式 ECharts 图表的多页面 HTML 报告、JSON 中间数据和 CSV 证据链,最终给出研发/投资机会评分与明确建议。本 Skill 不使用 Python,所有文件通过 MCP 和文件写入能力生成。
-
patsnap Bundle Tech Briefing给定公司名称和/或技术领域,自动检索智慧芽专利、学术文献、行业新闻,生成面向客户交付的技术简报 HTML 报告。当用户明确要求"技术简报"、"专利简报"、"技术报告",或同时出现公司名与技术主题的"竞品分析"、"技术动态"、"行业简报"时触发。示例:"生成华为和小米5G技术简报"、"帮我做固态电池技术动态报告"、"宁德时代最近半年的专利简报"。闲聊式问"最近汽车行业怎么样"不触发。
-
patsnap Bundle AI Amazing Tech技术创新突破情报官 — 根据用户需求自动路由至三个独立模块:技术全景分析、专利挖掘、技术情报简报,每个模块均输出对应风格统一的 HTML 报告。支持用户输入技术领域关键词或直接输入专利检索式,基于智慧芽 Patsnap 全球专利数据库进行检索,报告中呈现检索到的专利总量(matched_total),不仅呈现样本数量。
-
patsnap Skill Patent Transfer智慧芽专利资产运营转化专家 — 基于输入的专利号,调用专利检索、语义检索、企业情报、新闻资讯 MCP,识别潜在转化企业并生成可直接推送的专利成果转化简报 HTML。
-
wundercorp Skill Inspecting Loki Desktop DomRead the live Loki desktop DOM/CSS over CDP.
-
patsnap Bundle Tech Report Skill基于专利Excel数据生成技术研发简报HTML。输入包含专利清单的Excel文件路径、技术主题、时间范围,自动完成关键词标引、数据分析、HTML简报生成全流程。
-
patsnap Skill Qiye Risk Platform企业风险平台2——金融机构风控管理平台完整复原手册。基于智慧芽Patsnap科创类数据,支持评级变动分析、科创风险快照、批量风险巡检、季度预警名单,自动扫描6个严重风险维度和8个关注风险维度,输出三层可解释风险快照报告(HTML)。含5步分步复原指令,客户可从零复原金融机构风控管理平台。
-
patsnap Bundle Rd Direction Finder给定工程/技术问题描述,按"需求牵引-瓶颈分析-解决思路"三维解析需求,提取互斥技术难题,识别核心攻关方向,并行执行专利、论文及 Web 多平台检索,综合输出不超过 max_directions(默认 10)路结构化研发方向(含核心问题、研发内容、技术目标、代表参考证据),并按固定骨架同步生成 Markdown 检索报告与可渲染 HTML 报告。
-
patsnap Skill Semi Intel Platform半导体设备智能情报平台(SemiWatch Pro)— 融合智慧芽 Patsnap MCP 真实专利数据,覆盖专利竞争、供应链风险、技术代差、政策管制、竞争对手等12个功能模块的单文件 HTML 情报看板
-
patsnap Bundle Tech Insight Report技术主题洞察报告全流程生成Skill。覆盖选题→采集→HTML编写→质检→发布五阶段SOP,内置六维信源框架、专利高风险排查、避坑经验与自动化质检脚本。
-
patsnap Bundle Tech Transfer Match科技成果转移转化供需匹配分析技能 v4.0。触发词:供需匹配、技术转移、成果转化、转移转化分析、成果匹配、技术对接。执行6步工作流:技术内容分析→先进性评估→专利价值评估→三维度二层潜在接受方挖掘→HTML可视化报告生成(自动保存桌面)→文件服务。
-
patsnap Bundle High Value Patent Package根据用户提供的 Patsnap/智慧芽专利检索式筛选高价值专利包,并生成 HTML 报告(Word 可选)。适用于专利分析师希望按加权指标筛选高价值专利清单的场景:简单同族被引专利数量 30%、简单同族专利数量 30%、核心发明人专利 20%、法律事件历史 20%;输出字段包括公开公告号(链接到智慧芽专利页面)、标题、摘要附图、当前申请(专利权)人、简单法律状态、Patsnap 专利标题、AI 技术三要素和入选理由。
-
patsnap Bundle Identify Rd Directions RdConvert a concrete engineering, scientific, manufacturing, or technical project requirement into evidence-backed R&D directions, including requirement analysis, bounded technical issues, research questions, tasks, targets, deliverables, patent and literature evidence, standards and engineering cases, relevant organizations, search logs, and synchronized Markdown and HTML reports. Use when a user asks what R&D directions to pursue, how to decompose a project into research routes, or needs an evidence-led R&D direction report.
-
patsnap Skill Conduct Patent Research IpConduct an evidence-backed patent research program from a technical problem and preliminary solution through iterative patent searching, technology-route analysis, project novelty pre-screening, FTO-oriented risk screening, competitor monitoring, recent-publication surveillance, and self-contained HTML plus DOCX reporting. Use when a user asks for patent research, project-initiation novelty review, technical-route analysis, patent risk screening, competitor patent tracking, or a comprehensive patent-search report.
-
patsnap Bundle Fto Report Quality"FTO报告质量审核技能(通用版,一包双模块+可选Harness校验)v9.0。适用于任意公司、法务团队或专利代理所,接收已有FTO报告、专利侵权风险分析报告或展会知识产权风险自评报告,按事实层、法律判断层、决策可用层三层方法论进行质量审核,并用A/B/C/D四维度量化评分。新增:矩阵式场景识别、五轨检索(含时序轨)、Jackknife召回率估算、致命缺陷一票否决、摘要优先输出模式、桑基图可视化、可执行优先级建议排序、Harness跨字段逻辑校验。触发本skill进行FTO报告质量审核时,必须调用generate_report.py生成正式HTML文件;当用户明确要求校验时,再使用内置validate_report.py检查HTML结果。"
-
patsnap Bundle Generic Drug Scout运行仿药速探 V1,创建用于仿制药机会发现的静态交互式 HTML 报告或预置结果筛查页面。适用于用户要求筛选中国小分子晶型专利到期机会、生成带结果的仿药速探 V1,或创建由已配置智慧芽/Patsnap MCP 支撑的本地报告的场景。
-
patsnap Skill Auto Lamp Ip Advisor汽车车灯零部件供应链决策与专利侵权风险分析专家。根据用户提供的车灯设计图描述或零件清单,完成四阶段分析:零件模块拆解、外购vs自制决策、专利侵权风险评估(含发明专利、实用新型、外观设计三类比对,疑似侵权专利对照表与绕行建议)、综合采购与设计策略汇总,最终输出网页版Tab导航HTML格式报告并打包为zip提供下载。检索范围覆盖中国及US/EP/JP/KR等主要海外专利局。覆盖前照灯、尾灯、雾灯、氛围灯,熟悉法雷奥、海拉、马瑞利、斯坦雷、小糸等主要供应商专利布局,以及奥迪"雷神之锤"等经典海外车灯专利。
-
patsnap Bundle Prism Auto Config Map棱镜车智-专利论文数据穿透 Skill。用于车企下一代车型规划、竞品配置对标、 技术趋势预测、供应链机会识别和售前 Demo。围绕特定细分市场、车型清单或 关键配置,基于 QFD/质量屋 + Matrix Analysis 为主轴,辅以 Benchmarking、 Kano、技术 S 曲线、专利壁垒矩阵,融合官方参数、配置库、VOC 与智慧芽专利/论文/文献/企业产业链数据, 输出强视觉 HTML 前瞻决策报告。核心价值是把市场配置现象穿透到专利、 论文/文献、关键申请人、供应链合作关系和未来 1-2 年量产机会。 不适用于 FTO 法律意见、精确 BOM 成本测算、泛财报融资分析或脱离车型 配置决策的公司战略画像。
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 frontend-performance-checklist, recipe-front-design, recipe-front-review. 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.