@ia-ccun/code-agent-cli 0.0.2 → 0.0.4-8.beta.1

package/config/agent/skills/impeccable/delight/SKILL.md

@@ -0,0 +1,306 @@
+---
+name: delight
+description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful.
+user-invocable: true
+args:
+  - name: target
+    description: The feature or area to add delight to (optional)
+    required: false
+---
+
+Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
+
+## MANDATORY PREPARATION
+
+Use the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
+
+---
+
+## Assess Delight Opportunities
+
+Identify where delight would enhance (not distract from) the experience:
+
+1. **Find natural delight moments**:
+   - **Success states**: Completed actions (save, send, publish)
+   - **Empty states**: First-time experiences, onboarding
+   - **Loading states**: Waiting periods that could be entertaining
+   - **Achievements**: Milestones, streaks, completions
+   - **Interactions**: Hover states, clicks, drags
+   - **Errors**: Softening frustrating moments
+   - **Easter eggs**: Hidden discoveries for curious users
+
+2. **Understand the context**:
+   - What's the brand personality? (Playful? Professional? Quirky? Elegant?)
+   - Who's the audience? (Tech-savvy? Creative? Corporate?)
+   - What's the emotional context? (Accomplishment? Exploration? Frustration?)
+   - What's appropriate? (Banking app ≠ gaming app)
+
+3. **Define delight strategy**:
+   - **Subtle sophistication**: Refined micro-interactions (luxury brands)
+   - **Playful personality**: Whimsical illustrations and copy (consumer apps)
+   - **Helpful surprises**: Anticipating needs before users ask (productivity tools)
+   - **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
+
+If any of these are unclear from the codebase, STOP and call the AskUserQuestion tool to clarify.
+
+**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
+
+## Delight Principles
+
+Follow these guidelines:
+
+### Delight Amplifies, Never Blocks
+- Delight moments should be quick (< 1 second)
+- Never delay core functionality for delight
+- Make delight skippable or subtle
+- Respect user's time and task focus
+
+### Surprise and Discovery
+- Hide delightful details for users to discover
+- Reward exploration and curiosity
+- Don't announce every delight moment
+- Let users share discoveries with others
+
+### Appropriate to Context
+- Match delight to emotional moment (celebrate success, empathize with errors)
+- Respect the user's state (don't be playful during critical errors)
+- Match brand personality and audience expectations
+- Cultural sensitivity (what's delightful varies by culture)
+
+### Compound Over Time
+- Delight should remain fresh with repeated use
+- Vary responses (not same animation every time)
+- Reveal deeper layers with continued use
+- Build anticipation through patterns
+
+## Delight Techniques
+
+Add personality and joy through these methods:
+
+### Micro-interactions & Animation
+
+**Button delight**:
+```css
+/* Satisfying button press */
+.button {
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+.button:active {
+  transform: translateY(2px);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+/* Ripple effect on click */
+/* Smooth lift on hover */
+.button:hover {
+  transform: translateY(-2px);
+  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
+}
+```
+
+**Loading delight**:
+- Playful loading animations (not just spinners)
+- Personality in loading messages (write product-specific ones, not generic AI filler)
+- Progress indication with encouraging messages
+- Skeleton screens with subtle animations
+
+**Success animations**:
+- Checkmark draw animation
+- Confetti burst for major achievements
+- Gentle scale + fade for confirmation
+- Satisfying sound effects (subtle)
+
+**Hover surprises**:
+- Icons that animate on hover
+- Color shifts or glow effects
+- Tooltip reveals with personality
+- Cursor changes (custom cursors for branded experiences)
+
+### Personality in Copy
+
+**Playful error messages**:
+```
+"Error 404"
+"This page is playing hide and seek. (And winning)"
+
+"Connection failed"
+"Looks like the internet took a coffee break. Want to retry?"
+```
+
+**Encouraging empty states**:
+```
+"No projects"
+"Your canvas awaits. Create something amazing."
+
+"No messages"
+"Inbox zero! You're crushing it today."
+```
+
+**Playful labels & tooltips**:
+```
+"Delete"
+"Send to void" (for playful brand)
+
+"Help"
+"Rescue me" (tooltip)
+```
+
+**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
+
+### Illustrations & Visual Personality
+
+**Custom illustrations**:
+- Empty state illustrations (not stock icons)
+- Error state illustrations (friendly monsters, quirky characters)
+- Loading state illustrations (animated characters)
+- Success state illustrations (celebrations)
+
+**Icon personality**:
+- Custom icon set matching brand personality
+- Animated icons (subtle motion on hover/click)
+- Illustrative icons (more detailed than generic)
+- Consistent style across all icons
+
+**Background effects**:
+- Subtle particle effects
+- Gradient mesh backgrounds
+- Geometric patterns
+- Parallax depth
+- Time-of-day themes (morning vs night)
+
+### Satisfying Interactions
+
+**Drag and drop delight**:
+- Lift effect on drag (shadow, scale)
+- Snap animation when dropped
+- Satisfying placement sound
+- Undo toast ("Dropped in wrong place? [Undo]")
+
+**Toggle switches**:
+- Smooth slide with spring physics
+- Color transition
+- Haptic feedback on mobile
+- Optional sound effect
+
+**Progress & achievements**:
+- Streak counters with celebratory milestones
+- Progress bars that "celebrate" at 100%
+- Badge unlocks with animation
+- Playful stats ("You're on fire! 5 days in a row")
+
+**Form interactions**:
+- Input fields that animate on focus
+- Checkboxes with a satisfying scale pulse when checked
+- Success state that celebrates valid input
+- Auto-grow textareas
+
+### Sound Design
+
+**Subtle audio cues** (when appropriate):
+- Notification sounds (distinctive but not annoying)
+- Success sounds (satisfying "ding")
+- Error sounds (empathetic, not harsh)
+- Typing sounds for chat/messaging
+- Ambient background audio (very subtle)
+
+**IMPORTANT**:
+- Respect system sound settings
+- Provide mute option
+- Keep volumes quiet (subtle cues, not alarms)
+- Don't play on every interaction (sound fatigue is real)
+
+### Easter Eggs & Hidden Delights
+
+**Discovery rewards**:
+- Konami code unlocks special theme
+- Hidden keyboard shortcuts (Cmd+K for special features)
+- Hover reveals on logos or illustrations
+- Alt text jokes on images (for screen reader users too!)
+- Console messages for developers ("Like what you see? We're hiring!")
+
+**Seasonal touches**:
+- Holiday themes (subtle, tasteful)
+- Seasonal color shifts
+- Weather-based variations
+- Time-based changes (dark at night, light during day)
+
+**Contextual personality**:
+- Different messages based on time of day
+- Responses to specific user actions
+- Randomized variations (not same every time)
+- Progressive reveals with continued use
+
+### Loading & Waiting States
+
+**Make waiting engaging**:
+- Interesting loading messages that rotate
+- Progress bars with personality
+- Mini-games during long loads
+- Fun facts or tips while waiting
+- Countdown with encouraging messages
+
+```
+Loading messages — write ones specific to your product, not generic AI filler:
+- "Crunching your latest numbers..."
+- "Syncing with your team's changes..."
+- "Preparing your dashboard..."
+- "Checking for updates since yesterday..."
+```
+
+**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy — instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
+
+### Celebration Moments
+
+**Success celebrations**:
+- Confetti for major milestones
+- Animated checkmarks for completions
+- Progress bar celebrations at 100%
+- "Achievement unlocked" style notifications
+- Personalized messages ("You published your 10th article!")
+
+**Milestone recognition**:
+- First-time actions get special treatment
+- Streak tracking and celebration
+- Progress toward goals
+- Anniversary celebrations
+
+## Implementation Patterns
+
+**Animation libraries**:
+- Framer Motion (React)
+- GSAP (universal)
+- Lottie (After Effects animations)
+- Canvas confetti (party effects)
+
+**Sound libraries**:
+- Howler.js (audio management)
+- Use-sound (React hook)
+
+**Physics libraries**:
+- React Spring (spring physics)
+- Popmotion (animation primitives)
+
+**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
+
+**NEVER**:
+- Delay core functionality for delight
+- Force users through delightful moments (make skippable)
+- Use delight to hide poor UX
+- Overdo it (less is more)
+- Ignore accessibility (animate responsibly, provide alternatives)
+- Make every interaction delightful (special moments should be special)
+- Sacrifice performance for delight
+- Be inappropriate for context (read the room)
+
+## Verify Delight Quality
+
+Test that delight actually delights:
+
+- **User reactions**: Do users smile? Share screenshots?
+- **Doesn't annoy**: Still pleasant after 100th time?
+- **Doesn't block**: Can users opt out or skip?
+- **Performant**: No jank, no slowdown
+- **Appropriate**: Matches brand and context
+- **Accessible**: Works with reduced motion, screen readers
+
+Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.

package/config/agent/skills/impeccable/distill/SKILL.md

@@ -0,0 +1,124 @@
+---
+name: distill
+description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.
+user-invocable: true
+args:
+  - name: target
+    description: The feature or component to distill (optional)
+    required: false
+---
+
+Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
+
+## MANDATORY PREPARATION
+
+Use the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first.
+
+---
+
+## Assess Current State
+
+Analyze what makes the design feel complex or cluttered:
+
+1. **Identify complexity sources**:
+   - **Too many elements**: Competing buttons, redundant information, visual clutter
+   - **Excessive variation**: Too many colors, fonts, sizes, styles without purpose
+   - **Information overload**: Everything visible at once, no progressive disclosure
+   - **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations
+   - **Confusing hierarchy**: Unclear what matters most
+   - **Feature creep**: Too many options, actions, or paths forward
+
+2. **Find the essence**:
+   - What's the primary user goal? (There should be ONE)
+   - What's actually necessary vs nice-to-have?
+   - What can be removed, hidden, or combined?
+   - What's the 20% that delivers 80% of value?
+
+If any of these are unclear from the codebase, STOP and call the AskUserQuestion tool to clarify.
+
+**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.
+
+## Plan Simplification
+
+Create a ruthless editing strategy:
+
+- **Core purpose**: What's the ONE thing this should accomplish?
+- **Essential elements**: What's truly necessary to achieve that purpose?
+- **Progressive disclosure**: What can be hidden until needed?
+- **Consolidation opportunities**: What can be combined or integrated?
+
+**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
+
+## Simplify the Design
+
+Systematically remove complexity across these dimensions:
+
+### Information Architecture
+- **Reduce scope**: Remove secondary actions, optional features, redundant information
+- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows)
+- **Combine related actions**: Merge similar buttons, consolidate forms, group related content
+- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden
+- **Remove redundancy**: If it's said elsewhere, don't repeat it here
+
+### Visual Simplification
+- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
+- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
+- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
+- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards
+- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
+- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
+
+### Layout Simplification
+- **Linear flow**: Replace complex grids with simple vertical flow where possible
+- **Remove sidebars**: Move secondary content inline or hide it
+- **Full-width**: Use available space generously instead of complex multi-column layouts
+- **Consistent alignment**: Pick left or center, stick with it
+- **Generous white space**: Let content breathe, don't pack everything tight
+
+### Interaction Simplification
+- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
+- **Smart defaults**: Make common choices automatic, only ask when necessary
+- **Inline actions**: Replace modal flows with inline editing where possible
+- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
+- **Clear CTAs**: ONE obvious next step, not five competing actions
+
+### Content Simplification
+- **Shorter copy**: Cut every sentence in half, then do it again
+- **Active voice**: "Save changes" not "Changes will be saved"
+- **Remove jargon**: Plain language always wins
+- **Scannable structure**: Short paragraphs, bullet points, clear headings
+- **Essential information only**: Remove marketing fluff, legalese, hedging
+- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
+
+### Code Simplification
+- **Remove unused code**: Dead CSS, unused components, orphaned files
+- **Flatten component trees**: Reduce nesting depth
+- **Consolidate styles**: Merge similar styles, use utilities consistently
+- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases?
+
+**NEVER**:
+- Remove necessary functionality (simplicity ≠ feature-less)
+- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
+- Make things so simple they're unclear (mystery ≠ minimalism)
+- Remove information users need to make decisions
+- Eliminate hierarchy completely (some things should stand out)
+- Oversimplify complex domains (match complexity to actual task complexity)
+
+## Verify Simplification
+
+Ensure simplification improves usability:
+
+- **Faster task completion**: Can users accomplish goals more quickly?
+- **Reduced cognitive load**: Is it easier to understand what to do?
+- **Still complete**: Are all necessary features still accessible?
+- **Clearer hierarchy**: Is it obvious what matters most?
+- **Better performance**: Does simpler design load faster?
+
+## Document Removed Complexity
+
+If you removed features or options:
+- Document why they were removed
+- Consider if they need alternative access points
+- Note any user feedback to monitor
+
+Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."

package/config/agent/skills/impeccable/extract/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: extract
+description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.
+user-invocable: true
+args:
+  - name: target
+    description: The feature, component, or area to extract from (optional)
+    required: false
+---
+
+Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
+
+## Discover
+
+Analyze the target area to identify extraction opportunities:
+
+1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
+   - Component organization and naming conventions
+   - Design token structure (if any)
+   - Documentation patterns
+   - Import/export conventions
+   
+   **CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.
+
+2. **Identify patterns**: Look for:
+   - **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)
+   - **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens
+   - **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)
+   - **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing
+
+3. **Assess value**: Not everything should be extracted. Consider:
+   - Is this used 3+ times, or likely to be reused?
+   - Would systematizing this improve consistency?
+   - Is this a general pattern or context-specific?
+   - What's the maintenance cost vs benefit?
+
+## Plan Extraction
+
+Create a systematic extraction plan:
+
+- **Components to extract**: Which UI elements become reusable components?
+- **Tokens to create**: Which hard-coded values become design tokens?
+- **Variants to support**: What variations does each component need?
+- **Naming conventions**: Component names, token names, prop names that match existing patterns
+- **Migration path**: How to refactor existing uses to consume the new shared versions
+
+**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.
+
+## Extract & Enrich
+
+Build improved, reusable versions:
+
+- **Components**: Create well-designed components with:
+  - Clear props API with sensible defaults
+  - Proper variants for different use cases
+  - Accessibility built in (ARIA, keyboard navigation, focus management)
+  - Documentation and usage examples
+  
+- **Design tokens**: Create tokens with:
+  - Clear naming (primitive vs semantic)
+  - Proper hierarchy and organization
+  - Documentation of when to use each token
+  
+- **Patterns**: Document patterns with:
+  - When to use this pattern
+  - Code examples
+  - Variations and combinations
+
+**NEVER**:
+- Extract one-off, context-specific implementations without generalization
+- Create components so generic they're useless
+- Extract without considering existing design system conventions
+- Skip proper TypeScript types or prop documentation
+- Create tokens for every single value (tokens should have semantic meaning)
+
+## Migrate
+
+Replace existing uses with the new shared versions:
+
+- **Find all instances**: Search for the patterns you've extracted
+- **Replace systematically**: Update each use to consume the shared version
+- **Test thoroughly**: Ensure visual and functional parity
+- **Delete dead code**: Remove the old implementations
+
+## Document
+
+Update design system documentation:
+
+- Add new components to the component library
+- Document token usage and values
+- Add examples and guidelines
+- Update any Storybook or component catalog
+
+Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.

