madappgang/ui-style-format
plugins/dev/skills/design/ui-style-format/SKILL.md
UI design style file format specification with reference image support. Defines the schema for .claude/design-style.md and .claude/design-references/. Use when creating, validating, or parsing project design styles.
$ install --global
skillsauthnpx skillsauth add madappgang/claude-code ui-style-formatInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 7, 2026, 12:03 AM28.5s1 file scanned
SKILL.md
- name:
- ui-style-format
- version:
- 1.0.0
- description:
- |
UI Style Format Specification
Overview
The UI Style system provides a standardized way to define project design preferences
that the ui agent uses during design reviews. It supports both text-based style
definitions and visual reference images.
File Structure
{project}/
.claude/
design-style.md # Main style configuration
design-references/ # Visual reference images
{image}.png # PNG or JPG screenshots
MANIFEST.md # Optional metadata
design-style.md Schema
Required Sections
| Section | Purpose | |---------|---------| | Header | Version, dates, base reference | | Reference Images | Links to visual references (v2.0+) | | Brand Colors | Color palette with light/dark modes | | Typography | Fonts and type scale | | Spacing | Base unit and scale | | Component Patterns | Button, input, card styles | | Design Rules | DO and DON'T guidelines |
Optional Sections
| Section | Purpose | |---------|---------| | Reference URLs | External style guides | | Style History | Change log | | MANIFEST.md | Detailed image descriptions |
Reference Images Integration
Storage Location
All reference images MUST be stored in .claude/design-references/.
Supported Formats
| Format | Extension | Recommended Use | |--------|-----------|-----------------| | PNG | .png | Screenshots, UI components | | JPEG | .jpg, .jpeg | Photos, complex imagery | | WebP | .webp | Modern alternative to PNG/JPEG |
Image Table Format
In the style file, reference images are listed in a table:
## Reference Images
| Image | Description | Captured | Mode |
|-------|-------------|----------|------|
| hero-section.png | Homepage hero | 2026-01-08 | light |
Usage Guidelines Section
Each image should have usage notes:
### Usage Guidelines
- **hero-section.png**: Reference for hero layout, gradient, CTA placement
Parsing the Style File
Section Extraction
- Read
.claude/design-style.mdwith Read tool - Split by
##headers - Parse tables using Markdown table regex
- Extract key-value pairs from tables
Reference Image Resolution
Image Name -> .claude/design-references/{image_name}
Example:
hero-section.png -> .claude/design-references/hero-section.png
Validation Checklist
Before using a style file, validate:
- File exists at
.claude/design-style.md - Required sections present
- Referenced images exist in
.claude/design-references/ - Colors are valid hex codes
- Spacing values are numbers
Integration with ui Agent
Style-Aware Review Flow
When the ui agent performs a review:
- Load Style: Read
.claude/design-style.md - Load References: List
.claude/design-references/ - Match Components: Find relevant reference images for review target
- Comparative Analysis: Pass reference image + target to Gemini
- Validate Tokens: Check colors, typography, spacing against style
Gemini Prompt with References
Compare this implementation screenshot against the project design reference.
**Reference Image**: .claude/design-references/hero-section.png
**Implementation**: screenshots/current-hero.png
**Style Tokens** (from .claude/design-style.md):
- Primary Color: #2563EB
- Font: Inter 16px
- Spacing: 4px base
**Validate**:
1. Layout matches reference
2. Colors match defined palette
3. Typography follows scale
4. Spacing uses defined tokens
Version Compatibility
| Version | Features | |---------|----------| | 1.x | Text-only style (legacy) | | 2.x | Reference images + text style |
Version 2.x is backward compatible - the ui agent handles missing
## Reference Images section gracefully.
Best Practices
Capturing Reference Images
- Consistent viewport: Use same browser width (e.g., 1440px)
- Clean state: No modals, tooltips unless intentional
- Both modes: Capture light and dark variants
- Component isolation: Crop to relevant area
Writing Usage Guidelines
Be specific about what each image demonstrates:
Good: "Reference for button padding (12px), border-radius (8px), and hover state" Bad: "Button reference"
Updating Styles
When UI changes:
- Capture new screenshot
- Replace old image (same name) or add new
- Update Reference Images table
- Add entry to Style History
Related Skills
madappgang/test-skill
testing
VerifiedTrustedCommunity
A test skill for validation testing. Use when testing skill parsing and validation logic.
248SKILL.mdUpdated Apr 6, 2026
madappgang/tools/claudeup-core/src/__tests__/fixtures/invalid-plugin/bad-frontmatter/skills/bad-skill
tools
VerifiedTrustedCommunity
--- name: bad-skill description: This skill has invalid YAML in frontmatter allowed-tools: [invalid, array, syntax prerequisites: not-an-array --- # Bad Skill This skill has malformed frontmatter that should fail parsing. The YAML has: - Unclosed array bracket - Wrong type for prerequisites (should be array, not string)
248SKILL.mdUpdated Apr 6, 2026
madappgang/release
tools
VerifiedTrustedCommunity
Plugin release process for MAG Claude Plugins marketplace. Covers version bumping, marketplace.json updates, git tagging, and common mistakes. Use when releasing new plugin versions or troubleshooting update issues.
248SKILL.mdUpdated Apr 6, 2026
madappgang/openrouter-trending-models
testing
VerifiedTrustedCommunity
Fetch trending programming models from OpenRouter rankings. Use when selecting models for multi-model review, updating model recommendations, or researching current AI coding trends. Provides model IDs, context windows, pricing, and usage statistics from the most recent week.
248SKILL.mdUpdated Apr 6, 2026