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.
-
serejaris Bundle Event Etf Study基于关键事件进行ETF研究。从概念或事件出发,识别相关股票,构建市值加权ETF指数,分析事件窗口期间的市值变化,并生成交互式HTML仪表盘。当用户询问概念股、概念ETF、事件驱动分析或事件研究时使用。触发条件:提及影响A股概念板块的热门话题、政策或事件;请求构建主题ETF或概念指数;分析特定事件前后的股票表现。
-
serejaris Bundle Guizang Ppt Skill生成横向翻页网页 PPT(单 HTML 文件),含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格:① "电子杂志 × 电子墨水"(衬线 + 流体背景 + 暖色) ② "瑞士国际主义"(无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮)。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT,或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。
-
serejaris Bundle HTML Mail Builder生成兼容 Gmail/Outlook/Apple Mail 的 HTML 邮件模板,采用 table 布局和 inline CSS 确保一致渲染,支持响应式设计。适用于欢迎邮件、促销邮件、密码重置、通知邮件和订单确认邮件等场景。当用户需要创建或设计营销邮件(EDM)、事务性邮件、Newsletter,或提及邮件模板、HTML 邮件、兼容性设计等关键词时触发。
-
serejaris Bundle HTML Email Builder生成兼容 Gmail/Outlook 等主流邮件客户端 HTML Newsletter,使用 table 布局和 inline CSS 确保渲染一致,支持单栏、双栏、Hero Banner、内容摘要等多种版式。当用户需要制作公司周报、产品公告、营销邮件、活动邀请函或内容摘要邮件,或提及 Newsletter、HTML 邮件、邮件模板、兼容 Outlook 等关键词时触发。
-
serejaris Bundle Video Compare Tool对比两个视频的压缩质量,计算画质指标(PSNR、SSIM),并生成包含逐帧视觉对比的交互式 HTML 报告。当用户需要评估压缩效果、比较视频画质,或提及“视频对比”、“压缩分析”、“压缩前后对比”等关键词时触发。
-
serejaris Bundle Gantt Chart Builder根据任务列表和依赖关系生成交互式HTML甘特图,支持关键路径分析(CPM),可视化项目时间线、依赖关系和可延迟的浮动时间。当用户提到甘特图、项目时间线、关键路径、任务排期、项目进度图、依赖关系可视化、工期计算或直接说“帮我排一下项目时间”、“生成一个项目进度图”、“分析一下哪些任务是关键路径”时触发。
-
serejaris Bundle Journalistic Portrait Cn创建复刻《南方人物周刊》视觉设计的中文杂志风格 HTML 网页。适用于特稿版面、带红色边框的封面页、配肖像照片的目录页,以及带编辑章节标题的双栏内页,复刻中文周刊的排版与配色。
-
tryboy869 Bundle Elixir Engineer Guidelines Cursorrules Prompt FileApply for elixir-engineer-guidelines-cursorrules-prompt-file. Act as an expert senior Elixir engineer. Stack: Elixir, Phoenix, Docker, PostgreSQL, Tailwind CSS, LeftHook, Sobelow, Credo, Ecto, ExUnit, Plug, Phoenix LiveView, Phoenix LiveDashboard, Gettext, Jason
-
tryboy869 Bundle Javascript Astro Tailwind CSS Cursorrules Prompt FApply for javascript-astro-tailwind-css-cursorrules-prompt-f. --- description: Rules for Astro component development including proper composition and props. globs: src/components/**/*.astro
-
tryboy869 Bundle Nextjs Material UI Tailwind CSS Cursorrules PromptApply for nextjs-material-ui-tailwind-css-cursorrules-prompt. Ce projet s'appel Portfolio2 Il est basé sur Next.Js, il a tailwindcss, materialui, shadcn/ui et aceternityui What is your project named? portfolio2
-
tryboy869 Bundle Nodejs Mongodb JWT Express React Cursorrules PrompApply for nodejs-mongodb-jwt-express-react-cursorrules-promp. --- description: Specifies the technologies to be used for backend development, including Node.js, Express.js, MongoDB, and Mongoose. globs: */backend/**/*.*
-
tryboy869 Bundle Sveltekit Restful API Tailwind CSS Cursorrules ProApply for sveltekit-restful-api-tailwind-css-cursorrules-pro. --- description: Defines the technology stack used in the Stojanovic-One project, including frontend, backend, database, UI styling, deployment, and authentication. This rule provides a clear understa
-
tryboy869 Bundle Typescript Nodejs Nextjs App Cursorrules Prompt FiApply for typescript-nodejs-nextjs-app-cursorrules-prompt-fi. You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind. Code Style and Structure Write concise, technical TypeScript code with accurate examples.
-
tryboy869 Bundle Typescript React Nextjs Cloudflare Cursorrules ProApply for typescript-react-nextjs-cloudflare-cursorrules-pro. You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Tailwind CSS and DrizzleORM. You are also excellent at Cloudflare developer tools like D1 serverless database
-
tryboy869 Bundle Typescript React Nextui Supabase Cursorrules PrompApply for typescript-react-nextui-supabase-cursorrules-promp. --- description: Specific rules for authentication flows, including login, signup, and logout actions on landing pages. globs: frontend/app/(landing-page)/**/*action.ts
-
tryboy869 Bundle Javascript Chrome Apis Cursorrules Prompt File CursorrulesApply for javascript-chrome-apis-cursorrules-prompt-file. --- description: Rules for the overall development process of Chrome extensions, including testing, debugging, and publishing. globs: **/*.{js,html,css,json}
-
tryboy869 Bundle React Native Expo Router Typescript Windows Cursorrules PromApply for react-native-expo-router-typescript-windows-cursorrules-prom. --- description: Provides specific version compatibility notes for NativeWind and Tailwind CSS to prevent common installation errors. globs: package.json
-
tryboy869 Bundle Cursor AI React Typescript Shadcn UI Cursorrules P CursorrulApply for cursor-ai-react-typescript-shadcn-ui-cursorrules-p. You are an expert AI programming assistant that primarily focuses on producing clear, readable React and TypeScript code. You always use the latest stable version of TypeScript, JavaScript, React, Nod
-
tryboy869 Bundle Nodejs Mongodb JWT Express React Cursorrules Promp CursorrulApply for nodejs-mongodb-jwt-express-react-cursorrules-promp. Tech Stack: Backend: Node.js with Express.js Database: MongoDB with Mongoose ODM
-
tryboy869 Bundle Typescript Nextjs Supabase Cursorrules Prompt File CursorrulApply for typescript-nextjs-supabase-cursorrules-prompt-file. --- description: Rules for integrating Vercel AI SDK into Next.js applications for building AI-powered features. globs: /app/**/*.(ts|tsx)
-
tryboy869 Bundle React Native Expo Router Typescript Windows Cursorrules 2Apply for react-native-expo-router-typescript-windows-cursorrules-prom. // React Native Expo .cursorrules // React Native Expo Best Practices const reactNativeExpoBestPractices = [
-
managedcode Bundle Astro DeveloperComprehensive guide for developing in the Astro monorepo. Covers architecture, debugging, testing, and critical constraints. Use when working on features, fixes, tests, or understanding the codebase structure.
-
zoolutions Skill Phlex Reactive DebuggingDebug phlex-reactive in a Rails app: a reactive component that doesn't update, a 400/403/404 from POST /reactive/actions, an AuthorizationNotVerified error, or an audit of which reactive actions authorize. Use when a reactive click does nothing, a Turbo Stream never arrives, or you need to inventory the reactive components/actions in the app.
-
longbridge Bundle Gpui KitHow to build desktop applications with GPUI Kit, the Rust framework published as the gpui-kit crate (GPUI plus gpui_kit::component, gpui_kit::base, gpui_kit::assets). Use when setting up a gpui-kit app, choosing or using a component (Button, Input, Select, Dialog, Sheet, Tabs, Sidebar, List, DataTable, Tree, Chart, etc.), handling component state, theming, or window overlays, and for GPUI mechanics: actions and keybindings, async tasks, contexts, custom elements, entities, events, focus, global state, layout and styling, ElementId, and tests including UI integration testing. Holds the normative Coding Guides: read them before any architecture, state-ownership, public API, naming, or testing decision. Pairs with the gpui-kit-design-guides skill for the Design Guides.
-
longbridge Bundle Gpui Kit Design GuidesThe normative Design Guides for GPUI Kit desktop applications. Read in full before designing or changing any screen, layout, spacing, visual hierarchy, color, density, component choice, interaction state, overlay, motion, data-heavy view, or interface copy in a GPUI Kit (gpui-kit / gpui-component) application, and before reviewing UI work for design quality. Also use when asked what the design rules are, or whether a UI decision follows them.
-
zju-real Bundle Code Review Assistant代码 Review 助手。分析 Git diff 或代码片段,输出结构化中文 Review 报告,覆盖 Bug、安全漏洞、性能问题、可读性、最佳实践、类型安全、错误处理、测试覆盖。支持严格程度配置(信息/优化/标准/严重)和多种主流语言(Python/JS/TS/Java/Go/Rust)。支持 GitHub/GitLab PR diff 获取,支持 Markdown/JSON/HTML 多种输出格式。使用场景:用户说"帮我 review 代码"、"检查这段代码"、"review 一下最近的改动"、"review 这个 PR"、"看看这个 diff 有没有问题"、"代码审查"、"code review"、"严格模式 review"、"快速 review"。
-
javimosch Skill Airbnb SearchSearch Airbnb listings with prices, ratings, and direct links. No user API key required (uses Airbnb's public frontend API key). Use when searching for Airbnb stays, vacation rentals, or accommodation pricing.
-
javimosch Skill 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.
-
javimosch Skill Cv BuilderCreate a free digital identity, professional resume and CV — from classic PDF and HTML layouts to 3D worlds and playable games. Permanent public URL with own slug. Free API for AI agents — basic use without API key, full features with Access-ID. Use when the user wants to build, create, or generate a resume, CV, or set up an online professional profile. ATS-ready.
-
tryboy869 Bundle Astro General[Applies to: src/**/*.*] General rules and principles for developing with Astro framework.
-
ulpi-io Skill Flutter AccessibilityConfigure your Flutter app to support assistive technologies like Screen Readers
-
ulpi-io Bundle Baoyu Markdown To HTMLConverts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, PlantUML, footnotes, alerts, infographics, and optional bottom citations for external links. Use when user asks for "markdown to html", "convert md to html", "md转html", "微信外链转底部引用", or needs styled HTML output from markdown.
-
ulpi-io Skill Accessibility ReviewAudit designs and code for WCAG 2.1 AA compliance. Trigger with "is this accessible", "accessibility check", "WCAG audit", "can screen readers use this", "color contrast", or when the user asks about making designs or code accessible to all users.
-
ulpi-io Skill Zustand State ManagementBest practices for Zustand state management in React and Next.js applications with TypeScript.
-
ulpi-io Skill Nuxtjs Vue TypescriptNuxtJS and Vue 3 development with TypeScript, Composition API, Shadcn Vue, and Tailwind CSS for modern web applications.
-
serejaris Bundle Astro Observation Report Cn用于撰写 LIGO、Virgo、KAGRA 探测到的致密双星合并事件(BNS、BBH、NSBH)引力波观测结果论文的 Skill。覆盖论文架构、首页版式、参数估计图、不确定度标记、可信区间图、统计约定、页眉等,复刻《Physical Review X》双栏期刊风格。
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 event-etf-study, guizang-ppt-skill, html-mail-builder. 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.