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.
-
takusaotome Skill Eli5Explain a topic like I'm a 5 year old, as a single HTML artifact built from big pictures and very few words. Use this whenever the user asks for a dead-simple explanation of how something works, says "ELI5", "explain like I'm five", "簡単に説明して", "図で説明して", "初心者向けに", "素人にもわかるように", wants to explain a concept to a non-technical manager, customer, or family member, or asks for a visual explainer — even if they don't say "ELI5" explicitly.
-
takusaotome Bundle Docling Converterdocling CLIを使用したドキュメント変換スキル。PDF、DOCX、PPTX、HTML、画像、Excel等のあらゆるドキュメントをMarkdown、JSON、YAML、HTML、テキストに変換。OCR対応で画像内テキストも抽出可能。Use when converting documents to Markdown or other formats, extracting text from PDFs, processing scanned documents with OCR, or converting office documents. Argument hint: [file_path] [--to md|json|yaml|html|text] [--ocr-lang ja] [--output output_dir]
-
kesslernity Bundle Project Status Tracker 3Maintains four living project files (overview and progress log, decision log, RAID log, links) from the mail, channel posts, documents and meeting notes the user attaches or the agent can reach, returns each touched file complete in the chat for the user to save, and builds a weekly DRAFT status report from those files. Use when the user asks to "set up tracking for project X", "catch the project files up", "log this decision against the project", "add this risk to the RAID log", "save this link to the project" or "write this week's status report". Do not use for reviewing an existing RAID log for stale or ownerless entries, use raid-log-review instead; for an HTML status page, use project-dashboard-builder; for minutes of one meeting, use meeting-minutes-writer. Drafts for human review; never approves, authorises or signs off.
-
takusaotome Bundle Marp Layout DebuggerDiagnose and fix MARP slide layout issues including whitespace problems, box alignment, bullet formatting, and CSS rendering inconsistencies. Use when MARP slides have visual layout problems or need CSS optimization.
-
takusaotome Bundle Multi File Log CorrelatorCorrelate events across multiple log files from different sources, systems, or time periods. Build unified timelines, identify causal relationships between events, and highlight anomalies that span multiple data sources. Supports timezone normalization and gap detection. Use when analyzing logs from multiple systems (frontend, backend, database, infrastructure), investigating distributed system failures, or building event timelines across services. Triggers: "correlate these logs", "build timeline from multiple logs", "cross-system analysis", "find related events across logs", "multi-source log analysis", "distributed trace analysis"
-
takusaotome Bundle Fujisoft Presentation CreatorThis skill should be used when creating professional presentation materials, slide decks, or proposal documents following FUJISOFT America's corporate template standards. Triggers include requests like "create a presentation", "make slides", "prepare proposal materials", "FUJISOFT template", or when MARP-format Markdown presentations are needed with consistent corporate branding. The skill provides a complete MARP template with CSS styling, visual design components, and quality assurance workflows.
-
jorinyang Bundle Web SpaWeb SPA 开发模式与陷阱——全屏演示/答题类单页应用的最佳实践。覆盖 CSS 居中+溢出的经典坑、数据加载方案选择、JS 作用域陷阱、选项格式化管道、倒计时音效、自动隐藏导航、流体排版、Apple 风格 UI。
-
jorinyang Skill HallmarkAnti-AI-slop 设计质量门禁——对 HTML 产出执行 58 道关卡检查、预发射自评、audit 评分、study 设计 DNA 提取。当用户要求审查页面是否有 AI 味、检查设计质量、提取参考设计 DNA、或对 feishu-html/huashu-design 产出做最终把关时触发。
-
jorinyang Bundle HTML PptHTML PPT Studio — 用 36 套主题 × 31 种布局 × 47 个动效 × 15 套完整模板快速生成 HTML 演示文稿。纯静态 HTML/CSS/JS,键盘操控,零构建。触发词:PPT、幻灯片、演示、deck、slides、演讲、分享稿、pitch、小红书图文、keynote、reveal、slideshow、演讲稿、做一份 PPT、做一份 slides。
-
jorinyang Bundle Feishu HTML将飞书文档或用户提供的内容制作成功能完整、视觉精良的 WEB SPA 应用,部署至阿里云 OSS 并提供在线访问链接。触发:做个网页/做个页面/发布到线上/部署/做个展示页/做个方案页/做个功能页/做个后台/做一个web/在线访问/做个汇报页。
-
jorinyang Skill Claude DesignDesign one-off HTML artifacts (landing, deck, prototype).
-
jorinyang Bundle Huashu Design花叔Design(Huashu-Design)——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。触发词:做原型、设计Demo、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、做个HTML页面、做个可视化、app原型、iOS原型、移动应用mockup、导出MP4、导出GIF、设计风格、设计方向、配色方案、视觉风格、评审。触发词(活动物料):海报、活动海报、效果图、KT板、签到背板、氛围布置、活动物料设计、泡沫板喷绘、拱门设计、挂幅、打卡点设计。
-
forexgod21 Bundle Angular ArchitectUse for Angular architecture and implementation — standalone components (Angular 17+), signals, computed, effect, RxJS, NgRx, NgRx Signal Store, dependency injection with inject(), lazy loading with loadComponent and functional guards, SSR with Angular Universal and hydration, change detection strategy (OnPush, signal-driven), reactive and typed forms, control flow (@if, @for, @switch), deferred views (@defer), and Nx monorepo layout. Triggers on mentions of Angular, ng, RxJS, NgRx, signal(), standalone component, @Component, Nx, Angular Universal, or Angular CLI.
-
ryankolean Bundle SystemizeConverts a singular action, task, or one-off workflow into a modular system component that integrates with existing skills and systems. Analyzes the full inventory of available skills and system components, then runs a structured design dialog to define the component's interfaces, dependencies, data flow, and integration points. If no system exists yet, establishes a self-centric system architecture with the user at the center. Activates when the user says "systemize this", "make this a system", "turn this into a component", "system component", "build a system around this", or when the user has a working action that should become part of a larger interconnected system rather than remaining a standalone skill or one-off workflow. Also activate when the user describes wanting things to "work together", "connect", "feed into each other", or talks about building infrastructure around a recurring process.
-
ryankolean Skill CLI PandocCovers effective use of Pandoc for converting between document formats including Markdown, HTML, DOCX, PDF, EPUB, LaTeX, and dozens more. Activates when the user wants to convert documents, generate PDFs from Markdown, create slide decks, manage citations, or batch-convert between wiki/documentation formats.
-
tomjiu Bundle PPTXRead, create, and edit PowerPoint PPTX/PPT presentations. Use when the user explicitly mentions "ppt" or "PPT" (e.g. "做个PPT", "make a ppt"). If the user only says "演示文稿" or "presentation" without mentioning PPT, route to html-deck instead. Covers: parsing, summarizing, extracting content, inspecting themes/layouts, creating new decks with PptxGenJS, and editing existing PPTX while preserving formatting.
-
tomjiu Bundle 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.
-
tomjiu Bundle HTML DeckCreate stunning, animation-rich HTML slide decks from scratch. Outputs a self-contained HTML file that opens in any browser, agent-friendly, visually impressive and pixel-perfect across all platforms. Use when the user says "演示文稿", "presentation", "slides", or "deck" WITHOUT explicitly mentioning "PPT" or "ppt" — if the user says "PPT"/"ppt", route to the `pptx` skill instead. Covers building a brand-new presentation from a topic, outline, document, or Markdown — i.e. no existing .pptx file is involved. The deliverable is always HTML.
-
tomjiu Bundle HTML ReportCreate any self-contained HTML deliverable except slides — research reports, whitepapers, PRDs, dashboards, portfolios, resumes, email templates, data visualizations, and more. Use when the user wants to produce a polished, visually designed HTML page or multi-page site for any purpose. The final deliverable is a self-contained directory (<name>.html + assets + _shared) deployed to the user's workspace with zero external dependencies.
-
tomjiu Skill Trae BrowseruseBrowser automation guide. Invoke when user wants to browse websites, access URLs, scrape web content, test frontend UI, perform any browser interaction, or navigate to a specific URL and perform multi-step actions on it (click, verify elements, fill forms).
-
tomjiu Bundle Solo Graphic GenerationGenerate bitmap-first static visual assets such as posters, banners, KV/key visuals, covers, invitations, social cards, illustrations, product images, and image batches without HTML. Confirm the output size before generation; if an exact size is unsupported, expose the constraint and wait for the user to choose a replacement instead of substituting one.
-
tomjiu Bundle Skill 2当要写/整理在线文档、建数据表增删改查、导入 CSV·Excel、做看板/dashboard/运营页/汇报页、md 转网页或演示 HTML 发布、建目录、上传下载网盘文件、审阅修订、分享协作,以及提到资料库/知识库/网盘/空间/workbuddy.cn/space 链接时使用。资料库是 WorkBuddy 原生的内容管理、分享协作与轻发布模块,覆盖在线文档(doc)、网页链接(link)、结构化数据表(database)、数据/汇报页面(page)、网盘文件(drive)与空间管理(manage);凡说资料库/知识库或出现 space 链接、未显式点名腾讯文档/飞书/Notion/乐享/金山文档/iWiki 等外部产品时一律走本 skill,默认落原生库、不反问存到哪个产品。
-
tomjiu Bundle Doc Typeset消费 design tokens + 文档内容,输出排版美化的 HTML。 内置 7 种垂类模板(合同/学术论文/公文/商务报告/会议纪要/研报/年报)和 4 个装饰组件,所有样式通过 CSS 变量引用 Token,禁止裸值。 在 doc-formatter 流水线中每当需要将文本内容转化为结构化美化 HTML 时,必须使用此 skill; 不要自己写 HTML 或内联 CSS——doc-typeset 是内容→HTML 的唯一标准转换路径。
-
tomjiu Bundle HTML ReviewHTML 质量门禁 skill(路线 A + 路线 B 共享)。对 doc-typeset(路线 A)或 doc-edit(路线 B)输出的 HTML 进行 5 维度质量检测(design-token 合规性、结构完整性、排版合理性、文体契合度、装饰使用合理性),输出结构化检测报告,不通过则打回上游做一次定向修正(不循环)。 在 doc-formatter 路线 A 和路线 B 流水线中,每次 HTML 输出后必须调用此 skill; 当需要检查 HTML 是否存在裸样式值、标题跳级、缺少必需文体元素、装饰过度等问题时,都应使用此 skill 而非手动检查。
-
tomjiu Bundle HTML To DOCX将 HTML 字符串或文件高保真转换为 Microsoft Word (.docx) 文档。 支持 CSS 变量预处理、10+ 种 HTML 元素精确映射、14 种 CSS 属性映射、中文字体、4 种装饰组件、TOC 目录、页眉页脚、图片嵌入。 提供 CLI(subprocess)和 Python API 双模式调用;在需要将 HTML 文档转为可编辑 Word 文件时使用此 skill。
-
tomjiu Skill Brief Compose短篇文档创作(目标篇幅 <1000 字):从零撰稿 → 生成 HTML → html-to-docx 转 .docx → present_files 预览。
-
tomjiu Bundle Format Extract把 .docx 文档转为语义化 HTML + 提取内嵌图片(标题层级、表格样式、段落缩进、字体颜色等结构信息),供调用方做后续格式分析;也可独立评估 HTML 转换质量。适用场景(**技术性底层调用**):"docx 转 HTML"、"提取 docx 结构为 HTML"、"HTML 转换质量评估"。本 Skill 是底层格式提取工具,**不自行判断是否应被触发**、**不猜测输出位置**——是否调用、何时调用、产物落在哪一律由上层调用方(如 doc-formatter)决定,调用时必须显式传入 `--output-dir`。用户关于"文档排版 / 套模板 / 参考这份 docx 生成"等需求,应由 orchestrator 统一编排入口接管,**不要旁路直点本 Skill**。
-
tomjiu Bundle Tdoc Orchestrator文档创作与美化的统一编排入口(本地通道)。当用户意图涉及文档写作或排版美化时调用。职责:识别意图 → 编排 stage 能力链(S1 创作 / S2 美化 / S3 HTML→DOCX 转换)→ 委派 doc-writer/doc-formatter/doc-converter 执行;S3 产出 .docx 后**强制 `present_files` 打开预览**,本 skill 调用结束。⚠️ 文档编辑不在本 skill 内承接,由 `tencent-docs-routing` skill 处理。不适用:纯代码文件、非文档类操作。
-
tomjiu Skill Component InstanceCreate/update component instances; set componentProperties; switch VARIANT / 变体 via variantOptions. Triggers: instance, COMPONENT_SET, variant, 变体, componentProperties.
-
tomjiu Bundle Tencent Docs【仅个人版账号可用】腾讯文档个人版(docs.qq.com)-在线云文档平台。适用前提:当前用户以个人 QQ / 微信登录腾讯文档;企业版(SaaS)账号请改用 tencent-saas-docs skill,本 skill 会直接返回 ERROR:identity_mismatch。是个人账号下创建、编辑、管理文档的首选 skill。涉及"新建/创建/编辑/读取/查看/搜索文档"、"保存文件"、"云文档"、"腾讯文档"、"docs.qq.com"等操作,请优先使用本 skill。支持能力:(1) 创建各类在线文档(文档/Word/Excel/幻灯片/思维导图/流程图/智能表格/收集表)(2) 管理知识库空间(创建空间、查询空间列表)(3) 管理空间节点、文件夹结构 (4) 读取/搜索文档内容 (5) 编辑操作智能表 (6) 编辑操作在线文档 (7) 文件管理(重命名、移动、删除、复制、导入导出)(8) 网页剪藏、本地文件/html/文档上云、图片 OCR。
-
tomjiu Skill Generate Fillable Contract HTML生成适于 HTML 转 DOCX 的中文待填合同、报价单和授权委托书 HTML。用户要求创建待填业务文档模板、合同填空或可按书签填写的 HTML 时使用。
-
doronkatz Bundle AxeProvides agent-ready AXe CLI usage guidance for iOS Simulator automation. Use when asked to "use AXe", "automate a simulator", "tap/swipe/type on simulator", "describe UI", "take a screenshot", "record video", "batch steps", or "interact with an iOS app". Covers all commands including touch, gestures, text input, keyboard, buttons, accessibility, screenshots, video, and batch workflows.
-
doronkatz Bundle Foundation Lean CanvasProduces a one-page lean canvas across nine interlocking blocks (problem, customer, UVP, solution, channels, revenue, cost, metrics, unfair advantage) with optional inline HTML and SVG visual rendering. Use when framing a new product thesis, stress-testing an existing strategy, comparing strategic options side-by-side, or aligning a team on business-model assumptions. Works as a strategic hub that cross-links to deeper PM skills without duplicating them.
-
doronkatz Bundle Firebase App Hosting BasicsDeploy and manage web apps with Firebase App Hosting. Use this skill when deploying Next.js/Angular apps with backends.
-
hybridaione Bundle Hermes3000 WritingUse Hermes3000 to plan, draft, revise, save, check consistency, and export long-form manuscripts through the Hermes3000 AI writing portal API. Use for novels, fiction series, nonfiction books, whitepapers, long reads, chapter outlines, character/world-building, style guides, consistency memory, and DOCX/PDF/EPUB/HTML exports.
-
harsh817 Bundle Frontend Flow DesignDesign the frontend flow for one feature, including screens, states, user actions, loading, validation, errors, accessibility, and connection to API behavior.
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 eli5, docling-converter, project-status-tracker. 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.