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.
-
xiaofenggan01 Bundle Disk CleanermacOS / Windows 磁盘清理专家(自动识别系统)。借鉴 Mole、CCleaner、Dism++ 的安全检测机制,结合 AI 语义分析,多维度扫描磁盘占用,智能识别垃圾文件, 生成交互式 HTML 报告 + 本地安全服务器支持一键清理(移废纸篓/直接删除)。 扫描全程只读。务必在以下场景使用: 用户说"磁盘满了""空间不够""清理电脑""清理缓存""释放空间""Mac/电脑 占用太多"、 "没内存了""storage full""clean my mac""free up space""disk cleanup""磁盘清理"; 或用户抱怨电脑没空间、想知道什么东西吃硬盘、想要清理建议时。 注意:若用户明确指运行内存/RAM(如"哪个进程吃内存"),那是 RAM 不是存储, 不属于本 skill。
-
xiaofuqing13 Bundle Echarts Bigscreen一句话生成可直接交付的数据可视化大屏(单文件 HTML + ECharts)。触发词:大屏、数据大屏、可视化大屏、监控大屏、驾驶舱、数据看板、一张图、big screen、data dashboard、cockpit。适用政务、交通、工业、公安、校园、电力、商业监控等场景。深色科技风,1920×1080 等比自适应,国内 CDN,支持内网离线部署。
-
xiaonan0527 Bundle ArchifyCreate professional architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as standalone HTML files with SVG graphics, a built-in dark/light theme toggle, and one-click export to PNG / JPEG / WebP / SVG. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, technical workflows, approval flows, runbooks, CI/CD flows, process diagrams, API call sequences, request lifecycles, interaction diagrams, data pipelines, analytics flows, ETL/ELT maps, PII boundaries, governance/data lineage diagrams, state machines, lifecycle diagrams, status transitions, or terminal/retry paths.
-
xiaopu-ai Bundle Web Clone Prompt网页复刻提示词生成器。输入一张/多张网页截图或一个网页 URL,反推出一份「确定性复刻 prompt」——用于授权页面、用户自有页面、内部研究或本地视觉回归。方法论抽离自 motionsites.ai 的成熟复刻提示词:精确到每个 hex、每条 Tailwind class、每个动画参数、每段文案、每个字体加载地址、每个素材生成简报或真实资源地址。当用户明确说"复刻这个网页/页面""把这个截图做成网页""仿这个落地页""1:1 还原这个网站""根据这个 URL 生成复刻提示词""clone this site / landing page""给我这个页面的复刻 prompt"时触发。也适用于用户只丢一张网页截图说"照着做一个"且语义是复刻。产出是一份可直接粘贴的 prompt;第一步不直接出代码,必须先问用户是否继续本地生成网站。不用于:原创设计、参考某站做一个新页面、品牌/文案/素材独立的新落地页(这些用 web-design-pro)、后端逻辑、非网页复刻任务。
635 -
xiaotianfotos Bundle Hyperframes Render OptimizationDiagnose, benchmark, design, build, and optimize deterministic HyperFrames rendering, especially 4K/60 fps projects with HTML/CSS motion graphics, mixed media, transparent overlays, CanvasDrawElement/HTML in Canvas, WebCodecs, custom Electron, and direct MOV output. Use when a render is slow, loses animation or overlays, falls back to screenshots, underuses CPU/GPU, mishandles media PTS, transparency, color, audio, memory, or final-file integrity; when classifying new media/CSS risks; when reproducing the Electron build/runtime environment; when choosing between exact WebCodecs, canonical media caches, faithful Chromium screenshots, or split plate/overlay paths; or when comparing render performance and quality across machines.
-
xiaou61 Bundle Code Nest Project SpecCode-Nest 多模块全栈项目协作规范与落点导航。Use when modifying this repository for feature development, bug fixing, refactor, API change, SQL migration, or frontend-backend联调 so changes land in the correct module with consistent conventions.
-
xllily Bundle Front Not EndUse when a product or frontend request creates or changes APIs, server-side data, authentication, permissions, persistence, background jobs, integrations, deployment, or other production backend behavior.
-
xnydl Bundle Markitdown把任何"非纯文本"文件转成 Markdown 喂给 AI 的统一预处理 Skill(微软 MarkItDown CLI 封装)。当用户丢来 / 引用一个文件让你读、总结、提取、翻译、问答、对比时使用——尤其是 .docx / .xlsx / .pptx / .xls(Office 二进制)、.pdf、.epub、.html、.csv / .json / .xml、.zip、.msg(Outlook)、音频(.mp3 / .wav / .m4a 转写),甚至 YouTube 链接。触发词:"读一下这个文件 / pdf / word / excel / ppt"、"把这个文档转成 markdown"、"这个文件讲了啥"、"提取 / 总结 / 翻译这个文档"、"处理一下这个附件"、"convert this file"、"read this docx / xlsx"。**用户长期约定:以后任何丢给 AI 的文件都先用 MarkItDown 处理一下**——见到文件优先想到本 Skill。例外:纯文本 / 代码直接 Read 即可;图片和扫描版 PDF 用原生视觉 Read 更好(MarkItDown 抽不出图里的字)。不要 under-trigger。
-
xonack Skill Wp AccessibilityWordPress child theme accessibility skill implementing WCAG 2.1 AA compliance patterns, screen reader support, keyboard navigation, focus management, and automated testing for WordPress themes, blocks, and plugin forms.
-
xoverlap Skill Sileo React ToastsProvide implementation guidance for Sileo (npm package "sileo") toast notifications in React apps. Use when adding the Toaster viewport, firing global toasts via sileo.success/error/warning/info/show/action, handling async flows with sileo.promise, dismissing/clearing toasts, configuring positions/offset, theming with light/dark/system modes, and customizing styling via fill, styles overrides, autopilot, roundness, CSS variables, and data-attribute selectors. Also use this skill for swipe-to-dismiss behavior, custom icons, JSX descriptions, reduced-motion support, TypeScript type exports, and understanding Sileo's internal SVG gooey morphing architecture. Make sure to use this skill whenever the user mentions sileo, toast notifications in React, gooey toasts, physics-based notifications, or wants to add any kind of toast/notification system using sileo, even if they don't explicitly name the package.
-
xuxinmaxen Bundle HTML MarkDrop coral-gradient pins on any HTML page, write feedback in an inline glass note popup, copy out as Markdown / Plain / JSON — or a For-AI format (unique CSS selector + HTML snapshot per pin) built to paste into Claude Code for one-pass fixes. Pins anchor to their elements and persist in localStorage. Glass-morphism aesthetic, keyboard-friendly, self-contained single file.
-
yangcodingmaster Bundle Journal Archaeology日记自我考古 skill。把多年日记语料(备忘录/Apple Journal/Day One/Notion/手写转录等导出)变成分层知识库和单文件交互式年鉴网站:摄取核验 → 通读建知识层 → 词典量化分析 → 五问综合(我怎么变的/我关注什么/什么改变了我/我的底色是什么/谁在我生命里)→ 滚动博物馆式 HTML 展示。触发词:分析我的日记、日记考古、自我考古、思维年鉴、journal analysis、diary archaeology、把日记给 AI、用日记了解我、日记做成网站、日记年鉴。即使用户只说"我有几年的日记想让你分析"或"把我的日记做成一个回顾",也应触发。全程本地处理;这是自我反思工具,不是心理诊断。
-
yanliudesign Bundle Bq Skill行为面试 skill。帮求职者挖掘真实经历、用 STAR/CAR 结构化、映射能力标签、构建可复用的中英双语故事库(Story Bank);并能接入 JD + 简历,针对具体岗位生成 Top 20 BQ 选题 + 基于真实经历的 STAR 准备模板(HTML 报告)。不是背答案,而是建立可复用的职业叙事体系,让任何行为面试题都能自然作答。关键词:behavioral question, BQ, 行为面试, STAR, 故事库, Amazon LP, 职业故事, tell me about a time, 面试准备, JD 面试题预测, top 20 题。
-
yanliudesign Bundle Boss View站在 CEO、CFO、CMO、COO、CPO、CTO、VP Design、VP Product 或直系老板视角,将零散工作记录生成结构化、突出业务价值、可导出 PDF/Markdown 的 Executive Update HTML 报告。适用于周报、工作汇报、Manager Sync、1:1。固定流程:接收输入→选择汇报对象→调用角色知识库→生成完整 8 章 HTML→补充证据。硬约束:绝不编造数据与结果,从"活动"转向"结果"。
-
yanliudesign Bundle Design StyleRecommend and apply design styles from a curated library of 67 visual aesthetics. Use when the user wants to choose a design style for their project, get style recommendations, or apply a style's CSS/colors/fonts to their code.
-
yanliudesign Bundle Job Description SkillJob Description 解码器 + Offer 策略系统。把任何 JD 翻译成「这家公司到底在招什么人 / 我的匹配度 / Gap 在哪 / 为什么投/不投 / 面试会问什么 / 下一步怎么走」。只有 3 步:贴 JD → 给简历 → 自动生成并打开一份 HTML Offer Strategy Report。是整个求职链路的入口,向下衔接 Resume Skill 和 BQ Skill。关键词:job description, JD, 职位描述, 匹配度, ATS, resume tailor, 简历定制, 招聘经理, 投不投, should I apply, 面试预测, offer strategy。
-
yanliudesign Bundle Resume Skill简历生成与美化。两种入口:把已有简历(PDF/Word/文本)解析、诊断、套用模板美化;或者还没有简历时,通过 LinkedIn 导入或一问一答的对话帮你从零建出一份。输出单页打印优化的 HTML(浏览器里 Cmd+P 直接存成 PDF),提供 4 套模板:Classic/ATS 友好、Modern 侧栏、Elegant 衬线、Tech 紧凑。关键词:resume, CV, 简历, 美化简历, 做简历, 简历模板, resume template, LinkedIn 简历, 求职简历, ATS, 改简历, polish resume。
-
yansircc Bundle SmManage the local SM skill registry, Producer-owned skill artifacts, Agent grants, immutable projections, and the Svelte dashboard. Use when an agent needs to inspect, add, generate, update, publish, authorize, build, apply, verify, or troubleshoot skills governed by ~/.sm for Codex, Claude, or Pi, or when the user asks to open or show the skill-management page so they can inspect or operate it themselves.
-
yanyuliu01 Bundle Interactive ReportGenerate editorial-quality interactive HTML documents for analysis, research, and structured information. Use this skill whenever the user says "summarize", "analyze", "整理", "总结", "做一个分析", "帮我梳理", "生成报告", or provides raw content (meeting notes, data, articles, financials) to be organized visually. Covers SWOT/Porter frameworks, data insights, meeting minutes, competitive comparisons, equity research, paper reviews, and any scenario where interactive HTML beats plain text. Even "帮我分析一下X" should trigger this skill. Also callable as a downstream skill by other skills needing interactive HTML rendering.
-
yao-care Bundle Astro Github Pages用 Astro 建一個靜態網站並上線到 GitHub Pages,附兩道 CI 守門:設計規範守門(顏色只准在 token 檔、字級一律階梯且不小於 18px、禁 !important、禁外部 CDN)與中文去 AI 味守門(兩級判定,強 AI 指紋單一命中即擋,軟訊號跨三層才升級)。含 IndexNow 即時收錄、sitemap 提交、部署後逐網址驗 200。Use when the user asks to 用 Astro 開新網站、建 GitHub Pages 網站、或要為既有 Astro 專案加設計規範/文案品質的 CI 守門。
-
yashaiguy-dev Bundle BrowserControl a real Chromium browser — navigate pages, click buttons, fill forms, take screenshots, read page content via accessibility tree. Use when the user asks to open a browser, visit a website, interact with a web page, or scrape visible content.
-
syeduzaif Bundle Flutter Frontend DesignCreate distinctive, production-grade Flutter mobile & web UI with high design quality. Use this skill when the user asks to build Flutter screens, widgets, components, dashboards, or full apps. Generates creative, polished Dart/Flutter code that avoids generic AI aesthetics and follows Flutter/Material/Cupertino best practices.
-
syeduzaif Bundle Flutter Theme FactoryToolkit for styling Flutter apps with a theme. Apply pre-built or custom ThemeData configurations to any Flutter app — including full ColorScheme, TextTheme, component themes, and dark/light mode support. 12 pre-set themes available, or generate a custom theme on-the-fly.
-
syncfusion Bundle Agent OnboardingOnboard an AI coding agent to a Syncfusion project. Identifies the framework and product family, installs or selects the official component skills, finds current documentation, handles licensing safely, and verifies a working implementation. Use when starting, integrating, upgrading, migrating, evaluating, or troubleshooting Syncfusion UI components, document SDKs, viewers, or editors on any platform.
-
syncfusion Bundle Syncfusion Aspnetcore UI BuilderGenerates production-ready enterprise webpages powered by Syncfusion ASP.NET Core Components. Orchestrates a structured workflow that handles design thinking, component picking, code generation, and validation with built-in WCAG 2.1 AA accessibility and responsive design. Use when the user asks to create web components, build UI pages, design interfaces, or generate frontend code for ASP.NET Core Razor Pages applications.
-
syncfusion Bundle Syncfusion Maui UI BuilderGenerates production-ready .NET MAUI UI components and pages powered by Syncfusion MAUI Controls. Orchestrates 8-stage workflow that handles design thinking, component picking, code generation, and validation with built-in WCAG 2.1 AA accessibility, responsive design, and multi-platform support (iOS, Android, Windows, macOS). Use when the user asks to create MAUI components, build UI pages, design interfaces, or generate frontend code for .NET MAUI applications.
-
syncfusion Bundle Syncfusion React UI BuilderGenerates production-ready webpages powered by Syncfusion React Components. Orchestrates Orchestrates a structured workflow that handles design thinking, component picking, code generation, and validation with built-in WCAG 2.1 AA accessibility and responsive design. Use when the user asks to create web components, build UI pages, design interfaces, or generate frontend code for React applications.
-
syncfusion Bundle Syncfusion Winforms UI BuilderGenerates production-ready WinForms desktop applications powered by Syncfusion WinForms Controls. Orchestrates a structured workflow that handles design thinking, control picking, code generation, and validation with built-in accessibility standards and DPI-aware responsive design. Use when the user asks to create WinForms controls, build UI windows/forms, design Windows desktop interfaces, or generate code for WinForms applications.
-
syncfusion Bundle Syncfusion Wpf UI BuilderGenerates production-ready WPF desktop applications powered by Syncfusion WPF Controls. Orchestrates a structured workflow that handles design thinking, control picking, code generation, and validation with built-in UI Automation accessibility and DPI-aware responsive design. Use when the user asks to create WPF controls, build UI windows, design desktop interfaces, or generate code for WPF applications.
-
tagius Bundle Slides AnimejsBuild a PowerPoint-style, 16:9 full-screen, browser-served slide presentation animated with anime.js v4. Orchestrates content brainstorming (scientific-brainstorming), academic structuring (scientific-slides), UI/UX design (ui-ux-pro-max), static authoring (slides-grab), animation patterns (anime.js-best-practices + Context7), PPTX intake (pptx), and sparse comic relief (meme-factory). Outputs a self-contained bundle the user runs with `python3 run.py`. Trigger when the user asks to make an animated web slideshow, browser-served presentation, or convert a pptx to an interactive HTML deck with animations.
-
tallstackui Skill Tallstackui DevelopmentBuild interfaces with TallStackUI Blade components in a TALL Stack application - looking up a component's real props before writing markup, binding form components inside and outside Livewire, dispatching Toast, Dialog and Banner interactions, restyling through soft customization, and rendering skeleton placeholders. Use whenever the task touches a TallStackUI component tag, the tallstackui config, or TallStackUi::customize().
-
maximepzv Skill Apollo GRAPHQL Best PracticesBest practices for Apollo GraphQL development including Apollo Client (React hooks, caching, error handling) and Apollo Server (schema design, resolvers, context, plugins). Use when writing, reviewing, or refactoring GraphQL code with Apollo, setting up Apollo Client/Server, implementing queries/mutations, configuring cache policies, or handling GraphQL errors.
-
mblode Bundle Blode Icons ReactGuides work on the blode-icons-react package and docs in this monorepo. Covers install and import paths, Lucide-compatible aliases, DynamicIcon naming, repo conventions, and release workflow. Use when working with blode-icons-react, blode-icons, icon quick starts, docs examples, export changes, or maintaining the React icon package in this repo.
-
mblode Skill Style CaptureCapture computed CSS and HTML from any web page element, map it to Tailwind utilities, and return a structured prompt for recreating the UI. Use when the user wants to clone, replicate, or reference a live website's design. Triggers include "capture the styles from", "clone this component", "grab the CSS from", "replicate this UI", "copy the design of", or any task where the user describes a visual element on a website they want to recreate.
-
mcking-07 Bundle PostplanRead PostPlan URLs and publish safe static HTML plans, specs, mocks, and architecture notes. Use when the user provides a PostPlan URL, asks for a plan, wants a visual comparison, needs a status report, requests an architecture diagram, or the output is visual, comparative, or longer than ~100 lines. Avoid for short chat answers, code-only responses, non-HTML artifacts, or when the user explicitly declines PostPlan.
-
mdrbx Bundle Nerv UIBuild original, accessible React command-center interfaces with the published @mdrbx/nerv-ui component library. Use for dashboards, monitoring terminals, operational tools, authentication screens, or sharp industrial HUD-style UI in React, Vite, or Next.js.
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 disk-cleaner, echarts-bigscreen, archify. 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.