Frontend skills

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

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

react-grab

49

aidenybai/react-grab

Skill Claude CodeCodex

Use when the user wants a hands-free loop where grabbing UI elements in the browser with React Grab feeds tasks to the agent automatically, with no copy-paste or manual handoff. Triggers: "watch react grab", "monitor my grabs", "auto-process react grab", "watch my clipboard for grabs". Not for a one-off paste of a…

not rated 7.7k +12 2mo ago A SkillSpector: warn 86 tokens original MIT

Kiranism/next-shadcn-dashboard-starter

Skill Claude CodeCodex needs its repo

Guide for building features, pages, tables, forms, themes, and navigation in this Next.js 16 shadcn dashboard template. Use this skill whenever the user wants to add a new page, create a feature module, build a data table, add a form, configure navigation items, add a theme, set up RBAC access control, or work with…

not rated 7.2k +34 changed yesterday A SkillSpector: pass 142 tokens original MIT

v3-create-crud

51

un-pany/v3-admin-vite

Skill Claude CodeCodex

A page generator for standard create, read, update, and delete screens, commonly called CRUD screens. It uses Element Plus, a Vue user-interface library, to build tables, searches, pagination, forms, and delete confirmations.

not rated 7.1k +4 3mo ago A SkillSpector: pass 108 tokens original MIT

nuxt-ui

52

nuxt/ui

Skill Claude CodeCodex

Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.

not rated 7.0k +19 yesterday A Socket: passSnyk: warnSkillSpector: pass 56 tokens original MIT

orval

53

orval-labs/orval

Skill Claude CodeCodex needs its repo

Generate type-safe API clients, TanStack Query/SWR hooks, Zod schemas, MSW mocks, Hono server handlers, MCP servers, and SolidStart actions from OpenAPI specs using Orval. Covers all clients (React/Vue/Svelte/Solid/Angular Query, Fetch, Axios), custom HTTP mutators, authentication patterns, NDJSON streaming…

not rated 6.6k +17 yesterday A Socket: passSnyk: passSkillSpector: warn 83 tokens original MIT

preline-mcp

54

htmlstreamofficial/preline

Skill Codex

Add, integrate, or build Preline UI components and blocks into HTML files via the Preline MCP server. Use when the user mentions "preline", says "/preline", asks to add a UI component, or requests a Preline block (a ready-made page section) using Preline UI.

not rated 6.5k +9 2mo ago A SkillSpector: warn 66 tokens

lightdash/lightdash

Skill Claude Code

Build ONE reusable chart visualization component that receives its data and its settings from the host application instead of fetching them, and declares the fields and config options the host exposes to viewers. Use this whenever a single chart component is reused across many different queries rather than built for…

not rated 6.2k +18 changed 1mo ago A SkillSpector: pass 102 tokens

transitions-dev

56

Jakubantalik/transitions.dev

Skill Claude CodeCodex

Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs…

not rated 6.0k +270 changed 23d ago A Socket: passSnyk: passSkillSpector: pass 410 tokens

mintlify

57

macro-inc/macro

Skill Claude CodeCodex

Build and maintain documentation sites with Mintlify. Use when creating docs pages, configuring navigation, adding components, or setting up API references.

not rated 6.0k +975 today A SkillSpector: pass 30 tokens AGPL-3.0

streamdown

58

vercel/streamdown

Skill Claude CodeCodex ✓ vendor

Implement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlighting, Mermaid diagrams, math rendering, and CJK support. Use when working with Streamdown setup, configuration, plugins, styling, security, or integration with AI streaming (e.g., Vercel AI SDK). Triggers…

not rated 5.7k +18 yesterday A Socket: passSnyk: passSkillSpector: pass 164 tokens

shiny-for-r

59

rstudio/shiny

Skill Claude CodeCodex

Building, styling, testing, debugging, or observing a Shiny for R app - library(shiny), shinyApp(), runApp(). Index skill: read this, then open the linked reference for the task. Covers reactivity (reactive/observe/req/isolate/bindEvent); modules; async promises and ExtendedTask; bslib layouts, navigation, cards…

not rated 5.7k +2 2d ago A SkillSpector: pass 202 tokens

zxlie/FeHelper

Skill Claude CodeCodex

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

not rated 5.7k +3 10d ago A 61 tokens copy · 100% MIT

JimLiu/baoyu-design

Skill Claude CodeCodex

Create and revise design systems in the Design System artifact format (project/design-system.json, tokens.json, a README brand book, component previews, fonts and asset groups) as local files, then open them in a local design-system page where the user can browse and edit tokens, type, components and assets. Use when…

