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.
-
yfe404 Bundle Intel AgentReconnaissance tool that takes a target URL and desired data points, tests extraction methods (API, JSON-in-HTML, Cheerio, Browser) via proxy-mcp traffic interception, observes protection signal under the active proxy/IP config, and outputs a structured intelligence report with per-data-point strategies.
-
yingying-chu Bundle Class Action FinderFind, verify, and track class action settlements from the user's email. Use for three jobs: (1) scan direct settlement notices and produce an actionable HTML report, (2) scan purchase confirmations or receipts and check the web for potentially matching open settlements, or (3) record and retrieve claim and payout history. Trigger for requests such as "scan my email for settlements", "did I miss a claim deadline", "check my purchases for class actions", "scan my receipts for settlements", "I filed my claim", "I got a payout", "add this case to my watch list", or "show my filed claims". Also trigger when invoked as /class-action-finder, $class-action-finder, or by name. Skip for form-filling help, opting out of a settlement, and general legal questions.
-
yixiliu617 Bundle Data CraftGenerate beautiful themed HTML data displays. Six visual idioms with matched voices, rendered as self-contained HTML files. Use when the user asks for charts, dashboards, reports, tearsheets, briefings, data visualizations, or any data-driven document.
-
yizhiyanhua-ai Bundle Fireworks Open Eli5Create evidence-aware, interactive visual explainers as self-contained offline HTML. Use when a user asks to explain a concept, repository module, engineering tradeoff, or incident with a diagram, walkthrough, ELI5 treatment, data/request trace, failure view, or teach-back. Do not use for a plain short answer, ordinary prose rewrite, generic website implementation, or unsupported claims presented as facts.
-
yogeshkumbhat Bundle 3d Web RevampRebuild an existing website as a high-quality 3D/WebGL experience, or build a new one from a brief. Covers auditing and preserving the current site's content, choosing the right kind of 3D for the business (product configurator, brand hero, narrative scroll, portfolio), art direction, the glTF/Draco/KTX2 asset pipeline, hard performance budgets, device tiering, and the non-negotiable fallback layer for crawlers, no-WebGL and reduced-motion users. Use this skill whenever the user mentions a 3D website, WebGL, Three.js, React Three Fiber, Spline, a product configurator, an immersive or interactive site, "make my site look premium/award-winning", scroll-driven animation, or redesigning/revamping a site with depth or motion — even if they never say the words "3D" or "Three.js". Also use it when the user asks whether 3D is a good idea for their site.
-
yosishe Bundle Summarize VideoCreates illustrated, source-linked study notes from YouTube URLs or local recordings in Hebrew or English. Use for lectures, tutorials, screencasts and demos. A deterministic controller installs its own tools for the current user when they are missing (ffmpeg, yt-dlp, Pillow; no admin rights), runs acquisition, original-frame extraction, verification and HTML/PDF delivery, then names the next file the agent must author. Supports bounded recovery, validated caches and configured local whisper.cpp. Cloud transcription requires explicit provider selection. Works in the user's Codex, Claude Code or Antigravity; sessions without execution tools get a copy-ready handoff.
-
ystemsrx Bundle Sql2erUse when the user wants a Chen-model ER diagram from SQL CREATE TABLE statements or DBML, wants to rearrange or clean up an existing sql2er state, wants a skeleton-only overview with attributes hidden at generate time, or needs drawio/svg/png/json/html exports with final visual review.
-
ystyle Skill Frontend Testing Workflow基于 agent-browser 的前端功能测试流程定义。用于需要编写前端功能测试场景、定义测试步骤和预期结果、或使用 agent-browser 自动化执行前端验证的场景。适用任意 Web 前端项目。
-
yuan66-hub Bundle Vue2 PerformanceVue 2.x performance optimization guide with 9 core techniques. Triggers when writing, reviewing, or refactoring Vue 2.x code for: (1) component rendering optimization (2) large data list/table handling (3) route switching & page load optimization (4) reactive data tuning (5) Webpack build optimization (6) first-screen loading speed-up
-
yugasun Bundle SlidesGenerate high-quality HTML slide presentations with beautiful templates. Make sure to use this skill whenever the user mentions slides, presentation, PPT, deck, keynote, 演示文稿, or 幻灯片 — even if they don't explicitly ask for HTML or templates. This skill handles both polished multi-template workflows and fast self-contained themes. Use it for any request involving creating, building, or generating a presentation regardless of how the request is phrased.
-
yulaiz Bundle Interactive Code MapTurn a codebase directory and a business question into a single interactive HTML code map, or turn a described non-code business process into the same evidence-backed map. Use when the user asks to explain, map, or visualize code flows, architecture, modules, data models, or a business process.
-
yunfeizhu Bundle Tdesign Vue NextTDesign Vue 3 component library usage guide, covering tdesign-vue-next 1.x series, including basic components, forms, tables, theme customization, dark mode, and AI Chat components
-
yushengxin Bundle Catch Web从参考设计(截图、图片、URL)提取结构化 Design DNA(颜色、字体、间距、布局、形状、阴影、动效、风格情绪), 然后用 DNA + 用户内容生成自包含的 HTML/CSS/JS 页面。 Triggers on: "catch this design", "extract style", "design DNA", "复制这个网站的风格", "照着这个设计做", "analyze this design", "style transfer from screenshot"。
-
yvelinmoon Bundle Themed Shop Static Publisher把主题小店玩法项目生成为一个可直接打开游玩的静态页面,并发布为公开链接。当用户想“做一个可玩的主题小店页面”“把某个店铺主题自动出成静态成品页”“调用 Neta creative 生成店铺素材并分享成品”时,必须使用这个 skill。它适用于:从一句店铺想法出发,生成概念、文案、商品图、助手立绘、装饰贴纸、按钮贴纸与音效完整资源,组装为可玩的静态 HTML,并最终发布公开 URL。
-
yx2557 Bundle Smart Annotator对 AI 产出的内容做批量批注,再让 AI 一次性批量修改。支持 Markdown / HTML / 纯文本 / CSV,以及 Word(docx) / Excel(xlsx) / PDF / PPT(pptx) / 图片——后几类会转成可批注视图,改写时回写原始文件并保留格式。当用户想对一份生成的文稿、页面、文档、表格、幻灯片或图片标注多处问题后统一修改,或说到「批注 / 圈选批注 / 批量改这个文件 / 批注后让你改 / annotate」时使用。
-
yysun Bundle ApprunAppRun architecture guidance for building, reviewing, or fixing AppRun applications and the AppRun library itself. Use when work involves AppRun MVU components, state/update lifecycles, async generators, event directives, routing and navigation guards, custom elements, or AppRun test coverage. Focus on AppRun behavior and existing repo contracts, not generic build-tool, CSS-framework, or starter-app setup.
-
yzfly Bundle Chrome QA Agent基于 chrome-devtools MCP 的对抗式 UI 测试。分析 git diff 只测改动部分,或探索整个应用找 bug。覆盖功能正确性、无障碍(a11y)、响应式布局与 UX 启发式。当用户要测试 UI 改动、QA 一个 PR、审计无障碍、或做探索式测试时使用。驱动真实本地 Chrome,本地与任意线上 URL 都适用。
-
kumbajirajkumar123 Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
-
l0ng-ai Bundle Agent AnywhereAct on the IM conversation beyond a plain-text reply, for agents running inside the Agent Anywhere daemon. Use this whenever you need to: send a file or image into the chat; push a proactive notification (e.g. after a long task finishes); reply to, edit, delete, or react to a specific message; fetch chat history the user is referring to ("the one above", "that earlier link"); open a thread; or ask the user a blocking multiple-choice question with buttons and branch on the answer. Also use it when the user reports the gateway misbehaving or asks to change its settings — it covers diagnosing with `doctor` and editing the gateway config. Do NOT use it for an ordinary reply — your plain text output already streams back to the chat automatically.
-
labudis Skill Mockup PrototypeGenerate interactive HTML mockups from a description, iterate on them, and deploy to GitHub Pages or Vercel for sharing. Use this skill when the user wants to create a mockup, prototype, UI exploration, or design comparison, or when they want to deploy or share one.
-
lambdahack Skill PlaytestsLambdaHack's automated AI-vs-AI playtest and benchmark Makefile targets (test-short, test-medium, test-gha, frontend*, bench*) and the headless test-frontend flags. Use before running, interpreting or adding a playtest or benchmark target.
-
lancedb Bundle Interpret MetricsInterpret LanceDB community/download metrics and produce a slide deck summarizing how open-source adoption is trending. Use when asked to analyze the dashboard, read the download/stars numbers, explain what moved in a month, or build the monthly community-metrics deck. Pulls data from the dashboard API and the LanceDB stats table, runs trend + pre/post-event analysis, and generates a branded HTML deck from the bundled template.
-
lareesahu Bundle Brainstorm QuestionnaireUse when the user says "brainstorm" or "let's brainstorm" about a product, website, or brand — build a project-specific interactive HTML decision page with multi-select pills, notes fields, auto-save, and export. NOT a chat Q&A. NOT a static survey.
-
lassejlv Bundle Loora Design GuideBuild, edit, refine, troubleshoot, and review polished responsive product interfaces through the Loora MCP server and its structured Canvas schemas. Use when an agent must create or modify a Loora design, recover from MCP schema errors or missing authoring tools, turn a brief or reference into editable Canvas nodes, establish tokens or reusable components, add themes, interactions, or motion, work safely on a Loora branch, verify with or without image vision, or export implementation code without treating HTML, JSX, or CSS as the authoring model.
-
launch-waitlist-zot Skill Zot WaitlistIntegrate a Zot waitlist into any TypeScript, React, or Next.js app using the official `@zot-core/sdk` and the `@zot-core/cli` command-line tool. Use this skill whenever the user asks to "add a waitlist", "create a waitlist", "collect signups", "add early access", "integrate Zot", "build a coming soon page with email capture", or wires email capture to Zot.
-
laymom Bundle UX StrategyUI/UX 전략·진단 컨설팅. 만들기 전·관통하는 "무엇을/어떻게 흐르게"를 설계한다. 실제 컨설팅펌 방법론(NN/g Double Diamond·휴리스틱 평가·McKinsey 이슈트리·MECE·피라미드 원칙·JTBD·RICE)을 권위 앵커로 사용. HTML 시안이 아니라 전략·진단 문서를 산출하고 비주얼 디자인 단계로 핸드오프. UX 진단·정보구조·사용자 여정·전환 퍼널·휴리스틱 평가 요청 시 자동 활성. /ux로 명시 호출.
-
lazypay Bundle ArchscribeCreate premium hand-drawn architecture, workflow, and swimlane diagrams in a dark neon or light paper style, with editable Excalidraw sources, PNG/SVG previews, animated GIF/MP4 output, and interactive HTML. Use whenever the user asks for 岚叔动态架构图、手绘架构图、Excalidraw 风格图、DailyDoseOfDS 风格技术图、动态流程图、泳道图、系统可视化,或希望复刻并提升参考架构图。
-
lazzyfu Bundle Ant Design Vue UIBuild, refactor, or review production-grade admin interfaces with Vue 3 + JavaScript + Ant Design Vue 4.x. Use this skill when creating or optimizing backend management pages, CRUD interfaces, modal forms, table pages, detail pages, dashboards, approval flow pages, config pages, or database/ops admin UIs. This skill focuses on real project delivery: clear structure, maintainable code, responsive layout, consistent interaction patterns, and unified enterprise admin styling.
-
lc132 Bundle Ashare ScreenerA股每日盘前短线标的智能筛选(v6.23.0)。基于前一日收盘数据,通过37步筛选流程+自动整改+策略级胜率监控熔断,输出短线标的_YYYYMMDD.md和可视化HTML报告。同策略+跨策略冠军PK采用基本面+技术面融合12维度。回测报告新增👑皇冠回测板块+按日期均匀采样交易明细。
-
lc2panda Bundle Xiongbanxian熊半仙 · 梅花易数(含小六壬)起卦断卦。支持年月日时起卦、数字起卦、汉字笔画起卦(离线 Unihan,无 API 依赖),以及小六壬起课。自动推演本卦、互卦、变卦、错卦、综卦,判断体用五行生克关系,并按起卦方式自动套用三套皮肤(宋代文人 / 民俗木刻 / 道符掐指)输出 HTML 卡片。**每次调用会自动生成 HTML + 精准裁剪的 2× Retina 长图 PNG**,Claude 可直接把 PNG 文件分享给用户。当用户提到"起卦 / 占卜 / 梅花易数 / 周易 / 小六壬 / 解卦 / 卜一卦 / 看看运势"等时调用本技能。
-
leekensei Bundle Toss Frontend Fundamentals토스 Frontend Fundamentals 기반 코드 품질 가이드. 코드 리뷰, 새 코드 작성, 리팩토링 시 4가지 기준(가독성, 예측 가능성, 응집도, 결합도)으로 피드백 제공. 프론트엔드 코드 품질, 클린 코드, 코드 개선 요청 시 활성화.
-
leilei926524-tech Bundle Capsule DeckSingle-file horizontal-swipe HTML deck in the Capsule design language — modular pill-shaped cards on warm bone with a full pastel-pop palette. For lifestyle, beauty, creator, DTC, and agency briefs that should feel modular, modern, and a little Y2K.
-
leiting-eric Skill Daily BriefOperational knowledge for the daily-brief digest pipeline (this project). RSS/API fetchers, pluggable LLM enrichment (default claude CLI on Max; also anthropic/openai/deepseek/minimax API), trading section, HTML rendering, cross-platform scheduler integration (Windows Task Scheduler / macOS launchd / Linux cron). Load when the user asks about running daily / regenerating sections / debugging a failed run / adding or disabling sources / LLM quota / scheduler / why a tab shows wrong data / why a source failed / switching LLM backend. Always prefer the documented npm commands over re-implementing logic. Diagnose by reading logs/daily-*.log first, then logs/llm-calls.jsonl for LLM-side issues.
-
zakirkun Bundle Guardian CLIAn enterprise-grade, AI-powered penetration testing automation CLI tool. Orchestrates multiple specialized AI agents (Planner, ToolAgent, Analyst, Reporter) backed by 4 AI providers (OpenAI, Claude, Gemini, OpenRouter) and 19 integrated security tools through YAML-defined workflows. Produces professional Markdown, HTML, or JSON security reports with full evidence capture and traceability.
-
zakisheriff Bundle Claude Liquid GlassEnforces native iOS 26+ Liquid Glass in all iOS UI — SwiftUI, UIKit, and React Native / Expo (expo-glass-effect + expo-router NativeTabs). Covers buttons, icons, navbars, tab bars, search bars, text inputs, sheets, cards, every interactive element. Two hard laws: (1) never hand-roll or custom-make Liquid Glass — always use the platform's native component (SwiftUI `.glassEffect`/ `.buttonStyle(.glass)`, or RN `GlassView`/`GlassContainer`/`NativeTabs`); never fake it with BlurView/ultraThinMaterial/opacity on iOS. (2) every touch fires a haptic. Use when writing, reviewing, or refactoring any iOS UI code (Swift or React Native/Expo), even if the user just says "make a button" or "add a nav bar" without mentioning liquid glass, haptics, or iOS 26. Trigger on SwiftUI views, buttons, NavigationStack/toolbar, TabView, .searchable, TextField, sheets; and on RN/Expo Pressable/TouchableOpacity, expo-router layouts, expo-glass-effect, expo-haptics, or any styling / press-feedback decision.
-
zard-ui Bundle ZardManages zard/ui components and projects — adding, composing, styling, and debugging Angular UI built on TailwindCSS v4. Provides project context, component source, and the real API instead of a remembered one. Applies when working with zard/ui, zard-cli, the zard registry, or any project with a components.json that declares a zard projectType. Also triggers for "zard-cli init", "add a zard component", or "set up zard/ui in an Nx workspace".
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 intel-agent, class-action-finder, data-craft. 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.