Frontend skills

13,870 tagged Frontend, measured the same way as everything else here.

Browse within: skills 124agent 118agentic-ai 98LLM 95javascript 94nextjs 85design-system 63copilot 60css 55agents 54checklist 50front-end-developer-tool 50front-end-development 50cli 49

no-use-effect

385

alejandrobailo/no-use-effect

Skill Claude CodeCodex

ALWAYS ACTIVE. Enforces a strict no-direct-useEffect rule in React and React Native code. Never write useEffect directly — use derived state, event handlers, useMemo, useSyncExternalStore, data-fetching libraries, key-based resets, or useMountEffect instead. Triggers on all React component code: writing new…

not rated 66 +1 5mo ago A 107 tokens

build-mcp-app

386

nota-america/forgecat-agent-profiles

Skill Claude Code

This skill should be used when the user wants to build an "MCP app", add "interactive UI" or "widgets" to an MCP server, "render components in chat", build "MCP UI resources", make a tool that shows a "form", "picker", "dashboard" or "confirmation dialog" inline in the conversation, or mentions "apps SDK" in the…

not rated 66 +3 2d ago A SkillSpector: pass 111 tokens original Apache-2.0

univer-integrate

387

dream-num/skills

Skill Codex

Integrate Univer Sheets, Docs, or Slides into React, Vue 3, HTML, or Node.js projects. Use when embedding Univer, choosing preset or plugin mode, initializing instances, configuring themes/locales/workers, or manipulating workbooks, worksheets, ranges, formulas, permissions, and events through the Facade API.

not rated 65 8d ago A SkillSpector: pass 70 tokens original Apache-2.0

start-an-app

388

leonvanzyl/skills

Skill Claude CodeCodex

Interview the user in depth about what they actually want to build, then scaffold a working full-stack web app around it. Use when the user wants to start a new app, website, prototype, or SaaS; when they don't know what tech stack to pick; or when they want a solid working starting point fast. Covers requirements…

not rated 65 +2 15d ago A 212 tokens

cinematic-ui

389

akseolabs-seo/cinematic-ui

Skill Codex

Design and build websites with film-inspired visual systems, director-driven art direction, storyboard-first layout planning, and cinematic motion. Use when the user asks for a cinematic site, movie-style landing page, director-inspired UI, film-noir, sci-fi, romance, thriller, action, animation, or a movie-like…

not rated 64 5mo ago A 94 tokens original MIT

avoid-ai-design

390

funboy322/avoid-ai-design

Skill Claude CodeCodex

Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"). Use this skill when asked to "de-slop a UI", "make a design look less AI-generated", "audit a component or page for AI design tells", or "fix Claude/Codex-generated frontend that looks generic". Covers HTML/CSS and React/Tailwind/shadcn.…

not rated 63 +2 2mo ago A 90 tokens original MIT

axiom-app-intents-ref

391

ComeOnOliver/skillshub

Skill Claude CodeCodex

Use when integrating App Intents for Siri, Apple Intelligence, Shortcuts, Spotlight, or system experiences - covers AppIntent, AppEntity, parameter handling, entity queries, background execution, authentication, and debugging common integration issues for iOS 16+.

not rated 63 2mo ago A SkillSpector: warn 57 tokens original MIT

web-experience-cloner

392

Kris77z/web-experience-cloner

Skill Codex

A workflow for examining, copying, and making complex websites work offline, including animated sites, exported site builders, and server-rendered or single-page applications. It uses evidence from the running site to understand its code, assets, requests, and effects.

not rated 60 2mo ago A 227 tokens original MIT

brandmd

393

yuvrajangadsingh/brandmd

Skill Claude Code

Extract a website's design system into a DESIGN.md file. Use when starting a new frontend project, rebuilding a site, or when the user wants AI-generated UI to match an existing brand.

not rated 60 +1 1mo ago A 41 tokens original MIT

thurbox-ui

394

Thurbeen/thurbox

Skill Claude CodeCodex

Edit the thurbox TUI — add, change or remove a pane of the running interface, which is Lua files in the thurbox interface directory (not this repository). Use whenever the user asks to change how thurbox itself looks or behaves on screen — a new pane or panel, a different layout or arrangement, a keybinding, a status…

not rated 60 today A SkillSpector: pass 122 tokens original MIT

gpui-toolkit

396

pierreaubert/gpui-toolkit

Skill Claude CodeCodex

Use when building or modifying GPUI applications in the gpui-toolkit workspace, especially when choosing reusable toolkit crates, composing UI, adding components, charts, themes, layouts, audio controls, mobile surfaces, or validation coverage. Prefer existing toolkit APIs over custom one-off implementations.

