design-guide

Name: design-guide
Availability: InStock
Author: a7garden

Document and enforce CoHalo's frontend design language across components, tokens, typography, and patterns.

Updated Mar 15, 2026

Search Tags:#typography #ui #frontend #components #tokens #design-system #design-guide

Ready to run

npx skills add https://github.com/a7garden/CoHalo --skill design-guide-a7garden

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

CoHalo's design-guide defines and enforces a cohesive frontend design language, ensuring consistency, reusability, and faster delivery across UI components, tokens, typography, and patterns.

Core Features & Use Cases

Central documentation for component creation, design tokens, typography, status/priority systems, and composition patterns.
A dedicated /design-guide showcase page to demonstrate UI variants and best practices.
Guidance for aligning frontend work with related skills like frontend-design and web-design-guidelines.

Quick Start

Review the design guide before creating or modifying UI components to ensure consistency.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I maintain visual consistency when creating new frontend UI components?▼

Apply a centralized design system to document and enforce design tokens, typography, and UI patterns. This ensures visual consistency and reusability when creating or modifying frontend components.

What is a design token and how does it enforce UI consistency?▼

A design token is a centralized, versioned variable storing UI visual properties like typography and color. Updating tokens within a design system automatically enforces visual consistency and propagates style changes across all frontend components.

How do I audit existing frontend pages for visual consistency?▼

Audit frontend pages by loading the centralized design guide into context and comparing active UI elements against documented component variants, composition patterns, and design tokens to identify and resolve visual discrepancies.

Can I use this design guide to document status and priority systems for UI elements?▼

Yes, you can document status and priority systems using the design guide. It provides central documentation for component creation, design tokens, typography, and status and priority patterns to ensure consistent UI behavior and visual hierarchy.

Does the design system showcase page demonstrate UI variants and best practices?▼

Yes, the design guide includes a dedicated showcase page to demonstrate UI variants and best practices. This page visually documents component composition patterns and design tokens for frontend development reference.

What's the best way to align frontend development with web design guidelines?▼

Align frontend development by referencing a centralized design system before creating UI elements. This provides documented guidelines for tokens and composition patterns, ensuring cohesive integration with broader web design guidelines.