ui-design

Codify OpenPromo design principles into a frontmatter-driven UI guide.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/promobase/openpromo --skill ui-design-promobase
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/promobase/openpromo/tree/main/.claude/skills/ui_design
Command: npx skills add https://github.com/promobase/openpromo --skill ui-design-promobase

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

OpenPromo UI consistency and usability gaps are addressed by codifying a shared design framework that guides product teams to ship cohesive interfaces.

Core Features & Use Cases

  • Establishes a decision framework for UI components, typography, spacing, and tokens.
  • Serves as a reference during design reviews, prototyping, and audits of OpenPromo dashboard and www surfaces.
  • Enables rapid alignment on visual language across pages and features.

Quick Start

Apply these principles to design and review a new dashboard screen to meet OpenPromo’s UI standards.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I enforce UI consistency and usability across dashboard screens?

To enforce UI consistency, codify a shared design framework using design tokens, a spacing scale, and layout patterns. This establishes a decision framework that guides product teams to ship cohesive interfaces and resolve visual gaps.

What design principles should I apply during dashboard prototyping and design audits?

Apply codified design principles that specify decision rules, layout patterns, and accessibility considerations. Using a frontmatter-driven guide during feature design and audits ensures interfaces meet usability and visual language standards.

How do design tokens help align visual language across website features?

Design tokens standardize UI components, typography, and spacing into a shared framework. This enables rapid alignment on visual language across pages and features, ensuring cohesive interfaces throughout the dashboard and website.

Can I use this UI design framework for both website and dashboard surfaces?

Yes, this UI design framework serves as a reference during design reviews, prototyping, and audits for both OpenPromo dashboard and website surfaces, ensuring usability gaps are addressed across all product areas.

What's the best way to start applying UX guidelines to a new dashboard screen?

Start by applying the codified UX guidelines and decision rules to design and review a new dashboard screen. This frontmatter-driven guide defines layout patterns and accessibility considerations to meet UI standards.

Why does my UI design lack consistency across different product features?

UI design lacks consistency when shared design principles and tokens are absent. Codifying a design framework with decision rules, a spacing scale, and accessibility considerations resolves usability gaps and aligns visual language.