Agent skill

visual-style

Color scheme and icons for consistent Autopilot output. Reference when formatting agent output and status messages.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/visual-style

SKILL.md

// Project Autopilot - Visual Style Guidelines // Copyright (c) 2026 Jeremy McSpadden jeremy@fluxlabs.net

Visual Style Guide

Consistent colors and icons for Autopilot output.


Agent Colors

Each agent has an assigned color for visual distinction:

Agent Color ANSI Code Hex Use
planner πŸ”΅ Blue \033[94m #3b82f6 Planning
validator 🟒 Green \033[92m #22c55e Quality gates
token-tracker 🟑 Yellow \033[93m #eab308 Cost tracking
history-tracker 🟀 Brown \033[33m #a16207 Persistence
model-selector βšͺ Gray \033[90m #6b7280 Model selection
architect 🟣 Magenta \033[35m #d946ef Architecture
backend πŸ”΅ Cyan \033[96m #06b6d4 Backend code
frontend 🟠 Orange \033[38;5;208m #f97316 Frontend code
database πŸ”΄ Red \033[91m #ef4444 Database
tester 🟒 Lime \033[38;5;118m #84cc16 Testing
security πŸ”΄ Dark Red \033[31m #dc2626 Security
debugger 🟑 Amber \033[38;5;214m #f59e0b Debugging
refactor πŸ”΅ Indigo \033[38;5;99m #6366f1 Refactoring
documenter βšͺ Slate \033[37m #94a3b8 Documentation
devops 🟠 Coral \033[38;5;209m #fb7185 DevOps
api-designer πŸ”΅ Sky \033[38;5;117m #0ea5e9 API design
code-review 🟣 Violet \033[38;5;135m #8b5cf6 Code review

Status Icons

Task Status

Icon Meaning When to Use
βœ… Success Task/phase completed
❌ Failed Task/validation failed
πŸ”„ In Progress Currently executing
⏸️ Paused Waiting for input/approval
⏭️ Skipped Task skipped (already done)
πŸ”œ Pending Not yet started

Validation Status

Icon Meaning When to Use
βœ“ Pass Validation passed
βœ— Fail Validation failed
⚠ Warning Non-blocking issue
● Running Check in progress

Cost/Budget

Icon Meaning When to Use
πŸ’° Cost Cost information
πŸ’΅ Budget Budget thresholds
πŸ“Š Stats Statistics/metrics
πŸ“ˆ Increase Cost went up
πŸ“‰ Decrease Cost went down (savings)

Threshold Levels

Icon Level When to Use
βœ… OK Under warning threshold
⚠️ Warning At warning threshold
🟠 Alert At alert threshold
πŸ›‘ Stop At/over max threshold

System Events

Icon Meaning When to Use
πŸ“Œ Checkpoint Checkpoint saved
▢️ Start Execution starting
⏹️ Stop Execution stopped
πŸ” Resume Resuming from checkpoint
🏁 Complete Project finished
πŸ’Ύ Save Data saved
πŸ“‚ File File operation
πŸ”§ Tool Tool execution
πŸš€ Deploy Deployment
πŸ”’ Security Security related
πŸ§ͺ Test Testing
πŸ“ Doc Documentation

Git Operations

Icon Meaning When to Use
πŸ“ Commit Git commit
πŸ”€ Branch Branch operation
⬆️ Push Git push
⬇️ Pull Git pull
πŸ”ƒ Merge Git merge

Output Formats

Agent Spawn

πŸ”΅ planner β†’ Creating phase plan
πŸ”΅ backend β†’ Creating UserService

Task Progress

πŸ”„ 003.1 | Creating AuthService...
βœ… 003.1 | AuthService | $0.04 | 2.1K tokens

Validation Results

🟒 validator β†’ Phase 003 Gate
   βœ“ Build passes
   βœ“ Tests pass (47/47)
   βœ“ Coverage 87%
   βœ“ Lint clean
   βœ“ Security clean
   βœ… APPROVED

Cost Updates

πŸ’° Cost: $4.36 / $50.00 (9%)
   β”œβ”€β”€ Input:  245K tokens
   β”œβ”€β”€ Output: 89K tokens
   └── Calls:  34

πŸ“Š By Model:
   β”œβ”€β”€ Sonnet: $3.82 (88%)
   β”œβ”€β”€ Haiku:  $0.54 (12%)
   └── Opus:   $0.00 (0%)

Checkpoint

πŸ“Œ Checkpoint saved (phase_complete)
   Phase: 003 of 008
   Task:  003.4
   Cost:  $4.36

Threshold Alerts

⚠️ Warning: Cost $10.23 exceeds warning threshold ($10.00)
   Continuing execution...

🟠 Alert: Cost $25.12 exceeds alert threshold ($25.00)
   Pause for confirmation. Continue? [y/N]

πŸ›‘ Stop: Cost $50.05 exceeds maximum ($50.00)
   Saving checkpoint and halting...

Phase Summary

🏁 Phase 003 Complete
   β”œβ”€β”€ Tasks:    4/4 βœ…
   β”œβ”€β”€ Duration: 12m 34s
   β”œβ”€β”€ Cost:     $1.23 (est: $1.50, -18% 🟒)
   └── Commits:  3

Project Summary

πŸŽ‰ Project Complete!

πŸ“Š Final Stats
   β”œβ”€β”€ Phases:   8/8 βœ…
   β”œβ”€β”€ Tasks:    34/34 βœ…
   β”œβ”€β”€ Duration: 2h 15m
   β”œβ”€β”€ Cost:     $8.45 (est: $10.00, -16% 🟒)
   └── Commits:  28

πŸ’Ύ Saved to history
   View: /autopilot:config --history

Color Reset

Always reset colors after output:

\033[0m  # Reset all formatting

Markdown Output (for .md files)

When writing to markdown files, use text-based indicators:

Instead of Use
🟒 [PASS] or βœ“
πŸ”΄ [FAIL] or βœ—
🟑 [WARN] or ⚠
πŸ”΅ [INFO] or β„Ή

Quick Reference

Common Patterns

# Agent starting work
{color}{icon} {agent} β†’ {action}

# Task status
{status_icon} {task_id} | {description} | ${cost}

# Validation line
   {check_icon} {check_name}

# Cost line
πŸ’° {label}: ${amount} / ${limit} ({percent}%)

# Checkpoint
πŸ“Œ Checkpoint saved ({reason})

Agent Color Quick Map

planner       = πŸ”΅ Blue
validator     = 🟒 Green
token-tracker = 🟑 Yellow
backend       = πŸ”΅ Cyan
frontend      = 🟠 Orange
database      = πŸ”΄ Red
tester        = 🟒 Lime
security      = πŸ”΄ Dark Red
debugger      = 🟑 Amber

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results