design-guide

Standardize UI design with 8px grids, neutral palettes, and accessible typography.

Updated Aug 27, 2026

Search Tags:#typography #design #ui #consistency #accessibility #tailwind #color

Ready to run

npx skills add https://github.com/caraseli02/MoldovaDirect --skill design-guide-caraseli02

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/caraseli02/MoldovaDirect/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/caraseli02/MoldovaDirect --skill design-guide-caraseli02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design guide helps teams achieve modern, professional UI designs by standardizing spacing, typography, colors, shadows, and interactive states across components.

Core Features & Use Cases

Comprehensive design principles for layout, color, typography, shadows, and interaction states to ensure consistency across products.
Clear guidance on spacing using an 8px grid to establish visual hierarchy and readability.
Practical examples and best practices for building UI components with React/Next.js, Vue/Nuxt, and Tailwind CSS to maintain a cohesive design system.

Quick Start

Review the 8px grid spacing, neutral color palette, and typography rules before starting any UI work.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I standardize UI design and maintain visual consistency across React components?▼

You can standardize UI design by applying a comprehensive set of principles including an 8px spacing grid, neutral gray palettes with a single accent color, and accessible typography to ensure visual consistency across components.

What is the best way to structure spacing and color palettes for a Tailwind CSS dashboard?▼

The best way to structure spacing and color palettes for a Tailwind CSS dashboard is to enforce an 8px spacing grid for layout hierarchy and use neutral gray palettes with a single accent color to ensure a cohesive, modern look.

Can I use these UI design principles for Vue and Nuxt projects?▼

Yes, you can use these UI design principles for Vue and Nuxt projects. The guidelines provide practical examples and best practices for building cohesive interfaces with both React/Next.js and Vue/Nuxt environments using Tailwind CSS.

How do I ensure accessible typography and consistent interaction states in web forms?▼

To ensure accessible typography and consistent interaction states in web forms, apply standardized design rules that enforce readable text layouts using an 8px grid and predictable interactive feedback across all dashboard and form components.

Why does my UI look inconsistent and how do spacing grids fix it?▼

Your UI looks inconsistent due to misaligned elements and varying scales. Implementing an 8px spacing grid fixes this by establishing a strict visual hierarchy and ensuring spacing remains uniform across all interface components.