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.
-
kaustubhhiware Bundle Design Taste FrontendSenior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
-
madebyecho Bundle Swift AccessibilityAutomatically applies accessibility best practices to Swift projects (SwiftUI and UIKit). Use when working on iOS/macOS projects that need VoiceOver support, Dynamic Type, WCAG compliance, or accessibility audits. Triggers on Swift accessibility tasks, a11y improvements, or when the user mentions accessibility, VoiceOver, or Dynamic Type.
-
madebyecho Bundle React Native AnimationsEncodes motion design and animation engineering philosophy for React Native apps using Reanimated, Gesture Handler, and Skia. Use when building or reviewing mobile animations, gestures, transitions, or interactive UI polish. Triggers on animation tasks, micro-interactions, gesture handling, or when the user mentions Reanimated, worklets, shared values, Skia, or mobile motion.
-
madebyecho Bundle React Native Skia ShadersComprehensive SKSL (Skia Shading Language) shader techniques for react-native-skia — ray marching, SDF modeling, procedural noise, lighting, post-processing, image filters, BackdropFilter, child shaders, gesture- and Reanimated-driven uniforms. Triggers on tasks involving Shader, RuntimeEffect, SKSL, custom visual effects, animated backgrounds, image distortion, blur, glow, glass / liquid effects, or any request to "write a shader" in a React Native or Expo app using @shopify/react-native-skia.
-
madebyecho Bundle React Native AccessibilityAutomatically applies accessibility best practices to React Native and Expo projects. Use when working on mobile apps that need VoiceOver (iOS) or TalkBack (Android) support, WCAG compliance, or accessibility audits. Triggers on React Native accessibility tasks, a11y improvements, or when the user mentions accessibility, VoiceOver, TalkBack, or screen reader support.
-
mart337i Bundle Odoo OwlOdoo OWL frontend engineering guidance covering components, templates, reactivity, hooks, props, plugins, registries, debugging, assets, and OWL 1/2/3 migration. Use when working with Odoo frontend components, @odoo/owl, static/src JavaScript/XML templates, signals, proxy, props, t-on, t-ref, t-model, registries, plugins, or OWL migrations.
-
mart337i Skill Odoo Grill MeOdoo-specific grilling session that stress-tests addon plans, migrations, model/view/security designs, OWL frontend changes, and verification strategy. Use when the user wants to be grilled on an Odoo plan/design, asks to stress-test an addon architecture, or mentions grill me in an Odoo context.
-
mrzhuo2022 Bundle Web Stack AnalyzerAnalyze and detect the web technology stack of a URL or website. Use when the user asks what technologies a site uses, wants frontend/backend/CMS/CDN/SaaS/security fingerprinting, asks for evidence-based stack detection, or wants to learn practical passive web fingerprinting techniques.
-
hmzainjamil Skill Framer Motion BuilderFramer Motion animation library — fade, scale, stagger, scroll-reveal, page transitions. Used in website-builder Actor 4 for production-quality React animations.
-
longzhi Skill Web FetchFetch and extract content from web URLs. Use when you need to: (1) Read a web page's content, (2) Download text from a URL, (3) Extract article text from a news site, (4) Get raw HTML or plain text from any URL. Uses curl via execute_command. For JavaScript-heavy sites or anti-bot protected pages, use the actionbook skill instead.
-
rycen7822 Skill DoclingConvert PDFs, Office documents, HTML pages, Markdown files, images, and scanned documents into structured Markdown or JSON.
-
bit-labs-cn Skill Create Owl Backend ModuleScaffolds high-quality owl SubApp backends with per-resource model/repository/service/handle layers, typed DTOs, validators, redis locks on writes, and errContract business errors. Supports monorepos where frontend lives under frontend/ and Go app/ is at repo root. Use when creating a new Go sub-application, adding owl HTTP APIs, or implementing backend features; do not use for quick throwaway prototypes that collapse multiple domains into one gateway.
-
bit-labs-cn Skill Create Owl Frontend Module使用 Vue3 (owl-ui/owl-admin-ui) 创建新的前端子系统或页面;支持独立前端包与业务仓库内 `frontend/<子应用>/` 一体化布局。当用户要求创建新的前端子应用、在管理前端添加模块、编写 Vue 页面或实现前端功能时使用。
-
rycen7822 Skill Structured Artifact InspectionCodex plugin skill for inspecting structured artifacts, generated reports, JSON/HTML outputs, and viewer-backed evidence without losing provenance.
-
vijayjoshi24 Skill C4 DiagramGenerate C4 model architecture diagrams — Context, Container, Component — as interactive rendered SVG visuals. Activate whenever someone wants to diagram, visualise, or document a system's architecture, including: "draw a C4 diagram", "show me the architecture of", "create a context diagram", "container diagram for", "visualise how this system works", "map out the services", "architecture diagram", or when a user describes a system and asks how it fits together. Also activates when /design is invoked, or when a user pastes a system description and asks for an architecture view — even without mentioning C4 or diagrams explicitly.
-
santosomar Bundle Attack Mob T1516 Input InjectionAnalyze MITRE ATT&CK T1516 Input Injection in the mobile matrix. Use for TTP triage, detection engineering, hunting, defensive emulation planning, mitigations, incident response mapping, ATT&CK coverage, or questions mentioning T1516, Input Injection, or mobile ATT&CK. A malicious application can inject input to the user interface to mimic user interaction through the abuse of Android's accessibility APIs.
-
santosomar Bundle Attack Ent T1027 006 HTML SmugglingAnalyze MITRE ATT&CK T1027.006 HTML Smuggling in the enterprise matrix. Use for TTP triage, detection engineering, hunting, defensive emulation planning, mitigations, incident response mapping, ATT&CK coverage, or questions mentioning T1027.006, HTML Smuggling, or enterprise ATT&CK. Adversaries may smuggle data and files past content filters by hiding malicious payloads inside of seemingly benign HTML files.
-
santosomar Bundle Attack Ent T1542 002 Component FirmwareAnalyze MITRE ATT&CK T1542.002 Component Firmware in the enterprise matrix. Use for TTP triage, detection engineering, hunting, defensive emulation planning, mitigations, incident response mapping, ATT&CK coverage, or questions mentioning T1542.002, Component Firmware, or enterprise ATT&CK. Adversaries may modify component firmware to persist on systems.
-
santosomar Bundle Attack Ent T1546 008 Accessibility FeaturesAnalyze MITRE ATT&CK T1546.008 Accessibility Features in the enterprise matrix. Use for TTP triage, detection engineering, hunting, defensive emulation planning, mitigations, incident response mapping, ATT&CK coverage, or questions mentioning T1546.008, Accessibility Features, or enterprise ATT&CK. Adversaries may establish persistence and/or elevate privileges by executing malicious content triggered by accessibility features.
-
santosomar Bundle Attack Ent T1559 001 Component Object ModelAnalyze MITRE ATT&CK T1559.001 Component Object Model in the enterprise matrix. Use for TTP triage, detection engineering, hunting, defensive emulation planning, mitigations, incident response mapping, ATT&CK coverage, or questions mentioning T1559.001, Component Object Model, or enterprise ATT&CK. Adversaries may use the Windows Component Object Model (COM) for local code execution.
-
santosomar Bundle Attack Ent T1505 Server Software ComponentAnalyze MITRE ATT&CK T1505 Server Software Component in the enterprise matrix. Use for TTP triage, detection engineering, hunting, defensive emulation planning, mitigations, incident response mapping, ATT&CK coverage, or questions mentioning T1505, Server Software Component, or enterprise ATT&CK. Adversaries may abuse legitimate extensible development features of servers to establish persistent access to systems.
-
santosomar Bundle Attack Mob T1453 Abuse Accessibility FeaturesAnalyze MITRE ATT&CK T1453 Abuse Accessibility Features in the mobile matrix. Use for TTP triage, detection engineering, hunting, defensive emulation planning, mitigations, incident response mapping, ATT&CK coverage, or questions mentioning T1453, Abuse Accessibility Features, or mobile ATT&CK. Adversaries may abuse accessibility features in Android devices to steal sensitive data and to spread malware to other devices.
-
artemgurzhii Skill Ember TestingTesting Ember apps — QUnit + @ember/test-helpers, the unit/integration/application split, ember-test-selectors, ember-cli-page-object, ember-cli-mirage, accessibility checks, and async settledness. Use when writing or fixing tests, designing a test strategy, or debugging flaky/non-settled tests.
-
artemgurzhii Skill Ember Services And StateDesigning Ember services for app-wide state and side-effects, deriving state with @cached, and choosing between component state, service state, route models, and ember-data. Use when deciding "where should this state live?" or when extracting logic out of a fat component or controller.
-
b-holanda Skill Innovation ResearchConsolidate innovation research into evidence-based product and brand inputs for software projects. Use when Codex needs to organize raw notes, interviews, documents, market observations, user problems, solution hypotheses, differentiation, risks, validation gaps, and strategic briefs that will feed branding, style guides, frontend presentation layers, product pages, pitch material, or UX direction for any software product.
-
santosomar Bundle Attack Ent T1546 015 Component Object Model HijackingAnalyze MITRE ATT&CK T1546.015 Component Object Model Hijacking in the enterprise matrix. Use for TTP triage, detection engineering, hunting, defensive emulation planning, mitigations, incident response mapping, ATT&CK coverage, or questions mentioning T1546.015, Component Object Model Hijacking, or enterprise ATT&CK. Adversaries may establish persistence by executing malicious content triggered by hijacked references to Component Object Model (COM) objects.
-
artemgurzhii Skill Ember Typescript And GlintTypeScript in Ember — service Registry augmentation, model registry, component signatures, and Glint for type-checked templates (loose mode for .hbs and template-imports mode for .gjs/.gts). Use when adding TS to an Ember app, when fixing service injection types, or when getting "unknown property on this" Glint errors.
-
artemgurzhii Skill Ember 3 Mixed Classic OctaneReading and maintaining Ember 3.x apps where classic and Octane patterns coexist — half the components are Ember.Component.extend, the other half are @glimmer/component, and tests run on both APIs. Use when triaging "why does this file look different from that file," when reviewing a partial-migration PR, or when planning the order of further conversion.
-
artemgurzhii Skill Ember Components And TemplatesAuthoring Glimmer components and Handlebars templates in modern Ember — args, blocks, yield, helpers, modifiers, splattributes, contextual components. Use when creating, refactoring, or reviewing any Ember component or template.
-
leonardhope Bundle Patent Landscape ReportGenerate a decision-grade patent landscape report as a self-contained interactive HTML file. The report contains a plain-language overview, top-applicant leaderboard, world map + country ranking, filing trends over time, technology-area breakdown (plain-English CPC translations), notable patents list, and a methodology & caveats section. Every number in the report carries provenance — the reader clicks any metric to see the exact patents that contributed to it. Use this skill when the user wants to: - Build a patent landscape report on a technology area (e.g. "last 12 months of AI patents", "solid-state battery separators landscape", "who's filing in quantum computing") - Produce a deliverable they can email to a non-patent-fluent reader (VC, executive, client) who needs to answer invest/don't-invest questions - Turn a pre-collected Lens.org CSV export into the same standardized report format - Refresh a previous landscape snapshot against the latest Google Patents data Do NOT use this skill for: - Looking up
-
santosomar Bundle Attack Ent T1021 003 Distributed Component Object ModelAnalyze MITRE ATT&CK T1021.003 Distributed Component Object Model in the enterprise matrix. Use for TTP triage, detection engineering, hunting, defensive emulation planning, mitigations, incident response mapping, ATT&CK coverage, or questions mentioning T1021.003, Distributed Component Object Model, or enterprise ATT&CK. Adversaries may use [Valid Accounts](https://attack.mitre.org/techniques/T1078) to interact with remote machines by taking advantage of Distributed Component Object Model (DCOM).
-
testonohm Skill Frontend UI EngineeringBuilds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components, implementing layouts, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
-
testonohm Skill API And Interface DesignGuides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
-
chen3feng Skill Safe Markdown Auto FixAuto-fix Markdown prose without corrupting code blocks, inline code, URLs, or HTML.
-
zhenyuanpan822 Skill Rcl ScoreConvert a two-person chat history into a relationship K-line chart. When invoked, walk the user through providing a chat file, run the local preprocessing pipeline, score every "turn" (consecutive same-sender block) with v3.1 semantic deltas, expand back to message-level scored.jsonl, and hand off to the local web frontend for visualization.
-
evaluris-solutions Bundle Hedera Dapp ScaffoldScaffold Hedera dApps — Vite/React layout, MetaMask via Hashio JSON-RPC (EVM), HashConnect for native Hedera wallets, Mirror Node REST queries, transaction receipt confirmation patterns, Hedera-specific error handling. Use when user mentions HashConnect, MetaMask Hedera testnet, build dApp Hedera, frontend mirror node, wallet connect Hedera, PRECHECK_FAILED, INVALID_PAYER_SIGNATURE.
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 design-taste-frontend, swift-accessibility, react-native-animations. 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.