400 tagged design-systems, measured the same way as everything else here.
Browse within: ai-design 175coding-agents 175byok 173figma 158design-engineering 139local-first 119claude-design 113design-tokens 108product-design 97ai-coding 96cursor 80hackathon 77ai-tools 74claude-code-plugin 64
Skill Claude CodeCodex
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation…
Skill Claude CodeCodex
Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Use when an agent needs to pick or translate named effects like soft blur in, typewriter, shared axis, line reveal, stagger, crossfade, or kinetic builds into WAAPI, Motion, Framer Motion, GSAP, CSS, Lottie, Rive, or…
HermeticOrmus/LibreUIUX-Claude-Code
Skill Claude CodeCodex
Integrating Chrome DevTools and browser automation via MCP for live UI inspection, screenshot-to-code workflows, and visual debugging. Bridges the gap between design and implementation.
Skill Claude Code
Translate designs to code (technical phase — benefits from capable models) — use when: build this, implement, code this up, build me a X, add a X to the app, make the X page.
aaldere1/awesome-design-systems
Skill Claude CodeCodex
Reference library of 58 world-class design systems from companies like Linear, Stripe, Vercel, Apple, Notion, Spotify, and more. Use when designing UI components, choosing visual direction, implementing design tokens, or when asked to match a specific company's design aesthetic. Each reference includes typography…
donaldrichard19-LVD/pattern-mcp
Skill Claude CodeCodex
Use when building, prototyping or scaffolding UI (a component, page or screen), especially from a Figma link, mockup or screenshot. Checks the project's own design system first to decide reuse versus build, returns the exact unmet requirements to build, then verifies the built file. Skip trivial primitives (button…
Skill Claude CodeCodex
Use this skill when the user mentions ANY of: "design", "redesign", "UI", "UX", "styling", "component", "accessibility", "a11y", "WCAG", "contrast", "spacing", "typography", "color", "layout", "responsive", "touch target", "focus", "keyboard", "screen reader", "design system", "shadcn", "refactor UI", "audit", "review…
Skill Claude CodeCodex
Qualitative and quantitative data synthesis — affinity mapping, thematic analysis, statistical frameworks, insight triangulation, and research-to-spec pipelines.
seansmithworks/impeccable-swift
Skill Claude Code
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a SwiftUI interface on Apple platforms (iOS 26+, iPadOS 26+, macOS 26+, visionOS, watchOS). Covers app shells, screens, views, components, navigation…
Skill Claude CodeCodex
Perform a two-phase codebase rationalization on a Lovable project — a comprehensive read-only audit to find dead code, unused code, obsolete dependencies, duplicated implementations, and maintainability risks, followed by a strictly-scoped, approval-gated cleanup of only the batches the user explicitly approves. Use…
Skill Codex
Build or improve visually distinctive, product-specific web interfaces, from brand pages to working apps and components. Use for frontend implementation, redesign, reference-led builds, or improving generic-looking UI. Preserve existing behavior and design systems. Review without editing when asked for an audit; skip…
Skill Claude Code
Use this skill when creating, redesigning, critiquing, reducing, polishing, hardening, or making design decisions for a user-facing interface, brand surface, product UI, component, dashboard, flow, app shell, onboarding, empty state, or visual system. Applies Mies van der Rohe-inspired restraint, the Interface Craft…
Skill Codex needs its repo
Cook raw brandbooks into agent-ready skills. Use when a user wants to convert brand guidelines, a Figma library, PDF, presentation, website, asset archive, interview, or loose identity system into a reusable brand-specific Agent Skill, update or audit one, or prepare a brand skill for presentations, documents…
Skill Cursor
A design skill for planning how websites, dashboards, mobile screens, and agent interfaces look and move, including cinematic pages with layered motion.
alexconner-79/high-plains-drifter
Skill Claude CodeCodex
Align a design to your real Storybook components instead of reconstructing it. Use when turning a Figma frame into React built from an existing component library (Build mode), or when pulling scrappy exploratory code into line with the library once a direction feels right (Align mode). Triggers include "build this…
namanmehta96/ultra-frontend-skill
Skill Claude CodeCodex
Master frontend skill for Claude Code. Synthesizes ultra-frontend design system, uiuxpromax design intelligence, superdesign.dev aesthetics, framer-motion + GSAP full plugin ecosystem, 21st.dev component patterns, Three.js 3D, shadcn/ui, and production-grade architecture. Invoke for ANY visual web task: landing pages…
Skill Claude CodeCodex
Distance-based pointer trail emitter craft in full — emit per path distance (not timer), sub-segment placement, ring-buffer ordering, emitter lag, idle breath, coasting, touch/reduced-motion fallbacks, cleanup. Decorative only.
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: