14,074 tagged Frontend, measured the same way as everything else here.
Browse within: skills 136agent 125agentic-ai 98javascript 95LLM 87nextjs 79agents 62design-system 62cli 55copilot 54agentic 49claude-code-plugin 44chatgpt 43open-source 43
Skill Claude CodeCodex
Generate and deploy production-grade websites from a natural language description. Use when asked to "vibe a site", "vibe code this", "build me a website and publish it", "create a landing page and deploy it", "make a portfolio site and put it online", "generate a site and ship it", or any request combining website…
Skill Claude CodeCodex
You are running the Performance category of a Ship Score production readiness audit. Follow every instruction below precisely. Do not add checks beyond the 7 defined here. Do not skip checks. Report exactly what you find.
XINGANLIU/design-system-generator-skill
Skill Claude Code
Generate a complete, production-ready design system from a single brand color. Outputs OKLCH color palettes, W3C Design Tokens (JSON), CSS custom properties, component styles (Button, Card, Input, Badge, Alert, Modal, etc.), and a live preview HTML page with Light/Dark theme toggle. Trigger this skill when the user…
Skill Claude CodeCodex
Plans, designs, builds, validates, and prepares polished responsive websites and lightweight web apps from brief through hosting handoff. Use when creating or redesigning a landing page, portfolio, editorial site, knowledge hub, directory, dashboard, portal, tracker, internal tool, microsite, or small web app…
pnaque/pnaque_codex-universal-design-skill
Skill Claude Code
High-fidelity HTML design and prototype creation for both Claude Code and OpenAI Codex. Use this skill whenever the user asks to design, prototype, mock up, or build visual artifacts in HTML — including slide decks, interactive prototypes, landing pages, UI mockups, animations, or any visual design work. Also use when…
skylarbarrera/react-devtools-mcp
Skill Claude CodeCodex
Debug React apps by inspecting runtime state, props, hooks, and renders.
Skill Claude CodeCodex
Convert a Figma design into a working React application using Salt Design System components. Use when the user provides a Figma screenshot, design description, or Figma file and wants it translated into Salt DS code.
Skill Claude CodeCodex
Visual click-to-edit workflow for Osprey/Kestrel. Use when Isaac asks to change, tweak, restyle, reposition, or critique anything visible on a page — also when he draws/annotates or says "this thing on the screen". Drives the headed-browser Designer MCP (designeropen, designerpick, designerscreenshot, designerclose)…
Skill Claude CodeCodex
Build, audit, or convert websites with the U.S. Web Design System (USWDS) using the unofficial uswds-mcp server. Use when work involves USWDS components, patterns, templates, accessibility guidance, design tokens, utilities, @uswds/uswds, or federal website implementation.
techniondigitalsolutions/odoo-mcp
Skill Codex
Design, inspect, implement, and safely modify Odoo website themes, pages, snippets, menus, QWeb views, assets, SCSS, and frontend JavaScript for Odoo 16, 17, 18, and 19. Use when creating an Odoo theme addon, changing website appearance or structure, debugging website editor behavior, or applying website changes…
Skill Claude CodeCodex
Build, edit and publish real websites with Kleap from inside this agent, via the Kleap MCP server. Use when the user wants to create a website or web app, change a site they made on Kleap, connect a domain, or take a site live — especially when they want it actually hosted and online, not just code. Kleap provides the…
davidbenge/adobe_extensibility_mcp
Skill Claude CodeCodex
Adobe App Builder frontend (Jamstack, React, Adobe React Spectrum) for all Adobe extension points: Unified Shell (dx/excshell/1), Workfront (workfront/ui/1), AEM (cf-console-admin, cf-editor, assets/details, assets/browse, assets/collections, cf-model-editor, experience-success-studio, contenthub, launchpad), Commerce…
Skill Claude CodeCodex
A self-contained frontend design, redesign, audit, implementation, anti-AI-slop, and rendered visual-QA skill for use directly inside a ChatGPT conversation or through a local MCP-accessible project.
rayven122/mcp-ie-migration-vrt
Skill Codex
Compare a legacy page rendered in Microsoft Edge IE mode with its migrated Chromium Edge page, diagnose visual differences, fix the migrated implementation, and repeat VRT. Use when working on IE-to-Edge migrations with the mcp-ie-migration-vrt MCP server, especially when both browser sessions must be operated into…
Skill Claude CodeCodex
Diagnose WebGL black or blank canvases: zero-sized canvas, lost context, missing draws, failed programs, incomplete FBOs, empty viewport/scissor, disabled color mask, or culled geometry. Use when the canvas stays black or empty despite an active WebGL app.
Skill Claude CodeCodex
Write and verify HTML email that renders correctly across email clients. Use whenever building, editing, or reviewing an HTML email, an email template, or a transactional message, and whenever a question involves Outlook, Gmail, Apple Mail, or "will this render in email". Covers what CSS and HTML each client supports…
Skill Claude CodeCodex
A Figma-to-code toolkit that reads design layers and turns them into code for React, Vue, Svelte, HTML, and other frameworks. Figma is a collaborative design application used to create interface layouts.
unco999/neon3-ai-authoring-mcp
Skill Claude CodeCodex
Author Neon3 NUI Flow V1 and Python/Node domain applications using the public neon3.rpc protocol.
Skill Claude Code
Convert AI-built frontend projects (HTML, React, Vite, Next, Lovable, v0, Cursor exports) into WordPress themes via WPConvert MCP tools. Use when the user asks to convert a site or codebase to WordPress, create a WordPress theme from a frontend repo, preview a theme in WordPress Playground, or check WPConvert…
alexalexalex222/frontend-design-loop-mcp
Skill Claude CodeCodex
Use Frontend Design Loop MCP when an interactive coding agent needs.
aditya-ariosity/wcag-accessibility-mcp
Skill Claude CodeCodex
Audit and correct accessibility problems in rendered web interfaces using the wcag-accessibility MCP tools. Use when an agent creates, changes, reviews, or verifies HTML/CSS/UI code; when asked about WCAG, contrast, labels, semantics, keyboard access, focus, screen readers, responsive accessibility, or accessibility…
Skill Claude CodeCodex
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…
Skill Claude CodeCodex
Build composable, responsive React charts with Recharts library. Use when creating data visualizations including line charts, area charts, bar charts, pie charts, scatter plots, and composed charts. Handles chart customization, responsive sizing, tooltips, legends, axes configuration, performance optimization, and…
Skill Claude CodeCodex
Use when a website needs a working contact, lead, or feedback form and the stack has no server to receive it — static sites and SSGs (Astro, Next.js, Nuxt, SvelteKit, Hugo, Eleventy, Jekyll), headless CMS frontends (Payload, Sanity, Strapi, Contentful, Storyblok, Prismic), static hosts (GitHub Pages, Cloudflare Pages…
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: