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
Use when writing, debugging, or reviewing shaders for the web — GLSL or WGSL, raw WebGL2/WebGPU, Three.js (ShaderMaterial/RawShaderMaterial/TSL), or React Three Fiber. Covers the language/platform matrix, correct boilerplate, common effects (SDF/raymarching, noise, post-processing), and the pitfalls that make browser…
Skill Claude Code
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like…
Skill Claude CodeCodex
Guia designers sem experiência em código desde a instalação do Storybook até visualizar componentes do Figma funcionando como um catálogo interativo. Use esta skill quando o designer chamar explicitamente com /ds-to-code ou pedir para iniciar o fluxo de configuração do Storybook com o Figma.
Skill Claude CodeCodex
Scaffold a new TodoMVC feature — component file, test file, and wiring — from a short description. Use when the user asks to "add feature X" and an existing file/component doesn't already own it.
Skill Claude Code
A skill that helps write idiomatic React components.
Skill Claude Code
Mandatory constraint layer enforcing 21 frontend design standards on all UI output.
Skill Claude Code
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
lxf-keeps-learning/AI-AI-Coding
Skill Claude CodeCodex
A frontend performance-diagnosis skill for Vue 3 and TypeScript projects using Element Plus, ECharts, and the ai-kit system. It collects symptoms, identifies likely bottlenecks, and writes an optimization report and checklist.
King-GD/vue-nuxt-best-practices
Skill Claude CodeCodex
57 performance optimization rules for Vue3 and Nuxt4 applications. Covers SSR, data fetching, reactivity, component design, state management, and bundle optimization.
t-code4change/nextjs-claude-skills
Skill Claude Code needs its repo
Flagship SEO + Performance skill for Next.js App Router. Use when implementing or auditing SEO (metadata, Open Graph, JSON-LD, sitemap, robots, canonical, hreflang), optimizing Core Web Vitals (LCP/INP/CLS), optimizing images/fonts/ scripts/bundles, setting up Web Vitals monitoring, or diagnosing Google indexing…
Skill Claude CodeCodex
A drop-in walkthrough layer for static HTML demos: it adds a button, step-by-step cards, highlighted page areas, and explanatory text, including across multiple pages. It creates a separate copy of the demo so the original stays unchanged.
zFusions/beautiful-mysellauth-themes
Skill Claude Code
Builds world-class SellAuth and MySellAuth storefront themes — dark SaaS, gaming neon, light, corporate, luxury. Covers sellauth-theme CLI, Nunjucks, schema.json, visual editor resale, hero peek, feature mocks, Lenis motion, premium shop pages (shop-pdp.css split, volume discounts), universal theme architecture, and…
truman-t3/tinted-ui-tokens-skills
Skill Claude CodeCodex
A design-token generator that turns one brand colour into coordinated colours for interface backgrounds, borders, text, shadows, semantic states, gradients, icons, and dark mode. Design tokens are named colour values reused across a product's interface.
pauloriveross/state-machine-skill
Skill Claude CodeCodex
Model UI component behavior as FSMs before writing code. Verbs: model (FSM from description → auto-prompt for code generation), audit (detect impossible states in existing code). Framework-agnostic, XState v5 compatible. Eliminates impossible states at design time.
Skill Claude Code
Angular Core UI executor for approved implementation in new or existing @sdcorejs/angular and @sd-angular/core apps, covering portal init, CRUD/list/detail/form/action scope, explicit technical prototypes, or approved migration. Optional admin/auth packs require approved scope. Do not use for plain Angular apps or…
Skill Claude Code
Guide for advanced Next.js App Router patterns including Route Handlers, Parallel Routes, Intercepting Routes, Server Actions, error boundaries, draft mode, and streaming with Suspense. CRITICAL for server actions (action.ts, actions.ts files, 'use server' directive), setting cookies from client components, and form…
nqchange96/flatsome-ai-coding-skill
Skill Claude CodeCodex
Comprehensive knowledge for building and customizing WordPress sites with the Flatsome theme by UX Themes. Use this skill whenever a project uses Flatsome, UX Builder, or mentions Flatsome shortcodes (uxbanner, uximage, row/col/section, uxproducts, etc.), Flatsome theme hooks/filters, UX Blocks, custom product pages…
nongjun/awesome-harness-engineering
Skill Claude CodeCodex
Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.
Skill Claude CodeCodex
Professional TypeScript + React + Next.js coding standards enforcer. Use this skill whenever writing, reviewing, or refactoring TypeScript code in any project — whether it's a new feature, a bug fix, a refactoring pass, or a code review. Trigger on: any TypeScript or TSX file creation/editing, "clean up this code"…
Skill Claude CodeCodex
Initialize vowel.to voice agent in React applications (React 19+, Next.js, TanStack Router, React Router) with complete setup including adapters, providers, hooks, and custom actions. Use when setting up voice agent integration, configuring navigation adapters, implementing custom voice actions, or integrating state…
cheng-zuguang/design-for-beauty
Skill Claude CodeCodex
A design reference guide for building or restyling websites and user interfaces using documented examples from public websites.
Skill Claude Code
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
Skill Claude CodeCodex
A tool for managing shadcn/ui, a collection of copyable user-interface components for web projects. It provides project context, component documentation, examples, and help with registries and presets.
Skill Claude CodeCodex
Create beautiful, simple, component-driven web interfaces with the soul of 2017–2019 web design (Bootstrap, Bulma, MaterializeCSS era). Use this skill when the user wants clean, elegant, thoughtful UIs — or expresses dislike for modern over-designed trends like glassmorphism, bouncy hover animations, gradient chaos…
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: