@maccesar/aiskills 1.9.2 → 1.10.0

package/skills/refactoring-ui/references/07-images.md

@@ -1,75 +0,0 @@
-# Ch7 — Working with Images
-
-Source: "Refactoring UI" by Adam Wathan & Steve Schoger
-
----
-
-## Use Real Images From Day One
-
-- Never design with placeholder images (grey boxes, lorem ipsum images)
-- Placeholder images lie about how real content will look — especially for products, people, and covers
-- Hire a photographer or use quality stock photo services (e.g., Unsplash)
-- The visual design must work with actual images, not idealized placeholders
-
-## Text Over Images
-
-Option 1: **Semi-transparent overlay**
-- Add a dark overlay (black) for light-colored text on top of a photo
-- Add a light overlay (white) for dark-colored text on top of a photo
-- Overlay controls how much of the image shows through
-
-Option 2: **Lower image contrast + adjust brightness**
-- Reduce contrast on the image itself so text has a more uniform background
-- Brighten or darken the whole image to create a consistently light/dark canvas for text
-
-Option 3: **Colorize the image**
-- Desaturate the image (remove color)
-- Apply a solid fill layer using "multiply" blend mode in your design tool
-- Result: a single-color tone that text can sit on top of
-
-Option 4: **Text shadow**
-- Use a large blur, no offset text-shadow behind the text
-- Creates a soft halo that separates text from the image background
-- Best for small amounts of text (headlines, labels)
-
-## Icons at Scale
-
-- Icons designed at 16–24px look chunky and blurry when scaled to 3–4×
-- At large sizes, use a **shaped container** with a background color instead of a raw oversized icon
-- Put the icon inside a circle, rounded square, or other shape
-- Scale the container to the needed size; keep the icon at its native size (or slightly larger)
-- This prevents the "blown up icon" problem while adding visual polish
-
-## Screenshots
-
-Three problems with using screenshots at full scale:
-- At 70% scale, 16px font becomes ~11px — unreadable
-- At 50% scale, 16px font becomes 8px — completely illegible
-
-Solutions:
-1. **Use a tablet/narrow layout screenshot** instead of a full desktop one — content scales better
-2. **Take a partial screenshot** — crop to just the relevant portion
-3. **Draw a simplified version** — remove most UI, keep only what illustrates the point
-4. Never rely on the viewer being able to read or understand text in a thumbnail screenshot
-
-## Favicons
-
-- A 128px logo shrunk to 16px is unrecognizable — too much detail is lost
-- **Redraw the favicon at target size** from scratch (16×16, 32×32)
-- Keep it to 1–2 elements; use just the icon mark, not the full wordmark
-- Test it at 1× actual size while designing — what looks good at 128px often looks like noise at 16px
-
-## User-Uploaded Images
-
-Two problems: aspect ratio and background bleed.
-
-**Aspect ratio:** User uploads won't match your layout's expected proportions.
-- Use fixed containers (set width and height)
-- Apply `background-size: cover` (or the equivalent `object-fit: cover`)
-- Let the browser/engine center and crop to fill the container
-
-**Background bleed:** Images with white or light backgrounds bleed into light-colored page backgrounds.
-- Don't use a visible border — it creates a box outline that looks heavy
-- Instead, add a subtle **inner box-shadow** (inset): `box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1)`
-- This creates a soft inner ring that defines the edge without a harsh border
-- Works across all image background colors since it sits on top of the image

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