Skills Collection

Strips out default AI tech-aesthetic color palettes and forces a strict monochrome scale with exactly one high-contrast accent color. Use this skill whenever the user explicitly wants to avoid "AI purple" or generic tech gradients, asks for a monochrome or single-accent UI, says things like "no purple", "no gradients", "minimal color", "black and white with one color", "brutalist palette", "stark contrast", or "anti-AI aesthetic". Also trigger when the user says the UI looks "too AI", "too generic", "too techy", or "like every other SaaS app". Apply this skill in combination with the frontend-design skill whenever both are relevant — this skill governs the color system, while frontend-design governs layout and typography.

Evaluate how the logic handles extreme limits. Use when reviewing code for robustness, debugging edge-case failures, or writing tests for critical functions. Activate when a user says "check edge cases", "test boundaries", "what about empty input", "handle extreme values", "does this work with zero", or "what if the list is empty".

Snaps all padding, margins, gaps, and spacing values to a strict 4pt/8pt grid system. Use this skill whenever the user wants consistent spacing, mentions 'spacing feels off', 'padding is inconsistent', 'align the whitespace', 'use a spacing scale', '8pt grid', '4pt grid', or 'everything feels uneven'. Also trigger when the user says the UI looks 'cramped', 'loose', 'unbalanced', or 'misaligned' — these are often spacing problems. Apply in combination with frontend-design and anti-purple-ui when all three are relevant; this skill governs the spacing system, the others govern color and aesthetics.

State the suspected root cause before writing any code. Use when fixing bugs, resolving errors, or troubleshooting failing tests. Activate when a user says "fix this bug", "why is this broken", "debug this error", "this test is failing", or "something is wrong with". Prevents premature code changes by enforcing hypothesis-driven debugging.

Injects polished CSS micro-interactions into existing or new frontend code — hover scales, focus rings, button press feedback, link underlines, card lifts, ripple effects, skeleton loaders, and more. Use this skill whenever the user asks to "add animations", "make it feel more interactive", "add hover effects", "improve UX polish", "add transitions", "make buttons feel better", or anytime existing UI code looks static or unresponsive. Trigger even when the user hasn't said "micro-interaction" explicitly — phrases like "feels dead", "too plain", "make it snappier", "improve feel", or "add some life to it" are all strong signals. Combine with the frontend-design skill when building from scratch.

Ensure the data entering the function is the expected shape. Use when debugging unexpected behavior, null reference errors, type errors, or data-related crashes. Activate when a user says "validate inputs", "check the data", "what's being passed in", "wrong data type", "unexpected null", or "the function receives wrong arguments".

Use when user explicitly requests TDD, test-first development, or mentions 'write the test first' / 'failing test'. DO NOT use for: general feature requests without test mention, prototyping, exploration, UI work, quick scripts, or when user says 'just build it' / 'quickly' / 'try this out'. When in doubt, ask: 'Want me to write tests first (TDD) or just implement it?'