sumi

In the author's own words, from each skill's SKILL.md — showing the first 30 of 45 files.

• accessibility-inclusive-design

  WCAG 2.2 compliance, ARIA authoring patterns, screen reader and keyboard navigation, color contrast, and cognitive/neurodiversity accommodations. Use when auditing accessibility, fixing a11y violations, choosing ARIA roles, checking contrast ratios, or designing for ADHD, dyslexia, autism, or motor impairment.

  skills/accessibility-inclusive-design/SKILL.md on GitHub (opens in a new tab)

• agentic-ai-generative-ux

  Design patterns for agentic AI: multi-agent orchestration UX, generative UI, RAG interfaces, LLM hallucination guardrails, confidence indicators, and trust calibration. Use when designing AI copilots or autonomous agents, adding verification affordances, or auditing an AI feature for safety, control, and consent.

  skills/agentic-ai-generative-ux/SKILL.md on GitHub (opens in a new tab)

• ai-design-generation

  Produce visual assets from AI image and UI models through MCP — Stitch screens, Fal.ai (Imagen, FLUX, Veo), Recraft V3 vectors, GPT-Image and Figma file access — with prompt patterns and quality scoring. Use when rendering mockups, icons, illustrations or video. Not for interface copy; not for agent UX.

  skills/ai-design-generation/SKILL.md on GitHub (opens in a new tab)

• ai-spatial-voice-ux

  AI-native interface patterns, conversational and voice UX, spatial computing (AR/VR/MR), and multimodal interaction. Use when designing a chatbot or assistant, a voice-first flow, headset or mixed-reality UI, or when combining speech, gaze, and gesture input.

  skills/ai-spatial-voice-ux/SKILL.md on GitHub (opens in a new tab)

• ambient-calm-zero-ui

  Calm technology principles, zero-UI and screenless patterns, ambient displays, proactive intelligence, and peripheral attention design. Use when designing smart home, automotive, wearable, or background-intelligence experiences, or reducing notification and attention load.

  skills/ambient-calm-zero-ui/SKILL.md on GitHub (opens in a new tab)

• animation-recipe-library

  200+ copy-paste animation recipes in CSS, Framer Motion, and GSAP: entrances, micro-interactions, page transitions, scroll-driven effects, spring physics, and cursor and text effects, each with timing, easing, and a reduced-motion fallback. Use when you need working motion code rather than motion principles.

  skills/animation-recipe-library/SKILL.md on GitHub (opens in a new tab)

• business-design-templates

  Client-facing design deliverables: proposals, SOWs, case studies, pitch decks, pricing calculators, project briefs, and handoff documentation. Use when packaging design work for a client, an executive, or a portfolio — the artifact that leaves the team, not the interface itself.

  skills/business-design-templates/SKILL.md on GitHub (opens in a new tab)

• cognitive-psychology-ux

  Laws of UX (Fitts, Hick, Miller, Jakob, Peak-End, Doherty), Gestalt principles, cognitive biases, mental models, attention, and memory constraints. Use when auditing cognitive load, sizing tap targets, reducing choice overload, fixing decision fatigue, or grounding a design decision in research.

  skills/cognitive-psychology-ux/SKILL.md on GitHub (opens in a new tab)

• color-palette-library

  500+ ready-made color palettes with contrast scores, plus OKLCH palette generation, dark-mode luminance mapping, semantic color architecture, and data-viz scales. Use when picking or generating a specific palette. For color theory and hierarchy craft, use ui-visual-design-system.

  skills/color-palette-library/SKILL.md on GitHub (opens in a new tab)

• component-patterns-code

  Production UI component code in React/TypeScript, SwiftUI, and modern CSS with full state matrices, ARIA attributes, keyboard handling, and design token consumption. Use when building or reviewing a button, modal, form, input, table, or any component that needs all of its states covered.

  skills/component-patterns-code/SKILL.md on GitHub (opens in a new tab)

• conversion-optimization-patterns

  Evidence-based conversion patterns: CTA design, pricing page psychology, form and checkout friction, trust signals, social proof placement, urgency, and funnel analysis. Use when asking why people are not finishing a flow, or optimizing signup, cart, or pricing for completion.

  skills/conversion-optimization-patterns/SKILL.md on GitHub (opens in a new tab)

• cross-cultural-i18n-ux

  Internationalization and localization: RTL layouts with CSS logical properties, CJK typography, text expansion, locale-aware formatting, cultural color semantics, and Hofstede's dimensions applied to interfaces. Use when shipping to new markets, adding Arabic or Hebrew support, or pseudo-localization testing.

  skills/cross-cultural-i18n-ux/SKILL.md on GitHub (opens in a new tab)

• data-visualization-mastery

  50+ chart types with selection criteria, dashboard composition, data tables, KPI cards, sparklines, heatmaps, and accessible data presentation, with React code (Recharts, D3, Nivo) and data-viz tokens. Use when designing charts, dashboards, or any data-dense screen.

  skills/data-visualization-mastery/SKILL.md on GitHub (opens in a new tab)

• design-critique-case-studies

  Structured design critique using the Liz Lerman Critical Response Process, plus deep-dives on Stripe, Linear, Notion, Airbnb, Figma, and Arc, and post-mortems of redesign failures like Snapchat 2018 and Sonos 2024. Use when running a critique session, giving design feedback, or learning from a shipped product.

  skills/design-critique-case-studies/SKILL.md on GitHub (opens in a new tab)

• design-memory

  The .sumi/ design memory contract — which files exist, the canonical style.json schema, which command owns which subtree, read order, and merge rules. Use whenever a command reads or writes .sumi/, or when design decisions from an earlier command must survive into a later one.

  skills/design-memory/SKILL.md on GitHub (opens in a new tab)

