ReddRadar
Agent skill
ui-design-aesthetics
Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics.
Install this agent skill to your Project
npx add-skill https://github.com/NickCrew/Claude-Cortex/tree/main/skills/ui-design-aesthetics
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
NickCrew/Claude-Cortex
claude-consult
Consult Claude specialist agents during implementation for codebase understanding, pattern checking, security review, debugging help, and more. Use this skill whenever you're unsure about conventions, stuck on a failure, or need expert input before writing code. Does not replace the formal review gates in agent-loops — this is for mid-implementation consultation.
NickCrew/Claude-Cortex
doc-quality-review
Assess documentation quality across readability, consistency, audience fit, and prose clarity. Produces a scored review with actionable findings. This skill should be used before releases, during doc reviews, or when documentation feels unclear or inconsistent.
NickCrew/Claude-Cortex
event-driven-architecture
Event-driven architecture patterns with event sourcing, CQRS, and message-driven communication. Use when designing distributed systems, microservices communication, or systems requiring eventual consistency and scalability.
NickCrew/Claude-Cortex
prompt-engineering
Optimize prompts for LLMs and AI systems with structured techniques, evaluation patterns, and synthetic test data generation. Use when building AI features, improving agent performance, or crafting system prompts.
NickCrew/Claude-Cortex
compliance-audit
Regulatory compliance auditing across GDPR, HIPAA, PCI DSS, SOC 2, and ISO frameworks with automated evidence collection and gap analysis. Use when conducting compliance assessments, preparing for certifications, or implementing regulatory controls.
NickCrew/Claude-Cortex
react-performance-optimization
React performance optimization patterns using memoization, code splitting, and efficient rendering strategies. Use when optimizing slow React applications, reducing bundle size, or improving user experience with large datasets.
Didn't find tool you were looking for?