nickcrew/ui-design-aesthetics
skills/ui-design-aesthetics/SKILL.md
Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics.
$ install --global
skillsauthnpx skillsauth add nickcrew/claude-ctx-plugin ui-design-aestheticsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 12:07 PM8.8s4 files scanned
SKILL.md
- name:
- ui-design-aesthetics
- description:
- Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive 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
- 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.
Related Skills
nickcrew/writing-skills
testing
VerifiedTrustedCommunity
Use when creating new skills, editing existing skills, or verifying skills work before deployment - applies TDD to process documentation by testing with subagents before writing, iterating until bulletproof against rationalization
15SKILL.mdUpdated Apr 15, 2026
nickcrew/workflow-security-audit
testing
VerifiedTrustedCommunity
Comprehensive security assessment and remediation. Use for security reviews, compliance checks, vulnerability assessments.
15SKILL.mdUpdated Apr 15, 2026
nickcrew/workflow-performance
research
VerifiedTrustedCommunity
Systematic performance analysis and optimization. Use when things are slow, need optimization, or preparing for scale.
15SKILL.mdUpdated Apr 15, 2026
nickcrew/workflow-feature
development
VerifiedTrustedCommunity
Complete feature development workflow from design to deployment. Use when implementing new features or functionality.
15SKILL.mdUpdated Apr 15, 2026