• design-process-methods

  Design process methodology: NNG's six phases, Double Diamond, Google Design Sprint, IDEO, Lean UX, and the bridge from AI-assisted building to evidence-based UX. Use when framing how the work should run, planning a sprint, or grounding a build in Empathize, Define, Ideate, Prototype, Test.

  skills/design-process-methods/SKILL.md on GitHub (opens in a new tab)

• design-systems-architecture

  Design system architecture: W3C design tokens, Style Dictionary pipelines, component library structure, theming, multi-brand token tiers, governance, versioning, and maturity models. Use when starting or scaling a design system, generating tokens, or setting up design-to-code distribution.

  skills/design-systems-architecture/SKILL.md on GitHub (opens in a new tab)

• design-token-presets

  20+ ready-to-deploy token systems by industry vertical, each in W3C DTCG JSON, CSS custom properties, and Tailwind v4 @theme, with Style Dictionary config and Figma Variables mapping. Use when you want a vetted starting token set. For architecting your own, use design-systems-architecture.

  skills/design-token-presets/SKILL.md on GitHub (opens in a new tab)

• desktop-app-design

  Desktop and enterprise application patterns: data-dense interfaces, dashboards, data tables, keyboard-first interaction, multi-window layouts, and data visualization. Use when designing an admin panel, analytics dashboard, or professional tool with complex workflows.

  skills/desktop-app-design/SKILL.md on GitHub (opens in a new tab)

• figma-design-tool-workflows

  Figma mastery and design-to-code: Auto Layout, component architecture, variable modes, Dev Mode handoff, Figma MCP server integration, Code Connect, and token pipelines. Use when working in Figma, converting designs to code, or setting up a design-to-code flywheel.

  skills/figma-design-tool-workflows/SKILL.md on GitHub (opens in a new tab)

• form-design-encyclopedia

  200+ form patterns covering every input type, layout, validation strategy, multi-step wizard, and error state, with production React and CSS, accessibility requirements, and mobile optimization. Use when building or fixing a form, choosing a validation approach, or reducing abandonment on signup and checkout.

  skills/form-design-encyclopedia/SKILL.md on GitHub (opens in a new tab)

• icon-illustration-systems

  Icon and illustration systems: grid and sizing scales, library selection (Lucide, Heroicons, Phosphor, SF Symbols, Material Symbols), illustration style guides, SVG optimization, and accessible iconography. Use when choosing an icon set, sizing icons, or establishing an illustration style.

  skills/icon-illustration-systems/SKILL.md on GitHub (opens in a new tab)

• image-media-patterns

  Image, video, and media UI patterns: hero and product imagery, galleries, carousels, video and audio players, avatars, thumbnails, aspect ratios, cropping, lazy loading, responsive images, and media accessibility. Use when placing media on a page or building a gallery or player.

  skills/image-media-patterns/SKILL.md on GitHub (opens in a new tab)

• interaction-motion-design

  Micro-interactions, animation timing and easing curves, spring physics, transition choreography, haptic feedback vocabularies, and emotional design. Use when adding or reviewing animation, tuning motion duration, designing haptics, or supporting prefers-reduced-motion.

  skills/interaction-motion-design/SKILL.md on GitHub (opens in a new tab)

• layout-block-intelligence

  500+ individual section patterns — heroes, feature grids, pricing tables, testimonials, CTAs, footers, FAQs, stats, timelines — each with specs, spacing, and code. Use when choosing or building one section. For ordering sections into a whole page, use page-composition-engine.

  skills/layout-block-intelligence/SKILL.md on GitHub (opens in a new tab)

• micro-copy-intelligence

  1000+ microcopy and UX-writing templates by component, tone and sector: button labels, every error message and failure state, empty states, tooltips, confirmations, permission requests and notifications. Use when writing any interface string — robotic copy is the loudest slop tell.

  skills/micro-copy-intelligence/SKILL.md on GitHub (opens in a new tab)

• mobile-ux-design

  Mobile-first design: touch targets, gesture systems, thumb zones, responsive layout, mobile forms and navigation, iOS 26 Liquid Glass, Material 3 Expressive, and wearable/IoT patterns. Use when designing or auditing an iOS, Android, or responsive mobile experience.

  skills/mobile-ux-design/SKILL.md on GitHub (opens in a new tab)

• navigation-pattern-encyclopedia

  Every navigation pattern with specs, trade-offs, and production code: top bars, sidebars, bottom tabs, mega menus, breadcrumbs, command palettes, and contextual and mobile navigation. Use when choosing a nav model, fixing discoverability, or structuring information architecture.

  skills/navigation-pattern-encyclopedia/SKILL.md on GitHub (opens in a new tab)

• nng-ux-heuristics

  Jakob Nielsen's 10 usability heuristics with modern interpretation, evaluation protocol, and 0-4 severity rating scale. Use when running a heuristic evaluation or usability review, rating the severity of a finding, or grounding UX feedback in established principles.

  skills/nng-ux-heuristics/SKILL.md on GitHub (opens in a new tab)

• page-composition-engine

  100+ full-page recipes giving exact block order, spacing rhythm, visual pacing, and content hierarchy for landing pages, dashboards, e-commerce, auth, settings, and profiles. Use when composing a whole page. For a single section in isolation, use layout-block-intelligence.

  skills/page-composition-engine/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod… 280k stars · 30 skills
• reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries. 270k stars · 1 skill
• andrej-karpathy-skillsby multica-ai A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls. 220k stars · 1 skill
• ponytailby DietrichGebert Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote. 164k stars · 6 skills
• ui-ux-pro-max-skillby nextlevelbuilder An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. 136k stars · 7 skills
• graphifyby Graphify-Labs Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Curs… 127k stars · 1 skill