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
More from nickcrew/claude-ctx-plugin
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.
1.2Kowasp-top-10
OWASP Top 10 security vulnerabilities with detection and remediation patterns. Use when conducting security audits, implementing secure coding practices, or reviewing code for common security vulnerabilities.
453helm-chart-patterns
Helm chart development patterns for packaging and deploying Kubernetes applications. Use when creating reusable Helm charts, managing multi-environment deployments, or building application catalogs for Kubernetes.
110code-explanation
Use when explaining code, concepts, or system behavior to a specific audience level - provides a structured explanation workflow with depth control and validation steps.
103security-testing-patterns
Security testing patterns including SAST, DAST, penetration testing, and vulnerability assessment techniques. Use when implementing security testing pipelines, conducting security audits, or validating application security controls.
91typescript-advanced-patterns
Advanced TypeScript patterns for type-safe, maintainable code using sophisticated type system features. Use when building type-safe APIs, implementing complex domain models, or leveraging TypeScript's advanced type capabilities.
89