skills.rest
wpgaurav
wpgauravCOMMUNITY
Explore all skills by this author →
Website𝕏@wpgauravGitHub

ui-design-brain

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

14|1|Updated Mar 30, 2026
Search Tags:#accessibility#react#ui-design#wireframes#design-systems#component-patterns
One-click install
npx skills add https://github.com/wpgaurav/WordPress-skills --skill ui-design-brain-wpgaurav
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-brain
Source: https://github.com/wpgaurav/WordPress-skills/tree/main/skills/design/ui-design-brain
Command: npx skills add https://github.com/wpgaurav/WordPress-skills --skill ui-design-brain-wpgaurav

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Curates a design-system grounded knowledge base of 60+ UI component patterns with best practices, enabling AI to generate production-ready interfaces instead of generic outputs.

Core Features & Use Cases

  • 60+ component patterns with per-component best practices, layout guidance, and aliases
  • Design-system grounding sourced from real design assets to ensure consistency and accessibility
  • Use cases include dashboards, forms, navigation, and responsive layouts across React/HTML/CSS projects

Quick Start

Ask the AI to build a UI using the 60 component patterns and rules from this skill to produce production-ready code.

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-grade UI component patterns for React?▼

Generate production-grade UI patterns by applying 60 curated component rules to React projects. This enforces per-component best practices, accessibility standards, and layout rules to ensure consistent interfaces.

What is the best way to build accessible design systems for dashboards and forms?▼

Build accessible design systems for dashboards and forms using a grounded knowledge base of 60 component patterns. This enforces accessibility standards and anti-pattern avoidance to ensure usable interfaces.

Can I use these UI design rules for HTML and CSS projects without a framework?▼

Yes, you can apply these UI design rules to HTML and CSS projects. The 60 component patterns and design-system guidance support React, HTML, and CSS to enforce layout rules and consistency.

How do I avoid anti-patterns when creating responsive layouts?▼

Avoid anti-patterns in responsive layouts by applying curated design-system rules and component patterns. This enforces per-component best practices and layout guidance to prevent inconsistent interfaces.

Why does my AI-generated UI lack consistent navigation and accessibility?▼

AI-generated UI lacks consistency without a grounded design system. Applying 60 component patterns with enforced accessibility standards and anti-pattern avoidance ensures usable navigation and interfaces.

Related Skills

Explore More Design & Creative Skills→
jsstechiojsstechio

pds

Generate a Pencil design system with tokens, foundations, components, and patterns.

Official
Advanced
302ai302ai
2

designer

Design accessible UI/UX interfaces with Tailwind and semantic HTML.

Official
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
leon30083leon30083
2

ui-designer

Extract design tokens from UI images and generate implementation-ready prompts.

Community
Advanced