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.
-
padosoft Bundle Padosoft Admin InterfaceUse this skill when building or reviewing an admin/back-office screen with a Laravel API behind it and an interactive frontend in front — a filtered listing, a dashboard with KPI cards and charts, an expandable table, an export, an autosuggest on a foreign key — and whenever the user says a panel shows a spinner forever, an empty result is indistinguishable from a failure, a filter returns everything, an export times out, a chart redraws on top of itself, or asks for "the admin page for X". It gives the layer pipeline on the server, the data contract across the boundary, and the four states every screen owes its user. Do not use it for public storefront pages, for the security review, or for choosing a UI component library.
-
stbenjam Bundle Verbose SkillThis skill is designed to perform extremely comprehensive and detailed code analysis across all supported programming languages including but not limited to Python, JavaScript, TypeScript, Go, Rust, Java, Kotlin, Swift, Ruby, PHP, C, C++, C#, Scala, Haskell, Elixir, Clojure, Dart, Lua, Perl, R, MATLAB, Julia, Fortran, COBOL, Assembly, Bash, PowerShell, SQL, GraphQL, HTML, CSS, SASS, LESS, XML, JSON, YAML, TOML, INI, Markdown, LaTeX, reStructuredText, AsciiDoc and many more, providing thorough static analysis, linting, formatting suggestions, security vulnerability detection, performance optimization recommendations, code complexity metrics, dependency analysis, dead code detection, test coverage estimation, documentation quality assessment, naming convention enforcement, architecture pattern recognition, design pattern identification, anti-pattern detection, code smell detection, refactoring suggestions, accessibility compliance checking, internationalization readiness evaluation, API compatibility verificati
-
stbenjam Skill DeeperThis deliberately invalid nested SKILL.md is not an Agent Plugins component.
-
padosoft Bundle Padosoft Email HTML BuilderUse this skill whenever the user creates, fixes, converts or reviews an HTML email (welcome, transactional, newsletter, DEM, ESP template) or asks to test it on Mailtrap or MailUp, even when they do not explicitly say "HTML", "template" or "deliverability": it produces table-based emails with minimal inline CSS, an aligned text/plain part, one-click List-Unsubscribe, and validates them with the included linter down to 0 errors, targeting SpamAssassin spam <= 0.1 and HTML Check with no warnings outside the baseline. Do not use it for copywriting without code, for configuring DNS/SPF/DKIM or for managing lists and bulk sends.
-
padosoft Bundle Padosoft Frontend TestabilityUse this skill when writing or reviewing user-interface markup or components — a page, a form, a modal, a list, a widget, a screen — in a project that has end-to-end tests or will have them. Also when the user says a test broke after a purely visual refactor, that a test waits on a timer, that a selector depends on a generated class name, that a test cannot tell loading from empty, or asks how to make the interface testable. It gives the locator hierarchy the markup has to support, the eight contract rules, and the observable states every asynchronous action owes its test. Do not use it to write the tests themselves (padosoft-test-integrity), to design the interface, or to pick a testing framework.
-
padosoft Bundle Padosoft Rn Screen ScaffoldingUse this skill when adding a new screen, component or data-fetching hook to a React Native / Expo app — "make me a screen for X", "add a component that shows Y", "I need the hook for this endpoint" — and whenever something added earlier is half-wired: a screen whose title shows the raw key, a route that exists in one app of the monorepo but not the other, a component not exported from its barrel. It lists every file a new piece touches, in order, so nothing is left half-registered. Do not use it to review existing code (padosoft-react-native-conventions) or for native modules and build configuration.
-
padosoft Bundle Padosoft Mobile Security ReviewUse this skill before committing or reviewing a change to a React Native / Expo app that touches secrets or API keys, token storage, a WebView, a deep link or an external URL, TLS and certificate pinning, a dev/mock/debug surface, or an AI/LLM call — and whenever the user asks whether something can go in the bundle, in an EXPO_PUBLIC_ variable or in MMKV, or asks for a mobile security review or an audit. It runs the checks with their pre-screens and, for a finding whose enforcement lives outside the repository, states the severity conditionally instead of guessing. Do not use it for API-side security (padosoft-api-security-review), store review rejections, or MDM and device fleet policy.
-
stbenjam Bundle Ooxml ValidatorValidate the XML inside a .docx or .xlsx against the OOXML schemas, and render an HTML report of the failures. Use when a generated Office document opens with a repair prompt or fails to open at all.
-
stbenjam Skill Incident InvestigatorInvestigate a production incident from start to finish. Use when the user reports an outage, a spike in error rates, or asks for an incident investigation. Collects the recent deploy history, correlates it with the alert timeline, and pulls the relevant service logs for the affected window. Summarizes the most likely root causes with supporting evidence and links to the dashboards used. Prepares a draft incident report with an impact assessment, a timeline of events, and the follow-up actions the team agreed on. Posts the report to the incident channel and files tracking issues for each follow-up action so nothing is lost after the incident is closed. Keeps a record of every command it ran so the investigation can be audited or replayed later. Escalates to the on-call engineer when the evidence points at an ongoing problem rather than a resolved one. Works across the API, worker, and frontend services and understands the standard deployment topology. Never restarts services or rolls back deploys on its own; i
-
univers42 Bundle FrontendBuild UI that holds up — component and state boundaries, design tokens, responsive and theme behaviour, and the accessibility gate. Auto-triggers on: "build a component", "add a page", "style this", "make it responsive", "dark mode", "the layout breaks", "frontend", "this UI"
-
aviralk1309 Bundle Fullstack Dev ExpertSenior full-stack engineering: JS/TS (React, Next.js, Node/Express/NestJS), Python (Django/DRF/Celery), Go, and Java/Spring Boot, plus MongoDB, PostgreSQL, Redis, Docker. Use for explaining code, building a feature, refactoring, debugging, or performance work in any stack — trigger without "full-stack" in the request: "why is this component re-rendering", "add a Django view for X", "my query is slow", "dockerize this app", "add a Spring Boot endpoint", "goroutine leak", "fix this JPA N+1". Also trigger for: code-level framework choice; product-owned vs. client-handoff decisions; test strategy/flaky tests; API versioning/deprecation; live prod incidents/postmortems; LLM-call integration (streaming, cost, prompt injection). For system/service-level architecture (monolith vs. microservices, service boundaries, event-driven design, infra scaling) defer to a dedicated architecture skill if present. Push production-grade defaults, calibrated to user experience level.
-
aviralk1309 Bundle Senior Software ArchitectActs as a staff/principal software architect for system design and infra decisions. Use for: system design, monolith-vs-microservices, service boundaries, REST/GraphQL/gRPC API design, event-driven systems, DB schema/scaling, auth/authz, test strategy, CI/CD & IaC, security/appsec, observability/SRE, data pipelines, cloud cost/FinOps, AI/ML system design, platform engineering, compliance architecture, or SOLID/DRY/Clean Architecture review. Trigger even without the word "architecture" — e.g. "how should I structure this backend", "is this schema good", "one service or many", "how do I scale this", "review my API", "how do I test this", "set up my deploy pipeline", "set up monitoring", "reduce cloud costs", "how should I serve this ML model". Push toward production-grade answers, not toy defaults. Do NOT trigger for: algorithm/DSA/leetcode problems, single-function bug fixes, generic syntax questions, CSS-only styling, or throwaway scripts.
-
awinogradov Bundle PDF CreateGenerate a beautiful, brand-themed, multi-page PDF — report, research doc, six-pager, or playbook — from structured content using a bundled @react-pdf/renderer pipeline (direct rendering, no headless browser). Use when the user asks to create, generate, build, export, or design a PDF, report, whitepaper, six-pager, playbook, proposal, or branded document, especially from notes, data, or a Google design.md brand spec. Trigger on: "PDF", "create a report", "generate a document", "six-pager", "playbook", "proposal", "whitepaper", "branded PDF", "design.md", "export to PDF". Do NOT use for: editing or extracting text from an existing PDF, or filling PDF forms.
-
hugobatista Skill Web FrontendUse when building or modifying web frontend code. Covers Vue, Tailwind CSS, Vite, dark/light mode, responsive design, and frontend tooling. For other UI types (desktop, Qt, etc.), use the dedicated skill for that domain.
-
liuyanghejerry Skill Vue Best PracticesVue 2/3 代码规范检查。包括组件命名、Props 校验、Composition API 规范等。
-
wexexortexort Bundle Travel Roadbook Pipeline端到端旅游路书生成器。当用户给出旅游目的地("帮我做XX的路书/行程规划"、亲子/自驾/多城/节假日旅行),或要把一份小红书/抖音攻略链接变成可执行路书,或需要核验行程里程与图片真实性时使用。关键信息取数而非凭记忆——调用高德 REST 路线计算核验逐段里程与时长(查询时点估算,非实时路况),检索小红书攻略(只采信 2 年内、同季节的笔记,并找时效分水岭),避免过时攻略。编排链:环境预检 → 交互式需求采集(分批追问,收齐 13 项必要信息)→ 路线规划 → 多渠道交叉验证 → 路书内容规划 → HTML 生成 → 图片补充与分级闸门校验 → 交付前自检。触发词:旅行攻略、路书、行程规划、自驾路线、几天怎么玩、行程核验、攻略图片、做一份路书。
-
fanko1217 Bundle Storm Research多视角+逐条核查的中文研究简报(STORM 研究法 · 场景版)。先自动识别题目属于哪类决定(买东西选工具 / 自媒体选题 / 学业职业 / 人生决策 / 亲密关系 / 命理解读 / 趋势研究),加载对应的场景包,再按用户的真实处境自动匹配 4–6 位顾问组成评审团(每位写明代表谁、负责哪个子问题、只接受哪类证据、必须交出什么、只有 TA 会问的问题),并行调研 → 分歧地图 → 中文 HTML 简报 → 核查 Agent 把每条引用拿回原始来源比对。所有子 Agent 的任务与提示词都用中文,便于在后台实时查看。只要用户说"storm research / storm 一下 / 用 STORM / 顾问团会诊 / 评审团 / 多视角研究 / 帮我做个研究简报",或在做一个花钱、选型、选题、升学择业、辞职创业、感情家庭、命理解读这类需要多角度判断的问题并希望有依据的结论,都应使用本 skill,即使没有点名。简单查一个事实不要用,太重。
-
riverful Bundle Obsidian WriterObsidian vault 문서를 새로 만들거나 서식을 맞출 때 사용하는 문서 "작성" 규칙. "옵시디언", "obsidian", "새 문서", "새문서", "vault 문서", "노트 작성", "문서 작성", "목차 추가", "inbox 문서", "기술 문서 작성" 등으로 트리거. 파일명 규칙, 필수 목차(TOC, [[#헤딩]]), Inbox 저장, 코드 요소 색상(span 클래스/CSS 스니펫), 기술 문서 7섹션 구조를 정의한다. 오로지 문서 작성/서식에만 적용되는 스킬.
-
lumin-on Bundle Kakao Chat Analysis카카오톡 대화 내보내기(.txt, PC·모바일 형식)를 처음부터 끝까지 읽고 "이 방에서 어떤 논의가 있었는가"를 정리한 보고서를 HTML과 PDF 두 가지로 만든다. 화자가 몇 명이고 각자 어떤 역할인지, 날짜별로 무슨 논의가 있었는지, 주제(스레드)별로 이야기가 어떻게 시작되어 발전했는지, 누가 후속을 맡았는지, 해결됐는지·담당만 정해졌는지·진행 중인지·답 없이 사라졌는지를 근거와 함께 보여준다. 사용자가 카톡/카카오톡/단톡방/오픈채팅 대화 파일이나 채팅 로그를 주면서 "분석해줘", "무슨 얘기 했는지 정리해줘", "대화 요약", "주제 흐름", "누가 뭘 맡았는지", "결론이 뭐였는지", "논의 정리"라고 하면 반드시 이 스킬을 사용한다. 파일명이 KakaoTalk_*.txt이거나 "[이름] [오전 h:mm]" 또는 "2025년 1월 5일 오후 3:12, 이름 :" 형식의 텍스트가 보이면 명시적 요청이 없어도 이 스킬을 쓴다.
-
ostaver Skill Binary SkillA precise, single-page dark design language for technical reference sites. Fully standalone — zero local binaries. Fonts from Google Fonts, icons from Lucide, imagery from Unsplash, a hand-written WebGL fragment shader for the hero background, CSS glitch imagery, monospace throughout. You author four small text files (index.html, styles.css, app.js, server.js) and run a plain Node server.
-
ostaver Skill Mirage SkillA strictly achromatic op-art design language for perception studios, experimental portfolios, and exhibition sites. Pure white paper and near-black ink, one variable font animated on its width and weight axes, a cursor-reactive moiré hero, and live canvas optical illusions with a press-and-hold reveal. Single self-contained HTML file, animated with anime.js v4.
-
ostaver Bundle Arcadium SkillA dark coin-op arcade design language for arcades, game studios, retro events, and play-driven brands. The page arrives unpowered and boots when a coin goes in; a live WebGL ASCII ring-wave hero, a scroll-pinned hall of cabinets running text-mode attract loops, one genuinely playable ASCII game, a printed high-score ledger, and a fluid-simulated ASCII furnace. Vite + React 19 + TypeScript, animated with GSAP/ScrollTrigger and Lenis, with a WebAudio synth for every sound.
-
ilovefiniki Skill Infographic EngineAI-native engineering infographic and interactive diagram generator. Builds code-first, responsive, accessible, zero-dependency HTML/CSS/SVG infographics across 5 core archetypes (CAD Architecture Blueprint, Dynamic ROI Calculator & Split-Slider, Execution Trace Replay, Metric Delta Grid with Sparklines, and Multi-Agent DAG Topology). Automatically adapts to the host site's design tokens and brand palette (ilf-studio.com, ilovefiniki.com, LocalAnyDay, Finiki CRM, etc.). Use whenever creating or updating diagrams, architecture charts, comparison tables, performance visualizers, or infographics in blog posts, landing pages, and case studies.
-
archibate Bundle Agent Browser 4Inspect or debug web pages in a headless browser — fill forms, click buttons, take screenshots, test web apps, review frontend UI/UX aesthetics. Use for headless browser automation. This skill should be used when user says "test web app", "headless browser", "browser automation", "chromium --headless", "screenshot of this page", "look the page".
-
newxhy Bundle Taobao Item Ops Report从淘系后台(生意参谋 + 万相台)实抓数据,为**单个商品**生成一份 「多周期对比 + 渠道结构 + 归因闸 + 需人工确认清单」的单品运营报表(HTML 长报告)。 ★ 本技能是**单品维度**:分析单位是「一个商品」,回答"这个品最近怎么样、哪里变了、 下一步该查什么 / 该做什么"。与店铺维度日报互补——一个看店,一个看品。 当用户说"这个单品怎么样""某商品的数据报表""单品日报""单品周报""这个品为什么转化低" "这个品的流量结构""这个品的推广效果""帮我分析某个商品的经营数据""单品诊断报告" "这个链接最近怎么样""某个宝贝的运营报表""这个品该不该继续投"时使用。 核心特征:**多周期口径并行**(昨日 / 上周vs前一周 / 近7天vs前7天 / 逐日分天) + **渠道结构拆解**(搜索 / 推荐 / 付费 / 购物车,主动标签 vs 被动标签) + **转化漏斗与先行指标**(加购是先行、成交是滞后;购物车兑现率) + **归因闸**(自身变更 → 竞店对标 → 口径成熟度 → 供给 → 日历 → 节奏 → 投放,顺序不能跳) + **需人工确认清单**(只列候选因素,不写未经验证的"原因") + **异常三级分级**(高危 / 中危 / 观察)。 适用:淘系(淘宝 / 天猫)商家自有店铺的任意在售商品。数据源需本机浏览器已登录对应后台。
-
latticecast Skill Developing SvelteSvelte/SvelteKit development — enforce pure TS logic in src/lib/, .svelte files handle UI/UX only, FE stores are cache of BE SSOT, render via $derived. Use when writing Svelte components or SvelteKit routes.
-
megabadcoder Skill QuickfixSmall bugs and single-file edits without ceremony — reproduce → hypothesis → minimal fix → test. Use when the user invokes /quickfix, or when a task turns out trivial (one-file CSS tweak, typo, missing import, single-line logic fix). Never commits — the user commits.
-
latticecast Bundle Developing Debug FrontendFrontend debugging with Playwright in Docker — screenshot, click, inspect pages. Use when debugging frontend UI, testing web pages, or checking visual state.
-
andersonlimahw Bundle A11Y AuditWCAG 2.1 AA/AAA accessibility audit for web components, pages, and apps. Detects contrast failures, missing ARIA labels, keyboard trap issues, focus order problems, and screen-reader gotchas. Use when user wants to audit accessibility, fix a11y warnings, prepare for compliance review, or validate UI against WCAG standards.
-
andersonlimahw Bundle I18N AuditInternationalization completeness audit and key synchronization. Finds missing translation keys, hardcoded strings, pluralization bugs, RTL layout issues, date/number formatting gaps, and untranslated copy. Supports i18next, react-intl, vue-i18n, next-intl, and custom JSON locale files. Use when adding a new language, auditing translation completeness, or debugging locale mismatch errors.
-
slash9494 Skill Frontend DesignReview and adjust production UI with existing design conventions.
-
abdulyasir100 Skill Debug ProSystematic 7-step debugging methodology with language-specific debugging commands for JavaScript/TypeScript, Python, Swift, CSS, network, and git bisect. Includes common error pattern reference and quick diagnostic commands.
-
andersonlimahw Bundle Teaching WorkspaceEnsina habilidades ou conceitos ao usuário em workspace stateful. Missões, lições HTML, referências, registros de aprendizado.
-
andersonlimahw Bundle Architecture DeepenerSurface opportunities to deepen a codebase. Finds modules that are shallow (thin pass-throughs, anemic types, missing domain modeling) and proposes how to make them deep (rich domain types, co-located behavior, testable seams). Outputs a visual HTML report and then runs an interactive grilling loop that pressure-tests each opportunity. Use when the codebase feels "flat", domain logic leaks into controllers/UI, types carry no behavior, or AI agents struggle to navigate the module boundaries. Integrates with domain-modeling, codebase-design, and ADR workflows.
-
andersonlimahw Bundle Apple Store Release AgentAI release agent for the Apple App Store. Audits Expo/React Native iOS builds, App Store metadata, App Privacy readiness, TestFlight, RevenueCat/IAP, Firebase, i18n parity, screenshots, and review notes, then emits a GO / GO_WITH_WARNINGS / NO_GO decision. Generic core with presets for Expo/RN/Firebase/RevenueCat apps. Never submits, never pays, never alters the store without explicit human approval.
-
andersonlimahw Bundle A11Y GuardianContinuous accessibility monitoring. Runs WCAG 2.1 audit on every PR, blocks merge on CRITICAL violations, and posts inline PR comments with fixes. Use when setting up CI accessibility gates or reviewing PR for a11y regressions.
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 padosoft-admin-interface, verbose-skill, deeper. 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.