skills.rest
a7garden
a7gardenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-guide

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

Related Skills

Explore More Design & Creative Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
jangirsamarthjangirsamarth

design-guide

Guide UI component creation with design tokens and interaction patterns.

Community
Intermediate
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced