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.
-
bettermen Bundle Civil Service Exam Prep国家公务员考试(国考)和地方公务员考试(省考)全流程备考指导技能。覆盖考试概述、行测五大模块(言语理解/数量关系/判断推理/资料分析/常识判断)策略、申论五大题型(归纳概括/综合分析/提出对策/贯彻执行/文章写作)方法论、复习计划制定(三段式+不同起点方案)、时政热点追踪、真题解析技巧、结构化面试模拟训练(6大题型框架+评分维度+礼仪+高频真题)。生成交互式HTML可视化备考报告。触发词:公务员考试, 国考, 省考, 行测, 申论, 公务员备考, 公考, 考公, 复习计划, 公务员面试, 结构化面试, 时政热点, 真题解析, 行测技巧, 申论写作, 公务员报考, civil service exam, 公考备考。
-
bhanunamikaze Bundle Code VulnscanUse this when the user wants to find security vulnerabilities in a codebase, perform a security audit, scan for CVEs, detect secrets, review React/Next.js, Go, Java/Kotlin JVM, PHP, Ruby, .NET, or Rust web services, audit architecture/application/infrastructure flaws, review auth/API/crypto/business logic, check IaC/cloud/runtime configs, or generate a vulnerability report. Performs taint-flow, control-flow, architecture, and exploitability analysis across Python, JS/TS, Java/Kotlin, Go, PHP, Ruby, C/C++, C#, Rust, and infrastructure.
853 -
bhargavaganti Bundle Interactive DocsGenerate self-contained, interactive HTML documentation for ANY software project — web app, CLI, mobile app, backend API, data/ML pipeline or library: (1) a DEPLOYMENT / INFRASTRUCTURE doc with a clickable topology, data flow, containers, storage, seeding runbook, security and deploy steps; (2) an AI WORKFLOWS doc with mermaid diagrams of every model call — agent loops, RAG index/query paths, guardrails — plus prompt inventory, context & data path, failure modes and cost; and (3) an interactive USER GUIDE / usage walkthrough with a flow tree, real evidence (screenshots, terminal transcripts or request/response pairs) and per-step "who does what". Use when the user asks to build/produce an interactive usage guide, product tutorial, onboarding walkthrough, "how the app works" doc, an architecture or infrastructure diagram, an AI/LLM/RAG/agent pipeline diagram, a deployment/ops doc, or a client-facing explainer of a running system.
-
bil0000 Bundle GlobalyzeUse the Globalyze CLI to internationalize, maintain, debug, and runtime-wire React applications, including first-time globalization, ongoing sync, locale style changes, ownership classification, extraction audits, grouped inspection, and localization health analysis.
-
bil0000 Bundle SkemaMaster UI design skill for generating design systems, canvases, prototypes, critiques, and handoff packages. Use for /skema web, mobile, system, landing, review, import, redraw, and migrate, or when the user asks to design, redesign, build UI, create prototypes, extract systems, critique, or hand off frontend design work.
-
bilibili Bundle Toy通过 Toy CLI 完成 B站 Toy 平台的创作者操作(发布 / 更新 / 预览 / 查询 / 视频绑定 / 排查)。触发词:Toy 发布、发布 Toy、toy create、上传 Toy、Toy 更新、toy update、改 Toy 封面、改 Toy 密码、Toy 预览、Toy 提交审核、我的 Toy、toy mylist、Toy 列表、Toy 统计、toy stats、Toy PV/UV、Toy 登录、toy login、Toy 发布记录、toy history、toy cli、Toy 白屏、Toy 404、Toy 页面打不开、Toy 资源路径、Toy slug、Toy 绑定视频、绑视频、解绑视频、toy video、Toy 绑了哪些视频、视频页挂 Toy 入口、toy video mine。当用户需要把本地前端项目/HTML/zip 发布或更新到 Toy 平台、查看自己的 Toy、看访问统计、把视频与 Toy 绑定或解绑、排查发布后页面白屏/资源 404,或管理本地发布记录时使用此 skill。
-
billimek Skill Add Nix ComponentHow to add a new feature module, host, overlay, package, or NixOS user to this flake. Use when creating any new file under modules/, hosts/, or packages/.
-
bitomule Bundle KoubouGenerate App Store screenshots using HTML/CSS templates with real device frames. Creates professional, localized screenshots for iPhone, iPad, Mac, and Watch. Use when user wants to create, design, or update App Store screenshots.
-
bitomule Bundle MavUse MAV, the Mobile Agent Verifier CLI, to validate iOS and macOS apps through deterministic simulator/device/mac actions, configurable launch recipes, accessibility tree inspection, screenshots, logs, crashes, and evidence reports.
-
bitrix24 Bundle B24 UI NuxtBuild UIs with @bitrix24/b24ui-nuxt v2 — 130+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, building forms, or composing layouts for a Bitrix24 application.
-
bjesuiter Bundle Visual ExplainerGenerate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
-
jalliet Bundle Generating Stem FlashcardsGenerates atomic flashcards from technical/STEM source material. Supports three output modes: (1) interactive React artifacts with client-side KaTeX rendering, (2) Anki-ready TSV export with MathJax-compatible LaTeX, or (3) direct push to Anki via MCP Server (no export/import step). Use when users request flashcards, study cards, revision cards, Anki cards, quiz materials, or spaced repetition content from lecture notes, textbooks, or worksheets containing mathematical notation.
-
jamailar Bundle High Retention Video ScriptCreate, revise, or audit high-retention product videos, app tutorials, launch explainers, creator education videos, social ads, case stories, reviews, and walkthroughs. Grounded in the HKRR and clock theories publicly explained by 影视飓风, it starts from the creator's real material, point of view, speaking samples, audience tension, and available proof; develops one strong content proposition and package; writes a natural spoken draft; then uses HKRR and a 12-point stimulus clock to strengthen retention without flattening the creator's voice. Delivers one concise, production-ready HTML package with a readable word-for-word script, A-roll/B-roll timeline, capture checklist, circular clock, and evidence-based QC.
-
jamesxjz Bundle HTML To PDF将远程HTML网页转换为本地PDF文件,支持身份验证、自定义请求头、JavaScript渲染和CSS样式。支持单页转换和完整文档转换(自动爬取侧边栏所有子页面)。当用户需要下载网页为PDF、转换HTML到PDF、保存网页内容为文档、或提到完整文档/所有章节时使用。
-
jasim-k Bundle Laravel Inertia VueLaravel + Inertia.js + Vue 3 integration patterns. Use when building Inertia page components, handling forms with useForm composable, managing shared data, or implementing persistent layouts. Triggers on tasks involving Inertia.js, page props, form handling, or Laravel Vue integration.
-
jasonkneen Bundle Cluso InspectorVisual element selector for extracting HTML, screenshots, and context from web pages. Use when you need to see what the user is referring to, when clarification is needed about UI elements, or when the user offers to show you something visually.
-
jasonnamii Bundle Design Skill심플·강력 디자인 엔진 v3.2. 4톤(낮/밤×벤또/스크롤) + 믹스 모드 + 6포맷 + 8조 헌법(회색금지·형광펜적극·헤드 900·본문 300). 페르소나 2종(young-playful·KISAS) + Apple Keynote DS 풀스택 자산(scaffold HTML·deck-stage.js). P1: 디자인스킬, 애플디자인, 애플벤또, 키노트벤또, 키노트스타일, 벤또그리드, bento grid, 낮모드, 밤모드, 라이트벤또, 다크벤또, 라이트스크롤, 다크스크롤, 큰글자스크롤, 믹스모드, Think패턴, 이쁘니디자인, 디자인반응형, 차트시각화, 다이어그램디자인, 인포그래픽디자인, 빅넘버디자인, 형광펜디자인, 영플레이풀, young-playful, 키사스디자인, KISAS, 마케팅벤또, KPI벤또, 분석벤또, 카드벤또, HTML스캐폴드, 스크롤스캐폴드, 벤또스캐폴드, 덱스테이지, HTML발표, HTML슬라이드, design scaffold. P2: 디자인해줘, 이쁘니 해줘, 시각화해줘, 영하게, 벤또로, 키노트로, 낮모드로, 밤모드로, 큰글자로, 믹스로, design this, visualize, transform. P3: light bento, dark bento, light scroll, dark scroll, mix mode, responsive, visualization, big number, highlighter, persona young-playful, persona KISAS. P4: 산출물 생성시, HTML 시각요소 필요시, 마케팅 분석 한장 압축, KPI 대시보드, 캠페인 복기, 기능 요약 압축. P5: .html, .md, .pptx, .docx, .xlsx, .pdf. NOT: UI설계(→ui-action-designer), 옵시디언문법(→obsidian-markdown), 일반HTML단순래핑(→html-div-style).
-
jasonnamii Bundle Teenage Design틴에이지디자인·teenage-design — teenage engineering풍 카탈로그 HTML, 웹페이지, 덱, 제품 시각화 디자인 시스템. 소문자, 직사각, 니어모노크롬, 제품 액센트, 룰드 테이블, deadpan 스펙으로 구성한다. 트리거: 틴에이지디자인, teenage-design, TE style, 카탈로그 페이지, 제품 카탈로그, 스펙시트, model card, release notes, technical landing. NOT: 대시보드, apple-canvas, 카피 생성, 문체 변환.
-
jasonzhangf Bundle Flowy Dev SkillDrive Flowy Android visible-agent development, especially when Codex needs to define or execute the repo-local workflow for perception, screenshot capture, phone↔Mac debugging, Accessibility node extraction, evidence collection, or page-recognition iteration. Use when working in this repository on the Android agent-hand runtime, the local Mac daemon, debugging artifacts, or the perception-first development loop.
-
javedh-dev Bundle Shadcn SvelteManages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for "shadcn-svelte init", "add component", or registry URLs.
-
jayesh-bansal Bundle Email Pro MaxDesign intelligence for HTML email that renders correctly in every major client — Outlook, Gmail, Apple Mail, Yahoo, and 25+ others. Use whenever the user asks to build, fix, or review an HTML email, email template, newsletter, transactional email, OTP/verification email, receipt, or any email-related markup. Covers bulletproof buttons, hybrid responsive layout, dark mode, Outlook VML, Gmail clipping, and pre-send QA.
-
jdubois Bundle Dr JskillCreates Java + Spring Boot projects: Web applications, full-stack apps with Vue.js or Angular or React or vanilla JS, PostgreSQL, REST APIs, and Docker. Use when creating Spring Boot projects, setting up Java microservices, or building enterprise applications with the Spring Framework.
-
jeadland Bundle Install LLM CouncilLLM Council — multi-model consensus app with one-command setup. Ask one question to many models, let them critique each other, get a synthesized chairman answer. OpenRouter/OpenClaw-native backend + React/Vite frontend. Zero config — credentials resolve automatically.
-
jeanpfs Bundle Agent MobileAutomate mobile apps on iOS simulators and Android emulators using LLM-guided interactions. Use when the user asks to test, validate, interact with, or automate any mobile app running in a simulator or emulator. Works with native iOS, Android, React Native, Flutter, and any framework. Captures accessibility tree snapshots, taps elements, types text, scrolls, and takes screenshots via Maestro.
-
jeffreyyvdb Bundle Umami SetupWire Umami analytics into a web app — tracker script, optional Core Web Vitals, optional session recorder — all env-var-gated so they can be flipped on/off without a code change. Use whenever the user mentions Umami, asks to add or install analytics on a self-hosted analytics backend, wants to replace Vercel Analytics / Google Analytics / Plausible, says "add Umami to this project," or pastes an Umami tracker snippet asking where it goes. Works for SvelteKit, Next.js (App and Pages routers), Nuxt, Astro, Vite + React/Vue, and plain static HTML. Also use when a user reports their Umami dashboard shows no data and asks why — this skill includes the standard debugging checklist.
-
jerryjliu Bundle Research DocsParse documents with LiteParse and answer questions with visual citations. Generates an HTML report with the answer, source page images, and bounding box highlights on cited text.
-
jetqiao Bundle Football Prediction SkillGenerate explainable China Sports Lottery football predictions with event-time snapshots, T-24h/T-6h/T-90m/closing model horizons, separate directional and value states, strict reference/target market isolation, sourced pre-match intelligence, hierarchical Dixon-Coles probabilities, multi-window model validation, rolling backtests, tournament simulations, and self-contained dark HTML reports. Use for 竞彩足球、足球预测、竞彩赛单、胜平负概率、让球分析、比分预测、赔率价值、串关研究、赛前情报、足球回测、模型训练、训练无法晋级、football-data CSV、模型更新、小组排名、淘汰赛对阵、football prediction or Sporttery analysis.
-
jez500 Skill Web Scraper For LaravelBuild and work with the Web Scraper for Laravel package, including HTTP and API scraping, data extraction using CSS selectors, XPath, regex, JSON dot notation, Schema.org, and typed scrape schemas with match definitions.
-
jgabor Bundle VridaBuilds interactive HTML rigs — one file, zero dependencies, batteries included. Tweak controls, watch the preview update, copy the prompt. Visual tinkering, assembled to order. Activate when the user asks for a rig, explorer, or interactive visual tool.
-
jgsystemsconsulting Bundle Jgs Reference SkillConverts an authoritative reference document (standard, handbook, guidebook, framework: PDF/EPUB/DOCX/HTML/MD/RTF) into a licence-clean, citable knowledge pack: a progressive-disclosure agent skill with SKILL.md + chapters + glossary + patterns + cheatsheet, plus PACK.yaml provenance and a per-pack LICENSE. Use when you want a trustworthy reference oracle over a vetted open source (not study notes). Vets the source's licence FIRST and refuses to package non-redistributable (paywalled/all-rights-reserved) sources, routing them to a citation-only signpost instead.
-
jh941213 Bundle Deepagent Design KrDeepAgent Design(DeepAgent-Design)——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介,根据任务embody不同专家(UX设计师/动画师/幻灯片设计师/原型师),避免web design tropes。触发词:做原型、设计Demo、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、设计探索、做个HTML页面、做个可视化、app原型、iOS原型、移动应用mockup、导出MP4、导出GIF、60fps视频、设计风格、设计方向、设计哲学、配色方案、视觉风格、推荐风格、选个风格、做个好看的、评审、好不好看、review this design。**主干能力**:Junior Designer工作流(先给假设+reasoning+placeholder再迭代)、反AI slop清单、React+Babel最佳实践、Tweaks变体切换、Speaker Notes演示、Starter Components(幻灯片外壳/变体画布/动画引擎/设备边框)、App原型专属守则(默认从Wikimedia/Met/Unsplash取真图、每台iPhone包AppPhone状态管理器可交互、交付前跑Playwright点击测试)、Playwright验证、HTML动画→MP4/GIF视频导出(25fps基础 + 60fps插帧 + palette优化GIF + 6首场景化BGM + 自动fade)。**需求模糊时的Fallback**:设计方向顾问模式——从5流派×20种设计哲学(Pentagram信息建筑/Field.io运动诗学/Kenya Hara东方极简/Sagmeister实验先锋等)推荐3个差异化方向,展示24个预制showcase(8场景×3风格),并行生成3个视觉Demo让用户选。**交付后可选**:专家级5维度评审(哲学一致性/视觉层级/细节执行/功能性/创新性各打10分+修复清单)。
-
hoshyo Bundle Echo Quill AlchemistTrain a model on a novel, then continue writing in that novel's world — with memory of characters, places, and recent events. Load this skill whenever the user asks to train/fine-tune/learn the style of a novel or .txt, mentions Echo-Quill / Alchemist / 炼金 / 双塔, asks to open the training dashboard, asks how the system works, asks to stop or restart the training services, asks to write/continue text (with or without memory), asks to train an additional chapter or continuation they wrote, or asks to roll back to the original-novel state. The skill manages a local FastAPI backend + Vite/React dashboard, dependency installation, .env scaffolding, training, memory-mode continuation, pure-style continuation, and rollback — the user supplies a novel path or a passage, the skill handles everything underneath.
-
hsuan1012 Bundle Data Vis Coding V2建立「互動式資料視覺化應用」的完整工作流程 skill。從一份資料(CSV/JSON/GeoJSON)與需求出發, 走完 規格釐清 → 資料處理 → 圖表選型 → 元件實作 → 多層次驗證,產出「可運作、能互動、數值正確、 風格一致」的 React + Tailwind + Chart.js/D3 前端。核心是「內容與樣式分離」兩階段設計,並以實際 執行 + 數值校驗取代臆測,避免資料錯置與視覺幻覺。 Use whenever the user wants to build or scaffold an interactive data-visualization app / dashboard / chart / choropleth or geographic map / scatter or bubble plot / treemap / sunburst / sankey / heatmap — any runnable, data-driven interactive frontend. Trigger even when they just hand over a dataset and a goal without naming a chart type (e.g.「把這份資料做成可以互動的視覺化」「做個 dashboard」 「build a viz app」). Do NOT use for: adjusting or restyling an EXISTING chart (colors, labels) → the dataviz skill; a single static chart image (one matplotlib PNG); pure data cleaning/analysis whose output is numbers or insights, not an app; explaining or teaching viz concepts; or debugging an existing app / learning a framework.
-
htlin222 Bundle Ask Oe With EgoAsks a medical question on OpenEvidence via ego-browser (or appends a follow-up to a thread), makes it public, then mints a scalable multi-turn HTML plus BibTeX/CSL-JSON/AMA bibliography with references verified through the Crossref API. Split into an ego-only capture step and a fully standalone transform step. Use when the user wants to ask OpenEvidence, add a follow-up, get a shareable link, an HTML export, and/or citations (.bib / CSL / AMA).
-
htlin222 Bundle Google FlightSearch Google Flights for prices via a single deterministic HTTP GET request — no browser, no GUI/CSS rendering, no screenshots. Use this before reaching for browser automation (kimi-webbridge, browser-harness) whenever the task is "what does this route cost", not "show me the page" or "book this seat".
-
huajian123 Bundle Angular DeveloperGenerates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
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 civil-service-exam-prep, code-vulnscan, interactive-docs. 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.