Speckit.uiux

Skill wedabro/bro-skills/.agent/skills/speckit.uiux

bro-skills - Spec-Driven Development CLI

Install

npx -y skills add wedabro/bro-skills --skill speckit.uiux

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

UI/UX Architect - Definition of Design System Anti-Slop, UI Components, Spacing, Typography, Responsive Patterns.

SKILL.md

2.9 KB, as published. Nobody here has run it

🎯 Mission

Set up and manage "Pro Max" UI/UX standards for the project, ensuring a premium, professional, unique interface and ABSOLUTELY no "AI slops" (avoid AI's boring default designs).

📥 Input

.agent/specs/[feature]/spec.md (contains User Scenarios)
.agent/memory/constitution.md (tech stack constraints)
Brand guidelines (if any)

📋 Protocol

Phase 0: Brief Inference (Read the Room)

Analyze projects (SaaS, portfolio, public-sector) to shape vibe.
Define 3 parameters: DESIGN_VARIANCE (1-10), MOTION_INTENSITY (1-10), VISUAL_DENSITY (1-10).

Phase 1: Brand Identity & Colors (Anti-Default)

Colors: It is PROHIBITED to use default colors (red, blue, green). It is PROHIBITED to abuse "AI Purple / Blue glow". Use a sophisticated palette like Cold Luxury, Forest, Black & Tan.
Typography: PROHIBITED using Inter and Serif as default for anything. Use Geist , Satoshi , Cabinet Grotesk or a sans-serif font of your choice.

Phase 2: Spacing, Layout & Rhythm

ALWAYS prefer existing framework/theme classes (p-4, text-lg, rounded-md) over arbitrary values so every screen uses the same scale.
Use gap-4 as the primary gap. Use gap-2 only for tightly related controls and gap-6/gap-8 only for clear hierarchy boundaries.
Fixed-pixel values are limited to hairline borders, blur/shadow tuning, and very small precision radii. Repeated exceptions become named theme tokens.
Limit Hero's top padding (max pt-24 ). Hero maximum 2 subject lines.
Apply Anti-Center Bias: Avoid boringly centering the Hero.
Misuse of "eyebrow" (titles in super small caps) is PROHIBITED. Maximum 1 eyebrow per 3 sections.
Bento Grid must have rhythm, not leave empty cells, diversify the background of the cells (images, subtle gradients, text).

Phase 3: Core Components Design

Buttons: Text does not wrap lines on the desktop. Contrast WCAG AA.
Cards: Limit dark shadows on light backgrounds. Do not nest cards within cards.
Forms: Label on input, do not use placeholder instead of label.

Phase 4: Rich Aesthetics Directive

Avoid cheap AI gradients. Use realistic Glassmorphism (backdrop-filter + 1px inner border) if the vibe fits.
Interactive States: Skeletal loading (no generic spinner), tactile feedback using a built-in utility such as active:scale-95.

📤 Output

File: .agent/knowledge_base/ui_ux_standards.md
File: .agent/specs/[feature]/ui-specs.md (for each feature)

🚫 Guard Rails

DO NOT use browser default colors.
DO NOT mix Serif and Sans-serif in the same headline.
DO NOT use 2 CTAs with the same purpose (same intent) on the same page.
DO NOT use arbitrary fixed-pixel utilities when an existing class or token expresses the same intent.
MANDATORY Mobile-first design priority.