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.
-
aruljothysundaramoorthy Bundle Testing StrategistChooses the highest-value test level and reviews unit, integration, API, component, and E2E tests for boundaries, mocks, fixtures, flake, and important behavior. Use when the user mentions testing, Jest, Playwright, Cypress, unit tests, integration tests, e2e tests, or test coverage. Do not use for CI pipeline wiring or live production debugging.
-
aruljothysundaramoorthy Bundle Angular Enterprise ReviewerReviews, refactors, architects, and implements Angular application code as a senior Angular architect. Checks architecture, standalone components, signals, RxJS, change detection, lazy loading, DI, forms, API errors, accessibility, TypeScript typing, security, testability, and production readiness. Use when the user asks to review, refactor, architect, implement, generate, or fix Angular code, components, services, routes, modules, templates, or TypeScript in an Angular app.
-
mithril-studio Skill Performance OptimizationOptimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
-
plausibleventures Skill SoundSound and music with no audio files — synthesized clicks, chimes, thumps, ambience and a soundtrack. Use when adding sound effects, audio feedback, music, ambience or a soundscape to a game, when sound should react to what is happening, when audio is silent or only plays once, or when a burst of sounds clips into a click.
-
paulohfs Skill Frontend SecurityChecklist de segurança frontend e UI/UX. Use ao criar ou modificar componentes de interface, formulários, páginas web, aplicações SPA, CSS, HTML ou qualquer código frontend.
-
gaojuzhang Bundle Integrate Stripe SaasGuide Stripe Checkout + Webhooks + Customer Portal integration for SaaS on Cloudflare Workers/Pages or Next.js Edge. Use when adding Stripe payments, subscriptions, credit packs, Price IDs, webhook signing, billing portal, sk_test_/sk_live_ secrets, or when Test/Live vs Preview/Production env is confusing. Prefer this over ad-hoc Stripe SDK wiring on Workers.
-
hunkim Bundle Slide DesignRules for building presentation slides that people can actually read — applies Alexei Kapterev's "Death by PowerPoint" principles plus a working checklist. Use whenever making or revising slides, decks, presentations, pitch decks, or HTML slide decks, in any format (.pptx, HTML, PDF). Triggers on "슬라이드", "발표자료", "덱", "deck", "slides", "presentation", "pitch deck", or when a slide comes back as "too complex / 복잡해".
-
akashpriyadarshii Bundle Design GeniusUniversal design language engine and bespoke design-system generator for ANY medium in existence — physical architecture, industrial hardware, operating system GUI/TUI, wearables, editorial print, luxury packaging, spatial/AR, posters, canvas shaders, instruments, apps, dashboards, and digital products. Reads a local design library and fuses 2-3 structurally distinct systems to emit a bespoke DESIGN.md spec with real tokens, pigment formulations, and geometry. Directly implementable by downstream engineering pipelines (Tailwind CSS v4, W3C DTCG tokens, CSS variables, React, Compose). Three modes: NEW (fresh system), REVISE (cold audit/critique diff), REDESIGN (radical DNA rebuild).
-
claycui828 Bundle Asu Resume Skill基于用户真实经历生成“阿酥式”高密度中文技术履历或小红书展示简历:保留真实姓名、学校、公司、部门、项目与可核验指标,主动检索学校官方 Title,以彩色经历条、背景/指标/职责结构、英文技术名词、架构链路、Benchmark、模块级 Owner、0→1 和大 Scope 叙事增强表达,并输出自包含 HTML、A4 PDF 与发布图片。用户提到阿酥风格、ASU 式简历、专业名词堆叠、技术经历包装、小红书履历长图、学校 Title、Owner/0-1 或要求 HTML/PDF 时使用。不得凭空创造不存在的学历、公司、项目、角色、Offer、指标或成果;夸张必须落在可证明的机构标签、限定模块和真实技术链上。
-
claycui828 Bundle Asu Resume Audit Skill以证据为中心的简历真实性审计与报告生成技能。用户要求核验简历、打假履历、调查候选人经历、分析 GitHub/开源贡献、识别 contributor 到 maintainer/core author 的角色膨胀、核验中外合作办学或学校 title、检查业务指标、梳理公开争议,或者把调查结果制作成 HTML/PDF 时,应主动使用本技能。技能会把简历、截图、链接、帖子、代码仓库和官方记录拆成原子主张,区分事实、矛盾、指控和不可核验信息,并生成不含开盒信息、不把未经证实指控写成事实的自包含证据报告。
-
filmclusive Bundle Filmclusive Website BuilderDesign, audit, change, and transfer complete Filmclusive websites while preserving the native builder schema, responsive behavior, media, navigation, accessibility, localization, and publication safety. Use when a user asks to build or restyle a Filmclusive website, recreate one from a URL or screenshot, migrate pages and assets into an editable Filmclusive draft, review every page/style, or coordinate website changes through the Filmclusive MCP.
-
rodrigos-dev Skill Angular UI DeveloperUse quando o usuário pedir para criar interfaces Angular, implementar HTML semântico, SCSS responsivo, acessibilidade ou componentização de UI.
-
rodrigos-dev Skill Technical DocumentationUse quando o usuário pedir para criar documentação técnica do projeto Angular seguindo o padrão HTML estabelecido.
-
rodrigos-dev Skill Angular Master ComponentUse quando o usuário pedir para criar componentes Angular completos com HTML, SCSS e TS seguindo o padrão do projeto.
-
rodrigos-dev Skill Angular Component CreatorUse quando o usuário pedir para criar componentes Angular, refatorar componentes ou implementar novos componentes seguindo boas práticas.
-
rodrigos-dev Skill Angular UI ImplementationUse quando o usuário pedir para implementar interfaces Angular, criar templates HTML, implementar estilos SCSS ou garantir responsividade.
-
jayahuang Bundle 3d Travel Map生成某地区(省/市/景区)的可交互 3D 旅行导览地图单页 HTML:真实行政区边界的低多边形地形 + 景点微缩模型 + 点击查看看点/门票/游玩Tips + 主题筛选与经典线路巡游。当用户要求"做一份 XX 的 3D 地图/导览/沙盘"、"景点可视化"、"旅游攻略地图",或要求可点击交互、可移动、带介绍信息的地理可视化时使用。产出为可离线双击打开的单文件 HTML。
-
mjorgin Bundle Preflight DecksConcept-first HTML presentation director. Use when creating or upgrading pitch decks, conference talks, internal reports, or PPTX-to-web decks. Forces a hard concept gate (three real visual directions, no reskins), then builds on a fixed 1920x1080 single-file stage, runs a scored critique loop, and proves the result with dual-viewport screenshot verification.
-
mohansaiganesh Bundle Rn Architecture DiagramsGenerate architecture diagrams for a React Native / Expo / React project in TypeScript OR JavaScript (.ts/.tsx and .js/.jsx) — class diagrams (interfaces/classes/type contracts, via tplant; TS only), functional-component diagrams (each component with its props plus "renders" arrows, via a ts-morph extractor), AND a module dependency graph (what-imports-what, via dependency-cruiser). Component and dependency passes work on JS/JSX too; class diagrams are empty for plain JS. All rendered offline to SVG/PNG through a bundled plantuml.jar (no Graphviz). Use when the user wants class diagrams, component diagrams, a component tree, a dependency/module graph, UML, or an architecture view of a RN / Expo / React JS or TS project.
-
super-nius Bundle Delta Harmonica Tablature Generation Skill把歌曲简谱转成《三角洲行动》守夜人口琴的键盘琴谱并渲染成 PNG 图片(升调红底、降调绿底、歌词逐字对齐、长按/半长按框内标注);无中文字体的环境退回零依赖 HTML 网页。当用户上传或粘贴简谱、要求做三角洲口琴谱、琴谱对照表、口琴简化谱、把五线谱/简谱转成 ZXCVBNM 键位图时使用。
-
seym0n Skill Soc UIApplies separation-of-concerns rules for organizing frontend CSS and JavaScript across a multi-page website or web app - deciding what goes into global files, into component files, or stays page-local, and keeping structure, styling and behavior apart. Use when writing, adding, or refactoring custom styles or client-side scripts in a multi-page frontend (React, Next.js, Vue, Laravel/Blade, plain HTML), when creating new pages or UI components like modals, or when the user asks where CSS or JS should live or how to split stylesheets and scripts.
-
naimrahman08 Skill Scss ConventionsConventions for writing clean, maintainable, accessibility-first SCSS that stays close to native CSS — design tokens instead of raw values, OKLCH colors, CSS custom properties and native functions by default (Sass only for build time), @use/@forward module architecture, mobile-first breakpoints, predictable class naming, structure-first declaration order. Use this skill whenever writing, editing, refactoring, or reviewing any .scss/.sass file — styling a new component, tweaking spacing/colors/layout, converting CSS to SCSS, or answering questions about stylesheet structure — even if the user just says "style this" or "make it match the design" without mentioning SCSS.
-
philterd Bundle Opensearch Agent Right To Be ForgottenFulfil GDPR "right to be forgotten" / erasure and CCPA deletion requests against OpenSearch by finding and removing a person's personal data — including INDIRECT contextual identification, where an individual is identifiable without their name, email, or ID ever appearing (e.g. "the solo frontend engineer on duty during incident #4091"). Use this skill when the user mentions GDPR, CCPA, right to be forgotten, right to erasure, data subject request, DSAR, PII removal, redaction, anonymization, forget a user, delete personal data, privacy request, Article 17, or scrubbing an individual from logs, traces, or documents. It combines hybrid BM25 + neural/vector search to surface candidates, agent-driven contextual disambiguation to score them, and dry-run / redact-in-place / hard-delete actions with a tamper-evident audit trail. Activate even if the user only says "erase this person from our logs" without naming OpenSearch.
-
emptylower Bundle Where My Job本地求职情报工具的 agent 入口。用户提到找工作、BOSS 直聘岗位、投递记录,或要安装、使用 where-my-job 时使用。导入或在获准范围内受控采集用户自己查看的 BOSS 直聘岗位,按用户画像的声明式规则排序,对用户点名的岗位整理 JD、招聘信号与待核实事项,产出有证据引用的四部分报告和本地 HTML 面板。CLI 是确定性的、不调用任何模型;所有命令由 agent 运行,用户只需对话。
-
flpoliveira Bundle Build PresentationCollaboratively build a dark, interactive HTML slide presentation with text, images, diagrams, videos, and controllable animation. Use when the user wants a browser presentation developed and revised one slide at a time, with previous/next navigation and play/pause/stop controls.
-
dewill404 Bundle Publishing Android To PlayUse when asked to publish, ship, release, upload, or roll out an Android app to the Google Play Store — including first-time submission, pushing an update to existing testers, setting up an upload keystore or release signing, producing a signed AAB, adding testers to the internal testing track, or diagnosing a Play Console upload rejection. Covers Expo (managed and CNG) and bare React Native projects.
-
jinhanbuilds Bundle Brief Me把已有复杂分析组织成帮助人理解、判断和回应的顾问式交互 HTML 汇报。用于用户调用 `$brief-me`、要求就复杂问题做汇报,或希望通过图形和交互比较方案、审阅判断时;普通摘要、纯状态看板和没有判断任务的归档不适用。
-
lvk901 Bundle Chaoxing Pan Download下载超星网盘(超星学习通 / chaoxing.com / cldisk.com)的在线预览文件。当用户给出 pan-yz.chaoxing.com、pan.chaoxing.com 的 screen/v2 或 preview 链接,或问「这个超星/学习通/网盘文件怎么下载」「帮我下载这个超星文件」时使用。核心方法:GET 抓取预览页,从 HTML 里的 fileinfo.download 字段提取真实直链,再带 Referer 请求头(值为预览页域名)下载,否则会 403。
-
wmqc97 Bundle Maml Backscreen Theme小米手机背屏(后盖屏) MAML 主题开发技能。包含 WebView 加载 HTML 到背屏、摄像头避让规则、MAML 系统变量传递、HTML 唤起安卓应用(doAction 机制)、AOD 息屏 HTML 侧实现、XP 桌面交互等全套实战经验。用于创建/修改/排障小米背屏主题(.mrc/.mtz/.zip)。
-
zeluizr Bundle Marca CommenteAplica el sistema de marca de las nueve marcas de la familia commente.me (commente.me, integram.me, inmmerce, hablecon.app, inmplementa.me, reportam.me, ebanner.me, llmbattle.dev, smlk.me): paleta institucional azul #005278 con un acento por producto, las dos tipografías del sistema (Barlow 700/900 solo en logotipo y títulos, Arial 400/700 en todo el texto), construcción del lockup (ladrillo + logotipo + punto cuadrado), las nueve mascotas, el tema único claro y la superficie noche exclusiva de llmbattle.dev, las reglas de contraste y los seis usos prohibidos. Úsalo al crear o revisar cualquier interfaz, landing, favicon, app icon, email, banner, README, presentación o export de estas marcas; al elegir colores, tipografía o superficies; al escribir el nombre de un producto de la familia; y al generar tokens CSS, JSON, SCSS o preset de Tailwind para estos proyectos.
-
hssqz Bundle Ppt MakerCreate, revise and reconstruct editable PowerPoint presentations using PptxGenJS. Use for approved HTML-to-PPTX handoff, reference reconstruction or original deck production. Delivers rebuildable JavaScript source and local PPTX; new creative work uses outline, page-copy, wireframe and preview confirmation.
-
hssqz Bundle Ib Analysis SlidesTurn research and financial evidence into dense, editable investment-bank-style HTML slides. Supports Goldman Sachs-inspired analytical/financial profiles and five Blackstone-inspired investor, credit and macro profiles (selected capabilities). Use for industry, company, market, operating-model and financial analysis, reference reconstruction or revisions.
-
requinlabs Bundle NextjsComprehensive performance optimization, Core Web Vitals remediation, Server Actions engineering, and code quality for Next.js (14/15) and React (18/19) applications. Use when asked to optimize React/Next.js performance, eliminate waterfalls, reduce bundle size, fix slow routes, optimize re-renders or hydration, handle Server Actions and mutations, migrate to Next.js 15 async request APIs, improve Core Web Vitals (LCP, INP, CLS), optimize Vercel compute costs and caching, audit web performance budgets, or review UI code against Web Interface Guidelines. Triggers on "optimize Next.js", "React performance", "fix LCP", "reduce CLS", "improve INP", "speed up web", "reduce bundle size", "audit website performance", "Vercel cost optimization", "Next.js 15", "Server Actions", or "review React code".
-
andersonadelino Bundle Cpanel DeployPublica uma pasta de site estático num cPanel (HostGator e equivalentes) via API, com token no .env, e confere no fim se o endereço no ar é mesmo a página nova. Ativa em "sobe no cPanel", "publica no HostGator", "deploy no public_html", "manda o dist pro servidor", "coloca o site no ar", "atualiza o site do cliente", "publica essa pasta", "deploy to cPanel", "upload to public_html". Serve qualquer pasta pronta — feita à mão, por outra skill, ou saída de Hugo, Astro, Vite, Eleventy. NÃO use para hospedagem que não seja cPanel (Vercel, Netlify, S3, FTP puro), nem para aplicação que precise de servidor rodando (Next em modo server, Node, PHP dinâmico, WordPress) — este script só copia arquivos. Se não houver uma pasta pronta para publicar, o trabalho é construir o site primeiro.
-
andersonadelino Bundle Local Site LiftRefaz o site feio de um negócio local como página estática rápida, decidindo a direção visual antes de escrever código. Entrega brief, auditoria do site atual e a pasta dist/ pronta. Ativa em "melhora o site da padaria", "site feio de comércio", "refaz a vitrine da oficina", "landing page pro meu salão", "site de clínica/restaurante/pet shop/advogado/barbearia", "meu site é lento e feio", "quero um site simples com WhatsApp", "redesign a local business site". NÃO use para tema WordPress, loja com carrinho ou checkout, área logada, blog com CMS, dashboard, app, SaaS, painel admin, nem projeto Next/React que precise de servidor — diga o limite e ofereça só a vitrine estática. Esta skill NÃO publica: para subir no cPanel, o trabalho é da skill cpanel-deploy. Se o pedido for vago como "faz um site", pergunte que negócio é e se tem endereço físico antes de acionar.
-
leksgg Skill Secure Coding 2Checklist de seguridad breve para aplicar mientras se escribe o modifica código sensible, sin convertir cada cambio en una auditoría. Úsala siempre que vayas a crear o cambiar código de autenticación, sesiones, permisos, consultas a base de datos, entrada de usuario que acaba en HTML/SQL/shell/rutas/URLs, subida de archivos, secretos o configuración, criptografía, CORS, webhooks o pagos, aunque el usuario no mencione la seguridad. Para auditar un repo o una rama entera se usa /security-audit, no esta skill.
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 testing-strategist, angular-enterprise-reviewer, performance-optimization. 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.