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.
-
putdotio Bundle Putio Frontend DevDevelop or review end-user applications and shared frontend packages owned by put.io, including UI, state, tests, docs, test harnesses, and delivery. Use only for work in a put.io frontend repository or explicit requests for put.io frontend conventions. Do not use for unrelated frontend work, browser-only put.io inspection, SDK or API client work, or standalone putio CLI consumer operations; frontend test-harness auth setup remains in scope.
-
pymodel Bundle Learning AstroLoad automatically when user asks to learn Astro framework development (e.g., "teach me how to build with Astro", "guide me through Astro", "I want to learn Astro", "quiero aprender Astro", "how do I get started with Astro"). Interactive guided tutorial where Claude acts as a co-pilot, guiding the user through building a real personal blog with Astro step-by-step. Trigger this skill whenever the user expresses interest in learning Astro from scratch, even if they don't say "tutorial" explicitly.
14 -
pymodel Bundle Astro FrameworkAstro framework specialist for building fast, content-driven websites with islands architecture. Use when creating Astro components, configuring hydration (client:load/idle/visible/media), using server:defer (server islands), Content Layer API (glob/file loaders, live loaders), sessions, astro:env, i18n routing, actions, SSR adapters, view transitions, or integrating React/Vue/Svelte/Solid. Not for full-SPA frameworks (Next.js, Remix, SvelteKit).
14 -
qltysh Bundle Setup Qlty TomlConfigure and fine-tune qlty.toml for static analysis using the Qlty CLI and Qlty Cloud. Use this skill when a user wants to set up Qlty for the first time, improve an existing qlty.toml configuration, choose which linters and security scanners to enable, configure plugin modes (block/comment/monitor), set code smell thresholds, or tune exclude patterns. Handles single repos and monorepos. Supports all Qlty-supported languages: JavaScript, TypeScript, Python, Ruby, Go, Java, Kotlin, PHP, Rust, Swift, Shell, CSS, SQL, Terraform, Docker, and more. Do NOT use for code coverage setup (use setup-coverage instead), writing or running tests, or general CI/CD changes unrelated to Qlty analysis.
-
qretaio Bundle Dioxus FullstackComprehensive Dioxus 0.7 framework expertise for building modern fullstack applications with Rust. Use when working with Dioxus for web, desktop, or mobile app development, setting up projects, implementing state management, routing, data fetching, CSS-in-Rust styling, or integrating with backend APIs and databases.
-
recipes-in-markdown Bundle Recipe Url To MarkdownConvert recipe URLs or HTML files to structured Markdown with YAML frontmatter. In chat, paste a recipe URL or HTTP link. In Claude Code or agentic workflows, pass local HTML file paths or directories to batch-process multiple recipes. The skill extracts title, prep time, yield, servings, source, and tags (proteins, spices, cuisine, diet). Ingredient groupings and numbered instructions are preserved. Handles incomplete or malformed inputs gracefully with error callouts in the output. Use whenever you need to convert recipes from web sources to a consistent, queryable Markdown format following the Recipes.md specification.
-
resumx Bundle ResumxWork with Resumx, a Markdown-to-PDF resume renderer. Use when creating, editing, converting, building, styling, or tailoring resumes. Covers syntax, CLI, style options, icons, tags, views, variables, multi-language, page fitting, validation, custom CSS, and AI-assisted resume writing.
-
revylai Bundle Atlas Review LensesRun a design, usability, accessibility, or pricing-clarity review pass over a mobile app's real screens and leave grounded comments pinned to exact pixels. Use when asked to review an app's UI, audit screens for design or accessibility problems, do a design review, check contrast, find UI bugs in an app, or leave feedback on app screenshots. Works through the Revyl CLI against an app's Atlas.
-
rocm Bundle Rocm Pr QualityHelp an engineer author, review, or pre-merge-gate a pull request to a ROCm library so it is traceable, tested, and safe to merge. Use when preparing a PR, reviewing a PR, or deciding whether an approved PR is safe to merge right now, or when the user provides a GitHub PR URL or branch and asks for help with PR quality, description, testing, review, or merge-readiness. Library-agnostic base; component overlays extend it.
-
rsamaium Bundle PixijsUse this skill first for ANY PixiJS v8 task; it routes to the right specialized skill for the job. Covers the full PixiJS surface: Application setup, the scene graph (Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite), rendering (WebGL/WebGPU/Canvas, render loop, custom shaders, filters, blend modes), assets, events, color, math, ticker, accessibility, performance, environments, migration from v7, and project scaffolding. Triggers on: pixi, pixi.js, pixijs, PixiJS, v8, Application, app.init, Sprite, Container, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, Assets, Ticker, renderer, WebGL, WebGPU, scene graph, filter, shader, blend mode, texture, BitmapText, create-pixi, how do I draw, how do I render, how do I animate in pixi.
-
rsamaium Bundle CanvasengineWork on CanvasEngine projects and .ce components using the official documentation. Use when Codex needs to explain, create, review, or modify CanvasEngine code, especially files ending in .ce, CanvasEngine reactivity with signals, computed, and effect, template directives such as @if and @for, component script/template/style structure, or CanvasEngine-specific syntax that mixes ideas from React, Vue, and Angular.
-
sahilkargutkar Skill Web AI SlopFilters web output against a multi-discipline checklist of AI default patterns. Use before shipping any design, copy, UI code, infrastructure config, or documentation. Trigger when the user asks for something 'premium' or 'not AI-looking', when you're about to reach for a glowing gradient, bento grid, SaaS empowerment copy, a 3-tier pricing section, a 3-stage CI/CD YAML, or a god component.
-
nomadamas Skill Katok SendUse katok to dry-run, stage, or send one explicitly confirmed KakaoTalk message on macOS through the local Accessibility-driven KakaoTalk UI. Never use for bulk, repeated, unsolicited, deceptive, harassing, or unattended delivery.
-
nomadamas Bundle Ralphthon Seoul Mid Presentation EnInterview-driven slides-grab workflow for the Ralphthon Seoul mid-presentation format. Use when the user wants an English Ralphthon deck that gathers required answers first, derives the outline, generates HTML slides, validates them, builds the viewer, and launches the slides-grab editor.
-
nomadamas Bundle Ralphthon Seoul Mid Presentation Ko랄프톤 서울 중간발표 양식에 맞춘 slides-grab 기반 인터뷰형 워크플로우입니다. 사용자가 한국어 발표 덱을 원할 때, 필수 인터뷰를 먼저 진행하고 slide-outline.md를 만든 뒤 HTML 슬라이드를 생성·검증하고 viewer를 빌드한 다음 반드시 slides-grab editor까지 실행합니다.
-
norahe0304-art Bundle Mckinsey DeckTurn any content into a top-tier McKinsey-style deck — a 1280×720 page-turning HTML presentation that also prints to a clean per-slide PDF. Use when the user wants a "McKinsey-style deck / presentation", a polished slide deck or PDF from notes/content, an executive/board/investor deck, or to "make slides / a deck / a PDF report" with a premium consulting look. (For full market research with sizing + competitor + business case, use mckinsey-market-research-deck instead.)
-
notedit Bundle Text Card GeneratorGenerate polished, consistent shareable card image sets from user-provided content using HTML/CSS plus Playwright screenshots. Use when Codex needs deterministic browser-rendered cards with dense exact text, per-card HTML pages, ratios such as 1:1, 3:4, 9:16, or custom aspect ratios, optional card count, style direction, visual QA scoring, and iterative regeneration. For GPT-image-2-led image cards instead, use `image-card-generator`.
-
nuxt-content Bundle Make Content EditableConverts hardcoded Vue components in a Nuxt Content markdown file into slot-based, Studio-editable MDC components. Use when a user wants their Nuxt Content page to be visually editable in Nuxt Studio's TipTap editor.
-
o0000-code Bundle Paper Deck Reveal把一篇学术论文(尤其实证心理学)做成可放映、投影就绪的 reveal.js HTML 汇报成片,含可内嵌幻灯片的「分步交互式实验演示」、去 AI 味演讲者备注、演讲者双屏,全程离线零 CDN。当用户要把论文/文献做成组会汇报、读书会、文献精读、journal club 的幻灯/deck/演示,说「把这篇论文做成 HTML 汇报」「做个能放映的 deck」「复刻实验流程给观众看」「写这篇汇报的演讲稿」,或英文说 "present this paper as a deck / slides for journal club / turn this paper into an interactive presentation" 时都触发,即便只说「帮我汇报这篇论文」。判别:要内嵌活交互、离线 HTML 放映、论文级排版→本 skill;要内容密集的 .pptx 报告成片→deck-craft(同仓 pptx 轨姊妹 skill);轻量或单文件 .pptx→pptx。不适用:单图表、营销/商业 deck。
-
observerw Bundle Typescript ProjectComprehensive guide for TypeScript and JavaScript repositories with a Biome-first toolchain. This skill MUST be consulted before writing, reviewing, or refactoring code in TS/JS projects to enforce consistent linting, formatting, type safety, and delivery checks. Use when working on .ts/.tsx/.mts/.cts/.js/.jsx files, tsconfig, package scripts, or tooling in Node.js and frontend projects.
-
ohall Skill ClientReact/Vite web client with local-first architecture using Dexie for IndexedDB. Use when building UI components, implementing offline-first patterns, or working on sync logic in apps/client/.
-
okuegow Bundle Visual FeedbackUse when the user wants to give feedback on a document, concept, design, plan, or report section by section - e.g. asks for a "Review-Seite", "Feedback-Seite", a kommentierbare HTML-Version, "Feedback zu jedem Abschnitt/jeder Box/jedem Element", comment pins in SVG diagrams, or wants to annotate a deliverable and paste the collected feedback back into the chat. Also when retrofitting an existing HTML page so every element accepts comments.
-
olelehmann1337 Skill MintoAnalyze any draft or idea against the Minto Pyramid Principle and deliver actionable restructuring recommendations. Extracts the pyramid (one-sentence answer, 2-4 MECE arguments, evidence per argument), diagnoses gaps, and delivers the fix as a visual HTML artifact: the pyramid rendered as a hierarchy, the exact opener to use, and a numbered restructuring plan. Use before any drafting, editing, or rewriting skill so the structure is sound before voice work begins. MANDATORY TRIGGERS: 'minto this', 'run minto', 'apply minto', 'minto-ify', 'pyramid this', 'build the pyramid', 'pyramid principle this', 'answer-first this', 'structure this as a pyramid'. STRONG TRIGGERS: 'what is the takeaway', 'is this MECE', 'does this hold up logically', 'pressure-test this', 'give me the one-sentence answer'. Do NOT trigger on requests to draft content, edit voice, or compress to a platform.
-
olelehmann1337 Skill Buy Or BounceSimulate 5 buyer personas reading any landing page, email, ad, sales page, proposal, or offer, section by section, then report who would buy, who would bounce, where friction clusters, and what to fix first. Generates a visual HTML report with conversion score, buyer-by-buyer walkthroughs, section-by-section friction map, prioritized fixes, and rewrite suggestions. MANDATORY TRIGGERS: 'buy or bounce this', 'run buy or bounce', 'simulate buyers', 'buyer sim this', 'would they buy this', 'who would bounce', 'test this before launch'. STRONG TRIGGERS: 'review this like a buyer', 'where would people drop off', 'why is this not converting', 'pressure test this landing page', 'simulate conversion objections'. Do NOT trigger on requests for brand voice editing, general proofreading, or analytics interpretation after a live launch.
-
omnimind-ai Bundle Shadcn VueManages shadcn-vue components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-vue, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn-vue init", "create an app with --preset", or "switch to --preset".
-
onovich Bundle Research To HTMLResearch a question or decision, build a traceable evidence notebook, and publish a low-reading-pressure bilingual English/Simplified-Chinese HTML report. Use when Codex must turn current web research, market or industry analysis, product/platform comparisons, technical ecosystem research, or business-model investigation into a reviewable Markdown source plus an interactive static report.
-
openagents-org Bundle Openagents WorkspaceOpenAgents Workspace collaboration tools — shared files, browser, and multi-agent coordination. Use when: sharing files or reports, browsing websites, reading shared files, checking workspace agents, or collaborating with other agents via @mentions.
-
zoo3323 Bundle Paper Summary현재 폴더의 PDF 논문을 읽어 한국어로 (1) 전체 번역본 HTML 과 (2) 핵심 요약본 HTML 두 개를 만든다. 그림·표·수식·그래프를 그대로 가져오고, 두 문서는 서로 클릭 이동할 수 있다. 사용자가 /paper-summary 라고 하거나 "논문 번역/요약 html 만들어줘"라고 할 때 사용. (용어/약어 사전을 따로 만들려면 paper-summary-word 스킬을 쓴다.)
-
zoo3323 Bundle Paper Summary Word현재 폴더의 PDF 논문(또는 paper-summary 가 만든 결과물)에서 전문 용어·약어를 뽑아 한국어 정의와 함께 정리한 검색 가능한 용어 사전 HTML(`용어사전.html`)을 만든다. 같은 `korean/` 폴더에 저장하고, 이미 있는 번역본·요약본의 네비게이션에 용어 사전 탭을 끼워 넣어 서로 클릭 이동되게 한다. 사용자가 /paper-summary-word 라고 하거나 "논문 용어/약어 사전 만들어줘"라고 할 때 사용.
-
5kahoisaac Bundle Bundle SkillsUse this skill when the user wants to create, update, or plan a skill bundle CSV for the skillless project, especially prompts like "/bundle-skills frontend", "bundle skills for python", "make a react skill pack", "merge these skills into a list", or "find skills and create a category". This skill guides the agent through clarifying the bundle concept, splitting it into useful subgroups, using find-skills/skills.sh metadata, checking install counts and security audit risk, comparing against existing lists/*.csv files, asking whether to merge or create a new bundle, and producing alphabetically sorted CSV rows.
-
azir-11 Skill Accessibility CheckWeb accessibility audit workflow for WCAG compliance
-
aliceisjustplaying Skill AxeControl iOS Simulators via accessibility APIs. Use this skill when the user wants to automate iOS simulator interactions, tap buttons by accessibility label, type text, swipe, take screenshots, describe the UI accessibility tree, or test iOS apps programmatically.
-
antvis Bundle Skill基于 @antv/aimapui 的 React 地图可视化组件库。当用户需要创建地图、配置地图图层、构建地理可视化或地图控件时使用本 skill。覆盖 AiMap 容器、6 种基础图层(Point/Line/Polygon/Heatmap/Raster/Image)、13 种复合图层(含 PMTilesLayer)、15 种控件、交互组件、图例、移动端组件,并支持 schema/JSON 驱动模式。基于 L7,Schema 驱动。
-
artsy Bundle Eigen TestingWrite and maintain tests for Eigen, a React Native application using React Native Testing Library and Relay Test Utils. Use this skill when writing new tests, fixing failing tests, adding test coverage, updating existing tests, or when asked about testing best practices for Eigen. Triggers on requests like "write tests for this component", "add test coverage", "fix this test", "how should I test this", or any testing-related questions for the Eigen codebase.
-
artsy Bundle Creating ScreensAdd new screens and routes to Eigen React Native app. Guides you through creating simple screens (no data fetching) or Relay screens (with GraphQL). Use this when adding screens, routes, or navigating components. Triggers on "add a screen", "create a new route", "add a Relay screen", "setup screen with data", or screen creation tasks.
-
awizemann Skill Scarf Miniapp AuthorAuthor a Scarf mini-app — a small sandboxed web surface (HTML/CSS/JS) that renders inside a project's cockpit and talks to the bound Hermes session + project data through the versioned window.scarf bridge. Use to build a bespoke panel (a task board, an approval queue, a chart, a data table) for a project.
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 putio-frontend-dev, learning-astro, astro-framework. 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.