skills.rest
sumrae412
sumrae412COMMUNITY
Explore all skills by this author →
GitHub

courierflow-ui

Enforce layered CSS architecture and design token standards for web applications.

2|Updated Feb 17, 2026
Search Tags:#ui#architecture#frontend#design system#css#components
One-click install
npx skills add https://github.com/sumrae412/claude-skills --skill courierflow-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: courierflow-ui
Source: https://github.com/sumrae412/claude-skills/tree/main/courierflow-ui
Command: npx skills add https://github.com/sumrae412/claude-skills --skill courierflow-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses inconsistencies in UI development by providing a clear CSS architecture, design system, and component standards, ensuring a cohesive and maintainable user interface.

Core Features & Use Cases

  • CSS Architecture: Defines a layered cascade for organizing styles (design-system, components, pages).
  • Design System Tokens: Enforces the use of design tokens for consistent spacing, colors, and typography via CSS variables.
  • Component Rules: Establishes guidelines for defining and scoping component styles to prevent conflicts.
  • Use Case: When developing new UI components or styling existing pages, this Skill ensures adherence to the established "Quiet Elegance" principles and design token usage.

Quick Start

Apply the courierflow-ui skill to ensure all new CSS adheres to the defined architecture and design token standards.

Frequently Asked Questions about courierflow-ui

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

FAQPage Schema
How do I standardize CSS architecture across multiple web application pages?▼

To standardize CSS architecture, you enforce a layered cascade organizing styles into design-system, components, and pages layers. This approach ensures a cohesive and maintainable user interface by preventing styling conflicts and inconsistencies across the codebase.

What is the best way to maintain design system consistency when building new UI components?▼

Design system consistency is maintained by enforcing design tokens for spacing, colors, and typography via CSS variables. Using these defined token variables ensures cohesive theming and standardized styling practices across all new UI component development.

How do I scope component styles to prevent CSS conflicts in a web application?▼

Scoping component styles requires establishing specific component selector rules within a layered CSS cascade. By defining these guidelines, you isolate component styles and prevent conflicts, ensuring a maintainable user interface across the application.

Do I need design token variables to use a layered CSS cascade architecture?▼

Yes, design token variables are required for the layered CSS cascade architecture. The architecture mandates using CSS variables for consistent spacing, colors, and typography to ensure cohesive theming and adherence to the established design system standards.

Why does my UI styling become inconsistent across different application pages?▼

UI styling becomes inconsistent without a standardized CSS architecture and defined component guidelines. Applying a layered cascade with design token variables addresses this by enforcing consistent theming, styling practices, and specific component selector rules across the codebase.

Related Skills

Explore More Software Engineering Skills→
tonehqtonehq
11

foundational

Document foundational pipecat code, examples, and internal APIs for developers.

Official
Intermediate
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
mgd34msumgd34msu
4

unocss

Generate atomic CSS on demand with UnoCSS utility classes and custom rules.

Community
Intermediate