Design & UX

UI, UX, design systems, accessibility, visual design, and frontend polish

skills in category: 9,095
pages available: 379

Security grades appear on each card once the skill has been scanned. Newly imported skills may briefly show without a grade until the backfill job runs.

Open in full browser

Browse design & ux skills

Showing 1–24 of 9,095 skills

ui-ux-ultra-max-skillAUse when designing, redesigning, critiquing or polishing the UX or UI of an app, website, feature, flow, screen or component, starting from an idea, brief, problem statement, user flow, screenshot, Figma or Penpot frame, or existing code. Also use when a design looks generic, templated or AI-made and lacks craft or taste; when the target user or persona is unclear; when asking which UX laws, Gestalt, psychology or persuasion principles apply, or whether something is a dark pattern; when check...designrustgoVotes: 0
design-osAUse when working with DESIGN:OS CLI — Multi-runtime design operating system and CLI for Claude Code, OpenAI Codex, Gemini CLI, and Google Antigravity.designpythongoVotes: 0GitHub stars: 31
Apple DesignAApply Apple's interface and physical-motion principles to gesture, spring, drag, swipe, sheet, momentum, material, or reduced-motion work. Use only for an explicit Apple-style or gesture-driven request; do not use as a general UI-polish skill.designrustgoVotes: 0GitHub stars: 4
PristineAMake web UI pristine. Use when the user wants to document a product's design context (DESIGN.md), critique or rate a UI, screenshot, URL, or file, design a new page/component/flow from scratch or redesign an existing one, or polish/improve any web interface: sites, apps, components, docs, blogs, landing pages, dashboards, charts. Covers hierarchy, layout, typography, color, dark mode, responsive/mobile, 60fps motion and micro-transitions, accessibility, UX copy, edge cases, and performance. C...designgonodeVotes: 0GitHub stars: 15
Frontend Ui EngineeringABuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.designrustgoVotes: 0GitHub stars: 3
Apple Hig ButtonsAUse when designing, reviewing, or adapting action buttons, including their labels, roles, emphasis, hit regions, and platform behavior.designgoVotes: 0GitHub stars: 7
Skills DirectorySkills Directory Pro Download any skill as a ZIP for Claude.ai, Claude Desktop, or .claude/skills.See Pro
Apple Hig FoundationsAUse when designing or reviewing Apple-platform visual hierarchy, accessibility, typography, color, Liquid Glass, layout, icons, imagery, motion, privacy, inclusion, localization, or spatial interfaces.designVotes: 0GitHub stars: 7
Apple Hig MotionAUse when designing, reviewing, or adapting interface motion, interruptibility, reduced-motion behavior, game movement, or spatial animation comfort.designapiperformanceVotes: 0GitHub stars: 7
Apple Hig AccessibilityAUse when designing, reviewing, or adapting Apple-platform interfaces for text enlargement, sensory access, assistive input, motor access, cognitive needs, or accessibility preferences.designVotes: 0GitHub stars: 7
Apple HigAUse when designing, implementing, or reviewing interfaces for iOS, iPadOS, macOS, tvOS, visionOS, watchOS, CarPlay, or other Apple system experiences using Apple's Human Interface Guidelines. Routes to current platform, foundation, pattern, component, input, and technology guidance.designpythonshellVotes: 0GitHub stars: 7
Color AuditAAudit color palette for light/dark mode alignment, WCAG contrast compliance, and consistent token usage.designVotes: 0GitHub stars: 2
Typography PolishAAudit and fix prose/content typography across all rendering surfaces — articles, books, courses, chat responses, and any component rendering HTML or markdown from the database. Ensures beautiful, consistent long-form reading experiences.designbashreactVotes: 0GitHub stars: 2
Pathway VisualizationAGenerate visualization design briefs for Alan Hirsch pathway pages. Produces detailed specifications for diagrams, charts, and visual models that illustrate each pathway's core framework — suitable for handoff to a designer or asset-generate tool. Understands Alan's existing visual models (U-Shaped curve, mDNA hexagon, APEST pentagon, etc.) and translates them into actionable design briefs.designgonodeVotes: 0GitHub stars: 2
Icon AuditAAudit and fix icon and illustration usage across the codebase — mixed libraries, wrong sizes, hardcoded colors, missing accessibility, flex compression, and illustration anti-patterns. Run before any design review.designgoreactVotes: 0GitHub stars: 2
Figma PromptAGenerate a complete Figma Make prompt package — Context Primer, Checkpoint, Section Build Prompts, and Iteration Templates — for any UI page, component, or screen. Uses intent-first prompting and Figma-native vocabulary. Counterpart to the studio-prompt skill, tuned for design artifacts rather than working code.designgoreactVotes: 0GitHub stars: 2
Design SectionADesign a new UI section or component using the 5-dimension AntiGravity framework (pattern, style, color, typography, animation). Use when building a new visual section, hero, feature grid, or page layout.designgonextjsVotes: 0GitHub stars: 2
Design AuditAAudit a page or component against the AntiGravity 5-dimension design framework and project conventions. Use to check visual quality, accessibility, and consistency before shipping.designVotes: 0GitHub stars: 2
Color AuditAExpert color palette audit — verify light/dark mode alignment, WCAG contrast compliance, 60-30-10 distribution, and overall color harmony. Checks the palette itself, not just usage.designgoawsVotes: 0GitHub stars: 2
Asset Exploded ViewAGenerate deconstructed/exploded view prompts using Nano Banana 2. Use for scroll-stop content, framework visualizations, concept illustrations, or any object elegantly taken apart into its components.designtypescriptgoVotes: 0GitHub stars: 2
Asset Brand CheckAAudit generated image assets against the platform's brand guidelines. Use before publishing to verify color palette, typography, tone, and visual consistency.designgobashVotes: 0GitHub stars: 2
Asset AnimateACreate micro-animations from still images — parallax, Ken Burns, floating particles, breathing effects, cinemagraphs. Generates CSS animations, GSAP code, or short video/GIF from a static image. Use for hero backgrounds, social posts, and subtle motion design.designtypescriptgoVotes: 0GitHub stars: 2
Video ConsultAConsult on video production for a course — scripture grounding, narrative arc, storyboard, scene structure, and script. Bridges Alan's voice, course theology, and Remotion video production. Use when planning or authoring video content for any course.designgobashVotes: 0GitHub stars: 2
Visual Storytelling AuditACross-platform audit of visual storytelling components — cards, grids, stats, comparisons, numbered steps, section rhythm, and narrative flow. Ensures every visual element tells the story with the best design possible. Use when auditing pages for narrative clarity, visual hierarchy, and design token compliance.designreactgitVotes: 0GitHub stars: 2
Stitch To ReactAEnd-to-end Stitch screen migration: accepts a Stitch project/screen ID, fetches and caches HTML/Tailwind wireframes, extracts tokens, archives existing pages, converts to production React with shadcn/ui and Layer-5 hooks, and documents the new design layer-by-layer (L1 tokens → L2 tailwind → L3 primitives → L4 components → L5 layouts). Use for stitch to react, HTML to React, wireframe migration, or any Stitch screen conversion in movement-leader-websites.designshellbashVotes: 0GitHub stars: 2