not rated 5.7k +977 changed today A 148 tokens original

guokaigdg/animal-island-ui

Skill Claude CodeCodex

Build React UIs in the animal-island-ui style — an a cozy island-style UI-inspired component library (warm earth tones, pill shapes, 3D game-button depth, soft motion). Use when (1) building pages or components with the animal-island-ui npm package in a React project; (2) generating a standalone single-file HTML page…

not rated 5.1k +24 changed today A SkillSpector: pass 113 tokens original MIT

formkit

63

formkit/formkit

Skill Codex

Use when working with FormKit forms, validation, schema, or custom inputs in React, Vue, or Nuxt projects.

not rated 4.8k +2 3mo ago A SkillSpector: warn 28 tokens original MIT

create-example

64

liveblocks/liveblocks

Skill Claude CodeCodex

Create a new Liveblocks example app for the gallery under examples/. Use when asked to build a new example, demo, or showcase app, or when restructuring an existing example. Covers scaffolding, gallery conventions (exampleId, examplePreview, database.ts, HelpButton), providers configuration, AI patterns, styling…

not rated 4.8k +6 today A SkillSpector: warn 77 tokens

taro-ui-guide

65

jd-opensource/taro-ui

Skill Claude CodeCodex

Guides installation, Taro config, styling, and usage of taro-ui (At components) for WeChat/Alipay/H5/RN. Use when building Taro apps with taro-ui, picking components, theming, i18n, or modifying packages/taro-ui source.

not rated 4.7k +2 1mo ago A SkillSpector: pass 66 tokens original MIT

archestra-ai/archestra

Skill Claude CodeCodex

Use for visual design direction on greenfield, user-facing surfaces — marketing and landing pages, generated apps, portfolio-style or standalone pages. NOT for routine Archestra platform UI work (dashboards, data tables, settings, forms, existing components) — use archestra-dev-frontend for that. Upstream intent…

not rated 4.4k +18 today A SkillSpector: warn 0 tokens

modern-css

67

paulirish/dotfiles

Skill Claude CodeCodex

Specialized knowledge for writing modern high-quality CSS. Trigger this skill when starting a new CSS project/file, when the user asks about new CSS features (e.g. Masonry, View Transitions, Container Queries, Scroll-driven animations), or requests refactoring of legacy styles to modern standards.

not rated 4.4k +1 28d ago A Socket: passSnyk: passSkillSpector: warn 61 tokens

kumo-design

68

cloudflare/kumo

Skill Claude CodeCodex ✓ vendor

Cloudflare product design guidance. Use when designing, implementing, or reviewing Cloudflare dashboard interfaces, Kumo UI, responsive styling, dialogs, or frontend tests.

not rated 4.2k +30 yesterday A Socket: passSnyk: passSkillSpector: pass 36 tokens original MIT

jakubkrehel/make-interfaces-feel-better

Skill Codex

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers…

not rated 3.9k +71 2mo ago A Socket: passSnyk: pass 117 tokens copy · 97% MIT

threejs-materials

70

CloudAI-X/threejs-skills

Skill Claude CodeCodex

Choosing and configuring three.js materials - unlit, diffuse, specular, PBR, toon, point and line materials - shared properties like blending and stencil, environment response, and the WebGPU node-material and TSL equivalents. Use when styling meshes or tuning material behavior.

not rated 3.9k +155 changed 12d ago A Socket: passSnyk: pass 60 tokens original MIT

visual-qa

71

code-yeongyu/lazycodex

Skill Codex needs its repo

Runs rigorous visual QA across web, terminal, and paginated surfaces: an Apple HIG-based checklist, paired light/dark captures at phone and desktop widths, screenshot evidence, and a per-item PASS/FAIL verdict. Use for any UI build or change, or when asked whether a page, component, or TUI looks right or follows the…

not rated 3.9k +26 changed today A SkillSpector: pass 78 tokens original MIT

pinme-uniwebpay

72

glitternetwork/pinme

Skill Claude CodeCodex

Use when generating, modifying, or reviewing PinMe Worker (Cloudflare Worker TypeScript) code that accepts payments through UniwebPay — payment links, products/prices, checkout sessions, payment status reads, refunds, subscriptions, or handling UniwebPay webhooks with @uniwebpay/sdk in a PinMe project.

not rated 3.8k +4 1mo ago A SkillSpector: warn 71 tokens original MIT

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: