UI Design Brain
Generate production-grade UI using real component patterns and best practices from 60+...
Install
npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -g -a claude-code -y- Repository
- carmahhawwari/ui-design-brain904
- Category
- Design
- Updated
- 8mo ago
- License
- Complete terms in LICENSE.txt
- Context cost
- Mediumabout 1,950 tokens
- Runs scripts
- No, instructions only
What it does
Generate production-grade UI using real component patterns and best practices from 60+ documented interface components. Use when the user asks to build web interfaces, pages, dashboards, forms, navigation, or any UI, ensures modern, minimal, SaaS-quality output grounded in design system conventions rather than generic AI patterns.
UI Design Brain
This skill provides a curated knowledge base of 60+ UI component patterns sourced from component.gallery and enriched with best practices, layout guidance, and usage rules. It replaces generic guessing with real design-system knowledge when generating interfaces.
Before writing any UI code, consult this skill to select the right components and follow their best practices. Read components.md for the full reference.
When to Use This Skill
Apply whenever the user asks to build, design, or generate:
- Web pages, landing pages, marketing sites
- SaaS dashboards, admin panels, settings pages
- Forms, data tables, navigation structures
- Modals, drawers, popovers, or overlay patterns
- Any React, HTML/CSS, or Tailwind UI component
Design Philosophy
Every generated interface should feel modern, minimal, and production-ready, not like a template.
Core Principles
- Restraint over decoration. Fewer elements, highly refined. White space is a feature.
- Typography carries hierarchy. Pair a distinctive display font with a clean body font. Maximize weight contrast between headings and labels.
- One strong color moment. Neutral palette first (warm off-whites, near-blacks, muted mid-tones). Introduce one confident accent. If it could appear on a poster or book cover, it's probably timeless.
- Spacing is structure. Use an 8 px grid. Tighter gaps group related elements; generous gaps let hero content breathe.
- Accessibility is non-negotiable. WCAG AA contrast minimums. Focus indicators. Semantic HTML. Keyboard navigation.
- No generic AI aesthetics. Avoid: purple-on-white gradients, Inter/Roboto defaults, evenly-spaced card grids, and cookie-cutter layouts. Every interface should feel designed for its specific context.
