Frontend

andyhuo520/aetherviz-master

Skill Claude CodeCodex

A tool for turning a teaching topic into an interactive educational webpage with animated 2D and 3D visual elements.

saleor/storefront

Skill Claude CodeCodex

Project-specific patterns for the Saleor Paper storefront built with Next.js 16, TypeScript, and Tailwind CSS. Use when working with product pages, checkout flow, caching, variant selection, filtering, SEO, or UI components. For universal Saleor API patterns, see the saleor-storefront dependency.

internet-development/www-sacred

Skill Claude CodeCodex

Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…

hamen/material-3-skill

Plugin Claude Code

Lists 1 plugin

Material Design 3 (Material You) implementation skill for Jetpack Compose, Flutter, and web.

nucliweb/webperf-snippets

Skill Claude Code

Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation. Includes decision trees that automatically analyze…

RinDig/Interpretable-Context-Methodology

Skill Claude CodeCodex

Conventions for building a narrated Remotion video where the audio drives the timeline. Covers timing.ts, beat-local time, gap-fill sequences, and the end-card pattern.

agent0ai/space-agent

Skill Claude CodeCodex

Use HTML adapters, JS hook seams, and component loading correctly in the layered module system.

michaelshimeles/skills

Skill Claude CodeCodex

Records visual proof while testing UI behavior — the agent tests the app hands-on via computer use while a screen recording with structured test/assertion annotations captures the session — then posts the video and a results summary to the requested destination. Use when changed runtime behavior needs observable…

desko27/react-call

Skill Claude CodeCodex

Reach for the react-call library (createCallable) when building UI that resolves a value back to its caller — confirmations, dialogs, form modals, toasts, notifications, context menus, pickers. Use when a React task involves any such "await the UI" interaction, when code imports createCallable, useMutationFlow…

open-gsd/gsd-pi

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.

basementstudio/xmcp

Skill Claude CodeCodex

Best practices for designing UI widgets in xmcp. Use when creating interactive widgets for GPT Apps or MCP Apps, choosing between React components and template literals, designing widget layouts, handling state and data fetching, or troubleshooting widget rendering issues.

anl331/goey-toast

Skill Claude CodeCodex

Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion. Use when adding toast/notification UI to a React app (success/error/warning/info/promise toasts), or when the user mentions goey-toast / gooey toast.

storybookjs/react-native

Plugin Claude Code

Lists 1 plugin

Plugin marketplace listing 1 plugin: react-native-storybook.

awdr74100/figwright

Skill Claude CodeCodex

Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a…

TanStack/cli

Skill Claude CodeCodex

Scaffold a TanStack app with tanstack create using --framework, --build-tool, --template, --toolchain, --deployment, --add-ons, --blank, and --router-only. Covers flag compatibility, non-interactive defaults, and intent-preserving command construction.

AIPexStudio/AIPex

Skill Claude CodeCodex

WCAG 2.2 Accessibility Audit skill that systematically evaluates web pages against 8 core Success Criteria (1.1.1, 1.4.3, 1.4.11, 2.1.1, 2.1.2, 2.4.3, 2.4.7, 4.1.2) using accessibility tree inspection and visual analysis. Use this skill when you need to perform accessibility testing/auditing on a live webpage.

dgreenheck/webgpu-claude-skill

Cursor rule Cursor

Entry point for Three.js WebGPU + TSL guidance. Covers renderer setup, node materials, and TSL syntax fundamentals. Auto-attaches on JS/TS files in projects using three/webgpu.

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…

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…

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…

hugeicons/hugeicons

Cursor rule Cursor

Hugeicons rules for any UI work that needs icons. Covers choosing the icon library, resolving real icon names, keeping one style, and never hand-drawing an icon as inline SVG.

KroMiose/nekro-agent

Cursor rule Cursor

Frontend theme-system rules for NekroAgent, covering the theme architecture, core file structure, design principles, and usage guidance. A theme system controls shared visual choices such as colors, typography, and layouts.

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…

silships/figma-cli

Plugin Claude Code

Bundles 1 skill · 149 tokens together

Build and edit designs directly in Figma Desktop from your terminal — render frames/components/variants, manage design tokens & variables (shadcn/Tailwind/DTCG), extract & import whole design systems, gradients, Figma Motion, and accessibility audits. Controls Figma live over a local connection, no API key.