ui-design-aesthetics — Claude Code skill: UI design that skips
This skill feeds the agent rules for typography, color and motion so generated interfaces stop looking like default AI output. Useful when starting a feature or reworking an existing screen.
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a claude-codeWhat ui-design-aesthetics does
The skill attaches a set of design and performance instructions to your agent. Three references ship with it: aesthetic rules covering typography, color and motion; progressive disclosure with dynamic loading; and API contract validation. The agent reads them when you ask it to design a feature or refactor a UI.
The workflow runs in steps. First you pick a cohesive theme — Swiss, Neo-Brutalism and similar — and reject generic defaults. Then heavy components get flagged for lazy loading through React.lazy and dynamic imports, staggered reveals are planned, and TypeScript interfaces or Zod schemas describe the API responses. Implementation happens with Tailwind utility classes.
Performance rules are explicit. Only critical-path CSS and JS belong in the initial payload, secondary components must load on interaction or visibility via IntersectionObserver, and interactions over 100ms get optimistic UI states. The skill leans hard on its stack: React, Tailwind and TypeScript are named outright, so on a different framework you translate the advice yourself.
What it helps with
- escape the generic look of AI-generated interfaces
- pick one cohesive visual theme instead of scattered choices
- cut initial payload with lazy-loaded components
- reveal complex panels only when the user needs them
- check frontend components against the real API response shape
Example prompts for the agent
- Design a settings screen: pick a theme, define typography and color, mark what should load lazily
- Rework this table — it looks generic, give it a distinct visual language
- Check whether the component props match the API response and write the Zod schema
How to install ui-design-aesthetics
1Skills CLI (Vercel)
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a claude-code2Manually: put the files in place
~/.claude/skills/ui-design-aesthetics/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/ui-design-aesthetics/
1Skills CLI (Vercel)
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a codex2Manually: put the files in place
.agents/skills/ui-design-aesthetics/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a cursor2Manually: put the files in place
.cursor/skills/ui-design-aesthetics/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install NickCrew/Claude-Cortex ui-design-aesthetics2Manually: put the files in place
.github/skills/ui-design-aesthetics/SKILL.md1Skills CLI (Vercel)
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a gemini-cli2Platform CLI
gemini skills install https://github.com/NickCrew/Claude-Cortex --path skills/ui-design-aestheticsManually: put the files in place
.devin/skills/ui-design-aesthetics/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about ui-design-aesthetics
How do I install ui-design-aesthetics in Claude?
Run npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a claude-code. The skill lands at ~/.claude/skills/ui-design-aesthetics/SKILL.md.
What does ui-design-aesthetics do?
It gives the agent design and performance rules: theme selection, typography, color, lazy component loading and API contract validation.
Which frameworks does it target?
The instructions name React, Tailwind and TypeScript. On another stack you port the steps by hand.
Source text
SKILL.md · MIT
--- name: ui-design-aesthetics description: Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics. keywords: - design UI - visual design - aesthetic excellence - aesthetics - ui design aesthetics --- # UI Design & Aesthetics Expert guidance for designing and implementing beautiful, high-performance user interfaces. This skill enforces distinctive aesthetics while ensuring technical excellence through progressive disclosure and dynamic loading. ## Core Capabilities - **Aesthetic Direction**: avoiding "AI slop" by enforcing distinctive typography, color, and depth. - **Performance Architecture**: ensuring UI components load dynamically to minimize initial payload. - **Progressive Disclosure**: designing interfaces that reveal complexity only when needed. - **API Contract Validation**: ensuring frontend components align with backend data structures. ## Usage Use this skill when: - Designing a new feature or application from scratch. - Refactoring an existing UI to be more modern and performant. - Implementing complex dashboards or data-heavy interfaces. ## Quick Reference | Topic | Reference | | --- | --- | | Aesthetic Rules (Typography, Color, Motion) | `skills/ui-design-aesthetics/references/aesthetics.md` | | Progressive Disclosure & Dynamic Loading | `skills/ui-design-aesthetics/references/progressive-disclosure.md` | | API Contract Validation | `skills/ui-design-aesthetics/references/api-contracts.md` | ## Design Workflow 1. **Analyze & Select Aesthetic**: Choose a cohesive theme (Swiss, Neo-Brutalism, etc.) and reject generic defaults. 2. **Architect for Performance**: Identify heavy components for lazy loading (`React.lazy`, dynamic imports). 3. **Design Interaction**: Plan staggered reveals and interaction-based loading. 4. **Validate Data**: Define TypeScript interfaces or Zod schemas for API responses. 5. **Implement**: Write the code using utility classes (Tailwind) and enforcing the design system. ## Performance Requirements - **Initial Payload**: Critical path CSS/JS only. - **Dynamic Loading**: Secondary components MUST load on interaction or visibility (IntersectionObserver). - **Latency**: Design optimistic UI states for interactions > 100ms.
© NickCrew · MIT · NickCrew/Claude-Cortex
