skills.rest
compozy
compozyOFFICIAL
Explore all skills by this author →
Website𝕏@compozyaiGitHub

agh-design

Generate AGH token-driven dark-mode UI mocks and assets.

182|8|Updated Apr 4, 2026
Search Tags:#design system#ui design#dark mode#brand consistency#token-driven#html prototypes#component anatomy
One-click install
npx skills add https://github.com/compozy/agh --skill agh-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agh-design
Source: https://github.com/compozy/agh/tree/main/.agents/skills/agh/agh-design
Command: npx skills add https://github.com/compozy/agh --skill agh-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents slow, inconsistent visual output by aligning AI-generated UI work with AGH’s dark-mode, warm-dark, operator-first design system so production interfaces stay on-brand.

Core Features & Use Cases

  • Branded UI & asset generation: Produce well-structured static HTML artifacts, slides, prototypes, and mocks that reflect AGH’s token-driven component anatomy.
  • Design-system compliant decisions: Guide token use for color, spacing, radius, type, depth, and motion, ensuring values come from canonical sources rather than one-off styling.
  • Review for consistency: Validate generated UI against DESIGN.md anti-patterns and component contracts to maintain system alignment during design reviews.
  • Production-code alignment: Ensure edits land in the correct owning surfaces (web/, packages/ui/, packages/site/) and follow required token synchronization steps.

Quick Start

Use this skill to generate AGH-branded dark-mode UI mocks and tokens-aligned assets for a production interface, following the invariants and component guidance in DESIGN.md.

Frequently Asked Questions about agh-design

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

FAQPage Schema
How do I generate production-ready HTML prototypes that follow dark mode design tokens?▼

Generate production-ready HTML prototypes by aligning AI output with AGH’s canonical tokens.css and DESIGN.md, enforcing warm-dark flat depth and shadow rules to ensure dark mode brand consistency.

How do I maintain brand consistency across UI components during a design system review?▼

Maintain brand consistency by validating generated UI against DESIGN.md anti-patterns and component anatomy, ensuring token-driven decisions for color, spacing, and radius align with canonical sources.

What is the best way to synchronize design tokens when updating global CSS?▼

Synchronize design tokens by applying required token synchronization steps to canonical sources, ensuring edits land in correct owning surfaces like web/, packages/ui/, and packages/site/ while updating DESIGN.md.

Can I use token-driven design system rules for operator-first UI mock creation?▼

Use token-driven design system rules for operator-first UI mock creation by applying canonical component anatomy and warm-dark depth guidelines to produce structured static HTML artifacts and slides.

Why does my generated UI lack depth and shadow consistency in dark mode?▼

Generated UI lacks dark mode depth consistency when token values bypass canonical sources; enforce warm-dark flat depth and shadow rules from tokens.css to align visual output with AGH design standards.

Does the AGH design system skill support token-driven decisions for motion and type?▼

The AGH design system skill supports token-driven decisions for motion and type by guiding value selection from canonical sources, preventing one-off styling and ensuring production-code alignment.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
Zidane786Zidane786

release

Coordinate version checks, file updates, and PR creation for Kimi Code CLI releases.

Community
Advanced
bingeli1379bingeli1379
2

tailwind-best-practices

Enforce Tailwind CSS best practices for design-system alignment in Mastra Playground UI.

Community
Advanced
zerwizzerwiz

concept-diagrams

Generate standalone SVG diagrams in offline HTML from concept descriptions.

Community
Advanced