Paul BakausandClaude Opus 4.7
7f28ee0e11
The rule was contested in the design world and causing more damage than good — pushing every page into the tinted-near-white default which is the cream/sand AI tell we already explicitly ban elsewhere. Vercel, SVKMS, Brutalist sites, et al. use pure black/white successfully; the skill shouldn't second-guess that. Skill markdown deletions: - SKILL.md Color: drop the "Never use #000 or #fff" bullet. - color-and-contrast.md: drop the "Never Use Pure Gray or Pure Black" subsection, the "Never pure black" table-row prescription, and the "Avoid: Using pure black for large areas" bullet. - colorize.md: drop the "NEVER use pure black or pure white for large areas" bullet. - polish.md: drop the "Tinted neutrals: No pure gray or pure black" half of the bullet (the gray-on-color bullet survives). Detector code (cli/engine): - registry/antipatterns.mjs: remove the `pure-black-white` entry. - rules/checks.mjs: remove the three `findings.push({ id: 'pure-black-white', ... })` emit points (inline #000 bg, Tailwind bg-black class, plain-HTML scan path). - engines/regex/detect-text.mjs: remove the two pure-black-white regex rules (CSS `background: #000…` + Tailwind `bg-black`). - detect-antipatterns-browser.js: regenerated via scripts/build-browser-detector.js. Tests: - detect-antipatterns-fixtures.test.mjs: invert the assertion that pure-black-white fires; expect it to NOT fire post-v3.2. Drop the Tailwind bg-black-opacity edge-case test (no longer relevant). - detect-antipatterns.test.js: drop the standalone "detects pure- black-white in styled-components" test and remove pure-black-white from the multi-detector assertions in PricingCard, globals.css, and GlobalStyle.tsx tests. 166 bun tests pass; 24 node fixture tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
7.8 KiB
Additional context needed: existing brand colors.
Replace timid grayscale or single-accent designs with a strategic palette: pick a color strategy, choose a hue family that fits the brand, then apply color with intent. More color ≠ better. Strategic color beats rainbow vomit.
Register
Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
Assess Color Opportunity
Analyze the current state and identify opportunities:
-
Understand current state:
- Color absence: Pure grayscale? Limited neutrals? One timid accent?
- Missed opportunities: Where could color add meaning, hierarchy, or delight?
- Context: What's appropriate for this domain and audience?
- Brand: Are there existing brand colors we should use?
-
Identify where color adds value:
- Semantic meaning: Success (green), error (red), warning (yellow/orange), info (blue)
- Hierarchy: Drawing attention to important elements
- Categorization: Different sections, types, or states
- Emotional tone: Warmth, energy, trust, creativity
- Wayfinding: Helping users navigate and understand structure
- Delight: Moments of visual interest and personality
If any of these are unclear from the codebase, {{ask_instruction}}
CRITICAL: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
Plan Color Strategy
Create a purposeful color introduction plan:
- Color palette: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
- Dominant color: Which color owns 60% of colored elements?
- Accent colors: Which colors provide contrast and highlights? (30% and 10%)
- Application strategy: Where does each color appear and why?
IMPORTANT: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
Introduce Color Strategically
Add color systematically across these dimensions:
Semantic Color
-
State indicators:
- Success: Green tones (emerald, forest, mint)
- Error: Red/pink tones (rose, crimson, coral)
- Warning: Orange/amber tones
- Info: Blue tones (sky, ocean, indigo)
- Neutral: Gray/slate for inactive states
-
Status badges: Colored backgrounds or borders for states (active, pending, completed, etc.)
-
Progress indicators: Colored bars, rings, or charts showing completion or health
Accent Color Application
- Primary actions: Color the most important buttons/CTAs
- Links: Add color to clickable text (maintain accessibility)
- Icons: Colorize key icons for recognition and personality
- Headers/titles: Add color to section headers or key labels
- Hover states: Introduce color on interaction
Background & Surfaces
- Tinted backgrounds: If you replace pure gray, tint toward the brand hue, not toward a generic-warm-or-cool pair. The default-warm-tint (
oklch(97% 0.01 60)and its neighbors) is now the AI cream/sand giveaway. Be specific to the brand or stay neutral. - Colored sections: Use subtle background colors to separate areas
- Gradient backgrounds: Add depth with subtle, intentional gradients (not generic purple-blue)
- Cards & surfaces: Tint cards or surfaces toward the brand, not "for warmth" by reflex
Use OKLCH for color: It's perceptually uniform, meaning equal steps in lightness look equal. Great for generating harmonious scales.
Data Visualization
- Charts & graphs: Use color to encode categories or values
- Heatmaps: Color intensity shows density or importance
- Comparison: Color coding for different datasets or timeframes
Borders & Accents
- Hairline borders: 1px colored borders on full perimeter (not side-stripes; see the absolute ban on
border-left/right > 1px) - Underlines: Color underlines for emphasis or active states
- Dividers: Subtle colored dividers instead of gray lines
- Focus rings: Colored focus indicators matching brand
- Surface tints: A 4-8% background wash of the accent color instead of a stripe
NEVER: border-left or border-right greater than 1px as a colored accent stripe. This is one of the three absolute bans in the parent skill. If you want to mark a card as "active" or "warning", use a full hairline border, a background tint, a leading glyph, or a numbered prefix. Not a side stripe.
Typography Color
- Colored headings: Use brand colors for section headings (maintain contrast)
- Highlight text: Color for emphasis or categories
- Labels & tags: Small colored labels for metadata or categories
Decorative Elements
- Illustrations: Add colored illustrations or icons
- Shapes: Geometric shapes in brand colors as background elements
- Gradients: Colorful gradient overlays or mesh backgrounds
- Blobs/organic shapes: Soft colored shapes for visual interest
Balance & Refinement
Ensure color addition improves rather than overwhelms:
Maintain Hierarchy
- Dominant color (60%): Primary brand color or most used accent
- Secondary color (30%): Supporting color for variety
- Accent color (10%): High contrast for key moments
- Neutrals (remaining): Gray/black/white for structure
Accessibility
- Contrast ratios: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
- Don't rely on color alone: Use icons, labels, or patterns alongside color
- Test for color blindness: Verify red/green combinations work for all users
Cohesion
- Consistent palette: Use colors from defined palette, not arbitrary choices
- Systematic application: Same color meanings throughout (green always = success)
- Temperature consistency: Warm palette stays warm, cool stays cool
NEVER:
- Use every color in the rainbow (choose 2-4 colors beyond neutrals)
- Apply color randomly without semantic meaning
- Put gray text on colored backgrounds. It looks washed out; use a darker shade of the background color or transparency instead
- Violate WCAG contrast requirements
- Use color as the only indicator (accessibility issue)
- Make everything colorful (defeats the purpose)
- Default to purple-blue gradients (AI slop aesthetic)
Verify Color Addition
Test that colorization improves the experience:
- Better hierarchy: Does color guide attention appropriately?
- Clearer meaning: Does color help users understand states/categories?
- More engaging: Does the interface feel warmer and more inviting?
- Still accessible: Do all color combinations meet WCAG standards?
- Not overwhelming: Is color balanced and purposeful?
When the palette earns its place, hand off to {{command_prefix}}impeccable polish for the final pass.
Live-mode signature params
When invoked from live mode, each variant MUST declare a color-amount param so the user can dial between a restrained accent and a drenched surface without regeneration. Author the variant's CSS against var(--p-color-amount, 0.5), typically as the alpha multiplier on backgrounds, or as a scaling factor on the chroma axis in an OKLCH expression. 0 = neutral/monochrome, 1 = full saturation / dominant coverage.
{"id":"color-amount","kind":"range","min":0,"max":1,"step":0.05,"default":0.5,"label":"Color amount"}
Layer 1-2 variant-specific params on top: palette selection (steps with named options), temperature warmth, or tint vs. true color. See reference/live.md for the full params contract.