skills.rest
carmahhawwari
carmahhawwariCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design-brain

Generate production-ready UI component patterns for React, HTML/CSS, and Tailwind workflows.

858|71|Updated Feb 28, 2026
Search Tags:#ui#accessibility#design-system#production-ready#design-patterns#knowledge-base#component-patterns
One-click install
npx skills add https://github.com/carmahhawwari/ui-design-brain --skill ui-design-brain-carmahhawwari
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-brain
Source: https://github.com/carmahhawwari/ui-design-brain/tree/main
Command: npx skills add https://github.com/carmahhawwari/ui-design-brain --skill ui-design-brain-carmahhawwari

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Curates real component patterns and best practices to replace guesswork in UI design, delivering consistent, accessible, production-grade outputs.

Core Features & Use Cases

  • 60+ documented components with best practices, layout patterns, aliases, and design-system conventions
  • Guidance for building modern SaaS interfaces, dashboards, forms, navigation, and responsive layouts
  • Quick reference and design philosophy that accelerates design-to-code handoffs and ensures production-ready results
  • Use cases include dashboards, admin panels, marketing sites, and data-driven interfaces

Quick Start

Describe a UI requirement to this skill and have it propose component choices and generate downstream guidance.

Frequently Asked Questions about ui-design-brain

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate production-ready UI components without design guesswork?▼

Production-ready UI generation uses a curated knowledge base of real component patterns to eliminate design guesswork and deliver consistent, accessible interfaces aligned with design-system conventions.

What are the best practices for building accessible SaaS dashboards?▼

Accessible SaaS dashboards require applying documented component patterns, accessibility rules, and design-system conventions to ensure consistent, production-grade interfaces across data-driven layouts.

Can I use this knowledge base to build React and Tailwind interfaces?▼

Yes, the knowledge base applies to React, HTML/CSS, and Tailwind workflows, providing documented component patterns, layout structures, and best practices for modern web interfaces.

How do I ensure my UI forms follow accessibility rules and design-system alignment?▼

Ensure UI forms follow accessibility rules and design-system alignment by applying curated, per-component best practices that replace guesswork with documented patterns for production-ready code.

Does this approach work for designing admin panels and marketing sites?▼

Yes, this approach works for admin panels and marketing sites by applying 60+ documented components with layout patterns and design-system conventions to ensure production-grade interfaces.

What is the best way to accelerate design-to-code handoffs for web interfaces?▼

The best way to accelerate design-to-code handoffs is to use a quick reference of design philosophy and component patterns that ensures consistent, production-ready code generation.

Related Skills

Explore More Design & Creative Skills→
BeerspitnightBeerspitnight
1

frontend-designer

Converts UI/UX design inputs into structured frontend specifications for React, Vue, or HTML/CSS.

Community
Advanced
huangzidahuangzida
2

frontend-ui-engineering

Create production-ready React/TypeScript UI components with accessibility and design-system alignment.

Community
Advanced
wpgauravwpgaurav
14

ui-design-brain

Apply 60 component patterns and design-system rules to React, HTML, and CSS interfaces.

Community
Advanced
Dev-Dennis-040Dev-Dennis-040
10

design-ui-designer

Design UI component libraries with design tokens for accessible interfaces.

Community
Advanced