ui-design-aesthetics
Generates aesthetic UI design patterns focused on performance and usability.
Install
mkdir -p .claude/skills/ui-design-aesthetics && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16025" && unzip -o skill.zip -d .claude/skills/ui-design-aesthetics && rm skill.zipInstalls to .claude/skills/ui-design-aesthetics
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics.Key capabilities
- →Enforce distinctive typography, color, and depth for aesthetics
- →Ensure UI components load dynamically to minimize initial payload
- →Design interfaces that reveal complexity only when needed
- →Validate frontend components against backend data structures
- →Analyze and select a cohesive aesthetic theme
- →Plan staggered reveals and interaction-based loading
How it works
The skill enforces distinctive aesthetics, ensures dynamic loading of UI components, and designs interfaces that reveal complexity progressively.
Inputs & outputs
When to use ui-design-aesthetics
- →Designing new UI components
- →Modernizing existing dashboards
- →Implementing progressive disclosure
- →UI aesthetic planning
About this skill
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
- Analyze & Select Aesthetic: Choose a cohesive theme (Swiss, Neo-Brutalism, etc.) and reject generic defaults.
- Architect for Performance: Identify heavy components for lazy loading (
React.lazy, dynamic imports). - Design Interaction: Plan staggered reveals and interaction-based loading.
- Validate Data: Define TypeScript interfaces or Zod schemas for API responses.
- 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.
Limitations
- →Initial payload must only contain critical path CSS/JS
- →Secondary components must load on interaction or visibility
- →Optimistic UI states are needed for interactions over 100ms
How it compares
This skill enforces distinctive aesthetics and technical excellence through progressive disclosure and dynamic loading, preventing generic UI designs.
Compared to similar skills
ui-design-aesthetics side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ui-design-aesthetics (this skill) | 0 | 3mo | No flags | Intermediate |
| ui-styling | 12 | 9mo | Review | Beginner |
| figma | 22 | 4mo | No flags | Intermediate |
| interaction-design | 15 | 5mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by NickCrew
View all by NickCrew →You might also like
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
figma
openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.