Design systems, UX copy, accessibility reviews, generative art, and visual design.
Audit, document, or extend your design system. Checks for naming inconsistencies, hardcoded values across components, writes component documentation with variants and accessibility notes.
mkdir -p ~/.claude/skills/design-system && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/design-system/SKILL.md -o ~/.claude/skills/design-system/SKILL.md Structured design feedback on usability, hierarchy, and consistency for any stage of design.
mkdir -p ~/.claude/skills/design-critique && curl -fsSL https://raw.githubusercontent.com/tinh2/skills-hub-registry/HEAD/ux/design-critique/SKILL.md -o ~/.claude/skills/design-critique/SKILL.md Generate production-ready UI components using Tailwind CSS. Creates responsive layouts, interactive elements, dark mode variants, and accessible components following Tailwind best practices and design patterns.
mkdir -p ~/.claude/skills/tailwind-components && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/frontend-component-build/SKILL.md -o ~/.claude/skills/tailwind-components/SKILL.md Set up and configure Storybook 9 for any framework with autodetection and best practices. Scaffolds stories, args/controls, interaction tests, a11y checks, and CI-ready component documentation.
mkdir -p ~/.claude/skills/storybook-config && curl -fsSL https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/HEAD/skills/development/storybook-config/SKILL.md -o ~/.claude/skills/storybook-config/SKILL.md Create fluid animations and transitions in React with Framer Motion. Generates layout animations, gesture interactions, scroll-triggered effects, page transitions, and complex orchestrated sequences.
mkdir -p ~/.claude/skills/framer-motion && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/framer-motion/SKILL.md Compose responsive React charts with Recharts. Builds line, bar, area, pie, and composed charts from SVG primitives with custom tooltips, legends, gradients, reference lines, and responsive containers for dashboards and analytics.
mkdir -p ~/.claude/skills/recharts && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/recharts/SKILL.md Convert Figma designs to production code. Extracts design tokens, generates React/HTML components from frames, maps auto-layout to Flexbox/Grid, and syncs Figma variables to CSS custom properties.
mkdir -p ~/.claude/skills/figma-dev && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/design-standards/SKILL.md -o ~/.claude/skills/figma-dev/SKILL.md Design and code responsive HTML email templates that work across all email clients. Generates table-based layouts with inline styles, dark mode support, and compatibility with Gmail, Outlook, and Apple Mail.
mkdir -p ~/.claude/skills/email-template && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/email-deliverability/SKILL.md -o ~/.claude/skills/email-template/SKILL.md Build headless rich-text editors with Tiptap. Configures the ProseMirror-based editor, custom extensions and nodes, slash commands, bubble/floating menus, collaborative editing, and clean HTML/JSON output you fully style.
mkdir -p ~/.claude/skills/tiptap && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/tiptap/SKILL.md Build accessible drag-and-drop with dnd kit. Implements sortable lists, kanban boards, and draggable canvases with keyboard support, collision detection, drag overlays, and sensors — lightweight and free of external dependencies.
mkdir -p ~/.claude/skills/dnd-kit && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/dnd-kit/SKILL.md Model type-safe component variants with class-variance-authority (CVA). Defines variant, size, and state class maps with compound variants and defaults, then merges them cleanly with tailwind-merge for reusable design-system components.
mkdir -p ~/.claude/skills/cva && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/typescript-pro/SKILL.md -o ~/.claude/skills/cva/SKILL.md Build production-grade web animations with GSAP (GreenSock). Creates timeline sequences, scroll-triggered effects, SVG and text animation, and physics-based easing with performant, framework-agnostic code.
mkdir -p ~/.claude/skills/gsap && curl -fsSL https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/HEAD/skills/development/gsap/SKILL.md -o ~/.claude/skills/gsap/SKILL.md Build physics-based animations in React with React Spring. Creates spring-driven transitions, gesture-linked motion, trails, and imperative animation controllers that respond naturally to state changes.
mkdir -p ~/.claude/skills/react-spring && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/react-spring/SKILL.md Build interactive 3D web experiences with Three.js. Set up scenes, cameras, meshes, materials, lights, and animations; handle textures and loaders; and optimize WebGL/WebGPU rendering for product configurators, data viz, and immersive sites.
mkdir -p ~/.claude/skills/threejs-webgl && curl -fsSL https://raw.githubusercontent.com/freshtechbro/claudedesignskills/HEAD/.claude/skills/threejs-webgl/SKILL.md -o ~/.claude/skills/threejs-webgl/SKILL.md Audit web applications for WCAG 2.2 AA/AAA compliance. Checks color contrast, keyboard navigation, ARIA attributes, screen reader compatibility, focus management, and generates remediation code fixes.
mkdir -p ~/.claude/skills/accessibility-audit && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/accessibility-audit/SKILL.md -o ~/.claude/skills/accessibility-audit/SKILL.md Animate anything on the web with Anime.js — a lightweight, framework-agnostic JS animation engine. Builds timelines, staggered grids, SVG line drawing and morphing, and scroll-triggered sequences with fine-grained easing control.
mkdir -p ~/.claude/skills/anime-js && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/javascript-pro/SKILL.md -o ~/.claude/skills/anime-js/SKILL.md Render After Effects animations on the web with Lottie. Integrates lottie-react and lottie-web, controls playback and segments, syncs animation to scroll or state, and optimizes JSON payloads for performance.
mkdir -p ~/.claude/skills/lottie-web && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/lottie-web/SKILL.md Build accessible, headless UI with Radix Primitives. Composes dialogs, menus, popovers, and comboboxes with correct focus management and ARIA, then styles them with your own tokens and compound-component patterns.
mkdir -p ~/.claude/skills/radix-ui-design-system && curl -fsSL https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/HEAD/skills/design/radix-ui-design-system/SKILL.md -o ~/.claude/skills/radix-ui-design-system/SKILL.md Build type-safe, zero-runtime CSS with Panda CSS. Creates design tokens, recipes, slot recipes, and responsive patterns with compile-time CSS extraction — no runtime overhead from the Chakra UI team.
mkdir -p ~/.claude/skills/panda-css && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/design-system/SKILL.md -o ~/.claude/skills/panda-css/SKILL.md Transform design tokens into platform code with Style Dictionary. Defines a single source of truth for color, spacing, and typography, then builds CSS variables, Tailwind config, iOS/Android, and JS outputs from one token set.
mkdir -p ~/.claude/skills/style-dictionary && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/javascript-pro/SKILL.md -o ~/.claude/skills/style-dictionary/SKILL.md Style with UnoCSS — the instant, on-demand atomic CSS engine. Configures presets, custom rules and shortcuts, variant groups, and attributify mode for a fully customizable, faster alternative to utility CSS frameworks.
mkdir -p ~/.claude/skills/unocss && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/javascript-pro/SKILL.md -o ~/.claude/skills/unocss/SKILL.md Add zero-config motion to any UI with FormKit AutoAnimate. Drops a single directive onto a parent element to smoothly animate children as they are added, removed, or reordered — across React, Vue, Svelte, Solid, and vanilla JS.
mkdir -p ~/.claude/skills/auto-animate && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/auto-animate/SKILL.md Architect a design-token system — semantic color, typography, spacing, and radius scales as CSS variables with light/dark themes. Uses the Tailwind CSS 4 @theme directive for a single source of truth.
mkdir -p ~/.claude/skills/design-tokens && curl -fsSL https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/HEAD/skills/development/design-tokens/SKILL.md -o ~/.claude/skills/design-tokens/SKILL.md Write type-safe, zero-runtime CSS in TypeScript with vanilla-extract. Authors styles in .css.ts files, builds themes with CSS variable contracts, and generates atomic sprinkles utilities — all statically extracted at build time.
mkdir -p ~/.claude/skills/vanilla-extract && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/typescript-pro/SKILL.md -o ~/.claude/skills/vanilla-extract/SKILL.md