ensure-panelvisualappeal

name	ensure-panelvisualappeal
description	| Use when this capability is needed.

Panel Visual Appeal Validator

This skill validates that LCDPossible panels meet visual design standards for LCD signage displays (1280x480, viewed from 3-6 feet).

Prerequisites

IMPORTANT: Before running this validation, read the visual appeal rules:

Read .claude/rules/panel-visual-appeal.md

This file contains the 16 visual appeal rules that panels must comply with.

Usage

/ensure-panelvisualappeal <panel-id>
/ensure-panelvisualappeal <screenshot-path>
/ensure-panelvisualappeal <panel-id> <screenshot-path>

Validation Process

Step 1: Load Rules

Read .claude/rules/panel-visual-appeal.md to get the current visual appeal standards.

Step 2: Gather Assets

If panel ID provided:

1. Render the panel:

   dotnet run --project src/LCDPossible/LCDPossible.csproj -c Release -- test <panel-id> -w 2 --debug
   

2. Read the generated HTML from temp: %TEMP%\<panel-id>-debug.html
3. Load the screenshot from: ~\<panel-id>-cyberpunk.jpg

If only screenshot provided:

1. Analyze the screenshot visually
2. Note: HTML/CSS analysis will be limited

Step 3: Visual Analysis

Review the screenshot for each of the 16 rules. Score each as:

• PASS - Meets requirements
• WARN - Minor issues, could be improved
• FAIL - Violates the rule, needs fixing

Step 4: HTML/CSS Analysis

If HTML available, inspect:

• CSS classes used (Tailwind/DaisyUI)
• Grid column/row spans
• Padding and margin values
• Font sizes and weights
• Color values (check for hardcoded vs theme)

Step 5: Generate Report

Output a structured report with findings and recommendations.

---

Report Template

# Panel Visual Appeal Report

**Panel ID:** <panel-id>
**Theme:** <theme-name>
**Resolution:** 1280x480
**Date:** <date>

## Summary

| Rule | Status | Notes |
|------|--------|-------|
| 1. Container Filling | PASS/WARN/FAIL | |
| 2. Element Centering | PASS/WARN/FAIL | |
| 3. Color Contrast | PASS/WARN/FAIL | |
| 4. Container Boundaries | PASS/WARN/FAIL | |
| 5. Panel Utilization | PASS/WARN/FAIL | |
| 6. Typography Hierarchy | PASS/WARN/FAIL | |
| 7. Consistent Spacing | PASS/WARN/FAIL | |
| 8. Grid Alignment | PASS/WARN/FAIL | |
| 9. Truncation Handling | PASS/WARN/FAIL | |
| 10. Every Value Needs a Label | PASS/WARN/FAIL | |
| 11. Avoid Orphaned Empty Space | PASS/WARN/FAIL | |
| 12. Empty/No-Data States | PASS/WARN/FAIL | |
| 13. Visual Balance | PASS/WARN/FAIL | |
| 14. Color Semantics | PASS/WARN/FAIL | |
| 15. Icon/Symbol Proportionality | PASS/WARN/FAIL | |
| 16. Theme Compliance | PASS/WARN/FAIL | |

**Overall Score:** X/16 PASS, Y WARN, Z FAIL

## Detailed Findings

### Issues Found

1. **[FAIL] Rule X: <Rule Name>**
   - Problem: <description>
   - Location: <widget/element>
   - Recommendation: <fix suggestion>

2. **[WARN] Rule Y: <Rule Name>**
   - Problem: <description>
   - Recommendation: 



 



 
 

---

Common Fixes

Fix: Widgets not filling vertical space

// Before: Two 1-row widgets stacked (wastes space, forces tiny text)
yield return new WidgetDefinition("lcd-stat-card", 3, 1, new {  // Only 1 row!
    title = "GPU", value = "0%"
});
yield return new WidgetDefinition("lcd-stat-card", 3, 1, new {  // Only 1 row!
    title = "VRAM", value = "23%"
});

// After: Two 2-row widgets that fill the panel height
yield return new WidgetDefinition("lcd-stat-card", 3, 2, new {  // 2 rows each
    title = "GPU", value = "0%", size = "large"
});
yield return new WidgetDefinition("lcd-stat-card", 3, 2, new {  // 2 rows each
    title = "VRAM",  = , size = 
});

Fix: Text too small in container

// Change from small text
yield return new WidgetDefinition("lcd-stat-card", 4, 2, new {
    title = "CPU",
    value = cpuName,
    size = "small"  // Too small!
});

// To larger text
yield return new WidgetDefinition("lcd-stat-card", 4, 2, new {
    title = "CPU",
    value = cpuName,
    size = "large"  // Better for the container size
});

Fix: Chart not filling container

<!-- Before: Fixed size -->
<svg width="200" height="100">

<!-- After: Fill container -->
<svg viewBox="0 0 100 60" class="w-full h-full" preserveAspectRatio="none">

Fix: Content not centered

<!-- Before: Default alignment (content at top-left) -->
<div class="card">
  <span class="label">GPU</span>
  <span class="value">0%</span>
</div>

<!-- After: Centered content (equal whitespace on all sides) -->
<div class="card flex flex-col items-center justify-center h-full">
  <span class="label">GPU</span>
  <span class="value">0%</span>
</div>

Key classes for centering:

• flex flex-col - Stack label and value vertically
• items-center - Center horizontally
• justify-center - Center vertically
• h-full - Ensure container takes full height to center within

Fix: Hardcoded colors

<!-- Before: Hardcoded -->
<div style="color: #00d4ff">

<!-- After: Theme variable -->
<div class="text-primary">

Fix: No empty state

if (data.items.Count == 0)
{
    yield return WidgetDefinition.FullWidth("empty-state", 4, new {
        message = "No data available"
    });
    yield break;
}

Fix: Missing labels on values

// Before: Donut with no context
yield return new WidgetDefinition("lcd-donut", 4, 2, new {
    value = data.cpuUsage,
    max = 100
    // Missing label!
});

// After: Donut with clear label
yield return new WidgetDefinition("lcd-donut", 4, 2, new {
    value = data.cpuUsage,
    max = 100,
    label = "CPU"  // Now users know what 47% means
});

Fix: Orphaned empty space

// Before: Widgets clustered on left, right side empty
yield return new WidgetDefinition("lcd-stat-card", 2, 2, new { ... });  // cols 1-2
yield return new WidgetDefinition("lcd-stat-card", 2, 2, new { ... });  // cols 3-4
yield return new WidgetDefinition("lcd-stat-card", 2, 2, new { ... });  // cols 5-6
// Cols 7-12 empty!

// After: Widgets expanded to fill panel
yield return new WidgetDefinition("lcd-stat-card", 4, 2, new { ... });  // cols 1-4
yield return new WidgetDefinition("lcd-stat-card", 4, 2, new { ... });  // cols 5-8
;  

Fix: Visual monotony (single row of identical widgets)

// Before: 6 identical 2×4 stat-cards in a single row with tiny text
yield return new WidgetDefinition("lcd-stat-card", 2, 4, new { title = "CPU", value = "13%", size = "small" });
yield return new WidgetDefinition("lcd-stat-card", 2, 4, new { title = "TEMP", value = "-", size = "small" });
yield return new WidgetDefinition("lcd-stat-card", 2, 4, new { title = "RAM", value = "49%", size = "small" });
yield return new WidgetDefinition("lcd-stat-card", 2, 4, new { title = "USED", value = "31GB", size = "small" });
yield   ();
;



;
;
;

;
;
;

---

Quick Checklist

Before approving a panel, verify:

• All widgets fill their grid cells appropriately
• Gauges/donuts/charts scale to fill container (~90% of space, not fixed small size)
• Text is large enough to read from 3-6 feet
• Colors provide sufficient contrast
• No content is cut off or overflowing
• Charts/sparklines stay within bounds - trace edges to check data lines don't cross container borders
• The full panel area is utilized
• Typography has clear hierarchy (values > labels > secondary)
• Spacing is consistent throughout
• Long text is truncated gracefully
• Empty/no-data states are handled (panel-level AND widget-level - no labels with blank values)
• All colors use theme variables
• Widgets expand to fill available vertical space (no 1-row widgets when 2+ rows would fit)
• Text scales appropriately with container size (bigger containers = bigger text)
• Content is centered in stat-card widgets (equal whitespace on all sides)
• No "tiny island in vast ocean" - if you could fit another copy of the content in the empty space, it's too small
• Info-list widgets (label/value pairs) have text scaled to container - no tiny text in large widgets
• Value Prominence: values are 3-5× larger than their labels in stat cards (value should dominate)
• Every displayed value has a visible label - no unlabeled percentages, temperatures, or numbers
• No orphaned empty space - no 3+ column × 2+ row areas of unused space (especially bottom-right)
• No visual monotony - avoid all-identical widgets; vary sizes, types, or use 2D grid layouts instead of single rows

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.