not rated 60 +2 yesterday A 60 tokens original ISC

bnomei/kirby-mcp

Skill Claude CodeCodex

Builds Kirby listings, pagination, search, filtering/sorting/grouping, and navigation menus. Use when implementing collection logic in templates/controllers/snippets.

not rated 59 10d ago A SkillSpector: pass 37 tokens original MIT

shadcn

398

udecode/plate-template

Skill Claude CodeCodex

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…

not rated 59 changed today A 94 tokens copy · 94% MIT

microsoft/a11y-llm-eval

Skill Claude CodeCodex ✓ vendor

MUST BE USED for any UI work. Invoke this skill before generating, modifying, or reviewing any code that renders, styles, or wires up a user-facing interface — including markup, components, templates, styles, and the JavaScript/TypeScript that drives them. This skill encodes the accessibility (WCAG 2.2 AA)…

not rated 59 4mo ago A 112 tokens original MIT

mantinedev/skills

Skill Claude CodeCodex

Build custom components that integrate with Mantine's theming, Styles API, and core features. Use this skill when: (1) creating a new component using factory(), polymorphicFactory(), or genericFactory(), (2) adding Styles API support (classNames, styles, vars, unstyled), (3) implementing CSS variables via…

not rated 59 +1 6mo ago A Socket: passSnyk: pass 134 tokens original MIT

Michael-Obele/shadcn-svelte-mcp

Skill Claude CodeCodex

Use when building, redesigning, beautifying, or refactoring SvelteKit pages and reusable components with shadcn-svelte, Bits UI, or the shadcn-svelte MCP. Trigger on landing pages, dashboards, marketing sites, app shells, forms, navbars, tables, dialogs, responsive layouts, theming, icon selection, and requests to…

not rated 58 2d ago A SkillSpector: pass 99 tokens original MIT

integrate-ai-gateway

402

MacPaw/ai-sdk-typescript

Skill Claude CodeCodex

Integrate applications with AI Gateway using @macpaw/ai-sdk. Use for NestJS, Next.js, Vercel AI SDK, raw fetch migrations, video generation, MacPaw AI, Setapp AI, createAIGatewayProvider, createGatewayFetch, createVideoClient, and AI Gateway auth/error wiring.

not rated 58 2d ago A SkillSpector: warn 71 tokens original MIT

patrick-fu/awesome-skills

Skill Codex

Build and revise iteration-safe HTML slide decks with polished visuals, motion, testing, and web/PDF/static delivery. Use only for HTML slide projects.

not rated 58 +1 2d ago A SkillSpector: pass 36 tokens original MIT

skill

404

cozy/cozy-ui

Skill Claude CodeCodex

Skill "skill" from cozy/cozy-ui, covering cozy ui, quick start, what this skill provides, quick reference and components.

not rated 57 6d ago A SkillSpector: pass 0 tokens original MIT

verify-ui

405

ThisIsSadeghi/KMPilot

Skill Claude Code needs its repo

Verify UI implementation against Stitch design via a token audit (HTML ↔ Code, with X-component default-render checks) and an X-components compliance check.

not rated 57 +1 1mo ago A SkillSpector: warn 30 tokens original MIT

html-craft

406

Elumenotion/GuideAnts

Skill Claude CodeCodex

Create and verify single-file interactive HTML pages in the sandbox: build or edit the file, then prove the result with headless-Chromium screenshots, in-page DOM/geometry assertions, and JS-error capture (Playwright). No GPU, no service, no network. Use when the user wants an HTML page, animation, demo, dashboard, or…

not rated 57 +2 yesterday A SkillSpector: pass 84 tokens original Apache-2.0

IgniteUI/igniteui-react

Skill Claude Code

Migrate from Grid Lite (IgrGridLite) to the premium Ignite UI for React Data Grid (IgrGrid) — imports, theme CSS, column and template API changes, sorting and filtering, remote data replacing dataPipelineConfiguration, and the toolbar/export APIs. Use when Grid Lite lacks a needed feature such as editing, selection…

not rated 56 changed 5d ago A SkillSpector: pass 89 tokens original MIT

tailwind-plus

408

richardkmichael/tailwindplus-downloader

Skill Claude Code

This skill should be used when the user asks to "add a component", "use a Tailwind Plus component", "build a UI", "create a form", "add a modal", "add a sidebar", "create a landing page", or needs any UI component from Tailwind Plus (formerly Tailwind UI). Use this when building pages, layouts, or UI elements with…

not rated 56 +2 2d ago A 84 tokens

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: