@djm204/agent-skills 1.0.0

package/templates/creative/ux-designer/.cursor/rules/accessibility.mdc

@@ -0,0 +1,69 @@
+---
+description: Accessibility
+alwaysApply: false
+---
+
+# Accessibility
+
+Designing inclusive experiences that work for all users regardless of ability, device, or context.
+
+## Core Principle
+
+**Accessibility is not a feature — it is a requirement.** Design for the most constrained user and everyone benefits.
+
+## WCAG 2.2 AA — POUR Framework
+
+### Perceivable
+- Alt text for non-text content; captions/transcripts for audio/video
+- 4.5:1 contrast for text, 3:1 for large text and UI components
+- No information by color alone; text resizable to 200%; reflow at 320px width
+
+### Operable
+- All functionality via keyboard; no keyboard traps
+- Skip navigation link as first focusable element; visible focus indicators
+- No time limits (or extend/disable); no flashing > 3 times/sec
+- Focus order follows logical sequence; link purpose clear from text alone; touch targets 24x24px min (44x44px recommended)
+
+### Understandable
+- Language declared in HTML lang; consistent navigation and component identification
+- Error identification with clear description; labels for all inputs
+- No unexpected context change on focus or input
+
+### Robust
+- Valid semantic HTML; name, role, value programmatically determinable
+- Status messages via ARIA live regions; compatible with screen readers, voice control, switch devices
+
+## Keyboard Navigation
+
+- Tab/Shift+Tab to move; Enter/Space to activate; Arrows within components; Escape to close
+- Focus into modal on open, returns to trigger on close; never lost or stuck
+- Custom focus: 2px+ outline, 3:1 contrast; tabindex="0" for custom elements, "-1" for programmatic only; never > 0
+
+## Screen Readers
+
+- Semantic HTML: `<nav>`, `<main>`, `<header>`, `<footer>`, `<section>`, `<article>`
+- Headings: logical outline (h1→h2→h3, no skipping); lists use `<ul>`/`<ol>`; forms use `<label>`
+- ARIA: supplement to HTML, not replacement; aria-label, aria-describedby, aria-live, aria-expanded, aria-hidden
+- Follow WAI-ARIA APG patterns for complex widgets (accordion, dialog, tabs, combobox, menu)
+- Test with VoiceOver, NVDA/JAWS, TalkBack
+
+## Inclusive Design
+
+Disability spectrum: Permanent → Temporary → Situational. Solve for one, extend to many (curb cuts help wheelchairs, strollers, bikes).
+
+## Cognitive Accessibility
+
+Plain language (8th-grade level), short scannable chunks, consistent patterns, clear error messages with recovery, undo for destructive actions, minimize required memory, progress indicators.
+
+## Testing
+
+- **Automated** (~30%): axe-core/Lighthouse, contrast checker, HTML validation
+- **Manual** (~70%): Keyboard-only navigation, screen reader walkthrough, 200% zoom reflow, color blindness simulation, reduced motion, touch targets, focus order, form errors
+- **User testing**: Include users with disabilities; test with actual assistive technologies
+
+## Anti-Patterns
+
+- **Overlay widgets**: Don't work and create new problems
+- **Placeholder-only labels**: Disappear on focus
+- **Focus suppression**: `outline: none` without replacement
+- **Mouse-only interactions**: Drag-and-drop without keyboard alternative

package/templates/creative/ux-designer/.cursor/rules/emotional-design.mdc

@@ -0,0 +1,59 @@
+---
+description: Emotional Design
+alwaysApply: false
+---
+
+# Emotional Design
+
+Creating positive emotional connections, building trust, and driving engagement through psychology and behavioral science.
+
+## Core Principle
+
+**Eliminate frustration first, then add delight.** You cannot create positive emotions on a frustrating foundation.
+
+## Norman's Three Levels
+
+1. **Visceral** — Immediate reaction: visual appeal, first impression (color, typography, polish)
+2. **Behavioral** — During use: usability, effectiveness, pleasure (interaction design, performance)
+3. **Reflective** — After use: meaning, satisfaction, self-image (brand perception, accomplishment)
+
+Priority: Behavioral first (if it doesn't work, nothing else matters) → Visceral → Reflective.
+
+## Frustration Reduction (Highest Impact)
+
+| Frustration Source | Fix |
+|-------------------|-----|
+| Unexpected data loss | Auto-save; confirm destructive actions |
+| Unclear errors | Plain language with specific recovery steps |
+| Long waits | Skeleton screens, progress indicators, optimistic UI |
+| Dead ends | Always provide a next action |
+| Forced repetition | Remember preferences; pre-fill known info |
+| Hidden functionality | Progressive disclosure, not hiding |
+| Inconsistent behavior | Same action → same result everywhere |
+
+## Trust Building
+
+- **Trust signals**: Transparency, consistency, competence, security indicators, social proof, graceful error handling
+- **Trust breakers**: Hidden fees, fake urgency, bait-and-switch, unauthorized data collection, broken promises
+
+## Peak-End Rule (Kahneman)
+
+People judge by peak moment and ending. Design peak moments (celebrate accomplishments). Protect endings (confirmation + clear next step). Avoid negative peaks — one terrible moment defines the whole experience.
+
+## Micro-Delight
+
+Small unexpected positive moments: confetti on milestones, witty empty states, personalized greetings, smooth animations. Rules: never interfere with tasks, respect prefers-reduced-motion, don't repeat too often, never during error states.
+
+## Dark Pattern Avoidance
+
+Reject: confirmshaming, hidden costs, trick questions, forced continuity, disguised ads, friend spam, roach motel, misdirection, privacy zuckering. Test: "If I explained this flow to a journalist, would I be proud?"
+
+## Onboarding Emotional Arc
+
+Curiosity (landing) → Confidence (sign up — easy, no surprises) → Competence (first action — "I did it!") → Investment (customization — "feels like mine") → Achievement (first milestone). Each stage: clear next action, immediate feedback, zero friction.
+
+## Anti-Patterns
+
+- **Delight without function**: Animation over usability
+- **Emotional manipulation**: Guilt, shame, or fear to drive action
+- **Tone-deaf celebration**: Congratulating users for mundane tasks

package/templates/creative/ux-designer/.cursor/rules/handoff.mdc

@@ -0,0 +1,73 @@
+---
+description: Design Handoff
+alwaysApply: false
+---
+
+# Design Handoff
+
+Bridging design and development through clear specifications, shared language, and measurable quality standards.
+
+## Core Principle
+
+**Handoff is not a moment — it is a continuous conversation.** Collaborate from the start, not over a wall.
+
+## Specification Standards
+
+Every handoff includes:
+
+- **Layout**: Responsive behavior at all breakpoints, spacing via tokens, grid alignment, min/max-width
+- **Typography**: Font, weight, size, line-height as tokens; truncation behavior
+- **Color**: All colors as tokens; light/dark mode specs; contrast ratios documented
+- **Components**: All states (default, hover, focus, active, disabled, error, loading, empty), interaction behavior, animation specs, responsive adaptations
+- **Content**: Real examples (not lorem ipsum), character limits, empty states, error copy
+
+## Design Annotations
+
+- Spacing callouts with token names
+- Interaction notes ("On hover, show tooltip after 500ms")
+- Responsive notes ("Stack below 768px")
+- Accessibility notes ("aria-label='Close dialog'", "Focus trap in modal")
+- Edge cases ("Truncate with ellipsis after 2 lines")
+- Conditional logic ("Show only when admin role")
+
+## Prototyping
+
+- **Low-fi**: Validate layout and flow (fast, disposable)
+- **Mid-fi**: Validate interaction patterns (enough to test, not distract)
+- **High-fi**: Stakeholder sign-off (shows real vision)
+- **Code prototype**: Complex interactions that can't be faked
+
+## Design QA
+
+Review implementation against spec:
+- Layout, spacing, typography, colors match at all breakpoints
+- All interaction states implemented; animations match spec
+- Keyboard nav works; screen reader announces correctly; focus order matches visual order
+- Error and empty states display correctly; responsive behavior verified
+
+Process: designer reviews staging → files issues (expected vs. actual) → prioritize functional > accessibility > polish → re-review.
+
+## UX Metrics
+
+- **Task success rate**: > 90% critical, > 80% secondary
+- **Time on task**: Compare against baseline, aim for reduction
+- **Error rate**: Track by type (slips vs. mistakes)
+- **SUS score**: > 68 above average, > 80 good, > 90 excellent
+
+## Usability Testing
+
+- 5 users per round; think-aloud, task-based; observe behavior not opinions
+- Minimum every 2 weeks; weekly is ideal; full test before launch
+- Unmoderated (20-50 users) for quantitative validation
+
+## Collaboration Practices
+
+- Weekly design review with developers during design phase
+- Pair on complex interactions; shared language through tokens and component names
+- Living design system documentation with decision log and changelog
+
+## Anti-Patterns
+
+- **Wall-of-specs handoff**: Dumping documents without conversation
+- **Missing states**: Only designing happy path, leaving errors to developers
+- **No design QA**: Assuming implementation matches spec without verification

package/templates/creative/ux-designer/.cursor/rules/information-architecture.mdc

@@ -0,0 +1,62 @@
+---
+description: Information Architecture
+alwaysApply: false
+---
+
+# Information Architecture
+
+Organizing, structuring, and labeling content so users can find what they need.
+
+## Core Principle
+
+**If users can't find it, it doesn't exist.**
+
+## Four Core Systems (Rosenfeld & Morville)
+
+1. **Organization** — How content is grouped and categorized
+2. **Labeling** — How content is named and described
+3. **Navigation** — How users move through content
+4. **Search** — How users query and filter content
+
+## Mental Models (Indi Young)
+
+Align structure to how users think, not how the org is structured. Interview users about tasks, map their model, identify gaps, align IA to their model.
+
+## Miller's Law
+
+Users hold ~4 items in working memory. Limit primary nav to 4-7 items, chunk related content, use progressive disclosure, avoid menus deeper than 3 levels.
+
+## Card Sorting
+
+- **Open sort**: Users create/name groups — use when building IA from scratch (15+ participants)
+- **Closed sort**: Users sort into predefined categories — use to validate existing IA
+- Agreement rates > 60% indicate confident groupings; low agreement means relabel or restructure
+
+## Tree Testing
+
+Validate findability without visual design. Text-only tree + tasks ("Where would you find X?"). Success rate > 80% = strong IA. Directness > 70% = clear paths. 50+ participants.
+
+## Navigation Patterns
+
+- **Top bar**: 4-7 items (web); **Sidebar**: 8+ items or deep hierarchies; **Bottom tabs**: 3-5 core actions (mobile)
+- **Hamburger menu**: Last resort — hides everything, reduces discoverability
+- Current location always visible; labels are nouns; icon + label > icon alone
+- **Breadcrumbs**: Use when hierarchy is 3+ levels deep
+- **Search**: Autocomplete after 2+ chars, fuzzy matching, recent searches, scoped to current section
+
+## Sitemaps and User Flows
+
+- **Sitemaps**: Hierarchical tree of all pages, user-facing names, versioned
+- **User flows**: Flowcharts from user goal (not homepage), including error paths and entry points
+
+## Labeling
+
+- Use the user's language, not internal jargon
+- Be specific ("Order History" > "History") and consistent
+- Test labels with tree testing or first-click testing
+
+## Anti-Patterns
+
+- **Org-chart navigation**: Structuring IA to match departments
+- **Deep nesting**: Content 4+ levels deep
+- **Mystery meat navigation**: Icons without labels, hover-only reveals

package/templates/creative/ux-designer/.cursor/rules/interaction-design.mdc

@@ -0,0 +1,66 @@
+---
+description: Interaction Design
+alwaysApply: false
+---
+
+# Interaction Design
+
+Designing how users interact with interfaces — controls, feedback, transitions, and behavior.
+
+## Core Principle
+
+**Every interaction should feel inevitable.** The response should be exactly what users expected.
+
+## Don Norman's 6 Principles
+
+- **Visibility**: Can users see available actions? Primary actions visible, not hidden in menus
+- **Feedback**: System responds to every action — button state changes, loading spinners appear immediately
+- **Constraints**: Prevent errors (date picker prevents impossible dates)
+- **Mapping**: Controls relate naturally to effects (volume slider left-to-right)
+- **Consistency**: Same behavior everywhere ("Delete" always confirms)
+- **Affordance**: Elements suggest how to interact (buttons look clickable)
+
+## Fitts's Law
+
+Time to target ∝ distance / target size. Make primary targets large (44x44px touch, 24x24px cursor). Place frequent actions close to focus. Submit button directly below last form field.
+
+## Hick's Law
+
+Decision time increases with choices. Limit to 5-7 options, use smart defaults, progressive disclosure, recommend best option clearly.
+
+## Jakob's Law
+
+Users expect your site to work like others. Follow platform conventions; only break when testing proves measurably better and learning cost is low.
+
+## Forms
+
+- One column; labels above fields (not placeholders as labels)
+- Mark optional fields, not required; inline validation on blur
+- Smart defaults; autofocus first field; tab order follows visual order
+- Errors: inline next to field, plain language, preserve input, scroll to first error
+
+## Buttons and CTAs
+
+- Primary (one per section, filled) > Secondary (outlined) > Tertiary (text) > Destructive (red, requires confirmation)
+- Labels use verbs: "Save Changes", "Send Invite" — specific over generic
+
+## Interaction States
+
+Every interactive element defines: Default, Hover, Focus, Active/Pressed, Disabled (explain why), Loading, Error, Success, Empty.
+
+## Microinteractions (Saffer)
+
+Trigger → Rules → Feedback → Loops/Modes. Keep fast (< 300ms), skippable, gracefully degrading.
+
+## Animation and Motion
+
+- Purpose: feedback, relationships, attention, state change — never purely decorative
+- Duration: 100-300ms micro, 300-500ms macro; ease-out entrances, ease-in exits
+- Respect `prefers-reduced-motion` (mandatory)
+
+## Anti-Patterns
+
+- **Modal abuse**: Content that should be a page
+- **Hover-dependent UI**: Fails on touch devices
+- **Disabled without explanation**: Grayed-out with no tooltip
+- **Auto-advancing carousels**: Users can't read at carousel speed

package/templates/creative/ux-designer/.cursor/rules/overview.mdc

@@ -0,0 +1,61 @@
+---
+description: UX Designer
+alwaysApply: false
+---
+
+# UX Designer
+
+Principal-level UX design guidelines covering user research, interaction design, design systems, accessibility, and emotional design.
+
+## Scope
+
+- User research and discovery
+- Information architecture and navigation
+- Interaction design and patterns
+- Visual design and design systems
+- Accessibility and inclusive design
+- Emotional design and user delight
+- Design-to-development handoff and UX metrics
+
+## Core Philosophy
+
+**Frustration elimination is the north star.** Every design decision should reduce friction, confusion, and cognitive load.
+
+## Guiding Beliefs
+
+- **Simplicity over complexity** — The best interface is the one users don't notice
+- **Accessibility is non-negotiable** — Design for the margins; everyone benefits
+- **Evidence over opinion** — Research and data settle design debates
+- **Behavior over preference** — What users do matters more than what they say
+- **Consistency breeds trust** — Predictable patterns reduce cognitive overhead
+
+## Decision Framework
+
+1. Does it remove user frustration? (Highest priority)
+2. Does it meet accessibility requirements (WCAG 2.2 AA)?
+3. Does it follow established interaction patterns?
+4. Does it align with the design system?
+5. Does it add delight without adding complexity?
+
+When in doubt: choose the option that reduces decisions, works for the most constrained user, requires fewer taps/clicks, or prototype both and test.
+
+## Key Frameworks
+
+| Framework | Purpose |
+|-----------|---------|
+| Jobs-to-be-Done (Christensen) | Understanding user motivations |
+| Don Norman's 6 Principles | Interaction design fundamentals |
+| Gestalt Principles | Visual perception and grouping |
+| Atomic Design (Frost) | Scalable design systems |
+| WCAG 2.2 AA | Accessibility compliance |
+| Nielsen's 10 Heuristics | Usability evaluation |
+| Fitts's Law / Hick's Law | Interaction optimization |
+
+## Definition of Done
+
+- User problem validated through research
+- WCAG 2.2 AA audited; keyboard and screen reader experience specified
+- Responsive behavior defined for all breakpoints
+- All interaction states documented (default, hover, focus, active, disabled, error, loading, empty)
+- Edge cases addressed (empty states, errors, long content, truncation)
+- Handoff spec reviewed with engineering; usability tested with users

package/templates/creative/ux-designer/.cursor/rules/research.mdc

@@ -0,0 +1,61 @@
+---
+description: User Research
+alwaysApply: false
+---
+
+# User Research
+
+Evidence-based methods for understanding users, validating assumptions, and making informed design decisions.
+
+## Core Principle
+
+**Talk to users early, often, and honestly.** Research is a continuous practice, not a phase.
+
+## User Interviews
+
+- Recruit 5-8 participants per segment; prepare open-ended discussion guide
+- Ask about past behavior: "Tell me about the last time you..." not "Would you ever..."
+- Follow the energy — when they lean in, dig deeper; use silence as a tool
+- Synthesize within 24 hours; tag quotes by theme; share raw findings first
+
+## The Mom Test (Fitzpatrick)
+
+- Talk about their life, not your idea
+- Ask about specifics in the past, not generics about the future
+- Talk less, listen more
+- Bad: "Would you use an app that does X?" Good: "How do you currently handle X?"
+
+## Jobs-to-be-Done (Christensen)
+
+"When I [situation], I want to [motivation], so I can [expected outcome]." Users don't buy products — they hire them to do a job.
+
+## Empathy Mapping
+
+Quadrants: Says (quotes), Thinks (inferred), Does (observed actions), Feels (emotions). Use after interviews to align the team on user perspective.
+
+## Journey Mapping
+
+Map stages (Awareness → Consideration → Action → Retention) with rows: actions, touchpoints, thoughts, emotions, pain points, opportunities. Base on observed behavior, not ideal paths.
+
+## Continuous Discovery (Torres)
+
+- Talk to users weekly (minimum 1 interview/week)
+- Map opportunity space, not solution space
+- Use opportunity solution trees: outcome → opportunities → solutions → experiments
+- Separate discovery (what to build) from delivery (how to build)
+
+## Survey Design
+
+- Use surveys to measure, not discover (interviews first)
+- 5-10 questions max; avoid leading or double-barreled items
+- Minimum 30 for directional, 100+ for statistical significance
+
+## Research Ethics
+
+Informed consent before every session. Anonymize data. Participants can stop anytime. Compensate fairly. Never deceive. Store recordings securely; delete after analysis.
+
+## Anti-Patterns
+
+- **Confirmation bias**: Only talking to users who validate your hypothesis
+- **Proxy research**: Asking stakeholders what users want instead of asking users
+- **Research theater**: Conducting research with no intention to act on findings

package/templates/creative/ux-designer/.cursor/rules/visual-design.mdc

@@ -0,0 +1,68 @@
+---
+description: Visual Design
+alwaysApply: false
+---
+
+# Visual Design
+
+Principles and systems for visual communication, design systems, and consistent UI expression.
+
+## Core Principle
+
+**Visual design is communication, not decoration.** Every pixel serves a purpose: hierarchy, grouping, attention, or meaning.
+
+## Gestalt Principles
+
+- **Proximity**: Elements close together perceived as related — group related fields, separate with whitespace
+- **Similarity**: Consistent styling for same-type elements
+- **Continuity**: Align elements to create visual flow via grids
+- **Closure**: Progress bars, partially visible cards indicate more content
+- **Figure-Ground**: Modals dim background; selected items highlight
+- **Common Region**: Cards and bordered sections group content
+
+## Atomic Design (Frost)
+
+Atoms (button, input, icon) → Molecules (search bar) → Organisms (header) → Templates → Pages. Design smallest first; every component self-contained, reusable, documented.
+
+## Design Tokens
+
+Single source of truth for all design decisions:
+- **Color**: primary, secondary, neutral, error, warning, success, info
+- **Typography**: font families, sizes, weights, line heights
+- **Spacing**: base-8 scale (4, 8, 16, 24, 32, 48px)
+- **Border/Shadow/Motion**: radius, width, durations, easing
+
+Never use raw values — always reference tokens. Semantic tokens alias primitives. Support theming via token swap.
+
+## Typography
+
+- Max 2 font families; body minimum 16px
+- Line height: 1.4-1.6 body, 1.1-1.3 headings; line length 45-75 chars
+- Contrast: 4.5:1 body text, 3:1 large text (WCAG AA)
+
+## Color System
+
+- Never use color as sole indicator — add icons, text, patterns
+- Test with color blindness simulators
+- Dark mode is redesigned, not inverted; limit to 5-8 functional colors + neutrals
+
+## Spacing and Layout
+
+- Base-8 spacing scale; 12-column grid (web), 4-column (mobile)
+- Content max-width 1200-1440px; responsive breakpoints: 640, 768, 1024, 1280px
+- More whitespace = more perceived quality and readability
+
+## Responsive Design
+
+Mobile-first, scale up. Touch targets 44x44px minimum. No horizontal scrolling. Images fluid. Typography scales with viewport (clamp()). Test on real devices.
+
+## Iconography
+
+- Single icon set; icons accompanied by text labels (except universal: close, search, menu)
+- Minimum touch target 44x44px; aria-label for meaningful icons; aria-hidden for decorative
+
+## Anti-Patterns
+
+- **Snowflake components**: One-off designs outside the system
+- **Token bypass**: Hard-coding values instead of referencing tokens
+- **Font overload**: More than 2 families or 4+ weights

package/templates/creative/ux-designer/CLAUDE.md

@@ -0,0 +1,124 @@
+# UX Designer Development Guide
+
+Principal-level UX design guidelines covering user research, interaction design, design systems, accessibility, and emotional design.
+
+---
+
+## Overview
+
+This guide applies to:
+
+- User research and discovery
+- Information architecture and navigation
+- Interaction design and patterns
+- Visual design and design systems
+- Accessibility and inclusive design
+- Emotional design and user delight
+- Design-to-development handoff and UX metrics
+
+### Key Principles
+
+1. **Frustration Elimination** - Remove friction before adding delight
+2. **Simplicity Over Complexity** - The best interface is the one users don't notice
+3. **Accessibility is Non-Negotiable** - Design for the margins; everyone benefits
+4. **Evidence Over Opinion** - Research and data settle design debates
+5. **Consistency Breeds Trust** - Predictable patterns reduce cognitive overhead
+
+### Core Frameworks
+
+| Framework | Purpose |
+|-----------|---------|
+| Jobs-to-be-Done (Christensen) | Understanding user motivations |
+| Don Norman's 6 Principles | Interaction design fundamentals |
+| Gestalt Principles | Visual perception and grouping |
+| Atomic Design (Frost) | Scalable design systems |
+| WCAG 2.2 AA (POUR) | Accessibility compliance |
+| Nielsen's 10 Heuristics | Usability evaluation |
+| Norman's 3 Levels | Emotional design |
+| Fitts's Law / Hick's Law | Interaction optimization |
+
+---
+
+## User Research
+
+- **The Mom Test** (Fitzpatrick): Ask about past behavior, not hypothetical futures
+- **Continuous Discovery** (Torres): Talk to users weekly, map opportunity space
+- **Empathy Mapping**: Visualize what users say, think, do, and feel
+- **Journey Mapping**: Visualize end-to-end experience across touchpoints
+- **JTBD Framework**: "When I [situation], I want to [motivation], so I can [outcome]"
+
+---
+
+## Information Architecture
+
+- **Mental Models** (Indi Young): Align structure to user thinking, not org charts
+- **Card Sorting**: Open sort to discover, closed sort to validate
+- **Tree Testing**: Validate findability without visual design influence
+- **Miller's Law**: Limit primary navigation to 4-7 items
+- Labels use user language, not internal jargon
+
+---
+
+## Interaction Design
+
+- **Don Norman's Principles**: Visibility, feedback, constraints, mapping, consistency, affordance
+- **Fitts's Law**: Large targets, close to focus, minimize distance
+- **Hick's Law**: Fewer choices, smart defaults, progressive disclosure
+- **Jakob's Law**: Follow platform conventions; users expect consistency
+- All interactive elements specify: default, hover, focus, active, disabled, error, loading, empty states
+- Forms: one column, labels above fields, inline validation on blur
+
+---
+
+## Visual Design
+
+- **Gestalt Principles**: Proximity, similarity, continuity, closure, figure-ground, common region
+- **Atomic Design**: Atoms → molecules → organisms → templates → pages
+- **Design Tokens**: Single source of truth for colors, typography, spacing, motion
+- Base-8 spacing scale (4, 8, 16, 24, 32, 48px)
+- Maximum 2 font families; body text minimum 16px
+- Color system: primary, secondary, neutral, error, warning, success, info
+
+---
+
+## Accessibility (WCAG 2.2 AA)
+
+- **POUR**: Perceivable, Operable, Understandable, Robust
+- Keyboard navigation for all functionality; no keyboard traps
+- Screen reader tested (VoiceOver, NVDA, TalkBack)
+- 4.5:1 contrast for text, 3:1 for large text and UI components
+- ARIA used as supplement to semantic HTML, not replacement
+- Follow ARIA APG patterns for complex widgets
+- Cognitive accessibility: plain language, predictable patterns, undo support
+
+---
+
+## Emotional Design
+
+- **Norman's 3 Levels**: Visceral (looks), behavioral (works), reflective (means)
+- **Peak-End Rule** (Kahneman): Peak moments and endings define memory
+- Trust building: transparency, consistency, competence, honest error handling
+- Frustration reduction is higher priority than delight addition
+- Dark pattern avoidance: confirmshaming, hidden costs, trick questions, forced continuity
+
+---
+
+## Handoff and Metrics
+
+- **Nielsen's 10 Heuristics** for usability evaluation
+- Specs include all states, responsive behavior, accessibility notes, animation details
+- Design QA: review implementation against spec at all breakpoints
+- UX metrics: task success rate (>90%), time on task, error rate, SUS score (>68)
+- Usability testing: 5 users per round, think-aloud, task-based, weekly cadence
+
+---
+
+## Decision Framework
+
+When evaluating design choices:
+
+1. Does it remove user frustration? (Highest priority)
+2. Does it meet accessibility requirements (WCAG 2.2 AA)?
+3. Does it follow established interaction patterns?
+4. Does it align with the design system?
+5. Does it add delight without adding complexity?

package/templates/dogfood/project-overview.mdc

@@ -0,0 +1,12 @@
+# Project Overview
+
+Portfolio site for David Josef Mendez - Staff/Senior Software Engineer with SRE experience.
+
+## Critical Requirement
+
+**Only `me@davidmendez.dev` can access admin features. Period. No exceptions, no edge cases, no "maybe later" users.**
+
+This is a hard requirement that must be enforced at every level:
+- Server-side validation only
+- No client-side checks as security measures
+- Email must be EXACTLY `me@davidmendez.dev` (case-sensitive, exact match)