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.
-
whyzsm Bundle Critical Code ReviewerRigorous adversarial code review for finding bugs, edge-case failures, security holes, lazy patterns, performance risks, accessibility gaps, and maintainability problems. Use when the user asks for a strict code review, critical review, critique, PR risk assessment, or asks what is wrong with code across Python, JavaScript/TypeScript, SQL, R, frontend, or similar code.
-
whyzsm Bundle Nurse Monistor Pathway护理监护计划生成技能 v3.2。用户输入诊断、症状或病历信息后, 自动检索中华护理学会团体标准网站(hltb.kxj.org.cn)获取相关护理操作PDF, 使用LLM对PDF进行结构化分析,最终输出完整的护理监护计划HTML报告。 v3.2增强: 1) 支持患者基本信息手工编辑及XLS表格上传更新; 2) 删除3.6护理巡查记录汇总(已合并到3.2每日巡查表中); 3) 调整3.4护理监护风险因素清单显示宽度自适应(改为min-width); 4) 巡查频率与项目中的异常处理支持用户编辑维护(提供智能默认值); 5) 检查并修复量表可能的错误代码(JS语法检查)。 v3.1增强: 1) 风险因素清单改为列表式显示(含风险名称、类型、阶段、监测值、级别、干预/处理措施、是否出现、发生日期); 2) 合并每日巡查表与3.6巡查记录表,增加生命体征(T/P/R/BP/SpO2)输入,补充三测表登记+自动体温折线图; 3) 量表支持多次记录(操作前/后/入院/出院对比),添加独立保存按钮,修复添加记录功能; 4) 修复JS代码语法错误(HTML标签污染、引号转义问题),确保网页可正常操作。 v3.0增强:宣教可单独打印PDF、操作记录推荐日期基于临床路径、巡查表多选+列宽可调+可打印护理记录单样式。 包含护理监护医嘱、护理巡查计划、护理服务计划(评估/宣教/操作/风险/会诊/随访)。
-
whyzsm Bundle Finance Report AnalyzerAnalyze financial data from uploaded Excel/PDF files and generate interactive reports with sparkline trend charts. Supports output to PDF, DOCX, Markdown, and HTML. Use when: (1) User uploads Excel/CSV/PDF with financial data, (2) User asks for financial analysis or company report, (3) User wants visual reports from financial statements, (4) User mentions stock ticker + financial analysis, (5) User shares a Feishu sheet/doc link with financial data.
-
whyzsm Bundle Media Video Editing Team视频剪辑智能体。用于视频剪辑、AI 辅助剪切、精彩片段提取、FFmpeg 剪辑/裁剪/合并/转码/压缩/提取音频、字幕生成与烧录、社媒短视频包装、视频脚本标题字幕文案,以及 Remotion + React 程序化视频模板制作。触发于“视频剪辑、短视频制作、素材处理、精彩片段、字幕生成、格式转换、压缩、音频提取、标题封面文案、Remotion 视频”等任务。
-
whyzsm Bundle Create Enterprise React AppScaffold and verify a production-ready enterprise React application shell. Use when creating a new React admin project, initializing a blank Vite workspace, or applying the React 19, Ant Design 6, React Router 7, TanStack Query, Zustand, Axios, Tailwind CSS 4, Storybook, Vitest, and Playwright architecture baseline.
-
whyzsm Bundle Harmony Quality Review TeamHarmonyOS/OpenHarmony 三线质量评审工作流。Use when a user asks to statically review a Harmony project, test functionality and business flows, audit UI and accessibility, inspect interaction and motion, run a regression review, or produce a P0/P1/P2 quality report.
-
whyzsm Bundle Tech Frontend Engineer Team前端开发工程师。用于精通现代 Web 技术和主流框架,构建响应式高性能 Web 应用。来源于 WorkBuddy 技术卡片,并转换为 Codex 可安装的专家入口格式。
-
whyzsm Bundle Competitive Product ResearchDual-track competitive research: experience benchmarking (8 UX dimensions) + strategic diagnostics (SWOT/Five Forces/PESTLE), source-traceable HTML report. Use when competitive analysis, benchmarking, differentiation strategy, or when the user says「竞品调研」「对标分析」「和 XX 比差在哪」.
-
ndpvt-web Skill Context Sensitive Pointer Analysis ArktsPerform context-sensitive pointer analysis for ArkTS/TypeScript code targeting OpenHarmony. Build precise call graphs, resolve indirect calls through closures and framework APIs, and detect vulnerability patterns. Use when the user asks to 'analyze ArkTS pointer flow', 'build a call graph for OpenHarmony app', 'resolve indirect calls in TypeScript', 'find data flow vulnerabilities in ArkTS', 'model ArkUI component state propagation', or 'reduce false positives in static analysis'.
-
whyzsm Bundle CloudbaseUse this skill when you develop, design, build, deploy, debug, migrate, or troubleshoot CloudBase (腾讯云开发, 云开发, TCB, 微信云开发) projects. Covers Web apps (React, Vue, Vite, Next, Nuxt, dashboards, 管理后台), 微信小程序, 小程序, uni-app, native/mobile (iOS, Android, Flutter, React Native) via HTTP API. Includes UI (页面, 界面, 登录页, 表单, form, dashboard, prototype, 原型), auth (登录, 注册, OAuth, 微信登录, publishable key), databases (NoSQL 文档数据库, MySQL, PostgreSQL/CloudBase PG, app.rdb(), queryPgDatabase/managePgDatabase, CRUD, security rules), 云函数 (serverless, scf_bootstrap, HTTP Functions), CloudRun (云托管, Dockerfile), 云存储 (file upload, hosting, 静态托管). Built-in AI (内置大模型, streaming, 流式输出, image generation, 图片生成, generateText, streamText, createModel, generateImage, TokenHub, Hunyuan, hunyuan-exp, DeepSeek, GLM, Token Credits 资源包, 小程序成长计划), 第三方大模型, 大模型接入, 大模型调用, LLM API, chatbot, AI 助手, AI agent, 智能体, AG-UI, LangGraph, LangChain. Ops (巡检, 诊断, health check, 日志, troubleshooting). Spec workflow (需求文档, 技术方案, requirements, tasks.md).
-
whyzsm Bundle Debug ProUse when debugging software issues, reproducing bugs, isolating root causes, using language-specific debuggers, inspecting network/process/system state, or running git bisect. Provides a seven-step debugging protocol and practical commands for JavaScript, Python, Swift, CSS, network, and Git investigations.
-
whyzsm Bundle WireframeCreate wireframes and user flows. Use when sketching page layouts in ASCII/SVG, mapping flows, or exporting to HTML.
-
whyzsm Bundle AI Model WebUse this skill when a browser/Web app (React, Vue, Angular, Next, Nuxt, static sites, SPAs, dashboards, AI chat UI) needs AI models via @cloudbase/js-sdk. Default routing for page/页面/Web/前端/frontend/网页/H5 AI — call directly from browser, do NOT propose a Node.js proxy. Covers generateText and streamText. Models via ai.createModel with groups cloudbase, hunyuan-exp, or custom-*. Model IDs (deepseek-v4-flash, deepseek-v3.2, hunyuan-2.0-instruct-20251111, glm-5, kimi-k2.6) go in the model field. MUST run two-step preflight before code — see body. Keywords: 页面, Web, 前端, React, Vue, Next, Nuxt, SPA, AI chat UI, generateText, streamText, createModel, hunyuan-exp, Token Credits, TokenHub, Hunyuan, DeepSeek, GLM, Kimi, MiniMax. NOT for Node.js backend (use ai-model-nodejs), Mini Program (use ai-model-wechat), or image generation (Node SDK only).
-
whyzsm Bundle Tencent Docs腾讯文档(docs.qq.com)-在线云文档平台,是创建、编辑、管理文档的首选 skill。涉及"新建/创建/编辑/读取/查看/搜索文档"、"保存文件"、"云文档"、"腾讯文档"、"docs.qq.com"等操作,请优先使用本 skill。支持能力:(1) 创建各类在线文档(文档/Word/Excel/幻灯片/思维导图/流程图/智能表格/收集表)(2) 管理知识库空间(创建空间、查询空间列表)(3) 管理空间节点、文件夹结构 (4) 读取/搜索文档内容 (5) 编辑操作智能表 (6) 编辑操作在线文档 (7) 文件管理(重命名、移动、删除、复制、导入导出)(8) 网页剪藏、本地文件/html/文档上云。
-
whyzsm Bundle UI UX DesignModern UI/UX design principles, patterns, and best practices for web and mobile applications. Use when building user interfaces, designing layouts, choosing color palettes, implementing responsive design, ensuring accessibility (WCAG), or creating beautiful modern applications. Includes 2026 design trends, Tailwind CSS patterns, Shadcn/ui integration, micro-interactions, and mobile-first responsive design.
-
whyzsm Bundle Accessibility无障碍与可访问性(Accessibility / a11y)
-
whyzsm Bundle Harness AcceptAcceptance Demo HTML for ship/wait/reject decision — reads stored acceptance_criteria. Triggers: 受け入れ判断, ship/wait/reject, 検収レビュー, acceptance demo. Skip for: implementation, review, release.
-
whyzsm Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
whyzsm Bundle Pipl Compliance中国个人信息保护法(PIPL)合规检查、风险评估和文档生成工具。 为企业提供全面的PIPL合规解决方案。 Use when: 需要进行PIPL合规自查、个人信息处理风险评估、 合规文档生成、企业合规管理、数据处理影响评估、跨境传输合规检查。 🎉 v1.1.9 重要更新: - 🔧 全新统一化CLI接口,与GDPR、CCPA工具体验一致 - 📊 支持JSON/Markdown/HTML/CSV多格式报告输出 - 🚀 跨法域检查:可与GDPR、CCPA配合使用 - 🧹 精简核心文件,移除冗余演示脚本 触发关键词:PIPL、个人信息保护法、合规检查、风险评估、 隐私合规、数据保护、跨境传输、影响评估 适用范围:中华人民共和国个人信息保护法(PIPL) 运行模式:纯本地,无网络请求 ❎ 外部依赖:Python标准库 + pandas(可选)
-
whyzsm Bundle Web DevelopmentUse when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.
-
whyzsm Bundle Generate UI CodeGenerate UI Code-style HarmonyOS ArkUI page and component generator. Use when creating or modifying HarmonyOS UI from requirements, screenshots, sketches, descriptions, product flows, or design specs; when adding ArkTS .ets pages/components, resources, routing, tabs, lists, forms, cards, preview pages, or page-generation workflows; or when the user mentions Generate UI Code, page_generate, harmonyPage, Harmony Page, 生成页面, 生成UI代码, ArkUI page generation, or CodeGenie page generation.
-
whyzsm Bundle Harness ProgressProgress Tracker HTML showing cc:WIP/cc:TODO/cc:完了 counts + drift alerts from Plans.md. Triggers: progress tracker, 進捗確認, 進捗ボード, dashboard. Skip for: implementation, review, release.
-
whyzsm Bundle Auth Web CloudbaseCloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked. Provides concise and practical Web authentication solutions with multiple login methods and complete user management.
-
whyzsm Bundle Harness Plan BriefPlan Brief HTML for pre-implementation preview (searches harness-mem for past decisions/patterns). Triggers: plan brief, planning preview, 計画概要, 計画レビュー. Skip for: implementation, review, release.
-
whyzsm Bundle Hr Ppt Creation Team从PPT大纲与演示结构规划生成、PowerPoint文件全功能创建编辑(布局/模板/图表/备注)、麦肯锡风格专业顾问级演示文稿设计,到参考模板视觉风格提取与幻灯片重建、乔布斯风极简科技感HTML演示稿一键生成、python-pptx多布局多图文混排科技风PPT制作的完整PPT制作工作流。覆盖大纲规划、风格设计、文件生成、多格式输出全链路。
-
whyzsm Bundle Report Generator Pro一句话完成日/周/月/季/年报全流程:上传文件或口述工作内容 → AI 抽取整理 → 生成结构化报告 → 导出 Word/Excel/PPT/PDF → HTML 美化邮件发送(内置 15+ 主流邮箱预设,自动识别 SMTP 配置, 支持授权码/应用密码引导)→ Markdown 归档。适用场景:个人日报周报、团队工作汇报、管理层月报季报年报、 项目进度报告。触发词:日报、周报、月报、季报、年报、工作报告、生成报告、发送报告、汇报、report、 工作总结、进度报告、帮我写报告、把报告发给领导。
-
whyzsm Bundle Tech Modern Web Developer Team现代Web开发专家。用于基于 React + TypeScript + Vite + Tailwind CSS + shadcn/ui 技术栈构建 Web 应用。来源于 WorkBuddy 技术卡片,并转换为 Codex 可安装的专家入口格式。
-
whyzsm Bundle Relational Database Web CloudbaseUse when building frontend Web apps that talk to CloudBase Relational Database via @cloudbase/js-sdk – provides the canonical init pattern so you can then use Supabase-style queries from the browser.
-
whyzsm Bundle Project Accessibility Auditor Team无障碍审计师。用于按 WCAG 标准审计界面可访问性,确保每个用户都能使用产品。来源于 WorkBuddy 项目质量卡片,并转换为 Codex 可安装的专家入口格式。
-
whyzsm Bundle Tech Frontend Architecture Analyst Team前端架构分析专家。用于深度分析前端架构、技术栈、组件设计与构建配置,输出评级和优化建议。来源于 WorkBuddy 技术卡片,并转换为 Codex 可安装的专家入口格式。
-
wenjunduan Bundle PlaywrightPlaywright browser/E2E testing workflow for runtime verification. Use when Codex needs to add, run, debug, or document frontend/browser tests, smoke-test a dev server, verify UI flows during athena-runtime-verify, capture traces/screenshots, or turn manual browser checks into repeatable tests.
-
wenjunduan Bundle Unit Test GenUse when generated or changed frontend/backend code needs focused unit tests, component tests, or service tests plus a debug loop. Reads the Convention Pack for test framework, fixtures, coverage targets, and commands, runs the declared tests, repairs real failures, and emits a test report for PACE runtime-verify and delivery reporting.
-
wenjunduan Bundle Scaffold Page GenUse when the user wants to generate a frontend business page, route, API client, view model, mock data, or local demo inside an existing frontend scaffold. Reads the target frontend Convention Pack and runtime-env declaration, follows its routing/component/data-access conventions, runs the declared validation and demo commands, and records evidence for PACE runtime-verify. It does not invent framework rules or read live business data.
-
wenjunduan Skill Scaffold Module GenUse when the user wants to generate a new business module, page, or CRUD feature in an existing enterprise scaffold (backend or frontend) from a requirement description. Reads the target scaffold's Convention Pack (conventions + templates + validate command), generates code that matches the scaffold's layering/naming/permission conventions, then closes the loop by running the scaffold's compile/build command and self-repairing on failure. This is a dev-time codegen skill — it writes source files, it does NOT read runtime data (use project-data-reader for that).
-
tomevault-io Bundle Django FrontendApply Django frontend conventions — HTMX partial responses, Alpine.js state, Bulma components, HTMX modal/formset JS contracts, safe query-string generation, dynamic hx-* attribute handling, and Cotton component primitives — pairing with django backend patterns. Includes hard hazard rules every template edit must respect — multi-line `{# …
-
lgrappag Skill Testing Integration Test FrameworkBuild framework for multi-component integration testing
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 project-accessibility-auditor-team, critical-code-reviewer, nurse-monistor-pathway. 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.