Design System

Enforce a unified dark-themed design system for the AccountExpress application.

Updated Dec 24, 2025
One-click install
npx skills add https://github.com/OmarMira/Coontabilidad --skill design-system-omarmira
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Design System
Source: https://github.com/OmarMira/Coontabilidad/tree/main/.agent/skills/design-system
Command: npx skills add https://github.com/OmarMira/Coontabilidad --skill design-system-omarmira

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures visual consistency across the AccountExpress application by providing a standardized set of design elements, colors, typography, and components.

Core Features & Use Cases

  • Unified Aesthetics: Maintains a cohesive look and feel throughout the application.
  • Component Library: Defines reusable UI components like buttons, cards, and form inputs.
  • Color & Typography Standards: Specifies exact color palettes and font styles for dark themes.
  • Audit Tools: Includes methods to detect and correct design inconsistencies.
  • Use Case: When developing a new feature, developers can use the predefined StatCard component and color classes to ensure it seamlessly integrates with the existing UI.

Quick Start

Apply the bg-slate-900/50 class to the main container of your new component.

Frequently Asked Questions about Design System

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

FAQPage Schema
How do I enforce dark theme consistency in a Tailwind CSS application?

To enforce dark theme consistency in Tailwind CSS, apply standardized color palettes like the `bg-slate-900/50` container class and use predefined typography scales to maintain a unified aesthetic across all UI components.

How do I audit frontend components for light theme inconsistencies?

You can audit frontend components for light theme inconsistencies by running dedicated audit scripts that detect and correct design deviations, ensuring all UI elements conform to the standardized dark theme color palettes.

What is the best way to build a unified component library for a web application?

The best way to build a unified component library is to define reusable UI elements like StatCards, tables, and buttons alongside strict color and typography standards, ensuring visual consistency across the application.

Can I use predefined UI components like StatCards with existing Tailwind CSS classes?

Yes, you can use predefined UI components like StatCards with existing Tailwind CSS classes. The design system integrates standardized color palettes and typography scales directly into reusable components for seamless integration.

Why does my new application feature look visually disconnected from the main UI?

Your new feature looks visually disconnected because it lacks standardized design elements. Applying a unified design system with predefined color classes and reusable UI components ensures new developments seamlessly integrate with the existing interface.

Do I need specific dependencies to maintain frontend consistency across my application?

No specific external dependencies are required to maintain frontend consistency. The design system relies on internal references to define color palettes, typography, and reusable UI components for the application.