14,612 tagged Frontend, measured the same way as everything else here.
Browse within: reference 201checklist 198front-end-developer-tool 198front-end-development 198guidelines 198agent 107javascript 107LLM 101agentic-ai 101skills 96cursor 84chatgpt 58nextjs 56copilot 51
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.
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.
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…
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…
dvasyliev/ai-dev-tools-getting-started
Skill Claude CodeCodex
Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance.
Skill Claude CodeCodex
Review custom components and layouts against shadcn design patterns, visual style conventions (Vega, Nova, Maia, Lyra, Mira), composition rules, design token usage, and Radix/Base UI composition patterns. Use PROACTIVELY after writing or modifying any custom UI component, page layout, or variant of a shadcn component.…
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 / Lumeo.Flow), or when the user mentions Lumeo components (Button, DataGrid, Sheet, Dialog, Tabs…
leejpsd/typescript-react-nextjs-patterns
Skill Claude CodeCodex
Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging, and code review.…
Curiosity-Ai-BV/Babylonjs-Skill
Skill Claude CodeCodex
Babylon.js 8 3D engine development expertise with curated API patterns, code examples, and on-demand documentation access. Use when working with Babylon.js scenes, meshes, materials (PBR/Standard), cameras, lights, shadows, GUI (2D/3D), animations, physics (Havok), thin instances, glTF loading, post-processing, WebXR…
Skill Claude CodeCodex
Pixel-faithful clone of any web UI into the user's existing stack, using whatever sources are available — a screenshot alone, a live URL, raw HTML/CSS, or any combination. Use this skill whenever the user wants to recreate, match, replicate, or "clone" a design from a screenshot, image, URL, Figma export, or HTML…
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.
Skill Claude Code
Use this skill when writing, reviewing, or deciding where to place tests in the Next.js frontend package. Covers which project (unit / integration / storybook) to use for a given scenario, what NOT to duplicate across projects, and file placement conventions for this package.
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…
pomerium/mcp-app-typescript-template
Skill Claude CodeCodex needs its repo
Add a new widget (React UI + MCP tool) to this template. Use when asked to "add a widget", "add a new tool with UI", "create a new widget", "scaffold a widget", or "build a new MCP App feature".
Skill Claude CodeCodex
Node.js project architecture standards for AI-assisted development. Enforces file splitting (<400 lines), config externalization, route modularization, and admin dashboards. Use when creating new Node.js projects, refactoring large single-file codebases, or when AI context window is being consumed by oversized files.…
awesome-skills/create-html-deck
Skill Codex
Create, edit, and verify polished browser-native HTML slide decks. Use when the user asks for an HTML presentation, browser-based PPT, weekly-share deck, technical talk, or a slide deck that must display safely on laptops and 16:9 projectors.
Arnie936/higgsfield-website-skill
Skill Claude CodeCodex
Baue eine cinematische Scroll-Website mit KI-generierten Videos (Higgsfield MCP, Seedance 2.0) und Scroll-Scrub-Animationen — Portfolios, Produkte, E-Commerce, Restaurants, Immobilien, Autos, SaaS, Agenturen, Gyms, Journeys. Nutze diesen Skill IMMER, wenn der Nutzer eine Website mit KI-Video, eine cinematische…
Skill Claude CodeCodex
Generative UI with OpenUI: build apps and agents whose model responses render as live interfaces. Use when the task involves OpenUI, OpenUI Lang, @openuidev/ packages, OpenUI Gateway, Autofix, or the @openuidev/cli (create, generate, deploy), or when the user wants a generative UI chat, agent, or dashboard.
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…
Skill Claude CodeCodex
Use when building or changing Blade views that use WireKit components ( ) in a Laravel Livewire application: forms, layout, navigation, overlays, tables, charts and theming. Covers looking up props and their values, the intent and surface conventions, design tokens, and the WireKit MCP tools.
Skill Claude CodeCodex
Run after making React changes to catch issues early. Use when reviewing code, finishing a feature, or fixing bugs in a React project.
Skill Claude Code
CSS and styling best practices. Use when working with styles, layouts, or theming.
Skill Claude Code
Use this whenever the user asks to "implement", "add", "build", "create", or "modify" a feature, page, view, component, or module in this Vue project. Three phases: Phase 0 scope analysis (flows + edge cases + UI needs + plan validation, STOP for user), Phase 1 implementation (layered UI → Store → API, Vue 3…
Skill Claude CodeCodex
Sui frontend dApp development with @mysten/dapp-kit-react (React) and @mysten/dapp-kit-core (Vue, vanilla JS, other frameworks). Use when building browser apps that connect to Sui wallets, query on-chain data, or execute transactions. Use alongside the sui-ts-sdk skill for PTB construction patterns.
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: