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.
-
soapboxbuild Bundle Portfolio AnalysisRun a portfolio-scale decarbonization analysis across all analysis-ready assets in a Soapbox portfolio. For each asset: pulls Audette decarb plan (physics), runs the compute_plan_economics cashflow engine (incremental value bridge + IRR), applies LL/TT allocation decision tree, screens measures by IRR ≥ hurdle. Aggregates to fund-level and portfolio-level summary. Produces presentation-ready HTML report. Works for any client portfolio — parameters are fully configurable per run. Spec 2 of 2 — portfolio ingestion (Spec 1) is a prerequisite. Triggers on: "run portfolio analysis", "analyze the portfolio", "portfolio decarbonization", "run the portfolio", "portfolio summary", "show me the portfolio results", "portfolio IRR", "portfolio CapEx", "run analysis on [client]", after portfolio-ingest completes.
-
tencentblueking Skill Tapd Todo根据 TAPD 单据/需求 ID 拉取需求与备注,生成 OpenSpec 变更提案
-
tencentblueking Skill Weekly Report按 agent-flow.config.json 的周期与分支配置汇总本端成员 commit,生成精简周报并直接输出在对话中
-
tencentblueking Skill Design To CodeConverts design mockups, screenshots, or UI images into Vue 3 frontend code. Use when the user provides a design image, UI screenshot, mockup, or wireframe and asks to generate page code, implement a design, or convert a design to code.
-
tencentblueking Skill Create Component创建组件,新建组件,生成组件
-
tencentblueking Skill Dbm Release Plan生成 frontend_master 待合入 v1.5.0 的 commit 发布计划记录。当用户需要发布计划、 发版记录、核对 frontend_master 还有哪些提交未合入 v1.5.0,或给出 release PR 链接 要求生成 commit 清单时使用。是否已合入的判定逻辑:以 commit msg 尾部的 issue id (如 #19152)在 v1.5.0 历史中是否存在相同 issue id 的提交为准(识别 cherry-pick)。
-
tencentblueking Skill Openspec ExploreEnter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
Audited -
tencentblueking Skill Openspec ProposePropose a new change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation.
-
tencentblueking Skill Agent Flow Config读、写或新增项目根目录 agent-flow.config.json 配置时使用,包含配置分层、成员人名解析(tapdname / githubname / git 提交身份)与新增配置项规范。
-
tencentblueking Bundle Codebase Insights沉淀与查阅跨模块一致性问题:同一语义在多处被独立实现且实现之间已经漂移(列宽、魔法数字、按 DB 类型复制的组件家族、已有抽象覆盖不全等)。两个时机使用:任务收尾回顾本次读过或改过的代码并把够判据的发现记成篇目; 以及改表格、公共组件、按 DB 类型复制的代码前查阅已有篇目。当用户要求总结、复盘、沉淀经验, 或问「这类问题还有哪些」「以前记过什么」时也使用。
-
tencentblueking Bundle Dbm Frontend DesignDBM 前端的排版与交互设计规范,包含设计令牌(间距、字号、颜色)、四类页面骨架的判定与实现范式、 列表页、工具箱提单页、详情页、弹窗侧滑、按钮体系的具体取值。 新建或修改页面、组件、样式时使用, 或当用户询问页面布局、容器留白、按钮规范、弹窗宽度、字号配色、交互模式时使用。
-
tencentblueking Skill Openspec Update ChangeUpdate an OpenSpec change by revising its existing planning artifacts and keeping them coherent with one another. Use when the user wants to revise a change's plan, fold new decisions into it, or reconcile its artifacts after an edit. Never edits code.
-
tencentblueking Bundle Create Project Designer为一个前端项目生成专属的 `<项目>-frontend-design` 设计规范 skill:从源码反向提炼设计令牌 (间距、字号、色板、尺寸档位)、归纳页面骨架与交互流程,产出可脱离项目独立运行的规范文档与页面骨架资源。 当用户要求生成/新建前端设计规范 skill、沉淀项目排版交互规范、 或提出「给这个项目做一个 xxx-frontend-design」时使用。
-
tjxj Bundle Z Smart XparseParse documents into clean markdown or structured JSON via xparse-cli, with smart PDF auto-split and merge. Use this skill when the user provides a PDF, image, Office file, HTML, OFD, or other supported document and wants it read, converted, summarized, or prepared for downstream agent use. For PDF files, automatically detects files larger than 5 MB or documents longer than 100 pages and splits them into manageable chunks, parses each chunk, then merges results into a single coherent output. Handles encrypted PDFs, page ranges, markdown/text output, and detailed structured extraction.
-
tjxj Bundle Z Video Study Webpage Qwen当用户要求“理解视频内容”“完整学习视频”“解读视频”“视频学习总结网页”“图文并茂学习网页”“用 Qwen 多模态分析视频”“用 qwen3.7-plus 看视频”“关键知识点匹配画面”“把视频做成学习网页”时必须使用。本 skill 会把本地 MP4 或已下载视频拆成音频转录、时间轴帧图、Qwen 多模态逐段分析,并用既有学习总结网页模板生成图文并茂 HTML,要求每个关键知识点绑定到正确视频画面。
-
tjxj Bundle Z Wanghong Handwritten Ppt将文章、讲稿或技术主题制作成王虹学术报告气质的 16:9 Notability 手写风 HTML 幻灯片,逐页导出 PNG,并默认同时生成可逐条播放动画的时间轴版 HTML。触发词:王虹PPT风格、王虹手写PPT、Notability学术手写幻灯片、手写网页PPT、手写PPT、数学家手写报告风、手写PPT时间轴版、手写演示动画。
-
tjxj Bundle Z Wanghong Handwritten Video将 z-wanghong-handwritten-ppt 生成的王虹学术手写 HTML 直接制作成 16:9 动画 MP4,字形锁定为原 PPT Skill 预览封面的手写字,完整保留字号、颜色、留白、图表和标注,输出零音频流。用户提到动画版王虹PPT、王虹手写动画、Notability手写视频、手写PPT转MP4、学术手写动画、纯画面手写视频、把王虹手写 HTML 做成视频或要求手写风 MP4 时必须使用。
-
trae-community Bundle Video To KeyframesExtracts video frames, detects cuts/segments, selects candidate keyframes, and generates review HTML galleries. Invoke when users ask for keyframes/cuts/segmentation/storyboard screening.
-
rexedge Skill Interswitch Web CheckoutInterswitch Web Checkout — Inline Checkout (JavaScript widget) and Web Redirect (HTML form POST) for accepting payments on your website. Use this skill whenever building a checkout page, integrating Interswitch payment gateway, implementing inline checkout popup, web redirect payments, handling payment callbacks, or confirming transaction status via server-side requery. Also use when you see references to webpayCheckout, inline-checkout.js, pay_item_id, merchant_code, or newwebpay URLs.
-
riteshkew Bundle Codewisp Game BuilderFrom a natural-language game description, scaffold a complete playable browser game as a single index.html using kaplay (kaboom.js successor) loaded via CDN — no build step, no dependencies, open in any browser.
-
riz007 Bundle Aos UXReviews UI implementation for usability, interaction design, accessibility, empty/error/loading states, microcopy quality, motion, keyboard-only navigation, and dark mode support. Reports FAIL/WARN/PASS. Use when user asks to review UX, audit usability, check user experience, or says "does this feel right for users".
-
riz007 Bundle Aos VuetifyReviews Vuetify 3 + Vue 3 code for correct component usage, Material Design 3 patterns, form validation, theme customisation, and performance. Reports FAIL/WARN/PASS. Use when user asks to review Vuetify components, build Vuetify UI, or says "check my Vuetify code".
-
riz007 Bundle Aos FrontendReviews frontend code for component design, CSS architecture, performance, accessibility, state management, bundle size, and internationalisation readiness. Reports FAIL/WARN/PASS with file references and concrete fixes. Use when user asks to review UI code, component design, frontend architecture, or says "check my React/Vue components".
-
riz007 Bundle Aos GenerateMulti-agent full-stack feature generator. Dispatches four specialised subagents — Architect, Backend Engineer, Frontend Engineer, Reviewer — to design, generate, and review a complete vertical slice in one pass. Use when user wants to generate a complete feature end-to-end, says "generate the full feature", or needs fullstack scaffolding beyond what /aos-feature provides.
-
rowankid Skill Frontend Perf前端性能分析技能。分析前端页面的加载性能、渲染性能和资源体积问题,输出性能分析报告和优化建议。适用于前端工程师处理页面加载慢、交互卡顿等性能问题。
-
sciman-top Bundle Custom Powerpoint AccessibilityUse when auditing or validating PowerPoint/PPTX classroom presentations for accessibility, including titles, alt text, reading order, tables, links, captions, contrast, color cues, motion, and native Accessibility Checker evidence.
-
soden46 Skill Frontend UIBuild and review user interfaces using framework-agnostic usability, accessibility, state, and rendering principles.
-
arthurzakirov Bundle Aerospace Macos SetupInstall, configure, and debug AeroSpace on macOS. Use when Codex needs to set up AeroSpace with Homebrew, create or repair ~/.aerospace.toml, configure window movement hotkeys for multi-monitor workflows, diagnose Accessibility or server/config problems, or automate binding tests with the AeroSpace CLI.
-
defaultperson Bundle Extract LinksUse when a notes/plan file contains URLs (YouTube videos, Telegram posts, articles) and you want their gist available inside the file. By DEFAULT writes a one-line summary inline next to each URL (light, fast triage); pass --full to pull full content into a local extracted/ tree with pointers. YouTube subtitles via yt-dlp, public Telegram via embed-page scrape, HTML via pandoc/curl; private/auth resources are out of scope. For 1-2 URLs, copy-paste is faster. Triggers: "/extract-links", "extract links", "развернуть ссылки", "expand links", "fetch URLs", "извлеки контент".
-
naoray Bundle Visual ReviewVisually verify rendered output for web pages, PRs, CLI commands, and TUIs. Use when the user asks for "visual review", "visual QA", "screenshot this", "check how this PR looks", "review CLI output", "capture a terminal command", or "record this TUI". Inputs - target URL or PR number, mode (browser / CLI / TUI / regression), and routes / commands / viewports to check. Do not use when the user wants functional QA (use a testing skill), brand-taste judgment (this verifies rendered output, not design taste), frontend-stack migration (out of scope), or wants to push commits (this is read-only). Produces a screenshot or recording set + a visible-issues report listing artifact paths, routes/commands/viewports inspected, and any layout/overflow/state-coverage gaps found. Escalate if the target is unreachable, the PR is too large for a single review pass (recommend scope reduction), or the local dev server cannot start.
-
opn48 Skill Apple Human Interface Guidelines AccessibilityiOS无障碍设计指南,包含VoiceOver、动态字体、色彩对比度等。Invoke when implementing accessibility features in Android or iOS app.
-
ortus-solutions Skill Vite ExpertUse when building or maintaining Vite-based frontend applications that need fast local development, reliable production builds, optimized asset pipelines, or plugin-level customization. Invoke for HMR issues, build performance, code splitting, environment handling, Vitest integration, and Vite config refactors.
Audited -
ortus-solutions Skill Vuejs ExpertUse when building or scaling Vue applications with maintainable component architecture, robust state management, and performance-aware rendering. Invoke for Composition API patterns, routing, forms, testing, and SSR-aware component design.
Audited -
ortus-solutions Skill Alpinejs ExpertUse when implementing or reviewing Alpine.js behavior in server-rendered or progressively enhanced UIs. Invoke for component state design, directives, event handling, transition behavior, reusable stores, and maintainable lightweight interactivity.
Audited -
ortus-solutions Skill Tailwind ExpertUse when designing, implementing, or refactoring Tailwind CSS systems for consistency, scale, and performance. Invoke for utility composition, design tokens, theme extension, responsive strategy, accessibility styling, and class management patterns.
Audited -
rashid2801 Skill AI NewsletterCurate recent AI news (not already in past newsletters) into a personal digest focused on AI in the AEC industry (Architecture, Engineering, Construction) and general AI. Saves as HTML and PDF in D:\AI\News and Updates\YYYY-MM-DD\. Includes journal/blog highlights and reflection questions. Trigger phrases include "run the AI newsletter", "give me today's AI digest", "any new AI news", "/ai-newsletter".
Audited
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 design-to-code, openspec-propose, apple-human-interface-guidelines-accessibility. 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.