Frontend

KeeghanM/humn

Cursor rule Cursor

Use this rule when working with Humn frontend framework code (.humn files, Cortexes).

LiskaDev/claudo

Skill Claude CodeCodex

A set of strict CSS and React component guidelines for replicating the highly dense, micro-indexed, and smoothly expanding auto-hiding scrollbar side panel UI seen in DeepSeek's chat history timeline.

Gitmaxd/ai-init

Cursor rule Cursor

name: uicomponentpatterns description: Enforce consistent folder structure and naming for UI components filters.

SerifeusStudio/threlte-mcp

MCP server Claude CodeCodexCursor +2

MCP server for AI-powered Three.js/Threlte scene inspection and manipulation. Runs locally from the threlte-mcp npm package.

gianpieropuleo/radix-mcp-server

MCP server Claude CodeCodexCursor +2

A Model Context Protocol (MCP) server for Radix UI libraries (Themes, Primitives, Colors), providing AI assistants with access to component source code, installation guides, and design tokens. Runs locally from the @gianpieropuleo/radix-mcp-server npm package. Needs 1 environment variable to run.

dazeb/mcp-react-component-harvester

MCP server Claude CodeCodexCursor +2

MCP server "mcp-component-harvester" as configured in dazeb/mcp-react-component-harvester. Runs locally from the mcp-component-harvester npm package.

doeixd/solid-skill

Skill Claude CodeCodex

Guidance for writing, reviewing, and refactoring SolidJS 1.x code using idiomatic APIs and reactivity patterns. Use this whenever the user is working in SolidJS 1.x and asks for help with components, signals, props, memos, effects, stores, control flow, or why a Solid component is not updating correctly. Also use it…

SuanFishXYY/suanfish-design-system

Skill Claude CodeCodex

A Chinese design system for creating and reviewing web interfaces, with multiple design perspectives working together. It focuses on React and Tailwind-based projects.

kkunkunya/ai-frontend-design-kit

Plugin Claude Code

Bundles 10 skills · 2,026 tokens together

AI-first frontend design toolkit for Claude Code and Codex: 7-stage flow (requirement -> six-dimension research -> dualround interview -> visual anchors -> asset gen -> code impl -> design review) + scenario C increment router + ten-line anti-slop gate + kun 15-segment DESIGN.md writer + i18n essentials. Each skill…

gbasin/figma-to-react

Plugin Claude Code

Bundles 1 skill, 1 hook, 1 MCP server · 19 tokens together

figma-to-react. Claude Code plugin for converting linear Figma screen flows into React components with exact assets, iOS-native animations, and automated visual verification.

kicchann/reqord

Skill Claude CodeCodex

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…

decantr-ai/decantr

MCP server Claude CodeCodexCursor +2

AI frontend governance for Contract context, graph artifacts, drift evidence, and repair prompts. Runs locally from the @decantr/mcp-server npm package.

uselayout/cli

Plugin Claude Code

Bundles 1 skill, 1 hook · 53 tokens together

Serve and enforce your design system in any agent. Bundles the Layout MCP server (design tokens, component specs, compliance checks) and the layout-md skill for writing on-brand UI code.

Hayatelin/taste-skill-zh-CN

Plugin Claude Code

Bundles 13 skills · 1,360 tokens together

A Chinese-language design guide for making AI-generated interfaces look more intentionally designed. It covers layout, typography, animation, and spacing.

CK42BB/procedural-stars-threejs

Skill Claude CodeCodex

Generate stunning procedural night skies, starfields, nebulae, and celestial phenomena in Three.js using WebGPU compute with WebGL2 fallback. Covers scientifically-grounded starfields with spectral color temperature, magnitude-based brightness, and twinkling; volumetric nebulae with emission/absorption/reflection…

kurenn/claude-prototype

Skill Claude CodeCodex

Build production-feel HTML prototypes for sales demos and reviews. Runs a discovery Q&A, scaffolds a zero-dep static site (HTML + Tailwind CDN + theme/layout switchers + URL-state + feedback overlay + control bar) and runs a design-quality loop. Use when the user says "prototype", "mockup", "demo", "pitch page"…

capsrock/bauhaus-design-skill

Skill Claude CodeCodex

Create frontends, posters, dashboards, and web UIs rooted in Bauhaus and Swiss International Typographic Style (Internationale Typografische Stil) design principles. Use this skill when the user mentions Bauhaus, Swiss design, International Typographic Style, grid systems, Josef Müller-Brockmann, Max Bill, Jan…

techjarves/local-llm

Skill Claude CodeCodex

Opinionated app components building on top of ./ui primitives.

virgiliojr94/duolingo-ux-reference

Skill Claude CodeCodex

World-class UI/UX reference distilled from Duolingo's PUBLIC design guidelines (design.duolingo.com) — color tokens, typography rules, and UX-writing/microcopy patterns — for frontend devs. Unofficial, not affiliated with Duolingo. Use when building or reviewing UI: choosing colors, type, button/header copy…

jongko54/webEmbedding

Plugin Claude Code

Bundles 1 skill, 1 MCP server · 107 tokens together

Clone any web page from its URL into a verified offline HTML copy, embed, or rebuild: real-browser capture plus desktop/tablet/mobile visual verification.

imMamdouhaboammar/vibe-svgs

Skill Claude CodeCodex

Turn any static SVG mascot, logo, icon, or character into physics-driven animation, using Anime.js v4 as the default engine for interactive contexts and baked CSS keyframes for README and docs assets. Use this skill EVERY TIME the user wants to animate an SVG, add motion to a mascot or logo, build animated README or…

Philotheephilix/reactbits.dev-skill

Skill Claude CodeCodex

Use when adding an animated UI component, text effect, cursor/hover effect, or WebGL/canvas background to a React project via React Bits (reactbits.dev) — or when asked to recall/write a React Bits component's code, props, or install steps from memory instead of fetching it.

deveshpunjabi/3d-website-skill

Skill Claude CodeCodex

Expert skill for designing, building, and deploying modern premium websites with advanced animations and 3D interactive experiences using Three.js, React Three Fiber, GSAP, and Framer Motion. Use this skill whenever the user wants to build a website with 3D elements, create an immersive web experience, add interactive…

tambo-labs/charming-mcp

Skill Claude CodeCodex

Create, update, inspect, or troubleshoot Charming-hosted interactive web apps via the Charming MCP server, or connect an AI client (Claude, Cursor, Codex, Gemini CLI, ChatGPT) to Charming.