Frontend skills

13,865 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

favicon-exporter

553

madebypan/FigCC

Skill Claude CodeCodex

Prepare and export favicon assets from Figma in common web sizes and formats.

not rated 22 1mo ago A SkillSpector: pass 19 tokens original MIT

astro-strapi-blocks

554

VirtusLab-Open-Source/astro-strapi-blocks

Skill Claude CodeCodex

Integrates @sensinum/astro-strapi-blocks with Strapi 5 Blocks fields in Astro: wiring data from API responses, theming with extend and overwrite, and custom block components. Use when adding or editing Strapi block rendering, rich text zones, or StrapiBlocks / theme configuration.

not rated 22 today A 74 tokens original MIT

website-creator

555

codeandbeans/website-creator

Skill Claude CodeCodex

Use this skill whenever the user wants to build, plan, redesign, or even just think through a website. This skill guides the full creation process — from initial discovery and competitive niche research all the way through site architecture, style guide, interactive localhost mockups, SEO copywriting, and schema…

not rated 22 5mo ago A 178 tokens

vibekit

556

MUKE-coder/vibekit

Skill Claude CodeCodex

Build Next.js apps using the VibeKit framework. Enforces masterprompt.md coding standards, applies design-style-guide.md tokens, uses JB components from jb-components.md, and builds phase by phase from project-phases.md. Use when starting a new VibeKit project or resuming a build.

not rated 22 1mo ago A 65 tokens

book-order-platform

557

eimg/book-order-platform-SKILL

Skill Claude CodeCodex

Implements a book order system with a Vite React storefront (React Router, TanStack Query) and an Express + Prisma + SQLite API: default pay-by-transfer flow with admin-reviewed payment proof, Cloudflare Turnstile on order submit, honeypot field, payment-proof upload with duplicate-image detection, 8-character receipt…

not rated 22 4mo ago A 148 tokens

pebble-protocol-ui

558

skyf0xx/Pebble

Skill Claude CodeCodex

Component catalogue for Pebble pebblesend type "ui" blocks — OpenUI Lang syntax, components, the action model (buttons, forms, $state), and what Pebble does NOT support. View when building an interactive UI block.

not rated 22 1mo ago A SkillSpector: pass 58 tokens original MIT

raqam

559

47vigen/raqam

Skill Claude CodeCodex

Teaches the raqam React number-input library — headless NumberField compound components, useNumberFieldState/useNumberField hooks, Intl presets, locale plugins (fa/ar/bn/hi/th), raqam/server formatting, validation, ScrubArea, accessibility, and form integration. Use when building or debugging currency/percent/unit…

not rated 22 3d ago A SkillSpector: pass 102 tokens original MIT

rothenbergt/backstage-agent-skills

Skill Claude CodeCodex

Build Backstage frontend plugins with the New Frontend System: createFrontendPlugin, blueprints, routes, Utility APIs, testing. Use for pages, nav, entity content, or cards.

not rated 22 2mo ago A 44 tokens

854771076/oh-my-claude-roles

Skill Claude Code

A set of required development rules for building full-stack applications with TypeScript and Next.js, a framework for web apps. It standardizes tools, project structure, type checking, testing, and production practices.

not rated 22 5mo ago A 49 tokens original MIT

olakunlevpn/olakunlevpn-filament-skills

Skill Claude CodeCodex

Use when writing, reviewing, or refactoring Filament PHP v5 code -- resources, forms, tables, infolists, actions, widgets, panels, relation managers, multi-tenancy, testing, or plugin development. Always apply these standards to all Filament work.

not rated 22 5mo ago A 64 tokens original MIT

tscircuit

563

tscircuit/skill

Skill Claude Code

Build, modify, and debug tscircuit (React/TypeScript) PCB designs. Use when working with tsci CLI (init/dev/search/add/import/build/export/snapshot/push), choosing footprints, placing parts, wiring nets/traces, or preparing fabrication outputs (Gerbers/BOM/PnP).

not rated 22 +2 changed today A 66 tokens original MIT

cache-components

564

motormetrics/motormetrics

Skill Claude Code

Ensure 'use cache' is used strategically to minimize CPU usage and ISR writes. Use when creating/modifying queries to verify caching decisions align with data update patterns and cost optimization.

not rated 22 today A SkillSpector: pass 38 tokens original MIT

oma-frontend

565

gracefullight/docusaurus-plugins

