@maccesar/aiskills 1.9.2 → 1.9.3

package/skills/refactoring-ui/references/08-finishing-touches.md

@@ -1,91 +0,0 @@
-# Ch8+9 — Finishing Touches & Leveling Up
-
-Source: "Refactoring UI" by Adam Wathan & Steve Schoger
-
----
-
-## Replace Bullets with Icons
-
-- Default bullet points feel generic and low-effort
-- Replace with icons that match the content:
-  - Checkmarks for feature lists or completed items
-  - Arrows for directional or sequential lists
-  - Content-specific icons (e.g., lock icon for "secure", globe for "worldwide")
-- Icons add visual interest and reinforce meaning simultaneously
-
-## Promote Quotation Marks as Visual Elements
-
-- Large, decorative quotation marks can become a design element in testimonials and pull quotes
-- Make them large, colorful (use an accent color), and position them prominently
-- The quote mark becomes part of the visual design, not just punctuation
-
-## Style Links Intentionally
-
-Two approaches depending on context:
-1. **Color + weight:** The standard blue link, but use brand color + slightly heavier font weight
-2. **Thick colorful underline:** A thick border-bottom (2–4px) in an accent color that partially overlaps the bottom of the text
-   - Creates visual interest while remaining clearly a link
-   - Can use a different color from the text for contrast
-
-## Custom Checkboxes and Radio Buttons
-
-- Browser default inputs look generic and don't match brand identity
-- Replace with custom-styled equivalents using brand color for the checked state
-- Common pattern: custom checkbox with a checkmark SVG on a colored background
-- Worth the extra markup for polished forms
-
-## Accent Borders
-
-Use a short, thick accent-color border as a decorative element:
-- **Top of card:** a colored bar at the top edge of a card or panel
-- **Left side of active nav item:** indicates current page/section
-- **Left side of alert message:** differentiates alert types (red=danger, yellow=warning, green=success)
-- **Under a headline:** a short thick underline using brand color
-- **Top of the entire page layout:** thin color strip across the very top
-
-These are simple, high-impact touches that add brand identity without complexity.
-
-## Background Decoration
-
-Options for making backgrounds interesting:
-1. **Solid color change:** Switch from white to a brand color or neutral tint
-2. **Gradient:** Use two hues that are no more than 30° apart on the color wheel — closer = more natural, farther = jarring
-3. **Low-contrast repeating pattern:** Subtle geometric pattern (dots, lines, hatching) at low opacity
-4. **Geometric shapes:** Abstract colored shapes or blobs in the background at low opacity
-
-Key rule for gradients: keep hues within 30° of each other for a natural look.
-
-## Empty States Are a Priority, Not an Afterthought
-
-- Most UIs look broken or confusing when completely empty
-- Design the empty state before adding content — it's often the first thing new users see
-
-Good empty state components:
-- Illustration or icon that's contextually relevant
-- Brief, friendly explanation of what belongs here
-- Clear call-to-action (e.g., "Add your first project" button)
-
-Additional rule: **hide irrelevant UI until it has content**
-- Tabs with no content, filters with no items, pagination with one page — all look broken empty
-- Don't render those elements until there's content that makes them useful
-
-## Alternatives to Borders
-
-Borders are often overused. Replace them with:
-1. **Box shadow:** `box-shadow: 0 1px 3px rgba(0,0,0,0.1)` — creates separation without a hard line
-2. **Two different background colors:** alternating section backgrounds communicate separation without borders
-3. **Extra spacing:** more white space between sections often eliminates the need for a border entirely
-
-## Think Outside the Box
-
-Don't default to generic UI patterns when something more engaging is possible:
-
-- **Enriched dropdowns:** add icons, sections, descriptions, or two-column layouts inside dropdowns
-- **Table column hierarchy:** instead of flat equal-weight columns, apply visual hierarchy within cells (primary value large/dark, secondary value small/grey)
-- **Selectable cards instead of radio buttons:** replace radio button groups with styled card options that highlight on selection — more visual, easier to scan
-
-## Leveling Up Your Eye
-
-Two practices from the book:
-1. **Study unintuitive decisions in good designs:** Look at polished UIs and ask "why did they do that?" Notice the specific, non-obvious choices — the things you wouldn't have thought of
-2. **Rebuild interfaces without DevTools:** Pick a UI from a product you admire and recreate it from scratch, without inspecting the original. Forces you to make real design decisions rather than copying values