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.
-
henriquescastilho Skill Cct Web Design GuidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
-
122245951-lab Bundle Procurement Contract Review采购合同签约前风险审核助手。上传一份采购合同(Word/PDF/TXT),按「可插拔规则包」逐条审查, 产出一份带【章节定位 + 原文摘录 + 命中规则 + 修改建议 + 接受/拒绝复选框】的单页交互式 HTML 审核报告。 核心方法:规则与引擎解耦(规则是文本数据、热更新、可版本化、自带回归测试),双轨审核—— 字符级硬规则走代码(失效法规/违禁表述/必备要素,零漏报),语义规则走 LLM(权责对等/归属/约定有效性), 所有命中必须基于合同原文、可溯源、防幻觉,未命中规则也透明列明。 触发词:审核合同、合同审查、采购合同、看看这份合同有什么风险、合同校对、条款风险、合规审查、 contract review、审一下合同、合同体检。同一引擎更换规则包即可复用于劳动/租赁/保密/SaaS/营销合规等场景。
-
21st-dev Bundle 21st Registry 2Publish a React component to the user's team library on 21st.dev so teammates can install it with a single command, or install an existing one. Triggers when the user says things like "publish/share/upload this to 21st", "залей в наш регистр", "опубликуй компонент", "share with team", "make this reusable", "install our Button", "use the team button".
-
9398-haha Bundle Douyin Benchmark拆解公开抖音账号,采集其公开作品互动数据、账号资料与合集数据,并产出带完整性状态的原始 JSON、九段式 Markdown 和浅色 HTML 对标报告。Use when the user says “拆对标”“拆抖音对标”“分析这个抖音号”“对标调研”,或提供抖音主页分享链接、sec_uid、抖音号、昵称并要求账号级竞品分析。优先处理主页分享链接。NOT for 自有账号后台数据、单条视频下载/转录、单作品播放量、发帖评论等写操作。
-
aahan0605 Bundle FableFull-potential development orchestrator that makes whatever agent is running work like a frontier model. It triages a task by difficulty and routes work to the right model tier (haiku for mechanical work, sonnet for standard features, the highest tier for architecture, debugging, and security), extracts maximum quality from subagents with tight briefs and adversarial verification, enforces distinctive non-generic frontend design (motion systems, theme toggles, micro-interactions), runs deployed-app-grade security audits (auth, data leakage, injection, headers, RLS, secrets), verifies frontend-backend integration end-to-end, and minimizes token spend throughout. Intended for substantial development work — building, redesigning, hardening, or auditing a real app, website, API, or full-stack feature. Primarily invoked explicitly as /fable; also appropriate when the user clearly asks to production-ready or security-audit a whole project. Not for one-line edits, quick questions, or tasks where the orchestration ov
-
achuan-2 Bundle Pandoc DOCX TemplateUse this skill when converting Markdown to Word DOCX or DOCX back to Markdown with Pandoc, especially when the output should use the bundled Chinese Word reference templates, heading numbering variants, list indentation variants, SCI paper templates, and Lua filters for HTML tags, image captions, font color, and inline code styles.
-
aisland-sjl Bundle Aisland Teach科学、低门槛地教授概念或技能,并通过练习、复述和反馈验证理解。用于任何“教我、解释给我、带我学习、帮我掌握、设计学习路线、检查我是否理解”等教学场景,也可在识别到用户需要系统学习时主动触发。默认在对话中教学;只有用户明确同意后才制作 HTML Course。
-
alan-youngzhe Bundle NbNoob2Builder AI Builder School——由 Agent 在主对话中带学的全选修课程,从电脑与 AI 基础、Git/GitHub、Builder 工作法,到做出并发布第一个可验收作品、测试与验证、前后端工程基础(HTML/CSS/JS、npm、Vite、TypeScript、Vue、React、组件化、TSX、路由、项目结构、API、鉴权与部署)、Agent 构建和 Agentic Engineering。适用于纯小白或已有项目的学习者提出“带我学 AI”“我想做第一个作品”“教我 Git/GitHub”“教我单元测试、集成测试、冒烟测试或 E2E”“教我前端/后端”“看不懂 Agent 生成的网页代码”“什么是 token/context/Agent/MCP/Skill”“教我构建 Agent”“从 vibe coding 进阶”“继续上次课程”等请求;支持按目标选课、动态插入共享知识、真实实操、本地学习存档和证据卡。
-
alpha-mintamir Bundle Chapa PaymentsIntegrate the Chapa payment gateway (Ethiopia) into any backend or frontend - hosted checkout, verify, webhooks with HMAC signature checks, direct charge (telebirr, M-Pesa, CBEBirr, ebirr), split payments, refunds, transfers, test cards and test numbers. Includes working Laravel, PHP, Node.js (Express, Next.js, NestJS), Python (Django, FastAPI), HTML checkout, Inline.js and Flutter examples. Use when the user mentions Chapa, chapa.co, api.chapa.co, CHASECK / CHAPUBK keys, tx_ref, Ethiopian payments, telebirr or birr checkout, or asks to add, debug, verify or secure a Chapa integration or an admin config for Chapa.
-
cheshiremew Bundle Visual Multimedia把已确认的内容真源或素材制作成可修改、可预览、可导出的技术图解、GIF、HTML 动画、Live Photo、产品功能宣传片、其它视频、音频或播客,并审查或写作标题、口播、字幕、节目结构和配套帖子。Use when the user asks to 选择载体、审查或制作媒体文案、诊断口播 AI 组织痕迹、维护口播私人库、制作可编辑网页视觉与多场景演示、导出技术图解/GIF/Live Photo、制作或对齐视频、剪辑实拍/访谈/录屏、从视频与事实转写制作字幕金句拼图、建立或使用无需 Live2D 的二次元口播角色、编辑音频或播客;不用于其它独立静态卡、社交卡、纯文字卡、轮播图或独立封面,也不用于 PPTX、研究或核查主题、从长材料筛选分享内容、独立纯文字内容、长文、拍摄规划、社媒运营或发布。
-
dnm03 Bundle UI ForgeBuild or improve visually distinctive, product-specific web interfaces, from brand pages to working apps and components. Use for frontend implementation, redesign, reference-led builds, or improving generic-looking UI. Preserve existing behavior and design systems. Review without editing when asked for an audit; skip backend-only and text-only work.
-
babandeepsingh Skill Tailwind React UIOpinionated assistant for installing and configuring Tailwind CSS in React projects, then revamping components using Tailwind utility classes and semantic design tokens. Use when working on React (CRA, Vite, Next.js, Remix, plain SPA) and you need guidance on Tailwind setup, dependency selection and installation order, configuration, semantic theme design, and common UI recipes (forms, data tables, navigation, modals, layout).
-
prisma-labs-dev Bundle React Best Practices 2React and frontend performance optimization guidelines. Use when writing, reviewing, or refactoring React code to improve rendering behavior, bundle cost, async concurrency, and browser performance. Treat useEffect as a last resort: do not use it for derived state, prop-to-state syncing, user-event logic, or data fetching that belongs in loaders, server functions, or shared caches.
-
tanishqkancharla Skill Glimpse Changes 3Create a visual explanation of the current session diff as a single HTML page and show it in a native Glimpse window. Use when the user wants a visual walkthrough of local code changes instead of a plain text diff.
-
leejpsd Bundle Typescript React Nextjs Patterns 2Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging, and code review. Use when the user works with TypeScript in React or Next.js: type errors, Props design, generics, API typing, SSR/CSR boundaries, hydration issues, form validation, state management, performance, or code review. Also use for "how should I type this?", "why does this type error happen?", or any architectural decision involving TypeScript in a frontend context.
18 -
solizardking Bundle Huashu Design 2花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选(指定风格/品牌也不豁免),选定后才执行。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。
0 -
davepoon Bundle Webapp TestingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
-
nvidia Bundle Nemo Retriever 3Use when the user wants to search, query, extract, transcribe, describe, quote, filter, or aggregate across documents — PDFs, scanned forms / images (`.jpg` `.png` `.tiff`), Office (`.docx` `.pptx`), text (`.html` `.txt`), audio (`.mp3` `.wav` `.m4a`), or video (`.mp4` `.mov`). Prefer this over native Read / Grep for multi-file or non-PDF corpora. Not for: editing files, web browsing, single-file plain-text lookups, fine-tuning.
2.2k -
bfyxzls Bundle Code ReviewReview Vue 3/TypeScript and Java 21/Spring Boot 4 diffs for style, quality, security, tests, and performance against this repo's conventions (KISS, service interfaces, cn.icounting.training.*). Use when the user runs /review, /code-review, asks for code review, or reviews a PR/MR/diff.
-
bitsky-tech Bundle Bridgic Browser 2Use for any task requiring a real browser: viewing web pages, accessing login-gated sites, operating web UIs, scraping social media (Xiaohongshu/Weibo/Twitter/X, etc.), reading JS-rendered or dynamic pages, bypassing bot detection, form filling, e2e checks, and general web automation. Prefer this over WebFetch whenever the page needs JS execution, authenticated session, interaction, or stealth. Invoke via terminal CLI (`bridgic-browser ...`) or Python SDK (`from bridgic.browser.session import Browser`, `from bridgic.browser.tools import BrowserToolSetBuilder`). Also covers accessibility snapshot refs, CLI-SDK mapping/migration, and generating SDK code from CLI action steps.
-
buidangminh23 Skill Design Spacing RhythmThe most complete spacing & alignment skill for AI-generated UI and written documents. Reads the layout, sets three dials (SPACING_STEP / DENSITY / ALIGNMENT_RIGOR), derives ONE scale, and lets proximity carry meaning — establishing a spacing scale, vertical rhythm, optical alignment, whitespace hierarchy, responsive/fluid density, accessibility floors, component recipes, document & long-form (Word / Docs / PDF / Markdown) spacing, and an anti-slop checklist. Every rule is CONTEXTUAL: read the situation, then pull only what fits. Not a blanket "add more padding" pass.
-
burkeholland Skill Postrboard 2Build specific, restrained product interfaces with Postrboard CSS. Native components first; honest content; no generic AI design.
-
caomaocao Bundle CuepointTurn a YouTube/Bilibili/local video into a self-contained video index document (video_index.json + frames/, the outline-transcript-frames mapping), then render it as a frontend-slides HTML deck and/or markdown notes with timestamp links back to the source. Requires ffmpeg + yt-dlp; subtitled videos need no API key. Frame curation and slides want an image-reading (multimodal) host; a text-only host still produces the text index + notes.
-
compose-miuix-ui Skill Create Component 2Create a new Compose Multiplatform UI component for the miuix library, including every required wiring point (library source, example app section + registration, docs interactive demo + registration, EN/zh_CN docs pages, component overview index, VitePress sidebar). Use whenever the user wants to add a new component, create a new composable, scaffold a component, or add a UI element to miuix — even if they only name the component ("add a Chip"). Triggers on "create component", "new component", "add a component", "scaffold component", "new composable", "新建组件", "添加组件", "新组件", "加个组件".
-
cslawyer1985 Bundle Contract Review Pro 2专业合同审核 Skill:7步工作流(含立场声明、框架审阅、类型路由)、5类通用门禁+16个专项门禁、终稿三件套+HTML可视化报告、8维度风险评分、修订5分类路由。完全自包含,零外部依赖。
-
cubicecho Bundle CubeuiHow to use the cubeui components (PageLayout, HeaderContentFooter, StickyHeaderContentFooter, CardLayout, DialogLayout, PageHeader, SplitLayout, SidebarLayout, Section, FormField, FieldRow, useAppForm and its bound fields, ActionButton, ConfirmButton, OptionSelect, MultiSelect, DatePicker, ColorPicker, PasswordInput) in a project that installs them from the cubeui shadcn registry. Read before building a page shell, a page title block, a card, a dialog, a two-pane screen, a section heading, a form, an icon-only button, or a destructive action with shadcn primitives — it says which component owns the shape and which props carry which node, so hand-written scaffolding is not re-derived per screen.
-
davidortinau Bundle Maui AI Debugging 2End-to-end workflow for building, deploying, inspecting, and debugging .NET MAUI and MAUI Blazor Hybrid apps as an AI agent. Use when: (1) Building or running a MAUI app on iOS simulator, Android emulator, or Mac Catalyst, (2) Deploying a MAUI app to a device/emulator/simulator, (3) Inspecting or interacting with a running MAUI app's UI (visual tree, element tapping, filling text, screenshots, property queries), (4) Debugging Blazor WebView content inside a MAUI app via CDP, (5) Managing iOS simulators or Android emulators (create, boot, list, install), (6) Setting up the MauiDevFlow agent and CLI in a MAUI project, (7) Completing a build-deploy-inspect-fix feedback loop for MAUI app development, (8) Handling iOS permission dialogs, system alerts, and app-level alerts via simctl privacy or accessibility tree detection. Covers: maui-devflow CLI, androidsdk.tool (android), appledev.tools (apple), adb, xcrun simctl, and dotnet build/run for all MAUI target platforms.
-
gehdoc Skill Svg To VideoConvert CSS-animated SVG files or SVG string content into high-quality MP4/WebM/MKV/MOV videos, lightweight animated GIFs, or aPNG images with optional alpha-channel background transparency.
-
hasan-laraib Bundle MirofyMap an existing repository into an architecture diagram where every edge cites the file, line and commit it came from, and every file that could not be read is named rather than skipped. Reads JavaScript, TypeScript, Python, Go, Java, Rust and Kotlin imports, package.json workspaces, Express and Next routes, and docker-compose. Also creates validated architecture, workflow, sequence, data-flow and lifecycle/state diagrams as standalone HTML, from plain-language requirements or pasted Mermaid flowchart, sequenceDiagram and stateDiagram input. Use when the user asks to map, diagram or understand an existing codebase, to see what a repository depends on, to find its module or import structure, to onboard onto unfamiliar code, to check whether a diagram still matches the code, or to visualize system architecture, infrastructure, cloud/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.
-
hermeticormus Bundle Vibe Proof 2Security-focused hardening for vibe-coded full-stack apps. Runs parallel audits across frontend, backend, and config layers, then fixes issues systematically by severity. Covers injection, PII exposure, missing headers, error leakage, dead code, and credential hygiene.
-
jackychen-12 Bundle Yuelao Aoye月老鳌烨风格的婚恋画像匹配报告。分轮采集条件(男看钱/女看脸两套算法),按鳌烨真实尺度打颜值分与梯队定位,输出上限/下限双画像与两条路子,最终生成浅色离线单文件 HTML 画像匹配报告。当用户提到「月老」「鳌烨」「婚恋画像」「帮我看看条件」「打个分」「颜值几分」「相亲定位」「择偶画像」「婚恋市场定位」「画像报告」「我能找什么样的」时使用。即使用户只说「月老模式」「用鳌烨的方式看看我」也应触发。
-
kevin031 Skill Frontend Plan按 OpenSpec 风格的 spec-driven 流程生成单文件前端开发计划(含意图、需求规格、技术设计、任务清单),供审阅后再编码。在用户要求制定前端计划、功能方案、UI 改造方案、组件设计、页面开发规划,或提及「先出计划」「审阅后再做」时使用。
-
kevinyoung-kw Bundle Vibe Resume SkillHTML Resume Builder
-
mertcikla Skill Create Diagram 2Create architecture diagrams from a local codebase or system description. Use when the user asks to diagram a repo, map system architecture, show component relationships, create drill-down views, or explain a system visually with tld.
-
oldyade Bundle Animated Sketch Diagram生成"黑墨手绘涂鸦"风格的动画架构图/流程图:米色纸面、针管笔墨线、极淡水洗色块、简笔涂鸦图标、序号章、连线上的流动圆点动画、图标微动效。产出单文件自包含动画 HTML(SVG+CSS),可一键导出无缝循环 GIF。当用户想画架构图、流程图、信息图、技术示意图、对比图、pipeline/workflow 可视化,或提到"手绘风""涂鸦风""动图""animated diagram""GIF 架构图"时使用;即使用户没明说要动画,做技术概念科普配图时也应优先考虑本 skill。
-
qingyuna Bundle Agent HTML为 AI Agent 提供基于 shadcn/ui 极简现代美学的单文件 HTML 组件化规范与母版体系。当用户要求“生成 HTML 页面/网页”、“前端可视化大盘/看板”、“面试/分析/测试报告”、“对比矩阵/方案比对”、“review 结果做成可视化页面”、“代码审查报告”、“不要输出 markdown 墙/不要文字墙”、“把分析结果做成可交互单文件网页”等场景时,务必使用本 Skill。零构建、零 npm、严禁引入外部 CDN(无断网白屏风险),纯原生 HTML/CSS/SVG,支持暗黑模式与双击秒开。
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 cct-web-design-guidelines, procurement-contract-review, 21st-registry. 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.