Skill Claude CodeCodex

Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment. Use for UI, component, page, layout, CSS, Tailwind, and shadcn work.

not rated 22 3mo ago A 51 tokens original MIT

modern-web-design

566

efeunalmedia-lab/efeunal-website-seo

Skill Claude CodeCodex

Modern web design trends, principles, and implementation patterns for 2024-2025. Use this skill when designing websites, creating interactive experiences, implementing design systems, ensuring accessibility, or building performance-first interfaces. Triggers on tasks involving modern design trends, micro-interactions…

not rated 21 +1 3mo ago A 122 tokens

astro-strapi-starter

567

VirtusLab-Open-Source/astro-strapi-starter

Skill Claude CodeCodex

Develop and extend the Astro + Strapi starter: content.config with @sensinum/astro-strapi-loader, Strapi 5 data in Astro pages, StrapiBlocks, BlockRenderer, Tailwind 4, shadcn. Covers onboarding (copy upstream skills), slug/CMS routes, Astro i18n, package upgrades, optional Vitest. Types in src/types/strapi/ with a…

not rated 21 today A SkillSpector: pass 90 tokens original MIT

css-protips

568

PyModel/css-pro-tips

Skill Claude CodeCodex

Use when writing, reviewing, refactoring, or modernizing CSS/Tailwind. Apply a policy-first approach: semantic tokens, explicit cascade order, static CSS, intrinsic component layouts, accessible state, measured performance, and progressive enhancement backed by current sources.

not rated 21 changed 5d ago A 55 tokens original MIT

molauu/svg-character-animator

Skill Claude CodeCodex

Generate production-quality SVG character animations — state machines that morph between N SVG states (2–10) with per-state idle motion (breathing, blinking, swaying). Use whenever the user wants to animate a character or mascot between poses/emotions, morph icons/illustrations between forms, build interactive SVG…

not rated 21 22d ago A 181 tokens original MIT

component

570

Maximepodgorski/agent-skills

Skill Claude CodeCodex

Design system component workflow. Spec, document, implement, review, spec-review, and audit DS components with Figma as primary input. 6 actions: spec, doc, ship, review, spec-review, audit. Auto-activates on: "component", "spec component", "doc component", "ship component", "review component", "spec-review…

not rated 21 4mo ago A 113 tokens original MIT

harn-apps

571

burin-labs/harn

Skill Claude Code

Keep app behavior in Harn while shared hosts draw the view and provide files, network, and browser features.

not rated 21 +1 today A SkillSpector: pass 27 tokens original Apache-2.0

lumeo

573

Brain2k-0005/Lumeo

Skill Claude CodeCodex

Use when building or editing a Blazor UI that uses the Lumeo component library (the Lumeo NuGet package and its satellites Lumeo.Charts / Lumeo.DataGrid / Lumeo.Editor / Lumeo.Scheduler / Lumeo.Gantt / Lumeo.Motion), or when the user mentions Lumeo components (Button, DataGrid, Sheet, Dialog, Tabs, DatePicker, Toast…

not rated 21 +1 6d ago A SkillSpector: warn 125 tokens original MIT

clone-website

574

giang6283623/minimal-vibe-coding-kit

Skill Codex

Plan, build, and verify an authorized website clone or migration through one front-loaded requirements session and an optional autonomous A-to-Z run. Use for small marketing or content sites, corporate sites, web applications, and small, medium, or large ecommerce projects from local screenshots, mock JSON, owner…

not rated 21 13d ago A SkillSpector: pass 113 tokens original MIT

Build Landing Page

575

eddiebelaval/squire

Skill Claude CodeCodex

The ultimate landing page builder. Through a conversational interview, autonomously produces a complete, deployable Next.js landing page with TypeScript, Tailwind CSS, SEO metadata, JSON-LD structured data, and conversion-optimized copy. Consolidates intelligence from landing-page-designer, copywriting, page-cro…

not rated 21 25d ago A SkillSpector: warn 145 tokens original MIT

looks-expensive

576

TuahaJawaid/looks-expensive

Skill Claude Code

Full-stack design methodology that makes any website look like a $150k agency build. Nine gated phases: positioning, research, design contract, screen spec, build, subtraction, audit, hardening, handoff. Includes illustration system, animation tiers, 12 hero patterns, 16 section layouts, UX writing guide, icon system…

not rated 20 3mo ago A 173 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: