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 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 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 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 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 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 Add accessible, themeable UI to Svelte apps with shadcn-svelte. Installs and composes Button, Card, Dialog, Form, and Table components wired to design tokens and Tailwind.
mkdir -p ~/.claude/skills/shadcn-svelte && curl -fsSL https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/HEAD/skills/development/shadcn-svelte/SKILL.md -o ~/.claude/skills/shadcn-svelte/SKILL.md Build production-quality vanilla Three.js scenes (no R3F) — voxel worlds, procedural geometry, instancing/BatchedMesh, particle systems, and GLSL shader effects (bloom, god rays, depth of field, glitch). Includes EffectComposer post-processing and draw-call optimization.
mkdir -p ~/.claude/skills/threejs-scenes && curl -fsSL https://raw.githubusercontent.com/tuomashatakka/threejs-scenes-skill/HEAD/skill/SKILL.md -o ~/.claude/skills/threejs-scenes/SKILL.md Generate complete typography systems from Google Fonts. Suggests single fonts or pairs across 1,900+ families tagged by personality and contrast, then outputs a full type scale as CSS custom properties, Tailwind config, and embed links.
mkdir -p ~/.claude/skills/google-fonts && curl -fsSL https://raw.githubusercontent.com/amohavarshansankar/google-fonts-skill/HEAD/SKILL.md -o ~/.claude/skills/google-fonts/SKILL.md Extract, define, and apply a design's DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll). Turn reference images or URLs into a structured JSON profile, or generate a design from one.
mkdir -p ~/.claude/skills/design-dna && curl -fsSL https://raw.githubusercontent.com/Tricholomaaurantiumknottiness355/design-dna/HEAD/SKILL.md -o ~/.claude/skills/design-dna/SKILL.md Create data visualizations using D3.js — charts, graphs, maps, and interactive visual data explorations with production-quality output.
git clone https://github.com/chrisvoncsefalvay/claude-d3js-skill ~/.claude/skills/d3js-viz Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
mkdir -p ~/.claude/skills/design-taste-frontend && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/art-direction/SKILL.md -o ~/.claude/skills/design-taste-frontend/SKILL.md This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
mkdir -p ~/.claude/skills/emil-design-eng && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/creative-direction/SKILL.md -o ~/.claude/skills/emil-design-eng/SKILL.md Create animation-rich HTML presentations with smooth transitions, code highlighting, and interactive elements. Export-ready slide decks with modern web technologies.
git clone https://github.com/zarazhangrui/frontend-slides ~/.claude/skills/frontend-slides Lightweight meta-prompting and spec-driven development system. Forces structured thinking before coding — write specs first, then implement with clear requirements.
mkdir -p ~/.claude/skills/get-shit-done && curl -fsSL https://raw.githubusercontent.com/monsieurpepik/trainedby/HEAD/skills/get-shit-done/SKILL.md -o ~/.claude/skills/get-shit-done/SKILL.md Build and navigate iOS apps through Xcode simulator automation. Streamlines iOS development with automated building, testing, and UI interaction workflows.
mkdir -p ~/.claude/skills/ios-simulator && curl -fsSL https://raw.githubusercontent.com/KilimcininKorOglu/cli-tweaks/HEAD/claude/skills/ios-simulator/SKILL.md -o ~/.claude/skills/ios-simulator/SKILL.md Multi-agent autonomous startup system orchestrating 37 AI agents. Automates end-to-end startup operations from ideation through launch with specialized agent roles.
git clone https://github.com/asklokesh/claudeskill-loki-mode ~/.claude/skills/loki-mode