Frontend skills

14,708 tagged Frontend, measured the same way as everything else here.

Browse within: reference 201checklist 198front-end-developer-tool 198front-end-development 198guidelines 198agent 106javascript 106LLM 101agentic-ai 101skills 96cursor 84chatgpt 58nextjs 56copilot 51

get-started

121

hugeicons/hugeicons

Skill Claude CodeCodex

Use right after Hugeicons is installed, or when the user asks to set up Hugeicons in a project. Detects the framework, installs the right Hugeicons package and adds one working example icon.

not rated 1.2k yesterday A 44 tokens original MIT

a2ui-generation

122

AGenUI/AGenUI

Skill Claude CodeCodex

Design and generate A2UI updateComponents and updateDataModel payloads for three modes (DTO component, non-DTO component, non-DTO page). Use when asked to create or refine A2UI cards, components, or pages from DTO/JSON/business data, generate Python transformer code for DTO-driven components, iterate on existing A2UI…

not rated 1.2k +8 5d ago A SkillSpector: pass 147 tokens original Apache-2.0

modern-web-guidance

123

GoogleChrome/modern-web-guidance-src

Skill Claude CodeCodex

Search tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT skip — web APIs evolve rapidly and training weights contain obsolete patterns. Trigger immediately for: modals/dialogs/popovers, tables, dark mode, anchor positioning, container queries…

not rated 1.2k +14 changed yesterday A SkillSpector: warn 210 tokens original Apache-2.0

babylonjs-engine

124

freshtechbro/claudedesignskills

Skill Claude Code

Comprehensive skill for Babylon.js 3D web rendering engine. Use this skill when building real-time 3D experiences, browser-based games, interactive visualizations, or immersive web applications. Triggers on tasks involving Babylon.js, 3D scenes, WebGL/WebGPU rendering, entity-component systems, physics simulations…

not rated 1.2k +74 11mo ago A Socket: passSnyk: pass 97 tokens original MIT

seed-design

125

daangn/seed-design

Skill Claude Code

An integration guide for SEED Design, covering shared component specifications and foundations plus React and Lynx implementation guidance.

not rated 1.2k +2 changed 1mo ago A Socket: passSnyk: passSkillSpector: pass 32 tokens original Apache-2.0

slides

126

stackblitz/bolt-slides

Skill Claude CodeCodex

Build a premium PRESENTED slide deck — classic one-slide-at-a-time slides you advance with a clicker — as a Vite + React app. It keeps the Slidev navigation UI (floating glass dock + thumbnail rail + click-builds + presenter) but slides are RESPONSIVE React (reflow to any screen, no fixed canvas) and fully…

not rated 1.2k +6 3mo ago A SkillSpector: pass 140 tokens original MIT

use-aholo-viewer

127

manycoretech/aholo-viewer

Skill Codex

Guide external npm package users and AI coding agents integrating @manycore/aholo-viewer into web applications. Use when asked to install, bootstrap, render 3D Gaussian Splatting or mesh content, configure cameras, scenes, lighting, viewer pipeline options, or write TypeScript examples for the public…

not rated 1.1k +8 2d ago A SkillSpector: pass 78 tokens original MIT

tinyjs

128

momozi1996/momo-code

Skill Claude CodeCodex

Build and modify tinyjs desktop apps — tiny macOS (and beta Windows/Linux) apps with a txiki.js JavaScript backend and a native webview window. Use when working in a project with a tinyjs.json, when the user mentions tinyjs, tiny.api, or tinyjs dev/build, or when porting an Electron app to tinyjs.

not rated 1.1k +4 5d ago A 75 tokens

jarrodwatts/claude-code-config

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…

not rated 1.1k +1 9mo ago A 67 tokens

auteur

130

agiwhitelist/auteur

Skill Claude Code

Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products (app, dashboard, admin, settings, onboarding, docs site) built as one design system with every component, state and route…

not rated 1.0k +7 2mo ago A 191 tokens original MIT

am-will/codex-skills

Skill Claude CodeCodex

Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different…

not rated 1.0k +2 3mo ago A 137 tokens

lytenyte-grid

132

1771-Technologies/lytenyte

Skill Claude CodeCodex

Use this skill when the user is working with LyteNyte Grid (@1771technologies/lytenyte-pro or @1771technologies/lytenyte-core), a headless React data grid. Activate for tasks like: installing or licensing LyteNyte Grid, configuring columns or rows, building cell renderers or editors, adding filters or sort controls…

