courierflow-ui-standards

Enforce CourierFlow UI standards for monochrome palettes, Inter typography, and layout patterns.

2|Updated Feb 17, 2026
One-click install
npx skills add https://github.com/sumrae412/claude-skills --skill courierflow-ui-standards
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: courierflow-ui-standards
Source: https://github.com/sumrae412/claude-skills/tree/main/courierflow-ui-standards
Command: npx skills add https://github.com/sumrae412/claude-skills --skill courierflow-ui-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that all UI elements and features within CourierFlow adhere to a strict, consistent design system, preventing visual clutter and improving user experience.

Core Features & Use Cases

  • Design System Enforcement: Provides guidelines for typography, color, layout, and components.
  • Consistent Styling: Ensures all UI elements (buttons, cards, inputs) look and feel the same across the application.
  • Use Case: When developing a new feature that requires a modal dialog, use this Skill's guidelines to ensure the modal's styling, spacing, and button placement match existing components.

Quick Start

Apply the courierflow-ui-standards skill to ensure the new button component uses the correct black primary color and rounded-xl border radius.

Frequently Asked Questions about courierflow-ui-standards

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

FAQPage Schema
How do I maintain consistent UI styling across a frontend application?

To maintain consistent UI styling, enforce a unified design system that dictates specific standards for visual elements like typography, color palettes, and layout patterns across all templates and CSS. This prevents visual clutter and ensures a consistent user experience.

What is a monochrome-dominant design system for HTML templates?

A monochrome-dominant design system restricts your color palette primarily to black, white, and grays for UI elements. It pairs this visual approach with specific typography, like Inter fonts, to standardize frontend HTML templates and CSS components.

How do I apply consistent spacing and border radius to UI components in CSS?

To apply consistent component styling, follow a predefined design system that specifies exact layout patterns, such as using a rounded-xl border radius for buttons and standardized spacing rules for modal dialogs and inputs.

Can I use Inter typography for a frontend design system?

Yes, you can use Inter typography as the standard font family within a frontend design system. Standardizing on Inter ensures text rendering remains uniform across all UI elements and HTML templates.

When do I need a strict design system for frontend development?

You need a strict design system when developing new features or modifying visual aspects of an interface to ensure elements like buttons, cards, and inputs match existing components. It is essential for preventing visual clutter in large applications.