CSS and styling

BlueStarSystem/aura-ui

MCP server Claude CodeCodexCursor +2

Discover and install Aura UI Blade components for Laravel, Livewire and Tailwind CSS 4. Remote server at aura-ui.com.

glorynguyen/gsap-mcp

MCP server Claude CodeCodexCursor +2

GSAP MCP server - Complete GSAP animation API reference via Model Context Protocol. Runs locally from the @vinhnguyen/gsap-mcp npm package.

zrk222/code-factory

Skill Claude CodeCodex

Build or review substantial full-stack and product-facing UI work with evidence-bound architecture, production, accessibility, interaction, and ethical UX gates. Skip trivial edits and non-product documentation.

zingspark/create-harness-vibe-coding

Skill Codex

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers…

itonys/7onic

Plugin Claude Code

Bundles 2 skills, 1 agent · 193 tokens together

7onic Design System AI Kit — MCP server (token search, component catalog, layout recipes, validatecode rule checking), /7onic-setup and /7onic-design skills, and a design implementation agent. Queries in English, Japanese, and Korean.

jrpool/kilotest

Skill Claude CodeCodex

Kilotest uses an ensemble of 12 rule engines to test web pages for front-end quality, including accessibility, usability, and web standards such as HTML, CSS, ARIA, and WCAG. Use when learning which pages have been tested and which reports about test results for a page are available, investigating the reported issues…

fellipeutaka/leon

Plugin Claude Code

Bundles 35 skills · 2,722 tokens together

Skills for building, reviewing, and optimizing frontend interfaces.

JNZader/repoforge

Skill Claude Code

Four quality gate checklists for frontend: baseline visual, accessibility, metadata/SEO, and motion performance. Post-implementation quality gates. Trigger: When reviewing UI changes, before merging frontend PRs, during sdd-verify.

jmg698/Font-Lab

Skill Claude CodeCodex

Use when a user wants to choose, change, compare, or improve the FONTS / typography of their web app — ANY framework: Next.js, Vite, Astro, Remix, SvelteKit, TanStack, plain CSS ("pick a font", "these fonts look generic/AI-generated", "make the headings nicer", "what typeface should I use", "change the font"). Font…

reaviz/skills

Skill Claude CodeCodex

Use when the user asks to set up, install, or migrate to the Unify Theme for reablocks — a production-ready theme pack built on a three-level design-token system (primitives → semantic → Tailwind utilities) synced with the Unify Figma library. Covers the single-file themeUnify.ts TypeScript download, the Reablocks…

crazyzlnofficial/layout-discipline

Skill Claude CodeCodex

A set of rules for keeping AI-generated web pages visually consistent, including their text sizes, spacing, alignment, cards, and colors.

HongMing-Huang/pretext-frontend-motion

Skill Codex

Build bold text-driven frontend demos across Accordion, Bubbles, Dynamic Layout, Variable Typographic ASCII, Editorial Engine, Justification Comparison, Rich Text, and Masonry. Use when the request needs strong frontend style, intentional typography, routed text layout, width-tight multiline UI, or kinetic typography…

isdou/aoleme-ui-skill

Skill Claude Code

Generate dark neon cyber-fantasy dashboards, glassmorphism surfaces, and gamified React and Tailwind UIs.

ntaffzii/Skill-Agents

Skill Codex

Design, implement, harden, and review production-grade user interfaces for web apps, dashboards, SaaS products, admin tools, forms, and responsive frontend components. Use when building or improving UI/UX, translating Figma or requirements into code, styling React/Vue/Svelte/HTML views, reviewing frontend quality…

AleksandarBisevac/claude-plugins

Skill Claude Code needs its repo

Edit, split or share the CSS and JavaScript under plugins/audit/scripts/ui/ — files Python concatenates into one inline and one inline carrying code, in a self-contained page opened over file://. Covers the assembly contract and the byte-level pins in tests/ that guard it, why the split must be an order-preserving cut…

Muminur/frontend-design-craft-skill

Plugin Claude Code

Bundles 4 skills, 13 commands · 605 tokens together

Website design plugin for Claude Code. Synthesizes purposeful motion, typographic polish, and anti-AI-slop taste into one design system.

bmoff/code-first-design

Cursor rule Cursor

Create new draft components or prototypes following Code-First-Design patterns.

andyw8/rails_rules

Cursor rule Cursor

Follow Rails 8.0 view standards with Tailwind CSS in ERB templates.

madebyaris/ultimate-mdc

Cursor rule Cursor

Comprehensive AI-friendly design system for cross-framework responsive applications.

pato-gonzalez/design-system-stack

Skill Claude CodeCodex

Applied workflow skill for producing Awwwards-caliber animated landing pages using Claude Design as the orchestrator, with motionsites.ai (animated backgrounds), higgsfield.io or Kling 3 (AI animation generation), Dribbble (component inspiration), shots.so (animation showcase/video edit), and land-book (landing page…

lespaceman/athena-workflow-marketplace

Plugin Claude Code

Bundles 1 skill · 241 tokens together

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.

dnh33/frontend-aesthetics

Plugin Claude Code

Bundles 1 skill · 74 tokens together

Unified frontend aesthetics skill for webshop development. Anti-AI-slop rules, distinctive typography, CSS-var palettes, purposeful motion, layered backgrounds. Optimized for e-commerce conversion with 2026 research data.

sowee121/frontend-interview-vue

Cursor rule Cursor

Coding rules for Sass, a stylesheet language, and Vite, a tool that builds front-end applications. They define naming, file organization, automatic variables, and deployment paths.

maccman/ai-expo-starter-template

Cursor rule Cursor

// ✅ GOOD: Use gap for automatic spacing const styles = StyleSheet.create({ container: { gap: 16, // Consistent 16px between all children paddingBottom: 20, }, }).