Practical UI design principles for developers and non-designers. Use when creating web interfaces, components, dashboards, landing pages, or any visual design work. Covers hierarchy, spacing, typography, color, depth, and polish. Based on Refactoring UI methodology.
Applies practical UI design principles to create professional interfaces without formal design training.
npx claudepluginhub futuregerald/futuregerald-claude-pluginThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/depth-polish.mdreferences/hierarchy-spacing.mdreferences/typography-color.mdPractical design principles for creating professional, polished user interfaces without formal design training.
Design is not about artistic talent—it's about making deliberate decisions. Focus on these fundamentals:
Never start with the shell (navbar, sidebar). Start with actual functionality:
The most important skill. When everything competes for attention, nothing stands out.
When the main element doesn't stand out, don't add more to it—reduce emphasis on competing elements.
Start with too much, then remove. Elements need breathing room.
Use a constrained scale where adjacent values differ by ~25%:
4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256, 384, 512
Base on 16px (browser default). Don't nitpick between 120px and 125px—grab from your scale.
Hand-pick a constrained set:
12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72
Use px or rem, never em (nesting breaks the system).
45-75 characters per line (20-35em). Constrain paragraphs even in wide layouts.
Hue (0-360°), Saturation (0-100%), Lightness (0-100%). More intuitive than hex/RGB.
You need far more than 5 colors:
Don't use grey text on colored backgrounds—hand-pick a color with same hue, adjusted saturation/lightness.
Light comes from above. Raised elements: lighter top edge, shadow below. Inset elements: shadow at top, lighter bottom edge.
Define 5 shadows from subtle to dramatic:
Bad photos ruin good designs. Use professional photography or quality stock (Unsplash).
Use instead:
Dropdowns can have columns, icons, sections. Tables can combine columns and add hierarchy. Radio buttons can be selectable cards.
For deeper guidance:
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.