not rated 1.0k +1 2mo ago A 257 tokens

next-bundle-optimizer

133

darkroomengineering/satus

Skill Claude CodeCodex

Audit and reduce Next.js browser initial-load work. Use for slow route startup, oversized client bundles, duplicate browser dependencies, or features that can wait for interaction.

not rated 1.0k +1 2d ago A 38 tokens original MIT

cali

134

callstackincubator/cali

Skill Codex

Use when working in the Cali repository or when you need to run, extend, or debug the Cali CLI for mobile React Native and Expo workflows. Covers Cali commands (qa, review, perf-review, dev), the shared cali-context.json contract, local mode selection, required local CLIs, provider setup, and CI integration patterns.

not rated 992 +2 4mo ago A SkillSpector: pass 76 tokens original MIT

flow-like-ui

135

Rheosoph/flow-like

Skill Claude CodeCodex

Generate complete, valid A2UI JSON for FlowLike frontends. Use when asked to create, design, or build an interface, dashboard, form, page, responsive layout, reusable widget, chart, calendar, Gantt view, media experience, game UI, map, or other visual UI as A2UI JSON. Covers all 71 runtime component types, BoundValue…

not rated 969 +2 today A SkillSpector: warn 95 tokens

sanity-io/next-sanity

Skill Claude CodeCodex

Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the partialPrefetching flag, opt routes in with export const prefetch = 'partial', audit calls, or resolve the link-prefetch-partial and instant-shell-url-data…

not rated 956 +1 3d ago A SkillSpector: warn 92 tokens original MIT

scottstts/Threejs-Awesome-Graphics-Agent-Skills

Skill Codex

Author production procedural materials in Three.js. Use for simulated paper burning with coupled sheet combustion and pyro fluids, luminescent jellyfish with simulated appendages and layered tissue optics, luminescent butterflies with articulated scale glints and finite wing emitters, hybrid texture-backed PBR soil…

not rated 953 +20 changed 9d ago A SkillSpector: pass 228 tokens original MIT

Caldis/react-zmage

Skill Claude CodeCodex

Use when adding the react-zmage React image viewer to an existing React, Next.js, MDX, CMS, markdown, or rich text image surface.

not rated 945 5mo ago A 37 tokens original MIT

userinterface-wiki

139

raphaelsalaja/userinterface-wiki

Skill Claude CodeCodex

UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.

not rated 936 +5 3mo ago A 52 tokens copy · 100% MIT

specification-website

140

jdevalk/specification.website

Skill Claude CodeCodex

Query and apply The Website Specification — a platform-agnostic specification of what a good website does, with each item tagged required, recommended, optional, or avoid. Use when the user asks what their site should have, whether something is required, how to audit a URL, what's missing for agent readiness, or…

not rated 920 +9 changed 3d ago A 127 tokens

theme-creation

141

stencila/stencila

Skill Claude Code

Create, update, or plan a Stencila theme for documents or published sites. Use when asked to choose a theme direction, write or patch theme.css, recommend semantic or module token families, customize site navigation or branding, tune PDF and print page tokens, align web, Python, and R plots with a Stencila design…

not rated 914 +1 yesterday A SkillSpector: warn 97 tokens original Apache-2.0

ui-design-brain

142

carmahhawwari/ui-design-brain

Skill Claude CodeCodex

Generate production-grade UI using real component patterns and best practices from 60+ documented interface components. Use when the user asks to build web interfaces, pages, dashboards, forms, navigation, or any UI — ensures modern, minimal, SaaS-quality output grounded in design system conventions rather than…

not rated 904 +3 8mo ago A 66 tokens

pnp/copilot-prompts

Skill Claude CodeCodex

Generates valid, importable Power Apps Source Code YAML for canvas app screens. Use when asked to create YAML, scaffold, or modify any Power Apps canvas app screen — including full screens, dialogs, forms, galleries, detail views, dashboards, or any layout container — or when asked to generate Power Fx formulas or…

not rated 902 +2 6d ago A SkillSpector: warn 79 tokens original MIT

vibefigma

144

vibeflowing-inc/vibe_figma

Skill Claude CodeCodex

Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMATOKEN env var, or .env file).

not rated 850 +1 22d ago A 77 tokens AGPL-3.0

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: