Claude MarketplacesSubmit
nickcrew avatar

Ui Design Aesthetics

nickcrew/claude-ctx-plugin

This one's about building UIs that don't look like every other AI-generated interface. It pushes you toward distinctive design choices (specific typography, color systems, motion) while keeping performance tight through progressive disclosure and dynamic loading. You get guidance on lazy loading heavy components, validating API contracts with TypeScript or Zod, and structuring interactions so complexity appears only when users need it. Best for greenfield projects or when you're refactoring something that feels generic. The aesthetic enforcement is the real differentiator here, it actively steers you away from default Tailwind sameness toward deliberate design systems like Swiss or Neo-Brutalism.

skills.sh installs
140
GitHub stars
15
last updated
Jun 3, 2026
View on GitHub

Install

$ npx -y skills add nickcrew/claude-ctx-plugin --skill ui-design-aesthetics --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nickcrew/claude-ctx-plugin
Categories
Frontend Development, Design & UI/UX
First seen
Jun 3, 2026

More from nickcrew/claude-ctx-plugin

All 4

Recommended

More Frontend Development
1shipshitdev avatarreact-native-componentsshipshitdev/libraryreact native components135skills.sh installs
2sickn33 avatarshadcnsickn33/antigravity-awesome-skillsshadcn132skills.sh installs
3harlan-zw avatartanstack-vue-query-skilldharlan-zw/vue-ecosystem-skillstanstack vue query skilld128skills.sh installs
4sickn33 avatarandroid_ui_verificationsickn33/antigravity-awesome-skillsandroid ui verification119skills.sh installs
5agentworkforce avatarfrontend-designagentworkforce/relayCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat0skills.sh installs
6davila7 avatarCross-Site Scripting and HTML Injection Testingdavila7/claude-code-templatesThis skill should be used when the user asks to "test for XSS vulnerabilities", "perform cross-site scripting attacks", "identify HTML injection flaws", "exploi0skills.sh installs