From 5d217b15e6279db0bbec5dad313bed16af682147 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Fri, 29 May 2026 20:09:15 -0400
Subject: [PATCH] chore: add skills library

---
 claude-skills/impeccable.md | 59 +++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 claude-skills/impeccable.md

diff --git a/claude-skills/impeccable.md b/claude-skills/impeccable.md
new file mode 100644
index 0000000..0af9377
--- /dev/null
+++ b/claude-skills/impeccable.md
@@ -0,0 +1,59 @@
+---
+name: impeccable
+description: Use when designing, redesigning, critiquing, auditing, or polishing any frontend interface. Covers visual hierarchy, accessibility, typography, spacing, color, motion, copy, and design systems.
+---
+
+# Impeccable UI/UX Skill
+
+Use for: websites, landing pages, dashboards, product UI, components, forms, settings, onboarding, empty states.
+
+## Audit Checklist
+
+### Visual Hierarchy
+- Eye flows to most important element first?
+- Clear primary / secondary / tertiary action distinction?
+- Heading sizes meaningfully differentiated (not just bold)?
+
+### Spacing & Layout
+- Consistent spacing scale (4px/8px grid)?
+- Nothing feels cramped — adequate breathing room?
+- Everything aligns to an invisible grid?
+
+### Typography
+- Max 2 typefaces. Body 15-17px. Line-height 1.5-1.7.
+- Contrast WCAG AA: 4.5:1 body, 3:1 large text.
+- No orphans or widows in paragraphs.
+
+### Color
+- Color communicates meaning, not decoration.
+- Semantic: red=danger, green=success, blue=info — consistent.
+- Works in light AND dark mode.
+- Never color-only information (color-blind safe).
+
+### Interaction States
+- Every interactive element: default, hover, focus, active, disabled.
+- Focus rings visible and custom-styled.
+- Loading/skeleton states for async actions.
+
+### Accessibility
+- All images have alt text.
+- Form inputs have associated labels (not placeholder-only).
+- Keyboard navigable. ARIA where semantic HTML insufficient.
+
+### Motion
+- Purposeful — guides attention, not decoration.
+- Respects prefers-reduced-motion.
+- Timing: micro 100ms, standard 200-300ms, emphasis 400ms.
+
+### Copy
+- CTAs are verb + noun: "Save draft" not "OK".
+- Errors explain what went wrong AND how to fix it.
+- Empty states explain the space and offer a clear next action.
+
+## Output Format
+For each issue:
+1. **What** — specific element
+2. **Why** — user impact
+3. **Fix** — concrete change (code snippet if applicable)
+
+Priority order: Critical (blocks use) → High (degrades UX) → Medium (polish) → Low (nitpick)