skills.rest
doanchienthangdev
doanchienthangdevCOMMUNITY
Explore all skills by this author →
GitHub

design-system-context

Enforce theme-defined CSS variables for colors and border-radius in frontend components.

4|1|Updated Dec 30, 2025
Search Tags:#frontend#design system#theme#tailwind#css variables#ui consistency
One-click install
npx skills add https://github.com/doanchienthangdev/omgkit --skill design-system-context-doanchienthangdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-context
Source: https://github.com/doanchienthangdev/omgkit/tree/main/plugin/skills/frontend/design-system-context
Command: npx skills add https://github.com/doanchienthangdev/omgkit --skill design-system-context-doanchienthangdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures all UI/UX work automatically adheres to the project's established design system, preventing visual inconsistencies and manual theme application.

Core Features & Use Cases

  • Automatic Context Loading: Detects and loads design theme configurations.
  • Mandatory Color Usage: Enforces the use of theme-defined CSS variables for all colors.
  • Component Styling Rules: Provides specific examples for styling buttons, cards, forms, navigation, and alerts using theme variables.
  • Use Case: When generating a new button component, this skill ensures it uses bg-primary and text-primary-foreground instead of hardcoded colors like bg-blue-500.

Quick Start

Run the /design:preview command to see the current design system theme in action.

Frequently Asked Questions about design-system-context

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

FAQPage Schema
How do I enforce CSS variables for UI consistency in a frontend design system?▼

To enforce UI consistency, this context injects design system rules that mandate using theme-defined CSS variables for colors and border-radius. This prevents visual discrepancies by ensuring all generated components rely on established design tokens rather than hardcoded values.

How do I stop Tailwind from generating components with hardcoded colors?▼

To stop hardcoded colors, this context provides component styling rules that enforce theme variables. When generating a button, it ensures the output uses classes like bg-primary and text-primary-foreground instead of hardcoded Tailwind colors like bg-blue-500.

Does this design system context work with shadcn/ui components?▼

Yes, this design system context integrates seamlessly with shadcn/ui. It ensures adherence to design tokens by providing specific styling rules for components like buttons, cards, and forms, aligning perfectly with shadcn/ui's theme variable structure.

What is the best way to handle dark mode using CSS variables in a design system?▼

Handling dark mode with CSS variables is managed by the context's frontend development rules. It enforces dark mode handling by ensuring components reference theme-defined variables, allowing seamless theme switching without manual color overrides.

How do I preview the current design system theme configuration?▼

To preview the current design system theme, you can run the /design:preview command. This allows you to see the active theme-defined CSS variables in action before applying them to your frontend components.

Related Skills

Explore More Design & Creative Skills→
ProjectEuropaProjectEuropa
4

tailwind-patterns

Create CSS-first Tailwind v4 design systems with @theme blocks and container queries.

Community
Intermediate
seanmarsseanmars

daisyui

Build DaisyUI 5 and Tailwind CSS 4 UI components in Vue projects.

Community
Advanced
quanngynxquanngynx

ai-elements

Create AI chat interface components for Next.js and shadcn/ui projects.

Community
Basic
junchenghuojunchenghuo
3

ui-design-token-system

Generate UI design tokens for colors, spacing, typography, and border-radius.

Community
Basic