design-guide

Name: design-guide
Availability: InStock
Author: arkcle

Standardizes UI design across HTML, CSS, React, and other modern frameworks.

Updated Nov 14, 2025

Search Tags:#typography #design #ui #accessibility #guidelines #spacing #color-system

Ready to run

npx skills add https://github.com/arkcle83/crewdeck --skill design-guide-arkcle83

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent UI design across projects wastes time and leads to uneven user experiences; this guide codifies principles to create cohesive, accessible interfaces.

Core Features & Use Cases

Clean and minimal layouts with clear visual hierarchy
Consistent color, typography, and spacing systems
Reusable patterns for components such as buttons, cards, forms, and navigation
Use Case: when designing a new dashboard, apply the design guide to ensure consistent styling and accessible contrast across components.

Quick Start

Apply these guidelines to your next UI component or page to ensure a clean, accessible, and consistent design.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I create consistent UI spacing and typography across frontend projects?▼

To create consistent UI spacing and typography, apply a standardized design guide using an 8px spacing system and defined typography hierarchy. This ensures cohesive layouts, accessible color contrast, and reusable component patterns across HTML, CSS, and frameworks.

What's the best way to design accessible interfaces with proper color contrast?▼

The best way to design accessible interfaces is by following codified design principles that enforce accessible color contrast standards. Applying these guidelines to components like buttons and forms ensures your UI meets accessibility requirements while maintaining visual hierarchy.

Can I apply these UI design guidelines to React, Vue, and Svelte projects?▼

Yes, you can apply these UI design guidelines to React, Vue, and Svelte projects. The guide standardizes layout, color, typography, and spacing systems across modern frameworks to reduce inconsistency and inefficiency in frontend development.

How do I build reusable component patterns for cards, buttons, and forms?▼

To build reusable component patterns, follow a codified design guide that defines concise principles for cards, buttons, forms, and navigation. This standardizes interactive components and ensures consistent styling across your dashboard or application.

Why does inconsistent UI design happen and how do I fix it?▼

Inconsistent UI design happens when projects lack codified design principles, leading to uneven user experiences and wasted time. You fix it by applying a standardized guide that enforces a scalable spacing system, typography hierarchy, and accessible color choices.