What is the ui-design-brain skill?
The ui-design-brain skill is a Cursor skill from carmahhawwari that adds a component knowledge base to an AI agent. SKILL.md sets design principles and a four step workflow, and components.md holds best practices for 60 components from component.gallery, so generated UI avoids generic patterns.
Ask an AI agent for a dashboard and you often get purple-on-white gradients and evenly spaced card grids. The ui-design-brain skill lists those as things to avoid, and replaces guessing with a reference for 60 components.
It was written for Cursor. The repository holds SKILL.md for the workflow, components.md for the full reference and LICENSE.txt. The skill activates when you ask for pages, dashboards, forms, navigation or any other UI component.
How the four step workflow runs
- Identify components. A request for a form maps to Form, Text input, Select, Checkbox, Radio button and Button, each found by name or alias in components.md.
- Apply best practices for each component, covering layout, interaction, typography and spacing, and states.
- Choose a design direction from five presets, or ask when the intent is unclear.
- Generate code with React and Tailwind CSS unless you specify another stack.
Five design directions
- Modern SaaS, the default: neutral palette, one strong accent, 8 px grid.
- Apple-level Minimal: near monochrome, warm grays and tight tracking on display text.
- Enterprise or Corporate: information dense, compact spacing and fully keyboard navigable.
- Creative or Portfolio: asymmetric layouts, dramatic scale contrast and vivid accents.
- Data Dashboard: consistent row alignment and a KPI, trend, detail hierarchy.
Who the ui-design-brain skill is for
Best for
- Generating SaaS dashboards, settings pages, forms and tables where component rules matter more than a single look.
- Teams that want the same button, modal and toast behavior across everything an agent builds.
- Anyone who wants a planning step before the agent writes UI code. For a written brief first, see design-brief.
Not for
- Auditing existing code. This skill guides generation. To review finished UI against a checklist, see web-design-guidelines.
- Projects locked to a component library. For one library's own conventions, see ant-design.
- Agents other than Cursor, where the README gives no install path.
Use it with UiChemy
Generated React code does not become a WordPress page on its own. UiChemy AI to WordPress takes an AI build in, and you finish the page in Composer, which edits real HTML, CSS and JS inside Elementor or Gutenberg. Get Started there.
How to install UI Design Brain Skill: Component Rules for AI Agents
git clone https://github.com/carmahhawwari/ui-design-brain.git ~/.cursor/skills/ui-design-brainPersonal install
Run
git clone https://github.com/carmahhawwari/ui-design-brain.git ~/.cursor/skills/ui-design-brainto make the skill available in all your projects.Project install
To share it with a team, clone into the project instead:
git clone https://github.com/carmahhawwari/ui-design-brain.git .cursor/skills/ui-design-brain.Manual copy
Alternatively copy SKILL.md and components.md into ~/.cursor/skills/ui-design-brain/ or .cursor/skills/ui-design-brain/.
Ask for a UI
Describe what you want, for example a settings page with sidebar navigation, toggle preferences and a profile section. You can name a preset such as an Apple-minimal pricing page.
Check that it loaded
Ask the agent to build a data table with search, filters and pagination. It should identify the components first, then apply the table, search input and pagination rules from components.md.
Key features
- Component referencecomponents.md covers 60 components, from Accordion and Alert to Tree view and Visually hidden, each with aliases, best practices and common layouts.
- Request to component mappingCommon requests map to component sets. Navigation becomes Header, Navigation, Breadcrumbs and Tabs, and feedback becomes Alert, Toast, Modal, Spinner, Progress bar and Empty state.
- Layout rulesSingle column forms, consistent vertical lanes in repeated rows, fixed width slots for icons and actions, and cards that run media, title, meta, then action.
- Interaction rulesVerb first button labels with one primary action per section, modals with X, Cancel and Escape, toasts that auto dismiss after 4 to 6 seconds.
- Typography and spacingOne h1 per page with a strict heading order, minimum 44 px touch targets on mobile, labels above inputs and an 8 px grid.
- State handlingEmpty states with an illustration, headline and call to action, skeleton screens shown after a 300 ms delay, and validation on blur instead of every keystroke.
- Five design presetsModern SaaS, Apple-level Minimal, Enterprise, Creative and Data Dashboard, each with its own palette, spacing and tone.
- Anti-pattern listCalls out rainbow badges, modals inside modals, click here links, auto advancing carousels, placeholder only fields and body text under 14 px.
- Code generation defaultsReact and Tailwind, CSS variables for the palette, hover, focus, active and disabled states on interactive elements, and mobile first checks at 375, 768 and 1440 px.
Frequently asked questions
What is the ui-design-brain skill?
It is a Cursor skill that gives an AI agent a curated knowledge base of 60 UI component patterns, sourced from component.gallery and enriched with best practices, layout guidance and usage rules. It aims to replace generic guesses with design system conventions.
How do I install the ui-design-brain skill?
Clone the repository into ~/.cursor/skills/ui-design-brain for all projects, or into .cursor/skills/ui-design-brain to share it with a team. You can also copy SKILL.md and components.md into either folder. The README gives these three options and no package manager command.
Which AI coding agents can use the ui-design-brain skill?
The README describes it as a Cursor skill and documents only Cursor folders. It does not mention Claude Code or other agents. The folder uses a standard SKILL.md, so another agent that loads such folders might work, but the repository does not confirm it.
Which components does the ui-design-brain skill cover?
The README lists 60, including Accordion, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Carousel, Combobox, Datepicker, Drawer, Modal, Navigation, Pagination, Skeleton, Table, Tabs, Toast, Toggle, Tooltip and Tree view. Each entry in components.md has aliases, best practices and layouts.
How is ui-design-brain different from a frontend design skill?
The README compares the two. A generic frontend skill relies on the model's training, while ui-design-brain adds concrete rules per component, an explicit anti-pattern list and per-component accessibility guidance such as focus trapping. For a code review step, add web-design-guidelines.
Does the skill need Tailwind or React?
Its code step defaults to React and Tailwind CSS unless you specify otherwise, so you can ask for plain HTML and CSS instead. The component rules themselves, such as verb first buttons and labels above inputs, do not depend on a framework. For layout work, see layout-grid.
Can I choose a design style?
Yes. SKILL.md includes five presets and the README says you can request one, for example a pricing page with an Apple-minimal look. Modern SaaS is the default when you name none.
What license does the ui-design-brain skill use?
GitHub does not report a recognized license for the repository. The README says MIT and points to LICENSE.txt, and the SKILL.md frontmatter refers to terms in LICENSE.txt. Read the file in the repository before you redistribute the skill.