Define and validate UI design style files with tokens and reference images.
npx skills add https://github.com/MadAppGang/magus --skill ui-style-format
Please help me install this Agent Skill. Skill: ui-style-format Source: https://github.com/MadAppGang/magus/tree/main/plugins/designer/skills/ui-style-format Command: npx skills add https://github.com/MadAppGang/magus --skill ui-style-format
This Skill defines a standardized format for UI design styles, ensuring consistency across projects by specifying brand colors, typography, spacing, and component patterns, with support for visual reference images.
.claude/design-style.md) for project-specific design tokens..claude/design-references/) for direct visual guidance.ui agent then uses to perform style-aware design reviews and ensure brand consistency.Use the ui-style-format skill to validate the design style file located at .claude/design-style.md.
High-intent search queries and answers about installing and using this skill.
You can standardize UI design tokens by creating a structured style file at `.claude/design-style.md` that defines brand colors, typography, spacing, and component patterns to serve as a single source of truth for your project.
You can add visual reference images by placing image assets into the `.claude/design-references/` directory, which the system parses alongside your text-based design tokens to provide direct visual guidance during reviews.
The best way to validate a design style file is to use the built-in validation checklist, which ensures the style definitions maintain integrity and adhere to your project-specific standards for colors, typography, and spacing.
The `ui` agent loads your style definitions and reference images to perform style-aware design reviews, checking your user interface against project-specific brand colors, typography, spacing, and component patterns for adherence.
Yes, you can integrate existing component patterns and spacing rules by mapping them into the standardized schema, allowing the system to parse your established design system for consistent AI-driven visual reviews.
No, you do not need separate schemas; the format combines text-based design tokens in a markdown file with visual reference images in a dedicated directory to create a unified style definition for your project.
GeneralJerelInitialize a standardized .chalk folder and chalk.json with PROFILE docs.
OrinksCompare screenshots against reference images and return a strict JSON verdict.
civictechdcCreates visual systems with typography, color, spacing, and iconography guidelines.
jpoutrinDetect hard-coded values and generate design system component structures.