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.
-
jaygptpro Skill Amazon Landing PageBuild a premium landing page from any Amazon product URL. Extracts real product data (title, images, features, reviews, price) via Chrome MCP and generates a complete, beautiful landing page with scroll animations, real reviews, FAQ, email capture, and mobile-optimized CTA. Use when the user says "build a landing page", "create a product page", "amazon landing page", or provides an Amazon product URL.
-
jeevanbavandla Bundle Instagram CarouselDesign Instagram carousel posts as self-contained HTML files in the user's own brand. Runs a one-time brand setup on first use (name, handle, subtitle, photo, accent color, style preference). 4 design styles: Bold Impact (dark premium), Tweet Post (minimal text), Clean Editorial (light/white), Product Showcase (soft gradient). Fixed 420x525px slides, Poppins font, progress bar, arrow indicators, white CTA slide, PNG + PDF export. Triggers: instagram carousel, carousel design, ig carousel, create carousel, design carousel, carousel post, make a carousel, instagram post design, carousel html, slide deck for instagram, visual carousel
-
jihonghe68 Bundle Skill CreatorGuided workflow for creating new Claude Code Skills. Works in any project, with or without a launcher.html / clients/ directory. Triggers on: 新建skill, 创建skill, create skill, add skill, 创建技能, 新技能, build a new skill, 做一个新skill, 新增skill, skill创建. Always read this file completely before starting — do not improvise the creation process.
-
jimliu Bundle Codex App Ref RefreshRefresh the local ChatGPT app reference source from the installed macOS ChatGPT.app asar. Use when Codex needs to get the latest installed ChatGPT app code, recreate ./ref from /Applications/ChatGPT.app/Contents/Resources/app.asar, or format extracted JavaScript and CSS while excluding ref/node_modules.
23.1k -
jimliu Bundle Deobfuscate JavascriptReverse-engineer minified, obfuscated, packed, or bundled JavaScript into readable or typed TS/TSX, including Codex.app `./ref/webview/assets` restoration. Use for .min.js, dist bundles, Vite/Rollup/Webpack chunks, obfuscated snippets, or requests to humanify, deobfuscate, deminify, unpack, decode, make readable, rename variables, reverse engineer, 完整还原, 深度还原, 反混淆, 美化代码, 看懂这段 JS, 重命名变量, 反编译. Whole-tree restores (index.html + assets, "restore the code/whole tree") default to deep: deobfuscate if needed, smart-rename, polish, resolve npm imports, typed semantic TSX rewrite, acceptance review, import graph/ledger, and full-target quality gate draining every reachable project-local chunk. Quick/readable/快速 or lone snippets use readable naming-quality restore. Vendor data/packages become npm leaves or re-export shims, not restored package bodies.
23.1k -
joohw Bundle Html2linkPublish and manage browser-viewable artifacts with html2link. Use when a user asks an agent to deploy, publish, host, share, update, replace, or delete generated HTML, a static website ZIP, PDF, Markdown, spreadsheet, DOCX, or PPTX as a public link.
-
joohw Bundle Html2link PublishPublish generated artifacts to html2link.dev and return short shareable URLs. Use when Codex or another agent creates an HTML file, static site ZIP, PDF, Markdown document, spreadsheet, DOCX, or PPTX and needs to give the user a browser-friendly link instead of only a local file path or attachment.
-
joyhpc Bundle Pin Assign WorkbenchUse only when the user requests a deliverable-grade pin/net assignment artifact in Excel/CSV form for OrCAD Capture, Cadence Capture CIS, or Allegro DE-HDL schematic drawing, including FPGA/SoC-to-memory or peripheral pin assignment workbooks, package ballout to schematic-symbol-order mapping tables, off-page connector lists for batch paste, and pin assignment audits against vendor official sources. Triggers include: pin assign 工作簿, 引脚分配表, 原理图顺序网名表, OrCAD off-page connector 表, 封装 ballout 映射, 管脚映射审核, schematic-order pin/net workbook, ballout-to-symbol mapping. Do NOT use for casual pin lookups, single datasheet questions, component or package selection, layout/SI/PI advice, FPGA toolchain constraint files such as QSF/XDC/LPF/SDC unless the user also asks for the Excel review surface, or requests without a concrete pin/net deliverable.
-
joyhpc Bundle Critical Component SelectionUse this skill for freeze-grade hardware component decisions that need evidence reconciliation before a choice can be locked into schematic, BOM, pin assignment, layout, sourcing, or validation work. Trigger on critical component selection, BOM freeze review, EOL/PCN or supplier substitute decisions, candidate part-number decisions, shortlist review, vendor feedback against a requirement baseline, selection evidence map, procurement brief, supplier/FAE inquiry, leadership brief, 关键物料选型, BOM 冻结前评审, 选型证据地图, 选型报告, 沟通报告, or 候选料号决策. Common critical conditions include lifecycle/EOL/PCN/lead-time risk, toolchain verification such as EMIF/fitter/SI/PI/thermal, pinout/power/SI/thermal architecture impact, and vendor evidence that must be reconciled against requirements. Do NOT use for casual comparisons, learning questions, architecture sketches, or selections that do not require evidence reconciliation and freeze conditions.
-
jrollin Bundle CartogCode graph navigation, semantic code search, and impact analysis. Use when the user asks "where is X defined?", "what calls X?", "who imports X?", "what depends on X?", "how is X used?", "where is X called from?", "what breaks if I change X?", "is it safe to change/delete X?", "help me refactor X", "show me the call graph", "trace the execution flow", "find all usages of X", "find code related to...", "show me how X works", "show me the X implementation", "show file structure", "list all functions/classes in a file", "show the inheritance tree", "show class hierarchy", or needs to navigate code, locate definitions, search code by concept or behavior, trace dependencies, assess blast radius of changes, explore how a feature is implemented, support refactoring (rename, extract, move, delete), or explore an unfamiliar codebase. Supports Python, TypeScript/JavaScript, Rust, Go, Ruby, Java, C, C++, C#, PHP, Dart, Swift, Kotlin, Vue, Svelte, Astro, and Markdown documents, plus React/JSX and Vue/Svelte/Astro compone
-
feigecode Bundle Gpui KitHow to build desktop applications with GPUI Kit, the Rust framework published as the gpui-kit crate (GPUI plus gpui_kit::component, gpui_kit::base, gpui_kit::assets). Use when setting up a gpui-kit app, choosing or using a component (Button, Input, Select, Dialog, Sheet, Tabs, Sidebar, List, DataTable, Tree, Chart, etc.), handling component state, theming, or window overlays, and for GPUI mechanics: actions and keybindings, async tasks, contexts, custom elements, entities, events, focus, global state, layout and styling, ElementId, and tests including UI integration testing. Holds the normative Coding Guides: read them before any architecture, state-ownership, public API, naming, or testing decision. Pairs with the gpui-kit-design-guides skill for the Design Guides.
-
feigecode Bundle Gpui Kit Design GuidesThe normative Design Guides for GPUI Kit desktop applications. Read in full before designing or changing any screen, layout, spacing, visual hierarchy, color, density, component choice, interaction state, overlay, motion, data-heavy view, or interface copy in a GPUI Kit (gpui-kit / gpui-component) application, and before reviewing UI work for design quality. Also use when asked what the design rules are, or whether a UI decision follows them.
-
felinics Bundle WebPrimary Web development skill for apps/web — white-floating-card design language, disciplined @felinic/ui usage, deliberate copy, honest empty states, aligned controls, and restrained motion. Never hand-write controls or menus; never leave stray fragments (orphan status labels, misaligned save hints). Compose from @felinic/ui primitives and reuse existing save/feedback patterns from reference pages. Use for any apps/web UI work — new pages, settings/list/detail surfaces, chat components, polish passes — not only legacy page migrations. Read this skill before writing or changing Web frontend code.
-
felinics Skill UI OwnersRead this BEFORE writing or editing any apps/web settings page, bot-detail tab, dialog/popover/sheet form, config panel, list row, or detail surface — i.e. almost any Vue markup that is not pure chat — and BEFORE adding or editing the chat composer dock (composer-dock / composer-panel / composer-capsule and their approval, command-result, error, and ask_user members), which is chat but still owned here. The host app has a core owner vocabulary (SettingsRow, SettingsSection, FieldStack, PageShell, MetricReadout, PersonaTile, CalloutBanner, ExpandableSettingsRow, BackendCard, ModelListRow, FormStack, PanePlaceholder, InlineLoadingRow, ConfirmDeleteDialog, SectionGroup) that owns all recurring spacing. Use this skill whenever you are about to build a settings row, a form field (label + input), a section card, a Save/Cancel footer, a stat tile, a warning banner, an "Advanced" disclosure, an empty state, a loading state, a delete confirm, or a whole page frame — even if the user just says "add a settings page", "m
-
flexprice Bundle DocsGenerate weekly changelog entries for Flexprice in the exact Mintlify MDX format used at docs.flexprice.io/docs/changelog. Use this skill whenever the user asks to write a changelog, create release notes, document what shipped this week, update the changelog, or prepare a weekly release entry. Trigger when the user mentions "changelog", "release notes", "what shipped", "weekly release", "shipped this week", "new release", "add changelog", "write changelog", "april changelog", "march changelog", or any month + "changelog". Trigger when the user wants to summarize recent PRs/commits into a changelog entry. Trigger even if the user just says something casual like "let's do the changelog", "time for release notes", or "do the docs". This skill knows the exact Mintlify MDX format, component syntax, editorial conventions, repo locations, and git commands needed to produce and directly write the changelog to the correct file.
-
flornkm Bundle Webgl ComponentsBuild small, always-on WebGL visuals (identity avatars, ambient orbs, glass and iridescent surfaces, animated textures) that ship inside a normal web app UI without wrecking performance, accessibility, SSR, or layout. Use whenever a shader-, GLSL-, or canvas-driven decorative element is added to a product UI, especially one rendered many times per page or per list; when reviewing or optimizing one; or when debugging one that renders blurry, aliased, all-black, or paints over the surrounding UI on machines without hardware acceleration.
-
flornkm Skill Prefer Container QueriesEnforce Tailwind container queries over viewport breakpoints for responsive components. Use when writing or reviewing responsive Tailwind code, when a component needs to adapt to its available space (cards, sidebars, lists, panels, anything reused in different layouts), or when migrating sm:/md:/lg: classes to @container variants.
-
flynncao Bundle Add Frontend NotificationIntegrate the bundled Butterup toast notification library into frontend or fullstack projects and replace clearly equivalent non-blocking alerts or hand-built notification UI. Use when the user asks to add Butterup, add toaster notifications, replace simple success/error/info alerts with toasts, or wire notification feedback into Vanilla JavaScript, Vite, Webpack, Rollup, React, Vue, Next.js, or similar browser-facing code. Ask which user actions need notifications when the target scenario is not explicit; if it remains unclear, provide an integration guide and code snippets without modifying application code.
-
formatjs Bundle Localization ReviewReview localized UI, translations, message catalogs, and pull requests for ICU syntax, placeholder integrity, glossary compliance, locale-aware formatting, accessibility, and translation readiness. Use for explicit localization reviews or changed user-facing text; report evidence-backed findings without modifying files or external systems.
-
foxian Bundle Markdown MasterMarkdown 文档全能处理工具。当用户需要对 Markdown 文档进行以下操作时,务必使用此技能: - 调整标题层级(升级/降级)、添加章节编号(支持灵活配置每级格式)、生成/更新目录 - 格式规范检查(lint):检查标题层级跳跃、缺少 H1、连续空行过多、代码块未指定语言等,支持自动修复 - 中文排版检查(zhlint):中文与英文/数字间缺空格、中文语境使用半角标点等,支持自动修复 - 链接/图片死链检查(支持检查本地文件和远程 HTTP 链接) - 格式转换:Markdown 转 DOCX/HTML/TXT/PDF(支持批量转换目录下所有文件) - 文件操作:按标题级别拆分文档、合并多个 Markdown 文件 即使没有明确提到"markdown-master",只要是 Markdown 相关的结构化编辑、质检、转换需求,都应该使用此技能。
-
frahman5 Bundle Warmup InfrastructureEnd-to-end setup guide for the TikTok account warmup monitoring stack — Supabase action logging, remote Claude cron job, Telegram/Slack alerting, and a Next.js admin health dashboard. Load this skill when setting up this infrastructure in a new repo.
-
fugazi Skill Webapp Selenium TestingToolkit for interacting with and testing local web applications using Selenium WebDriver and Java. Supports verifying frontend functionality, managing synchronization with explicit waits, and viewing browser and page source for analyzing logs.
-
fugazi Skill Accessibility Selenium TestingToolkit for validating Web Content Accessibility Guidelines (WCAG) compliance using Selenium WebDriver (Java) and the Axe Core engine. Supports full-page analysis, component-specific scanning, and rule filtering.
-
full-stack-skills Bundle Uview Vue2Provides comprehensive guidance for uView Vue 2 component library including components, tools, and layouts. Use when the user asks about uView for Vue 2, needs to build Vue 2 applications with uView, or use uView components.
-
full-stack-skills Bundle Uview Pro Vue3Provides comprehensive guidance for uView Pro Vue 3 component library including components, tools, layouts, and templates. Use when the user asks about uView Pro, needs to build Vue 3 applications with uView Pro, or implement mobile-first UI components.
-
future-agi Bundle Writing E2e FlowsUse when a feature or fix in future-agi needs an end-to-end Playwright flow under e2e/ — a new flow for user-visible behaviour, an update to a flow whose pinned endpoint, route, table or selector changed, or when a review flagged missing E2E coverage. Also use to check whether an existing flow already pins an endpoint, route, table or selector you changed, and for 'how do I test this end to end' questions about the FutureAGI product. Not for frontend unit tests, backend pytest, the API-journey scripts, for running, operating, debugging or explaining the e2e stack and its harness scripts themselves — ports, compose profile, start-up time — or for the review-time verdict on whether a change needs a flow, which is the reviewing-prs coverage gate.
-
gear-null Bundle Rules ReportAnswer a Riftbound rules question as a verified, citation-checked interactive HTML report — either a RULING that settles a disputed situation ("does X still happen if Y", "can I respond to Z", deck/sideboard legality, how much does this cost) or a PRIMER that explains how a mechanic or procedure works ("explain the HOT FEPR loop", "how do Showdowns work", "walk me through combat"). Use whenever the user asks about a Riftbound rule, card interaction, keyword, turn structure, or tournament procedure. Also use when asked to re-verify a saved report after a rules update.
-
getludic Skill Ludic WebBuild web apps with Ludic's web integration — Starlette-based LudicApp, typed Endpoint classes, and the FastAPI / Django integrations. Use this skill whenever the user is wiring Ludic components into HTTP handlers: routing requests with LudicApp, declaring async endpoints that return components, subclassing ludic.web.endpoints.Endpoint, parsing form data or query params, returning htmx partials, handling redirects, mounting Ludic inside an existing FastAPI or Django app, or generating URLs from a request (request.url_for / request.url_path_for). Always trigger this skill on any code that generates absolute URLs from request data — there is a host header poisoning class of vulnerability that affects every Ludic web app and needs explicit guarding. Also trigger on questions about LudicRequest, LudicResponse, the Starlette/FastAPI/Django bridge, or htmx response patterns (HX-Trigger, HX-Redirect, HX-Push-Url headers). For pure component authoring without an HTTP layer, use the companion `ludic-components` skill.
-
getludic Skill Ludic ComponentsBuild typed, React-like HTML components in Python with Ludic — uses PEP 750 t-strings (Python 3.14+) and pairs with htmx. Use this skill whenever the user is writing or modifying Ludic component code: subclassing Component or ComponentStrict, declaring Attrs TypedDicts, composing HTML elements from ludic.html (div, a, html, head, body, table, form, ...), mixing markup with interpolation via t"...", reaching for catalog widgets (Table, PageLayout, Form, Button, Navigation), wiring htmx attributes (hx_get, hx_post, hx_target, hx_swap) on elements, defining Themes or CSS styles on components, or anything involving the trusted-vs-untrusted (Safe) content boundary. Also trigger on questions about why mypy is flagging a component's children/attrs. Prefer this skill even when the user does not explicitly say "Ludic" — the import `from ludic ...` or any usage of t-strings to build HTML is a strong signal. For building endpoints, request handling, FastAPI/Django integration, or URL generation, use the companion `ludic
-
misonl Skill I18N TranslateComplete and maintain frontend i18n translations for this project. Covers finding missing translation keys, detecting untranslated entries, and adding translations for all supported locales (en, zh, fr, ja, ru, vi). Use when the user asks to add translations, fix i18n, complete missing translations, or when new UI text needs to be internationalized.
-
moinsen-dev Bundle Project Forge ReviewPerform an independent adversarial review of an integrated game or software project using reproducible runtime, visual, interaction, accessibility, determinism, and performance evidence. Use after a Project Forge slice enters review, before accepting a baseline, or when a project looks complete but its quality claims have not been independently verified.
-
moorcheh-ai Bundle Moorcheh CookbooksUse this skill when the user wants to build AI applications with Moorcheh. Contains blueprints and implementation guides for knowledge base RAG, customer support chatbots, semantic search applications, AI Q&A systems, llm-wiki, knowledge base, personal wiki, karpathy, and optional frontend integration. Each cookbook includes architecture, code examples, setup instructions, and deployment guidance.
-
msrbuilds Bundle Wp Plugin ReviewComprehensive WordPress plugin review covering security vulnerabilities, WordPress Coding Standards (WPCS) compliance, plugin repository guidelines, unit test coverage, and accessibility. Runs automated tools (PHPCS with WPCS, PHPStan, PHPUnit) plus deep manual code review. Outputs a detailed Markdown review report with issues, severity ratings, and actionable fixes. Use this skill whenever the user asks to "review a plugin", "audit a WordPress plugin", "check plugin security", "check plugin for repository submission", "review plugin code", "plugin code review", "check my plugin", or any request involving evaluating a WordPress plugin's code quality, security posture, or repository readiness. Also trigger when a user uploads a plugin zip or folder and asks for feedback, analysis, or a review.
-
mumudevx Bundle Remotion Best PracticesBest practices for Remotion - Video creation in React
-
mumudevx Bundle React Native ExpoExpert React Native development with Expo Router, NativeWind v4, and React Native Reusables (shadcn/ui for RN). Use when building mobile apps, screens, components, or navigation with this stack.
-
mx-space Skill Mx Admin UI PrimitivesUse when building any UI in mx-admin-next — composing pages, drawers, modals, forms, scroll containers, or any view-level interaction. Establishes the canonical primitive set, the css.ts + token rules, the mandatory `<Scroll>` rule for user-scrollable regions, and the `@tanstack/react-form + zod + Form/FormField` form pattern. Read before writing JSX in `src/pages`, `src/layouts`, or `src/components` outside the primitives layer.
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 amazon-landing-page, instagram-carousel, skill-creator. 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.