Super UI UX Design
syahiidkamil/Software-Engineer-AI-Agent-Atlas
Complete UI/UX design capability — a wiki-style knowledge map of design theory (UX laws, Nielsen heuristics, usability, visual hierarchy, typography, contrast/WCAG, design systems…
Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.
Install UI Design Brain
$ npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install carmahhawwari/ui-design-brain ui-design-brain --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ui-design-brain" agent skill from https://github.com/carmahhawwari/ui-design-brain/tree/main into .claude/skills/ui-design-brain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design-brain", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install carmahhawwari/ui-design-brain ui-design-brain --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-design-brain" agent skill from https://github.com/carmahhawwari/ui-design-brain/tree/main into .agents/skills/ui-design-brain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design-brain", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install carmahhawwari/ui-design-brain ui-design-brain --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-design-brain" agent skill from https://github.com/carmahhawwari/ui-design-brain/tree/main into .cursor/skills/ui-design-brain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design-brain", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install carmahhawwari/ui-design-brain ui-design-brain --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ui-design-brain" agent skill from https://github.com/carmahhawwari/ui-design-brain/tree/main into .gemini/skills/ui-design-brain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design-brain", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install carmahhawwari/ui-design-brain ui-design-brainInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ui-design-brain" agent skill from https://github.com/carmahhawwari/ui-design-brain/tree/main into .github/skills/ui-design-brain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design-brain", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install carmahhawwari/ui-design-brain ui-design-brain --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-design-brain" agent skill from https://github.com/carmahhawwari/ui-design-brain/tree/main into .opencode/skills/ui-design-brain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design-brain", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ui-design-brain- GitHub stars
- 893
- Token cost
- ~2.1k tokens
- SKILL.md length
- 934 words
- Files
- 4
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.
- Works in 4 steps: Identify Components → Apply Best Practices → Choose a Design Direction → …
- The user asks to build web interfaces
- SKILL.md covers When to Use This Skill, Design Philosophy, Workflow and Component Quick Reference, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
UI Design Brain is an agent skill from carmahhawwari/ui-design-brain. 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.
Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `README.md` and `components.md`).
It sits in Frontend & Design, covering UI design, Design systems and Frontend development. The repository describes itself as: A Cursor skill that gives AI agents real UI component knowledge — best practices, layout patterns, and design-system conventions for 60+ interface components — so it generates… The licence is MIT.
When your agent uses it
- The user asks to build web interfaces
- Any UI — ensures modern
- SaaS-quality output grounded in design system conventions rather than generic AI patterns
Example prompts
- “/ui-design-brain”
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 38f04c5. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
component.gallery
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
UI Design Brain loads about 2.1k tokens when it runs. Until then it costs about 87 tokens; SKILL.md has 934 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from carmahhawwari/ui-design-brain at commit 38f04c5, republished under its MIT licence (© carmahhawwari). 934 words, ~2,054 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-design-brain/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- ui-design-brain
- description
- 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.
- license
- Complete terms in LICENSE.txt
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.
Quality Bar
The output should match what you'd expect from a senior product designer at a top SaaS company:
- Clean visual rhythm with intentional asymmetry
- Obvious interactive affordances (hover, focus, active states)
- Graceful edge cases (empty states, loading, error)
- Responsive without breakpoint artifacts
Workflow
Step 1 — Identify Components
Read the user's request and determine which UI components are needed. Reference components.md to find each component by name or alias.
Common mappings:
- "navigation" → Header, Navigation, Breadcrumbs, Tabs
- "form" → Form, Text input, Select, Checkbox, Radio button, Button
- "data display" → Table, Card, List, Badge, Avatar
- "feedback" → Alert, Toast, Modal, Spinner, Progress bar, Empty state
- "input" → Text input, Textarea, Select, Combobox, Datepicker, File upload, Slider
- "overlay" → Modal, Drawer, Popover, Tooltip, Dropdown menu
Step 2 — Apply Best Practices
For each component in the interface, follow its best practices from the reference. Key rules that apply broadly:
Layout
- Single-column forms — faster to scan
- Consistent vertical lanes in repeated rows (lists, tables)
- Fixed-width slots for icons and actions, even when empty
- Cards: media → title → meta → action hierarchy
Interaction
- Buttons: verb-first labels ("Save changes", not "Submit"), one primary per section
- Modals: always provide X, Cancel, and Escape; trap focus; return focus on close
- Toasts: auto-dismiss 4–6 s, allow manual dismiss, stack newest on top
- Toggles: immediate effect only — use checkboxes in forms that require Save
Typography & Spacing
- Strict heading hierarchy (h1 → h2 → h3), one h1 per page
- Minimum 44 px touch targets on mobile
- Labels above inputs (vertical forms) or beside (horizontal)
- Placeholder text as format hint, never as label replacement
States
- Empty states: illustration + helpful headline + primary CTA
- Loading: skeleton screens > spinners (show after 300 ms delay)
- Validation: inline on blur, not on every keystroke
- Disabled elements: visually distinct but still readable
Show full SKILL.md (401 more words)Show less
Step 3 — Choose a Design Direction
Select the style preset that best matches the user's intent, or ask if unclear:
Modern SaaS (default)
- Neutral palette, one strong accent
- 8 px grid, generous white space
- Clean, professional, spacious
Apple-level Minimal
- Near-monochrome, warm grays
- Large type hierarchy, tight tracking on display text
- Abundant white space, micro-interactions (150–250 ms ease-out)
Enterprise / Corporate
- Information-dense, well-defined regions
- Compact spacing scale (4/8/12/16/24 px)
- Robust form handling, fully keyboard-navigable
Creative / Portfolio
- Bold, expressive, strong visual personality
- Asymmetric layouts, dramatic scale contrast
- Editorial typography, vivid accent colors
Data Dashboard
- Data-dense, optimised for scannability
- Consistent vertical alignment across rows
- Clear metric hierarchy: KPI → trend → detail
Step 4 — Generate Code
Write production-ready code following these rules:
Stack: React + Tailwind CSS (unless user specifies otherwise)
Spacing: Tailwind spacing scale (p-2, gap-4, etc.) on an 8px grid
Colors: CSS variables or Tailwind config for palette consistency
Typography: Tailwind text utilities; expressive font pairings via Google Fonts
States: Implement hover, focus, active, disabled for all interactive elements
Responsive: Mobile-first; test at 375, 768, 1440 px
Accessibility: Semantic HTML, ARIA where needed, focus managementComponent Quick Reference
Below are the 15 most commonly needed components. For the full 60+ component reference with best practices, aliases, and layout examples, see components.md.
| Component | When to use | Key rule |
|---|---|---|
| Button | Trigger actions | Verb-first labels; one primary per section |
| Card | Represent an entity | Media → title → meta → action; shadow OR border, not both |
| Modal | Focused attention | Trap focus; X + Cancel + Escape to close |
| Navigation | Page/section links | 5–7 items max; clear active state |
| Table | Structured data | Sticky header; right-align numbers; sortable columns |
| Tabs | Switch panels | 2–7 tabs; active indicator; accordion on mobile |
| Form | Collect input | Single column; labels above; inline validation on blur |
| Toast | Brief confirmation | Auto-dismiss 4–6 s; undo action for destructive ops |
| Alert | Important status | Semantic colors + icon; max 2 sentences |
| Drawer | Secondary panel | Right for detail, left for nav; 320–480 px desktop |
| Search input | Find content | Cmd/Ctrl+K shortcut; debounce 200–300 ms |
| Empty state | No data | Illustration + headline + CTA; positive framing |
| Skeleton | Loading placeholder | Match actual layout shape; shimmer animation |
| Badge | Status/metadata label | 1–2 words; pill shape for status; limited color palette |
| Dropdown menu | Action/nav options | 7±2 items; destructive actions last in red |
Anti-Patterns to Avoid
Never generate these — they signal generic, low-quality UI:
- Rainbow badges — every status a different bright color with no semantic meaning
- Modal inside modal — use a page or drawer for complex flows
- Disabled submit with no explanation — always indicate what's missing
- Spinner for predictable layouts — use skeleton screens instead
- "Click here" links — link text must describe the destination
- Hamburger menu on desktop — use visible navigation when space allows
- Auto-advancing carousels — let users control navigation
- Placeholder-only form fields — always use visible labels
- Equal-weight buttons — establish primary/secondary/tertiary hierarchy
- Tiny text (< 12 px) — body text minimum 14 px, prefer 16 px
© carmahhawwari, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 3 other files in the repository root of carmahhawwari/ui-design-brain.
- SKILL.md
- LICENSE.txt
- README.md
- components.md
Open the folder on GitHubat commit 38f04c5
Compare with similar skills
UI Design Brain next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UI Design Brain this skillcarmahhawwari/ui-design-brain | 893 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Super UI UX Designsyahiidkamil/Software-Engineer-AI-Agent-Atlas | 401 | — | ~9k | Automated safety check: Pass | None | |
| Applying UI Design Systemtelagod/code-abyss | 244 | — | ~538 | Automated safety check: Pass | MIT | |
| Frontend UI Integrationjulianromli/opencode-template | 144 | — | ~887 | Automated safety check: Pass | None | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT |
Similar skills
Applying UI Design System
telagod/code-abyss
Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism.
Frontend UI Integration
julianromli/opencode-template
Implement or extend a user-facing workflow in a web application, integrating with existing backend APIs.
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
- Official
Stitch Prompt Enhancer
google-labs-code/stitch-skills
Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.
Related
Categories
Questions about UI Design Brain
What does UI Design Brain do?
Generate production-grade UI using real component patterns and best practices from 60+ documented interface components. UI Design Brain is an agent skill from carmahhawwari/ui-design-brain. Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.
When should I use UI Design Brain?
UI Design Brain fits situations like: the user asks to build web interfaces; any UI — ensures modern; saaS-quality output grounded in design system conventions rather than generic AI patterns.
How do I install UI Design Brain in Claude Code?
Run `npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -a claude-code`. Or copy the skill folder (the carmahhawwari/ui-design-brain repository) into .claude/skills/ui-design-brain in your project. Claude Code loads it when a task matches its description.
How do I install UI Design Brain in Codex?
Run `npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -a codex`. Or copy the skill folder (the carmahhawwari/ui-design-brain repository) into .agents/skills/ui-design-brain in your project. Codex loads it when a task matches its description.
Can I use UI Design Brain in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add carmahhawwari/ui-design-brain --skill ui-design-brain -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-design-brain, .gemini/skills/ui-design-brain, .github/skills/ui-design-brain and .opencode/skills/ui-design-brain in your project.
What does UI Design Brain need to run?
SKILL.md names no scripts, command-line tools or credentials: UI Design Brain is instructions for the agent only.
Does UI Design Brain access the network?
SKILL.md names 1 domain. As links in the text: component.gallery. This is read from the text; nothing was executed.
Is UI Design Brain safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does UI Design Brain use?
UI Design Brain is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does UI Design Brain use?
About 2.1k tokens (SKILL.md is roughly 8.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to UI Design Brain?
Skills that share tags, products or a category with UI Design Brain: Super UI UX Design (syahiidkamil/Software-Engineer-AI-Agent-Atlas, 401 stars), Applying UI Design System (telagod/code-abyss, 244 stars), Frontend UI Integration (julianromli/opencode-template, 144 stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UI Design Brain?
carmahhawwari (a GitHub user) maintains it in carmahhawwari/ui-design-brain, which has 893 GitHub stars. The repository was last updated on February 28, 2026.
Source: carmahhawwari/ui-design-brain on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.