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.
-
neuralmedic-de Bundle Odoo Addon PublisherProduce sale-ready Odoo addons/modules that follow the Odoo Apps Store vendor guidelines for Odoo 18.0 and 19.0, gated by a validator that runs. Scaffolds a guideline-compliant module (manifest, company/vendor info, OPL-1 licensing, static/description/index.html, icon, cover image and screenshots) and verifies any addon against the rules. Use when the user wants to build, package, publish or submit an Odoo app/module/addon, fix a __manifest__.py, prepare an App Store listing, add a cover image/icon/screenshots, or check Odoo Apps compliance. Triggers: "Odoo module/addon/app", "publish to Odoo Apps", "__manifest__.py", "OPL-1", "Odoo App Store", "Odoo 18 / 19 module".
-
memtensor Skill UI CraftDesign, build, redesign, or modify browser-visible web interfaces with product-quality composition, visual systems, interaction states, responsive behavior, accessibility, and browser visual QA. Use for HTML, CSS, JavaScript, React, Vue, or Svelte pages and components, landing pages, dashboards, admin tools, settings, forms, onboarding, responsive layouts, prototypes, and any frontend change that alters visible browser output.
-
open-circle Skill Repo Source Code Test FrameworksWrite unit and type tests for Formisch framework packages (frameworks/angular, frameworks/preact, frameworks/solid, frameworks/svelte, frameworks/vue, frameworks/react, frameworks/react-native). Use when adding tests for hooks/composables/runes/inject functions (useForm/createForm/injectForm, useField/injectField, useFieldArray/injectFieldArray) or components and directives (Form, Field, FieldArray, formischForm, formischField) in any framework wrapper.
-
open-circle Skill Repo Website Integration Guide CreateAdd integration guides for using Formisch with UI component libraries (e.g. shadcn/ui, Mantine, Chakra UI) to the Formisch website. Use when documenting how to wire Formisch fields to a component library's inputs.
-
raphaelmansuy Skill Makefile Dev WorkflowUnified development workflow for EdgeQuake using Makefile commands. Use when starting services, running tests, or managing the full development stack (database, backend, frontend). Provides simplified alternatives to raw cargo/npm commands.
-
raphaelmansuy Skill Reverse DocumentationAutomatically generate comprehensive documentation for Rust and TypeScript codebases by analyzing code structure, patterns, and relationships. Supports trait-based patterns, async operations, React components, and Next.js applications.
Audited -
raphaelmansuy Bundle E2e Test Service ManagementService management for E2E testing in EdgeQuake. Start, stop, and monitor PostgreSQL, backend API, and frontend services. Includes health checks and logging utilities for interactive testing workflows.
-
redis Bundle React Best PracticesReview React components for accessibility, hook correctness, and maintainable state boundaries.
-
schalkneethling Bundle Code ReviewReview code changes for correctness, security, performance, accessibility, maintainability, tests, dependencies, design-system adherence, and localization. Use when the user asks for a code review, PR review, review of local changes, risk assessment, code quality feedback, or actionable findings before merge.
-
schalkneethling Bundle Frontend SecurityAudit frontend codebases for security vulnerabilities and bad practices. Use when performing security reviews, auditing code for XSS/CSRF/DOM vulnerabilities, checking Content Security Policy configurations, validating input handling, reviewing file upload security, or examining Node.js/NPM dependencies. Target frameworks include web platform (vanilla HTML/CSS/JS), React, Astro, Twig templates, Node.js, and Bun. Based on OWASP security guidelines.
-
schalkneethling Bundle Github Goal Issue TriageTriage open GitHub issues across one or more repositories against each repository's GOAL.md, create missing p0/p1/p2/p3 priority labels, apply exactly one priority label to each open issue, nominate the next issue to work on per repository, and generate a clean HTML report grouped by project. Use when asked to prioritize, label, rank, audit, or report on GitHub issues based on project goals.
-
sdwurg180507280211 Bundle Wechat Medical Writer医学类微信公众号/服务号的轻量编排 Skill。它只提供医学领域上下文、必要医学事实约束和 upstream handoff,不自定义文章结构、标题方法、研究流程、模板、Claim Ledger 或发布实现。主题到高质量文章必须交给本仓库随 utility-skills 一起提供的 content-research-writer;普通概念插图、常规排版与发布按需复用苍何,统计图/论文式 Figure/多面板图必须读取本 Skill 的 medical-figure-design 并优先使用可控 plotting/SVG/HTML/vector 锚定数据与文字;访谈/Q&A/卡片等复杂公众号布局可按需使用外部 xiaohu-wechat-format;用户明确要求“光愈在线式”头像访谈时,可在 xiaohu 输出后调用本 Skill 的轻量品牌适配器。当前领域方向为女性健康、妇科、宫颈疾病、HPV、HSIL、CIN2/CIN3、生育力保护、PDT/HAL-PDT 等。用户上传的医学 ZIP/PPT/公众号样本只用于领域方向、当次资料或视觉参考,原件不提交仓库。
-
stvlynn Bundle Scroll Fade MaskUse this skill whenever the user wants iOS-style scroll fades, gradient masks, scroll-edge overlays, or top/bottom indicators on a scrollable list, dropdown, sidebar, modal, chat log, or panel. It implements a reusable wrapper-based scroll fade mask pattern across React, Vue, Svelte, and vanilla JavaScript, and it is also the right skill when the user says the fade masks broke scrolling, do not show, or do not match the background.
-
tangcent Skill MarkitdownConvert various file formats (PDF, DOCX, XLSX, PPTX, HTML, images, etc.) to Markdown via CLI. Invoke when user needs to extract text from documents or convert files to Markdown format.
-
shuliuzhenhua-sys Bundle Wechat Mp Scraper抓取和拆解微信公众号文章页。只要用户提到“微信公众号网页”“公众号文章”“mp.weixin.qq.com/s/”“抓 HTML”“导出素材”“分析公众号动画/实现方式/图片资源”这类场景,就应该使用这个 skill。它适用于公开可访问的公众号文章页,负责抓原始 HTML、提取资源、下载素材、整理动画线索,并生成结构化报告。
-
skills-il Bundle Israeli Shelter GuideGuide to finding and preparing shelters in Israel including mamad (apartment safe room), mamak (floor safe room), maman (institutional safe room), and miklat (public shelter). Use when a user needs to find the nearest shelter, prepare a safe room per Home Front Command guidelines, understand time-to-shelter by region, set up workplace emergency procedures, or interpret the multi-stage early-warning notifications introduced for ballistic threats. Covers the civil-defence construction specifications and what Israeli Standard 4422 actually governs, time-to-shelter zones (immediate / 15 / 30 / 45 / 60 / 90 seconds), municipal shelter databases, accessibility law, sheltering with pets, vehicle protocols, and what to do if caught outdoors. Do NOT use for real-time alert integrations (use pikud-haoref-alerts) or per-threat safety protocols (use pikud-haoref-safety-protocols).
-
skills-il Bundle Israeli Ecommerce ComplianceAudit and ensure Israeli e-commerce legal compliance, covering Consumer Protection Law, return policies, price display, accessibility, and cookie consent. Use when user asks about "online store compliance Israel", "Chok Hagnat HaTzarchan", "consumer protection Israel", "return policy Israel", "IS 5568 ecommerce", "cookie consent Israel", or "חוק הגנת הצרכן". Covers cooling-off period validation, price display requirements, Hebrew terms of service generation, accessibility compliance (IS 5568), and business disclosure verification. Do NOT use for food-specific compliance (use israeli-food-business-compliance) or privacy/GDPR (use israeli-privacy-shield).
-
software-mansion Bundle FlowEnd-to-end process for shipping a feature or bug fix in react-native-audio-api. Covers all required deliverables in order: Web Audio API spec review, TypeScript interface and types, C++ AudioNode implementation, HostObject wiring, TypeScript class, TurboModule spec (when needed), C++ tests (Google Test), JS tests (Jest), documentation (audiodocs MDX), and post-work checks. Also covers the bug-fix flow: MRE first, C++ test when applicable, root-cause analysis, post-mortem. Use this skill at the start of any feature implementation or bug fix. Trigger phrases: "implement a feature", "add a node", "fix a bug", "what steps", "where do I start", "PR checklist", "how to write tests".
-
software-mansion Bundle UtilitiesOverview of all shared utility helpers, data structures, and DSP primitives available in react-native-audio-api. Covers C++ utilities in common/cpp/audioapi/utils/, common/cpp/audioapi/core/utils/, common/cpp/audioapi/dsp/, and TypeScript utilities in src/utils/. Use this skill before writing new math, buffer management, or cross-thread code — check if a utility already exists. Trigger phrases: "add a new utility", "what helpers are available", "cross-thread communication", "audio buffer", "DSP math", "circular buffer", "lock-free queue", "off-thread", "SIMD buffer", "time conversion", "parameter automation", "audio constants", "TypeScript utils".
-
software-mansion Bundle Audio NodesC++ audio node engine for react-native-audio-api. Covers the AudioNode class hierarchy, the processNode() audio-thread contract (no allocs, no locks, no blocking I/O), AudioParam a-rate/k-rate processing, cross-thread communication patterns (CrossThreadEventScheduler, IAudioEventHandlerRegistry), and a step-by-step checklist for implementing a new node end-to-end. Use this skill when implementing a new Web Audio API node, modifying audio graph traversal or processing logic, or debugging audio rendering artifacts. Trigger phrases: "add a new node", "implement AudioNode", "processNode", "audio thread", "AudioParam automation".
-
software-mansion Bundle Host ObjectsCovers how to create, structure, and maintain JSI HostObjects that bridge C++ audio nodes to JavaScript in react-native-audio-api. Explains naming conventions, property/method exposure via macros, shadow state for JS↔audio-thread communication, JSI argument parsing, return value patterns, memory pressure, factory wiring in BaseAudioContextHostObject, and common pitfalls. Use this skill when creating a new audio node HostObject, modifying existing HostObject get/set/call logic, wiring a new node into the context factory, or debugging JSI-related crashes and type errors. Trigger phrases: "add HostObject", "create JSI bridge", "expose C++ node to JS", "shadow state", "scheduleAudioEvent from setter", "JSI property getter", "HostObject crashes", "new audio node".
-
software-mansion Bundle Post Work ChecksOrdered quality gate checklist to run after every code change in react-native-audio-api. Covers formatting, linting, type checking, C++ tests, JS tests, enum sync validation, and tiered local validation (validate.sh) for native builds CI does not run. Documents what lefthook pre-commit hooks run automatically vs what must be run manually. Use at the end of any implementation task before opening a PR. Trigger phrases: "post-work", "before PR", "before commit", "check quality", "run linter", "run tests", "format code", "lefthook", "pre-commit", "yarn test", "yarn lint", "validate", "validate:fast", "validate:full".
-
software-mansion Bundle Thread Safety ItcAudio thread safety rules, lock-free inter-thread communication patterns, and the audio event system in react-native-audio-api. Covers the three-thread model (JS / audio / worker), CrossThreadEventScheduler for JS→audio scheduling, IAudioEventHandlerRegistry for audio→JS events, AudioGraphManager for graph mutations, shadow state vs atomics decision table, TaskOffloader for off-thread work, and SpscChannel low-level API. Use when implementing cross-thread data flow, adding audio events, debugging thread-safety crashes or data races, or deciding which ITC primitive to use. Trigger phrases: "lock-free", "SPSC", "thread safety", "ITC", "cross-thread", "audio thread race", "scheduleAudioEvent", "invokeHandlerWithEventBody", "TaskOffloader", "off-thread", "SpscChannel", "CrossThreadEventScheduler", "shadow state", "atomic".
-
software-mansion Bundle Build Compilation DependenciesBuild system overview for react-native-audio-api across all platforms — CMakeLists.txt, android/build.gradle, RNAudioAPI.podspec, prebuilt external libraries, and the standalone C++ test build. Use this skill when adding a new source file, modifying CMakeLists or podspec, debugging compilation errors, integrating a new dependency, or understanding why includes work differently in tests vs the app. Trigger phrases: "add source file", "CMakeLists", "podspec", "build.gradle", "prebuilt binaries", "FFmpeg disabled", "pod install", "new architecture", "compile error", "undefined symbol", "SIMD", "worklets build flag", "C++ tests", "conditional compilation", "include path", "gradle build fails", "link error".
-
sshtomar Bundle VisualizationPublication-quality statistical visualization with mandatory best practices. Use when creating plots, charts, figures, or any data visualization. Enforces accessibility, uncertainty display, proper labeling, and statistical accuracy.
-
starkware-libs Skill Air Constraint EngineeringDefines how to audit and modify AIR constraints in STWO. Covers Flat AIR model, constraint degree bounds, EvalAtRow trait, LogUp interactions, constraint debugging, and soundness criteria. Use when working on constraint definitions, the constraint framework, logup interactions, or any component's constraints.
-
stevenfackley Skill Accessibility 508Use when building or reviewing any user-facing UI (SwiftUI or MAUI) that must meet Section 508 / WCAG 2.1 AA — a legal mandate for federal/defense software. Covers names, roles, values, Dynamic Type, contrast, focus, touch targets, and the platform-specific screen-reader traps weak models get wrong.
-
stevenfackley Skill Distinctive UI DesignUse when building ANY UI — a page, component, or app. Forces a bold, intentional aesthetic direction and bans the generic "AI slop" look (Inter + purple-gradient-on-white + centered hero + equal cards). Constrained models default hard to that mean; this makes them choose.
-
strongeron Bundle Sb ShipGraduate ONE Explore experiment to a production component — preserve the experiment (cp, never git mv), pick new-vs-update, close the decision loop. Use for 'ship this', 'promote this experiment', 'graduate to production'.
-
slidespeak Bundle Slide Design SkillDesign and generate polished, on-brand presentation decks as clean 1920×1080 HTML — with real charts, tables, and AI or stock imagery. Use whenever someone wants to create, design, or improve a presentation, slide deck, pitch deck, investor or sales deck, keynote, training or teaching deck, PowerPoint (PPTX), Google Slides, or a data-heavy report, and cares about design quality. The visual style is derived from the brief, never picked from a theme or template menu.
-
starr-del Bundle Cors AuditorAudit CORS configuration in Express, Next.js, FastAPI, or Flask code for security misconfigurations. Use whenever the user mentions CORS errors, 'blocked by CORS policy', cross-origin issues, configures an API for a frontend, or asks why credentials/cookies aren't being sent cross-origin. Also run it before deploying any API. Runs fully offline — no API keys, no network, no credentials.
-
testbeagle Skill A11ysweepUse when asked to audit accessibility or UX polish of a locally runnable app — color contrast, tap-target size, ARIA/labels, keyboard navigation, locale parity, AI-generated UI slop. Triggers on "접근성 점검", "a11y audit", "UX 점검", "대비/탭타깃 확인".
-
univerlab Bundle Architect MindsetUse this skill when designing systems rather than implementing them: choosing boundaries and contracts, comparing architecture options, planning multi-component work, decomposing a problem into independently verifiable parts, reviewing a design for failure modes, or writing specs and decision records that other agents (or cheaper models) will execute. It applies systemic thinking at the design level; for code-level structure use code-engineering instead.
-
vedkathe Bundle High Level Design DocGenerate a professional High-Level Design (HLD) document as a formatted Word (.docx) file — design principles, key design decisions and trade-offs, module-level design, major user journeys, non-functional requirements, performance considerations, and risks. Use this whenever someone asks for an "HLD," "high-level design document," "design rationale doc," or wants to document *why* a system was designed the way it was (as distinct from the structural component view, which lives in the companion architecture-document skill). Part of an enterprise handover documentation suite (see also: project-overview-doc, architecture-document, operations-deployment-guide, support-runbook, api-documentation, database-design, release-maintenance-guide) but fully usable standalone.
-
wang-cankun Bundle Travel Dossier从旅行社行程 PDF + 机票酒店票据生成 A5 手机优先的自足旅行手册(瑞士极简 HTML→PDF)。手动调用:/travel-dossier <行程资料目录>
-
aa-on-ai Skill UX Baseline CheckCore pack — always active for visual work. Enforces UX quality standards on any screen, flow, form, or dashboard. Ensures nothing ships with missing states. Auto-activates alongside design-review for all frontend work.
Audited
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 repo-website-integration-guide-create, github-goal-issue-triage, audio-nodes. 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.