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.
-
majiayu000 Bundle UI UX Design 4Modern 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.
567 -
majiayu000 Bundle Architecture 4jhelm project architecture and module structure for a Java Helm implementation
567 -
majiayu000 Bundle Architecture 5Kubani architecture principles, patterns, and design decisions. Use this skill when making architectural decisions or understanding the system design.
567 -
ecnu-icalk Skill Skill 475根据用户需求生成包含前后端实现的网站组成文档,涵盖主页、功能版图、用户中心、优惠页、常见问题、使用指南等模块,并支持指定Vue和Spring Boot技术栈。
559 -
georgeqle Bundle Compile Central Alignment 2Generate a central alignment/index.html table of contents for all alignment pages in the current repo
1 -
georgeqle Skill Compile Central Alignment 3Generate a central alignment/index.html table of contents for all alignment pages in the current repo
1 -
georgeqle Skill Compile Central Alignment 4Generate a central alignment/index.html table of contents for all alignment pages in the current repo
1 -
georgeqle Skill Compile Central Alignment 5Generate a central alignment/index.html table of contents for all alignment pages in the current repo
1 -
georgeqle Skill Compile Central Alignment 6Generate a central alignment/index.html table of contents for all alignment pages in the current repo
1 -
ahang1598 Skill Skill 40完整无障碍审计(WCAG 2.1 AA/AAA)。对设计稿 / 已实现页面做系统性无障碍合规检查——覆盖 4 个 principles(Perceivable / Operable / Understandable / Robust)×13 guidelines×50+ success criteria,每条 finding 标注 WCAG 编号 + 严重度 + 修复成本 + 法规依据。默认 AA 合规目标,可切换 AAA(政府 / 医疗 / 公共服务场景)。 触发关键词:无障碍审计、WCAG、a11y、accessibility audit、/无障碍检查、合规检查、ADA / EAA / 残疾人保障法、对比度、屏幕阅读器、键盘可达、辅助技术。 排除(反向):基础无障碍体检(用 check.accessibility 4 项快查)、设计稿走查(用 /设计走查)、实现验收(用 /设计验收)、性能 / 兼容性测试(开发自测)。
9 -
ahang1598 Skill Skill 50用户旅程地图(User /用户旅程 Map)。基于 /问题框定.persona + /设计简报 等上游产出,按用户全生命周期阶段(Awareness → Consideration → Onboarding → Activation → Engagement → Retention → Advocacy)输出一张 HTML /用户旅程 Map 图——含每 stage 的 user goal / touchpoints / emotion curve / pain points / opportunities,可导出 PNG 作为设计师阶段性交付物。 触发关键词:用户旅程、/用户旅程 Map、用户体验地图、Customer /用户旅程、CX Map、用户全生命周期、touchpoint、情感曲线、痛点地图。 排除(反向):单一场景的用户故事(用 /用户故事)、人物锚点(用 frame.persona)、IA 骨架(用 /站点地图)、流程图(用 flow-web/mobile)、改版前体验走查(用 /启发评估)。
9 -
ahang1598 Bundle Skill 81动效设计原则与策略层。基于 Three Pillars(情感意图 / 视觉叙事 / 动效工艺)+ 四大 Motion Personality 档位(Playful / Premium / Corporate / Energetic)+ Duration & Easing 表 + Disney 12 原则 + 1/3 编舞规则,为项目定义一套可被工程实施直接消费的「动效规范」:Personality 锚点 + 签名缓动 + Duration palette(quick/standard/slow)+ 入场范式 + per-element specs(property / duration / easing / stagger / 迪斯尼原则)+ 编舞预算 + prefers-reduced-motion 降级。 触发关键词:动效规划、动效规范、动效调性、motion design、motion personality、动效策略、入场动画、过渡动画、微交互、loading 状态、滚动触发、品牌动效、动效定调。 排除(反向):不写 React/Vue/CSS 代码(用 /动效开发)、不选 React Bits 组件(用 /动效开发)、不生成 Lottie JSON、不写 GLSL/WebGL shader、不覆盖非 Web 平台(Flutter / SwiftUI / Jetpack Compose——原则可参考但所有具体输出(CSS 语法 / cubic-bezier / prefers-reduced-motion)都是 Web 专属)。
9 -
ahang1598 Bundle Skill 85动效工程实施层。在 React 项目中按上下文嗅探选 React Bits OSS 组件并通过 `npx shadcn add` 安装;在非 React 项目(Vue / Svelte / Astro / vanilla JS)中直接写 CSS/JS 或推荐合适的动效库。三层设计哲学:上下文优先(读代码比追问便宜)/ 视觉动效描述(用日常语言描述动效像什么,不说技术参数)/ 嗅探主驱(追问是逃生通道,不是主路径)。所有产物强制场景合规自检(DASHBOARD 场景禁止无限循环、禁止持续背景动效、禁止超大位移);安装后按 Personality + scene 调 props(不裸用组件默认值)。 触发关键词:动效开发、动效实现、装动效组件、React Bits、reactbits、动效落地、给按钮加效果、给标题加动效、给背景加动效、hover 效果、点击效果、入场效果、滚动效果、loading 动画。 排除(反向):不定动效调性 / Personality(用 /动效规划 先定)、不生成 Lottie JSON、不写 GLSL/WebGL shader、不覆盖非 Web 平台(Flutter / SwiftUI / Compose)、不操作 React Bits Pro 付费组件(pro.reactbits.dev 是独立 skill 范畴)。
9 -
ahang1598 Bundle Skill 98将案件事实、法律关系、诉讼策略转化为交互式 HTML 可视化图表。 当用户需要可视化、关系图、流程图、时间线图、 股权结构图、资金流向图、证据链图时使用此技能。
9 -
ahang1598 Skill Skill 101从案件材料中客观抽取事实,生成一份「案件事实梳理」主文档(Markdown), 依次包含:法律关系分析图(链接 HTML + 文字说明)、法律事实时间轴图(链接 HTML)、 大事记(时间线表);两张图各为单文件 HTML,由主文档链接引用。 按时间线/大事记的构建逻辑:保密门禁、来源标注、去重合并、 按案件理论标记重要性、缺口提示与版本递增。 当用户需要事实梳理、时间线、大事记、案情梳理、法律关系分析、 案件经过整理、案情概要、法律关系图、时间轴时使用此技能。
9 -
ahang1598 Skill Skill 151「腾讯健康药箱 × 药企」数据洞察 skill(两个层面九大维度 · 三种模式)。承接用户给定的药品名称与时间范围,数据统一从药箱数据平台实时拉取(不再依赖离线 Excel 文件),按「整体市场规模和药箱用户分析(1.1~1.5)」+「药箱功能使用分析(2.1~2.4)」共 9 大维度提取数据,完成「数据整合 → 洞察分析 → 策略建议」三步,每维度含三部分——数据 + 数据洞察总结 + 策略建议(按执行主体企业 / 药箱分组)。**支持三种产出方式**:①完整报告——按黄金模板(assets/html_template.html)提取各维度数据产出 HTML 可视化报告;②单维度洞察——仅从模板摘取该章节生成该维度的 HTML 报告;③数据查询——从药箱数据平台实时拉取对应指标直接返回结果,不生成报告。样式统一:所有 HTML 报告必须沿用黄金模板的 CSS 设计系统 / 页面骨架 / JS 渲染引擎,只换数据不改样式,某部分数据缺失则直接不展示该部分。硬性规范:洞察每条 50~150 字、策略每条 60~200 字(药箱侧因需关联「功能→用户价值→药企价值→升级预期效果」可自然偏长)、结论 20~40 字、中性客观禁情感词、网络数据标注可追溯信源并按用户时间范围过滤、缺失数据该小节不展示后续序号顺延、药箱侧策略从《药箱产品功能明细表》选功能并按「功能→用户价值→药企价值→升级预期效果」四段展开。兜底规则:维度限 9 个、药品名须在药箱数据平台授权品牌列表、时间须整年整月、范围无数据拒绝,未给时间范围默认全部时间。This skill should be used when 用户给出一份药品 + 时间范围 + 数据分析要求,要求「生成完整的数据洞察分析报告」或「仅生成某一维度(如 2.1 人群画像)的洞察报告」或「查询某个指定数据(如扫码次数)」,或明确表示「按两个层面九大维度」「按 9 维度 / 九大维度」「复用 / 批量生成数据洞察报告」等。注意:若用户要求同时产出 Excel + HTML 双产出,请使用 pharma-insight-pipeline(本 skill 只产 HTML 与数据结果)。
9 -
ahang1598 Bundle Skill 156证据时间线生成技能。根据用户提供的证据材料,自动提取时间信息并按时间顺序整理,生成证据时间线 Markdown 文档和 HTML 思维导图文件。TRIGGER when: (1) 用户提及"时间线"、"时间轴"、"事件排序"、"证据时间线"、"案件时间线"等关键词,(2) 用户提供证据材料并要求按时间整理,(3) 用户需要可视化展示案件事件发展过程,(4) 用户准备诉讼材料需要梳理时间脉络。输出:证据时间线 Markdown 文档 + HTML 交互式思维导图(基于 ECharts)。IMPORTANT: 必须基于用户实际提供的材料内容提取时间信息,严禁编造或推测任何事件;时间必须准确,无法确认的时间需标注"时间不详"。NOT for: 证据质证、证据效力评估、法律分析。
9 -
ahang1598 Bundle PDF 3PDF文档处理工具包,支持文本提取(提取文字内容供阅读、分析与后续处理)、表格提取、创建PDF、合并/拆分文档、表单处理。适用于程序化处理、生成、分析PDF文档。
9 -
ahang1598 Bundle Skill 168解析多渠道交易记录(银行/微信/支付宝),按6种案件类型路由差异化分析框架,输出顶级律所级HTML可视化分析报告(金字塔结论+六要素发现+资金流向拓扑图)。触发:分析交易流水/资金流向/银行流水/转账记录。不触发:审计报告/税务分析/合同审查。
9 -
ahang1598 Skill AI Model Web 2Use this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities. Features text generation (generateText) and streaming (streamText) via @cloudbase/js-sdk. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). NOT for Node.js backend (use ai-model-nodejs), WeChat Mini Program (use ai-model-wechat), or image generation (Node SDK only).
9 -
ahang1598 Skill Web Development 2Web frontend project development rules. Use this skill when developing web frontend pages, deploying static hosting, and integrating CloudBase Web SDK.
9 -
ahang1598 Bundle Auth Web Cloudbase 2CloudBase 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.
9 -
ahang1598 Skill Relational Database Web Cloudbase 2[Deprecated] Use 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. New environments should use PostgreSQL with app.rdb() — see postgresql-development skill instead.
9 -
ahang1598 Bundle Xparse Parse 2Parse, read, search, navigate, summarize, and extract tables or structured evidence from PDFs, images, Office files, HTML, OFD, and other supported local documents or document URLs through xparse-cli. Use this Skill for both full-document conversion and targeted section/page/fact extraction instead of raw PDF readers or custom OCR scripts.
9 -
johnalbertini14-glitch Bundle Marp CLIConvert Markdown to presentations via CLI. Output HTML, PDF, PowerPoint (PPTX), and images (PNG/JPEG).
1 -
johnalbertini14-glitch Bundle NextjsBuild Next.js 15 apps with App Router, server components, caching, auth, and production patterns.
1 -
johnalbertini14-glitch Bundle SvelteAvoid common Svelte mistakes — reactivity triggers, store subscriptions, and SvelteKit SSR gotchas.
1 -
johnalbertini14-glitch Bundle React PerfReact and Next.js performance optimization patterns. Use when writing, reviewing, or optimizing React code for web apps, Remotion videos, or any React-based UI. Covers waterfall elimination, bundle optimization, re-render prevention, and server-side patterns.
1 -
johnalbertini14-glitch Bundle Outlit SdkIntegrate Outlit SDK for customer context for agents. Triggers when users need to add Outlit to any web framework (React, Next.js, Vue, Nuxt, Svelte, Angular, Astro), server runtime (Node.js, Express, Fastify), desktop app (Tauri, Electron), or need help with Outlit event tracking, user identity, consent management, analytics migration, activation events, billing lifecycle, or troubleshooting existing Outlit installations.
1 -
johnalbertini14-glitch Bundle UI Designer 2Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.
1 -
johnalbertini14-glitch Bundle BookstackBookStack Wiki & Documentation API integration. Manage your knowledge base programmatically: create, read, update, and delete books, chapters, pages, and shelves. Full-text search across all content. Use when you need to: (1) Create or edit wiki pages and documentation, (2) Organize content in books and chapters, (3) Search your knowledge base, (4) Automate documentation workflows, (5) Sync content between systems. Supports both HTML and Markdown content.
1 -
johnalbertini14-glitch Bundle Edge Tts UvxText-to-speech conversion using `uvx edge-tts` for generating audio from text. Use when: (1) User requests audio/voice output with the "tts" trigger or keyword. (2) Content needs to be spoken rather than read (multitasking, accessibility, driving, cooking). (3) User wants a specific voice, speed, pitch, or format for TTS output.
1 -
johnalbertini14-glitch Bundle ClawpodRead any website or search Google, even when sites block bots or are geo-restricted. Handles CAPTCHAs, JavaScript rendering, and anti-bot protection server-side via residential proxies. Returns HTML or structured JSON.
1 -
johnalbertini14-glitch Bundle Axe AccessibilityAccessibility testing and remediation using the axe MCP Server. Use when creating or modifying UI code (HTML, JSX, TSX, Vue, Svelte, CSS) to ensure accessibility compliance. Triggers on tasks involving web pages, components, forms, navigation, modals, tables, images, or any user-facing markup. Also use when explicitly asked to check accessibility or run an axe scan.
1 -
johnalbertini14-glitch Bundle CypressWrite reliable E2E and component tests with Cypress avoiding flaky selectors, race conditions, and CI failures.
1 -
johnalbertini14-glitch Bundle MolttokCreative expression platform for AI agents. Post ASCII art, SVG, HTML, p5.js, images, and poetry on MoltTok. Use this skill when you want to create, share, or browse generative artwork, or check in with the agent art community.
1
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 relational-database-web-cloudbase, 用户旅程, compile-central-alignment. 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.