visual-craft-fundamentals

name	Visual Craft Fundamentals
description	Child skill under Build Quality UI/UX for the level-up polish pass: when the screen works but looks generic, flat, or AI-generated, this skill applies named craft techniques (two-part shadows, hue rotation, up-pop/down-pop, single-hue HSB palettes, double-your-whitespace, named font pairings, text-on-image methods). Returns evidence-backed findings with severity and before→after token fixes; also the deep corrective lens for v0/Lovable/Cursor/Bolt output after the AI smoke test.
skill_type	procedure
altitude	domain
activation	progressive
parent_id	build_quality_ui_ux
depth	1
preserve_markdown	true
legacy_paths	["product-and-design.visual-craft-fundamentals.skill","docs/research/youtube-library/skill-drafts/visual-craft-fundamentals/SKILL.md"]
reference_modules	[{"id":"visual_craft_fundamentals.depth_color_surfaces","name":"Depth, Color & Surface Craft","summary":"Threshold-bearing rules for shadows and elevation (two-part recipe, xs–xl ladder, inset/outset taxonomy), color systems (HSB single-hue palettes, hue rotation, grey temperature, dark-mode saturation), buttons, form inputs, and icon weight.","when_to_load":["When the finding target is shadows, elevation, color palette, gradients, greys, dark mode, buttons, inputs, or icon weight.","When auditing design-system tokens (shadow scale, color scale) against operator canon."],"path":"references/depth-color-surfaces.md"},{"id":"visual_craft_fundamentals.type_spacing_emphasis","name":"Type, Spacing & Emphasis Craft","summary":"Threshold-bearing rules for typography (closed type scale, inverse letter-spacing and line-height, named font shortlist), the 4-pixel spacing system with whitespace numerics, the up-pop/down-pop emphasis framework, and hierarchy levers.","when_to_load":["When the finding target is typography, font selection or pairing, spacing, whitespace, emphasis, or visual hierarchy.","When picking fonts for a new brand surface or marketing refresh."],"path":"references/type-spacing-emphasis.md"},{"id":"visual_craft_fundamentals.ai_slop_corrections","name":"AI-Slop Deep Corrections & Text-on-Image Methods","summary":"Four additional AI-slop fingerprints beyond the ui_ux_quality_review smoke test, the deep corrective token recipes for all twelve patterns, and the numbered text-on-image methods (Methods 0–4, Scrim, floor blur).","when_to_load":["When rewriting AI-generated UI (v0, Lovable, Cursor, Bolt) after the smoke test has fingerprinted it.","When placing text over photography — heroes, thumbnails, blog covers, OG images."],"path":"references/ai-slop-corrections.md"}]
path	apps/web/src/lib/services/agentic-chat/tools/skills/definitions/visual_craft_fundamentals/SKILL.md

Visual Craft Fundamentals

Identity

Level-up polish child. The discipline this skill enforces is craft over decoration: take a screen from "passes the beginner check" to "looks designed by someone who can see," using named, numerical techniques — never vibes-talk. Subtraction beats addition: almost every fix removes weight (fewer borders, softer shadows, hue rotation instead of opacity drop, off-white instead of border, single-hue palette instead of three accents).

This is a procedure skill at domain altitude.

This skill assumes the foundational pass is done. It is the level-up sibling of ui_ux_quality_review (which catches obviously broken; this ships obviously crafted) and the designated deep corrective lens for AI-generated UI after that skill's smoke test names the slop patterns.

Activation

• The screen works and passes the beginner-mistake bar but still feels generic, flat, or assembled rather than designed.
• The user asks for polish, taste, premium feel, visual craft, "make it look less like AI," spacing, type, color, shadows, or layout refinement.
• Rewriting v0 / Lovable / Cursor / Bolt output after ui_ux_quality_review's smoke test fingerprinted it.
• Auditing Inkprint or other design-system tokens against operator canon (shadow ladder, color scale, type scale, spacing scale).
• Picking fonts for a new brand surface, or applying text-on-image overlays (hero photography, thumbnails, OG images).

Judgment

Severity rubric

• high — the surface reads as unmistakably amateur or AI-generated (named slop fingerprint), or the craft issue degrades legibility (untested text-on-image, contrast loss).
• medium — a named technique is violated and the fix yields visible polish gain (single flat shadow, full up-pop everywhere, off-scale spacing, pure-grey muted text on color).
• low — refinement on an already-competent surface (letter-spacing tune, grey temperature, optical alignment).

Procedure

1. Preflight. Confirm the foundational pass is complete — if the surface has flow, state, or task-completion problems, escalate to ui_ux_quality_review first and stop; craft polish on a broken flow is wasted work. Capture the surface (screenshots or component code), the tokens in play (Inkprint on BuildOS surfaces), and whether the UI is AI-generated. Run the grayscale-first check (Erik Kennedy, 7 Rules — "black and white first"): mentally strip the surface to B&W and confirm structure, spacing, and hierarchy hold before judging any color. If it reads badly in grayscale, color cannot fix it — log a hierarchy/spacing finding (or escalate) first, and treat color as the LAST pass: one brand hue + grayscale neutrals + at most ONE accent, added only after structure is working.