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.
-
jpkovas Bundle Uiux Excellence GuideUse when designing, redesigning, auditing, or implementing UI/UX; improving design systems, accessibility, responsive behavior, microcopy, motion, or Web Vitals.
-
jpush Bundle Update Sdk更新 cordova-plugin-jcore 插件的 JCore SDK 版本。自动拉取极光官网 Changelog,分析新增/移除/变更 API,更新 plugin.xml 中 Android(Gradle framework)和 iOS(CocoaPods podspec)版本引用,同步更新 Native 层(Java)和 JS Bridge 层代码,展示变更摘要确认后发布到 npm。 Use when: 更新 JCore SDK、升级极光核心库版本、cordova-plugin-jcore 发布新版本、Cordova 插件 SDK 更新。
-
jshchnz Bundle Vercel Cost GuardAudits Next.js/Vercel projects for 22 cost-causing patterns across bandwidth, compute, invocations, and image optimization. Scans for large uncompressed media, missing preload attributes, API routes without caching, AI streaming without timeouts, database N+1 queries, unscoped middleware, accidental dynamic rendering, payload limit violations, missing ISR/static generation, and configuration issues. Use when reviewing a Next.js project for cost issues, preparing for launch, or after receiving an unexpected Vercel bill.
-
jtlgrowth Bundle SecuritymaxxScore a shipped app against a 10-point security checklist with cited file:line or live-probe evidence, then emit a designed HTML scorecard. Unverifiable items score zero, so there are no hallucinated passes. Use when asked to audit an app's security, check whether something is safe to launch, review a vibe-coded or AI-generated codebase before real users touch it, or produce a security scorecard. Trigger — /securitymaxx <repo-or-url>, "audit this app's security", "is this secure enough to ship", "security scorecard".
-
juancruzrobledo Bundle Unidad Moodle ForgeGenera el material didactico completo de una unidad para el aula virtual Moodle de TUP (tup.sied.utn.edu.ar) a partir del programa de la materia o apuntes: un archivo HTML por cada bloque real de cada sub-seccion (Introduccion, Actividades, Practica, Microteaching, Autoevaluacion, Encuesta de cierre) -nunca un unico HTML con varios bloques pegados-, preguntas en formato XML de Moodle para importar (5 por actividad, 10 en autoevaluacion), el prompt para Gamma que resuelve el Material de apoyo de cada actividad, el documento y PDF de Lectura obligatoria de cada actividad, los guiones y el render automatizado (via la skill hyperframes) de los videos de cada actividad, guiones para generar los Notebooks LM de cada actividad, el guion del video de introduccion de la unidad (generado al cierre, coherente con el contenido ya completo), la consigna y el PDF del Trabajo Practico Integrador, y -al final del proceso- el material de Evaluaciones (parciales/recuperatorios) a nivel curso. Tambien genera, bajo pedido explic
-
junaid-pk Bundle Frontend DesignDesign, build, review, or refine production frontend interfaces for SaaS products, web apps, dashboards, onboarding flows, and landing pages. Use for frontend design work where Codex must turn requirements into clear, restrained, consistent, trustworthy UI; remove AI-generated visual clutter; improve hierarchy, states, copy, navigation, responsiveness, or usability; or polish an existing interface so users can complete their main job without confusion.
-
junyoung2015 Bundle Pr ReviewDeep code-centric review of pull requests for the moving-frontend monorepo. Use when the user mentions reviewing a PR, triaging GitHub Copilot or CodeRabbit comments, doing a code review, or wants feedback on a team member's code. Also trigger for "리뷰", "PR 리뷰", "코드 리뷰", "review PR", "review this PR", "Copilot review", "GitHub Copilot review", or when a PR doc path or GitHub PR URL is provided. Performs independent deep code analysis with git-truth validation, provider-aware AI review triage, and educational Korean-language feedback. AI review triage is secondary — the review stands alone even with 0 Copilot/CodeRabbit comments.
-
ethanplusai Skill Jarvis SetupUse when helping someone install, configure, or debug a fresh clone of JARVIS (this repo) — especially "the mic doesn't work", "JARVIS says his language systems are down", any Firefox/browser question, login/auth failures, or Accessibility permission prompts. Carries facts about this project that were only learned by hitting them live; check it before guessing.
-
ethanxwang Bundle Tvc DirectorTVC advertising creative director skill for Nano Banana Pro keyframe prompts and Seedance video scripts. Specialized for television commercials and brand advertising — from a product brief to production-ready keyframe prompts and cinematic video scripts. Three core capabilities: (1) Cinematic Product Breakdown — multi-phase product micro-films with precise camera choreography, component disassembly animations, feature visualization, and material macro shots; (2) Brand World Crosscut — interweaving product close-ups with in-context usage scenes via match cuts between phases (outdoor cameras with skydiving/skiing, luxury cars with mountain roads); (3) Lifestyle Film — product stays in the brand world throughout (worn/held/carried), highlighted through cinematography rather than studio cutaways, ideal for wearables and lifestyle products. Covers TVC narrative models, product cinematography, brand world integration, multi-grid storyboards, and video prompts. Use this skill whenever users want to create TVC ads, p
-
eugeniughelbur Bundle DoceoTurn anything the user wants to learn into a short, visual, plain-language teachable artifact (one HTML lesson page + a markdown lesson note), calibrated to what they already know and improving with every use. Use when the user runs /doceo, says "teach me X", "I don't understand X", "explain this simply", "make this teachable", or is clearly drowning in a too-technical explanation.
-
evalstate Bundle Birch HTMLUse this skill when the user wants a polished, shareable, source-grounded, self-contained HTML artifact in the Birch visual system for engineering, product, planning, review, status, incident, process, codebase, data, or benchmark communication. Trigger for one-pagers, visual summaries, reports, dashboards, module/process explainers, implementation plans, design-direction comparisons, PR/change writeups, findings-first code reviews, incident/status reports, briefing decks, flow diagrams, numeric/data briefs, model/run/token/ time/cost reports, and design-system references. Do not use it for editing production web apps, React/Vue components, or ordinary chat answers.
-
evnchn-agentic Bundle Rich RenderUse when a turn produces a multi-item synthesis (>=5 discrete items that benefit from cross-comparison) — triage, audit, survey, bug-sweep, design-alternatives, research findings, scorecards — and pasting it as raw Markdown in chat would be lower-bandwidth than a glanceable dashboard. Also when the operator says "rich render", "dashboard", "make it a dashboard", or asks to defer a long synthesis out of chat. Produces a single self-contained dark HTML file saved to ~/rich-renders/.
-
eyadkht Bundle Tell Data StoryPicks 2-3 narrative design patterns suited to the user's data and goal, then generates a standalone HTML page demonstrating them on that data. Use when the user shares a dataset (CSV, PDF, table, JSON, text), screenshot of numbers, or describes data and asks how to present it, communicate it, make it memorable, persuasive, or emotionally resonant. Pass a pattern name or number as the argument to apply a specific pattern directly instead of auto-picking.
-
fancyboi999 Bundle Getnote To ObsidianConvert Get笔记 HTML export folders into Obsidian-ready Markdown with YAML frontmatter, normalized tags, and YYYY/MM folder organization. Use when migrating Get笔记导出、HTML 笔记、或需要批量转换为 Obsidian 并生成索引 .base 的场景。
-
farming-labs Bundle Design EngineerEnd-to-end frontend design engineering workflow for improving React, Next.js, Vite, docs sites, dashboards, component systems, product websites, and studio-style apps. Use when the user asks to make UI/UX/design/frontend/website/docs/app screens more polished, curated, premium, usable, production-grade, responsive, animated, or visually consistent; when editing TSX/JSX/CSS/Tailwind/Fumadocs/shadcn/Radix/lucide interfaces; when choosing design-engineering tools or inspiration resources; or when adding loaders, icons, empty/loading/error states, motion, interaction details, and visual QA.
-
fast-crud Bundle Fs Crud Builder使用 @fast-crud/fast-crud 构建、改造和排查 Vue 3 CRUD 页面。适用于 Codex 需要新增或修改 fast-crud CRUD 模块,创建 index.vue、crud.tsx 或 crud.ts、api.ts、可选 mock.ts,接入路由菜单,配置 columns、search、form、table、request、dict、valueBuilder、valueResolve,集成 Element Plus、Ant Design Vue、Antdv4、Naive UI 管理后台,或诊断表格空白、分页转换、字典和 UI 适配问题。
-
fccview Bundle JottyUse when working on Jotty, a Next.js 16 + React 19 TypeScript self-hosted PWA for notes, checklists, and Kanban. Covers coding standards, UUID identity, file persistence, sharing, auth, encryption, i18n, PWA, and tests.
-
featurevisor Bundle FeaturevisorAuthor, query, and integrate Featurevisor — Git-based feature flags, A/B experiments, and remote config. Use whenever the user mentions Featurevisor, works in a project containing featurevisor.config.js, edits files under attributes/, segments/, features/, variables/, groups/, schemas/, targets/, sets/, or tests/, runs `featurevisor` CLI commands, or asks to add/roll out/ramp/target/A-B test/force-enable a feature flag, set up remote config or entitlements, define a shared/global configuration value that is not owned by any single feature, or asks where a feature/segment is used or why it evaluated that way. Also use when consuming Featurevisor from app code — @featurevisor/sdk, @featurevisor/react, @featurevisor/vue, the Go/Python/Ruby/Java/Kotlin/Swift/PHP SDKs, OpenFeature providers, datafiles, createFeaturevisor, isEnabled/getVariation/getVariable. Covers starting a project from scratch, features (flags, variations, variables), global variables defined under variables/, segments, attributes, schemas, grou
-
feicaiclub Bundle Previz当用户发来一段视频提示词(motion prompt)想在花钱生成前先看看画面时使用——读提示词,翻成三维场景,缺画面必需的信息就一次问齐,然后直接渲成导演台风格的三维 HTML 预览:动态放映为主,宫格 / 关键帧 / 站位图 / 场记平面图 / 接缝检查按需。代码画的,不调生成模型、不占额度;引擎随本目录走,不依赖任何工作流文件。
-
fengyunzaidushi Bundle Markmap Analogy Mindmap生成以内容为主的 Markmap 思维导图,用于项目、文档、代码库或概念梳理。Use when Codex needs to create Markdown/HTML mind maps that explain source material from whole to parts, keep real content as the structure, and by default limit every level to at most 5 direct children unless the user explicitly allows more.
-
callstackincubator-rozenite Skill RozeniteUse Rozenite for Agents to inspect React Native DevTools data and Rozenite plugins on a live app target, either through shell-driven `rozenite agent` commands or programmatic `@rozenite/agent-sdk` usage. Trigger this skill for any task that needs live app inspection, debugging, or plugin interaction through Rozenite.
-
bluei98 Bundle HTML ScreenshotHTML 파일/폴더 → PC & Mobile 렌더링 스크린샷 PNG/JPEG export. 로컬 HTTP 서버로 안전하게 렌더링. Trigger: /html-screenshot, 'HTML 스크린샷', 'HTML 캡처', 'HTML 캡쳐', '웹페이지 캡처', 'PC/모바일 캡처', 'html screenshot', 'render HTML', 'webpage capture', 'PC mobile capture', 'HTML スクリーンショット', 'HTML キャプチャ', 'ウェブページ キャプチャ', 'PC・モバイル キャプチャ'
-
boserup Skill Wes Bos Sick PicksResearch-first workflow for building frontend UI components (any framework), in the spirit of Wes Bos. Use when designing or implementing a UI component, layout, interaction, or CSS/HTML feature and you want a modern, accessible, best-practice solution rather than a first guess. Researches pitfalls and platform capabilities BEFORE planning, designs for WCAG accessibility using modern web standards, then verifies the approach against what Wes Bos has said on X plus trusted sources (MDN, web.dev, CSS-Tricks, Smashing, Frontend Masters, etc.). Named after the Syntax "Sick Picks" segment — because the job is to pick the sickest modern approach.
-
bowtiedswan Bundle RiveComprehensive Rive animation platform skill covering scripting (Luau), runtime integration (React/Next.js), state machines, data binding, and the complete API. Use this skill when users need to create interactive animations with Rive, integrate Rive into React/Next.js applications, write Rive scripts (Node, Layout, Converter, PathEffect protocols), control animations via state machines, implement scroll-based animations, or work with Rive's drawing API (Path, Paint, Renderer). Triggers on: "rive", "rive animation", "rive script", "luau", "@rive-app/react-canvas", "state machine animation", "interactive animation", "scroll animation with rive".
-
brandonburrus Bundle Visual PlanThis skill should be used whenever a plan for non-trivial work is being produced, presented, or proposed (a feature, design, refactor, migration, or any multi-step task), including in plan mode and together with whatever planning skill produced the plan. It is the default way to deliver a plan: instead of a wall of text, it renders the plan as MDX to a scannable, self-contained HTML page (diagrams, phases, file-change maps, comparisons) via the `vplan` CLI. It applies when the user says "plan this", "what's the approach", "how should we approach X", "show me the plan", "make a visual plan", "render this plan", or asks for a plan with diagrams/charts, and when they want to review, approve, sign off on, or give feedback on a plan. Skip only for a trivial one-step change or when the user explicitly asks for plain prose.
-
breakthrough-edu Bundle Breakthrough Meeting ScribeTurn meeting audio into three artifacts (a corrected transcript, an HTML visual canvas, and a Markdown summary with AI insights), transcribed locally with Whisper on any platform: no cloud, no external transcription app. Use when the user hands over a meeting recording or wants meeting notes from one ("处理这个录音", "会议纪要", "把录音转成文字", or an audio file lands in the configured drop-zone), wants an existing transcript corrected or cleaned ("处理 transcript", "转录纠错", "转写文本", or a .txt lands in the drop-zone), wants a recording pulled from their connected PLAUD account ("process my Plaud recording", "从 Plaud 拿"), asks for edits to a transcript, canvas, or summary this skill just produced, or asks for cross-meeting Insights on their communication patterns instead of processing one recording ("analyze my meetings", "how do I come across in meetings", "分析我的沟通模式", "复盘我最近的会议", "跨会议分析").
-
briantbr Bundle AstroAstro framework patterns for Islands Architecture, client directives (client:load, client:visible, client:idle, client:only, client:media), integrations (MDX, Tailwind, React/Vue/Svelte), View Transitions API, and deployment strategies. Use when building content-focused sites, implementing partial hydration with islands, setting up multi-framework projects, optimizing performance with zero-JS by default, or deploying static/SSR sites.
-
brickspacelab Bundle Theme SkillEdit Shopify theme JSON templates, settings data, and settings schema using the target theme's existing sections, blocks, nested block structures, and schema-defined settings. Use when updating, editing, or tweaking Shopify `templates/*.json`, JSON section data, `config/settings_data.json`, `config/settings_schema.json`, section settings, or block settings. Do not use for custom Liquid, new theme sections or blocks, snippets, assets, JavaScript, CSS, checkout extensions, or non-JSON theme-code work.
-
briqt Skill Android BridgeControl a connected Android phone via ADB — tap, swipe, type, read screen via the accessibility tree, take screenshots (for humans/vision models), run shell commands. Use this skill whenever the user wants to interact with their Android device, automate phone tasks, read what's on the phone screen, check phone status, open apps, navigate UI, or perform any mobile device operation. Also use when the user mentions "手机", "phone", "device", "screen", or references android-bridge commands. Works for both text-only and vision-capable models.
-
browser-use Bundle Macos HarnessControl a whole Mac from one persistent Python session with screenshots, PID-targeted input, an animated virtual pointer, targeted Apple Accessibility, Apple Events, Browser Harness CDP, and filesystem access. Use for native, Electron, browser, dialog, file, or cross-app tasks without moving the physical cursor or forcing apps into the foreground.
-
jjyaoao Bundle Job Board CodingBuild and document a direction-3 Coding Agent demo for a practical job application tracking board. Use when Codex should use a StepFun-powered coding workflow, or when another coding agent such as Claude Code should read this skill as a task protocol, to create, verify, or explain a React + TypeScript + Vite job-search kanban app with drag-and-drop stages, deadline reminders, localStorage persistence, README, screenshot evidence, or Xiaohongshu-ready process documentation.
-
jkf87 Bundle HwpxHWP/HWPX 문서(.hwp, .hwpx) 변환·생성·읽기·편집, HTML 활동지→편집 가능한 HWPX 변환 스킬. 'HWP 변환', 'hwp를 hwpx로', '한글 문서', 'hwpx', 'HWPX', '한글파일', '.hwpx 만들어줘', '보고서', '공문', '기안문', '한글로 작성', '회의록', '제안서', '이미지 포함 문서', 'HTML을 HWPX로', 'K-Teacher 스타일', '컬러 활동지' 등의 요청 시 사용한다. Windows에서는 설치된 한컴오피스 Automation COM 엔진으로 HWP를 HWPX로 빠르게 변환한 뒤 읽기·편집을 이어가며, 사용할 수 없으면 내장 rhwp WASM 변환기로 폴백한다.
-
jkf87 Bundle KmsgKakaoTalk 메시지 자동화 스킬. macOS에서는 kmsg CLI로 메시지 읽기, 보내기, 채팅 목록 조회를 지원하고, Windows에서는 kmsg 없이 화면을 직접 조작하는 CUA 워크플로우로 카카오톡/오픈채팅 메시지를 보낸다. Use when: (1) 카카오톡 메시지를 읽거나 보내야 할 때, (2) "카톡 보내줘", "카카오톡 메시지 읽어줘", "채팅 목록 보여줘" 요청 시, (3) KakaoTalk 자동화, kmsg CLI, 또는 Windows CUA 직접 조작 작업, (4) MCP를 통한 카카오톡 에이전트 통합 설정 시, (5) 사용자가 kmsg를 쓰지 말고 직접 CUA로 카카오톡을 조작하라고 할 때. macOS 13+, KakaoTalk macOS 앱, Accessibility 권한 또는 Windows KakaoTalk 앱 필요.
-
jkitchin Skill Discopt MkmBuild and analyze heterogeneous-catalysis microkinetic models — steady-state coverages, turnover frequency, Campbell degree of rate control, apparent reaction orders / activation energy, reaction routes and the overall reaction, lumped (Langmuir-Hinshelwood) rate laws, and HTML reports. Use whenever the user describes a catalytic reaction mechanism, surface kinetics, adsorbates and sites, coverages, rate-determining or rate-controlling steps, or asks to solve or analyze a microkinetic model.
-
jkitchin Bundle ScimaxSearches org-mode notes, displays agenda and TODOs, exports org files to HTML/PDF/LaTeX, validates citations, opens journal entries, maintains the org file index, and publishes org projects via the scimax CLI. Also the reference for org-mode syntax and scimax editor features (links, anchors, back-links, source blocks, tables, citations, task dependencies, project management (task tables, Gantt charts, people/assignees), and the entity selector for contacts/locations). Use when the user works with org-mode notes, asks about org syntax, or runs scimax CLI tasks. Triggers: "find notes about", "search my notes", "what's on my agenda", "show my todos", "what's overdue", "export this file", "check my citations", "rebuild my index", "how many notes", "publish my docs", "index my org files", "open my journal", "journal entry", "today's journal", "yesterday's journal", "morning briefing", "what's on my plate", "weekly review", "wrap up", "end of day", "what should I focus on", "follow up", "prep for", "triage", "org-m
-
jnsahaj Bundle WidgioRender animated SVG/HTML widgets inline in a browser companion. Use when a visual would help the user — diagrams, flows, mockups, charts, comparison cards, mini interactive demos. The user runs `widgio open` to see them. Trigger on phrases like "show me", "diagram", "visualize", "draw", "chart", or proactively when a visual genuinely clarifies an explanation.
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 uiux-excellence-guide, update-sdk, vercel-cost-guard. 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.