13,867 tagged Frontend, measured the same way as everything else here.
Browse within: skills 120agent 118agentic-ai 98LLM 96javascript 95nextjs 85cursor 73design-system 62copilot 57agents 54cli 52agentic 48open-source 47claude-code-plugin 45
Xialiang98/design-visual-frontend
Skill Claude CodeCodex
Design, build, redesign, or critically review distinctive frontend interfaces with strong composition, domain authenticity, responsive behavior, component coherence, and browser-verified visual quality. Use for websites, landing pages, login and form flows, dashboards, admin tools, product pages, portfolios, visual UI…
s1gmamale1/apple-design-skills
Skill Claude CodeCodex
Use when building an apple.com-style marketing/product page — the landing-page formula (sticky translucent nav, product-as-hero, full-bleed feature sections, bento grids, fat footer), scroll-driven storytelling, plus the interaction inventory that makes a flagship page feel ALIVE (continuous damped scroll-progress…
DevMartinese/awwwards-animations-skill
Skill Claude CodeCodex
Professional React animation skill for creating Awwwards/FWA-level animations using GSAP (useGSAP), Motion (Framer Motion), Anime.js, and Lenis. Use when building premium scroll experiences, custom cursors, page transitions, text animations, parallax effects, micro-interactions, or any animation that needs to be 60fps…
Skill Claude CodeCodex
Interactive component wizard with step-by-step guidance and enforced quality gates.
Skill Claude CodeCodex
Use when designing, reviewing, refactoring, or enforcing Angular application architecture with isolated lazy features, eager core/layout, reusable ui/pattern architecture building blocks, one-way dependency graphs, eslint-plugin-boundaries rules, or folder placement decisions. This skill takes precedence over…
Skill Claude CodeCodex
Add CSS animations to HTML elements, React/JSX components, or WordPress PHP templates using Animate.css (v4.1.1). Use this skill whenever the user wants to animate UI elements, add entrance/exit effects, attention-seeker animations, or any CSS-based motion to their markup. Trigger on phrases like "add animation"…
doublesq97-ui/su-webstyle-top12
Skill Claude CodeCodex
Curated Top 12 overseas web styles with executable recipes: browse, choose, recommend, auto-select, and apply. Use for website visual direction, landing pages, style boards, artifacts (cards, dashboards, note readers, sticky-rail ops shells), and skinning existing layouts. Raises a minimum style floor (tokens…
Skill Claude CodeCodex
Skill for building with the Astro web framework. Helps create Astro components and pages, configure SSR adapters, set up content collections, deploy static sites, and manage project structure and CLI commands. Use when the user needs to work with Astro, mentions .astro files, asks about static site generation (SSG)…
Skill Claude CodeCodex
Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion.…
claudiocebpaz/vite-react-best-practices
Skill Claude CodeCodex
Comprehensive React and Vite SPA performance, architecture, and deployment guidelines. Use this skill when building, reviewing, or refactoring React applications built with Vite (SPA). Covers Vite-specific build configurations, static hosting requirements, and core React performance patterns.
alper-dev/build-for-good-ux-skill
Skill Claude CodeCodex
Use when building, reviewing, or improving user-facing UI, frontend components, pages, forms, flows, loading states, error handling, empty states, success feedback, graceful degradation, familiar layouts, or choice-heavy interfaces.
crafter-station/remotion-clone-video
Skill Claude CodeCodex
Pixel-perfect clone of any video (promo, product demo, motion-graphics piece, UI walkthrough) as a Remotion project, so the result is regenerable and editable as React code. Use when the user provides a video file and asks to clone, recreate, replicate, or rebuild it "as code", "with Remotion", or "pixel perfect".…
Skill Claude CodeCodex
Build Docyrus React TypeScript web applications end-to-end, combining authentication, API access, @docyrus/app-utils runtime helpers, @docyrus/devtools in-app debugging, generated collections, TanStack Query/Form patterns, and production-grade UI implementation with preferred component libraries. Use when creating or…
Skill Claude CodeCodex
Use this skill when building, debugging, or modifying Google Chrome extensions. Triggers on: any mention of 'Chrome extension', 'browser extension', 'manifest.json', 'content script', 'background script', 'service worker' (in extension context), 'popup.html', 'chrome.tabs', 'chrome.runtime', 'chrome.storage'…
Skill Claude CodeCodex
A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
Impertio-Studio/Three.js-Claude-Skill-Package
Skill Claude CodeCodex
Use when optimizing 3D models for web delivery: reducing file size, compressing meshes, optimizing textures, or generating LOD. Provides a complete GLTF optimization pipeline using Draco, KTX2, mesh simplification, and gltf-transform. Keywords: optimize model, reduce file size, Draco compression, KTX2, gltf-transform…
22duxiaoyu/replicate-webpage-skill
Skill Claude CodeCodex
A webpage-rebuilding workflow that recreates the visible layout, responsive behavior, and interactions of a reference URL in your codebase, then applies requested content or branding changes.
Skill Claude CodeCodex
Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user…
Skill Claude CodeCodex
SOTA animation and physics heuristic guide using motion.dev.
bartekmis/wordpress-performance-best-practices
Skill Claude CodeCodex
WordPress performance optimization guidelines for plugin, theme, and custom code development. This skill should be used when writing, reviewing, or refactoring WordPress PHP code to ensure optimal performance patterns. Triggers on tasks involving WPQuery, database queries, caching, hooks, REST API, or WordPress…
Skill Claude CodeCodex
A command-line guide for adding Shadcn-style interface components to Taro projects, which are apps built with the Taro framework. It covers setting up the project and generating components such as buttons and accordions.
AXIOTN/frontend-page-generator
Skill Claude CodeCodex
A front-end page generation skill for building web pages and applications with React, Vue 3, Next.js, Nuxt.js, or simpler HTML-based tools. It covers visual design, API connections, forms, animations, and icons.
taekchef/AionUI-CSS-Theme-Generator
Skill Claude CodeCodex
A skill for generating custom CSS themes for AionUI from a described visual style, such as cyberpunk, natural, or gothic.
Skill Claude CodeCodex
Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing.
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: