skills.rest
sandalsoft
sandalsoftCOMMUNITY
Explore all skills by this author →
GitHub

clean-web-design

Standardize React/Tailwind frontend design with token-based dark-mode-ready UI primitives.

Updated Mar 28, 2026
Search Tags:#tailwind#design-system#dark-mode#web-design#design-tokens#ui-patterns#component-patterns
One-click install
npx skills add https://github.com/sandalsoft/agent-skills --skill clean-web-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clean-web-design
Source: https://github.com/sandalsoft/agent-skills/tree/main/clean-web-design
Command: npx skills add https://github.com/sandalsoft/agent-skills --skill clean-web-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

A unified, scalable frontend design system with token-based color, Tailwind utilities, and reusable UI primitives that reduces design debt and speeds up development.

Core Features & Use Cases

  • Three-pillar design language: semantic HSL color tokens, Tailwind utility patterns, and component composition (primitives) for consistent UI.
  • Dark mode as a first-class citizen with token swapping to ensure accessibility and cohesive aesthetics across light/dark surfaces.
  • Reference guidance for typography, spacing, and data-visualization theming to accelerate project setup and maintenance.
  • Use cases include dashboards, SaaS apps, marketing websites, and any front-end that requires a polished, distinctive look.

Quick Start

Initialize a project and apply the three pillars to build a polished, dark-mode-ready UI.

Frequently Asked Questions about clean-web-design

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

FAQPage Schema
How do I set up a design system with Tailwind and semantic color tokens?▼

A token-based design system standardizes frontend UI by applying semantic HSL color tokens, Tailwind utility patterns, and component primitives, reducing design debt and accelerating development for dashboards and marketing pages.

How do I implement dark mode in a React and Tailwind design system?▼

Dark mode is implemented via token swapping, treating it as a first-class citizen to ensure accessibility and cohesive aesthetics across light and dark surfaces without manual color overrides.

Can I use semantic color tokens for UI primitives in SaaS dashboards?▼

Yes, semantic HSL color tokens apply to UI primitives in SaaS dashboards by enforcing a reference-based component pattern library that standardizes color, spacing, and typography across all surfaces.

What is the best way to standardize typography and spacing in React applications?▼

The best way to standardize typography and spacing in React applications is to use a reference guidance system that enforces frontmatter-defined metadata and reusable component patterns for consistent UI development.

Does this design system approach work for data visualization theming?▼

Yes, this design system approach works for data visualization theming by providing reference guidance that standardizes semantic color tokens and Tailwind utilities for charts and visual data components.

Why do I need design tokens instead of hardcoded colors in Tailwind?▼

You need design tokens instead of hardcoded colors in Tailwind because tokens enable semantic color mapping and dark mode token swapping, which reduces design debt and ensures accessibility across light and dark surfaces.

Related Skills

Explore More Design & Creative Skills→
theodrosyimertheodrosyimer

component-variant

Generate tailwind-variants definitions and React/React Native components with variant props.

Community
Intermediate
Owl-ListenerOwl-Listener
2.0k

color-system

Generate scalable color systems with tonal scales and AA/AAA contrast mappings.

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
ColdstartLabs-caColdstartLabs-ca

tailwind-styling

Enforce Tailwind-based styling rules with CSS tokens and config for consistent theming.

Official
Intermediate