skills.rest
caraseli02
caraseli02COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/caraseli02/MoldovaDirect --skill design-guide-caraseli02
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
EnztunEnztun

ui-ux-pro-max

Generate UI layouts, UX flows, and design systems for web frameworks.

Community
Advanced
fgarofalo56fgarofalo56
6

component-library

Develop reusable component libraries with design tokens and Storybook documentation.

Community
Advanced
timothyfroehlichtimothyfroehlich

pinpoint-ui

Create accessible shadcn/ui interfaces with Tailwind CSS v4 patterns.

Community
Basic
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate