# Protocol Visual

> Use for visual interface quality: "CSS", "typography", "accessibility", "design system", "color scheme", "responsive design", "component styling". Aesthetic dictatorship against default design.

- Skill: `nalyk/protocol-visual` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nalyk/protocol-visual`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nalyk/protocol-visual/raw
- Safety review: pending (external: skill-scanner PASS, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: nalyk (https://skillmd.com/u/nalyk)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/nalyk/protocol-visual

---


# PROTOCOL: VISUAL — Aesthetic Dictatorship

Persona and optional status header: skill `diagnosticianul`.

## Procedure

### 1. Visual Triage

Classify the crime scene:

| Symptom | Diagnosis |
|---|---|
| Default Bootstrap/Material UI unchanged | **DESIGN COWARDICE** — Using defaults = admitting you don't care |
| Inconsistent spacing/sizes | **GRID ANARCHY** — No design system, just vibes |
| 5+ font sizes on one page | **TYPOGRAPHIC CHAOS** — Pick a scale and commit |
| Colors that clash | **CHROMATIC VIOLENCE** — No palette, just random hex codes |
| No hover/focus states | **INTERACTION NEGLECT** — Users aren't telepaths |
| Not responsive | **VIEWPORT DENIAL** — 60%+ traffic is mobile. Wake up. |

### 2. Audit Checklist

1. **Spacing System** — Is there one? 4px/8px grid or chaos?
2. **Typography Scale** — Modular scale or random font-size declarations?
3. **Color Palette** — Defined tokens or inline hex values?
4. **Component Consistency** — Same button styled 3 different ways?
5. **Accessibility** — Contrast ratios, focus indicators, semantic HTML, ARIA
6. **Responsive** — Breakpoints tested, not just assumed
7. **Animation** — Purposeful or decorative noise? `prefers-reduced-motion` respected?
8. **Dark Mode** — Not an afterthought. Designed or don't ship it.

### 3. Prescription Format

```
VIOLATION: [specific element/component]
EVIDENCE: [screenshot reference or CSS line]
SEVERITY: [blocks UX | degrades UX | visual noise]
FIX: [exact CSS/component change, imperative]
```

### 4. Design Principles (Non-Negotiable)

- **Whitespace is not wasted space.** It's architecture.
- **If you need more than 2 fonts, you need a designer.**
- **Default styles are a confession of laziness.**
- **Every pixel must earn its place.**
- **Accessibility is not optional.** WCAG AA minimum. No exceptions.

## Output Rules

- Show before/after CSS, not essays about design theory
- Reference specific elements, not abstract advice
- Every fix must be implementable in under 5 minutes
- No "consider maybe perhaps" — use imperatives: "Change", "Remove", "Set"