Explore skills

App Ui Design

David-Li0406

design skill for Claude AI. Grade A. Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human Interface Guidelines, color theory, typography, and 2025 trends.

• design
• go
• swift

No Design Slops

Meng To

Prevent and remove generic AI-generated design defaults, incoherent visual choices, and established UI defects while creating, revising, or reviewing websites, apps, screenshots, mockups, and design code. Use as a passive quality gate during UI work or for an explicit anti-slop cleanup; preserve the chosen art direction instead of forcing a neutral redesign.

• ui review
• design quality

Web Platform Design Guidelines

ehmo

Web platform design and accessibility guidelines. Use when building web interfaces, auditing accessibility, implementing responsive layouts, or reviewing web UI code. Triggers on tasks involving HTML, CSS, web components, WCAG compliance, responsive design, or web performance.

• web platform
• accessibility

Refactoring UI Design System

wondelai

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.

• ui design
• frontend

Design Motion Principles

Kyle Zantos

Build or audit interface motion using context-sensitive design guidance and an HTML or terminal report.

• motion design
• animation

Component Family Consistency

Dembrandt

Buttons, inputs, badges and pills share radius, colour logic, shadow, border and spacing. Use when building or reviewing a component library.

• design systems
• ui design

UX Heuristics Framework

wondelai

Evaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "users are confused", "form usability", "navigation problems", "Nielsen heuristics", "cognitive walkthrough", or "is this easy to use". Also trigger when reviewing a design for usability issues, improving form-completion rates, or evaluating information architecture and navigation. Covers Krug's laws, Nielsen's 10 heuristics, severity ratings, dark-pattern recognition, and accessibility. For visual design fixes, see refactoring-ui. For conversion-focused audits, see cro-methodology.

• ux research
• usability

Expo Native UI Guidelines

Expo

Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill; for motion and animation, use the expo-animation skill.

• expo
• react native

Community Vue Skills

vuejs-ai community

Community Vue 3 workflows covering components, state, routing, testing and debugging.

• vue

Design Review

pproenca

Structured UI design review — existing code (React/JSX, CSS, Tailwind) and, when behaviour matters, the running app in a real browser — reported as a prioritised Before / After / Why table. Covers visual hierarchy, spacing, typography, colour & contrast, component states, motion, responsiveness, accessibility, multi-page flow & navigation, and interaction continuity — grounded in Refactoring UI and Emil Kowalski's principles. For animation/jank/FPS, focus order, and cross-page UX it can drive Chrome via chrome-devtools-mcp to capture what a screenshot can't. Trigger when the user asks to "review this UI", "design review", "critique this component/screen/page or multi-page flow", asks why something "looks off", "looks AI-generated", or "looks like a wireframe", or wants to raise visual polish. For building UI from scratch use web-taste; for the full animation set see emilkowal-animations.

• ui review
• ux

Sleek Mobile App Design

Sleek

Design mobile app screens with Sleek and implement selected designs in React Native or HTML.

• mobile design
• react native
• ui design

Build Awwwards-Quality Sites

Meng To

Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one smooth-scroll engine, optional Three.js shaders, honest icon and logo sourcing, photo avatars, accessibility, and performance safeguards. Use when a user asks for an Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website, or explicitly requests this visual and motion system.

• Web design
• creative development

Emil Kowalski Design Skills

Emil Kowalski

Practical UI engineering workflows from Emil Kowalski, including mobile web and edge-case testing.

• Web design

Apple Design

Hamster

Apply Apple-inspired physical motion and interface design concepts to web interactions.

• ui-design

Material Design 3

Ivan Morgillo

Apply Material Design 3 guidance to components, themes and layouts, with a primary focus on Jetpack Compose.

• material design
• android