package/config/agent/skills/impeccable/frontend-design/reference/color-and-contrast.md

@@ -0,0 +1,132 @@
+# Color & Contrast
+
+## Color Spaces: Use OKLCH
+
+**Stop using HSL.** Use OKLCH (or LCH) instead. It's perceptually uniform, meaning equal steps in lightness *look* equal—unlike HSL where 50% lightness in yellow looks bright while 50% in blue looks dark.
+
+```css
+/* OKLCH: lightness (0-100%), chroma (0-0.4+), hue (0-360) */
+--color-primary: oklch(60% 0.15 250);      /* Blue */
+--color-primary-light: oklch(85% 0.08 250); /* Same hue, lighter */
+--color-primary-dark: oklch(35% 0.12 250);  /* Same hue, darker */
+```
+
+**Key insight**: As you move toward white or black, reduce chroma (saturation). High chroma at extreme lightness looks garish. A light blue at 85% lightness needs ~0.08 chroma, not the 0.15 of your base color.
+
+## Building Functional Palettes
+
+### The Tinted Neutral Trap
+
+**Pure gray is dead.** Add a subtle hint of your brand hue to all neutrals:
+
+```css
+/* Dead grays */
+--gray-100: oklch(95% 0 0);     /* No personality */
+--gray-900: oklch(15% 0 0);
+
+/* Warm-tinted grays (add brand warmth) */
+--gray-100: oklch(95% 0.01 60);  /* Hint of warmth */
+--gray-900: oklch(15% 0.01 60);
+
+/* Cool-tinted grays (tech, professional) */
+--gray-100: oklch(95% 0.01 250); /* Hint of blue */
+--gray-900: oklch(15% 0.01 250);
+```
+
+The chroma is tiny (0.01) but perceptible. It creates subconscious cohesion between your brand color and your UI.
+
+### Palette Structure
+
+A complete system needs:
+
+| Role | Purpose | Example |
+|------|---------|---------|
+| **Primary** | Brand, CTAs, key actions | 1 color, 3-5 shades |
+| **Neutral** | Text, backgrounds, borders | 9-11 shade scale |
+| **Semantic** | Success, error, warning, info | 4 colors, 2-3 shades each |
+| **Surface** | Cards, modals, overlays | 2-3 elevation levels |
+
+**Skip secondary/tertiary unless you need them.** Most apps work fine with one accent color. Adding more creates decision fatigue and visual noise.
+
+### The 60-30-10 Rule (Applied Correctly)
+
+This rule is about **visual weight**, not pixel count:
+
+- **60%**: Neutral backgrounds, white space, base surfaces
+- **30%**: Secondary colors—text, borders, inactive states
+- **10%**: Accent—CTAs, highlights, focus states
+
+The common mistake: using the accent color everywhere because it's "the brand color." Accent colors work *because* they're rare. Overuse kills their power.
+
+## Contrast & Accessibility
+
+### WCAG Requirements
+
+| Content Type | AA Minimum | AAA Target |
+|--------------|------------|------------|
+| Body text | 4.5:1 | 7:1 |
+| Large text (18px+ or 14px bold) | 3:1 | 4.5:1 |
+| UI components, icons | 3:1 | 4.5:1 |
+| Non-essential decorations | None | None |
+
+**The gotcha**: Placeholder text still needs 4.5:1. That light gray placeholder you see everywhere? Usually fails WCAG.
+
+### Dangerous Color Combinations
+
+These commonly fail contrast or cause readability issues:
+
+- Light gray text on white (the #1 accessibility fail)
+- **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency
+- Red text on green background (or vice versa)—8% of men can't distinguish these
+- Blue text on red background (vibrates visually)
+- Yellow text on white (almost always fails)
+- Thin light text on images (unpredictable contrast)
+
+### Never Use Pure Gray or Pure Black
+
+Pure gray (`oklch(50% 0 0)`) and pure black (`#000`) don't exist in nature—real shadows and surfaces always have a color cast. Even a chroma of 0.005-0.01 is enough to feel natural without being obviously tinted. (See tinted neutrals example above.)
+
+### Testing
+
+Don't trust your eyes. Use tools:
+
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- Browser DevTools → Rendering → Emulate vision deficiencies
+- [Polypane](https://polypane.app/) for real-time testing
+
+## Theming: Light & Dark Mode
+
+### Dark Mode Is Not Inverted Light Mode
+
+You can't just swap colors. Dark mode requires different design decisions:
+
+| Light Mode | Dark Mode |
+|------------|-----------|
+| Shadows for depth | Lighter surfaces for depth (no shadows) |
+| Dark text on light | Light text on dark (reduce font weight) |
+| Vibrant accents | Desaturate accents slightly |
+| White backgrounds | Never pure black—use dark gray (oklch 12-18%) |
+
+```css
+/* Dark mode depth via surface color, not shadow */
+:root[data-theme="dark"] {
+  --surface-1: oklch(15% 0.01 250);
+  --surface-2: oklch(20% 0.01 250);  /* "Higher" = lighter */
+  --surface-3: oklch(25% 0.01 250);
+
+  /* Reduce text weight slightly */
+  --body-weight: 350;  /* Instead of 400 */
+}
+```
+
+### Token Hierarchy
+
+Use two layers: primitive tokens (`--blue-500`) and semantic tokens (`--color-primary: var(--blue-500)`). For dark mode, only redefine the semantic layer—primitives stay the same.
+
+## Alpha Is A Design Smell
+
+Heavy use of transparency (rgba, hsla) usually means an incomplete palette. Alpha creates unpredictable contrast, performance overhead, and inconsistency. Define explicit overlay colors for each context instead. Exception: focus rings and interactive states where see-through is needed.
+
+---
+
+**Avoid**: Relying on color alone to convey information. Creating palettes without clear roles for each color. Using pure black (#000) for large areas. Skipping color blindness testing (8% of men affected).