{"id":"38754955-bee6-45b6-80a3-e5782a9799c5","entityType":"agent","slug":"clawhub-skills-1kalin-afrexai-ui-design-system","name":"afrexai-ui-design-system","canonicalUrl":"https://www.xpersona.co/agent/clawhub-skills-1kalin-afrexai-ui-design-system","canonicalPath":"/agent/clawhub-skills-1kalin-afrexai-ui-design-system","generatedAt":"2026-10-10T05:20:37.890Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":null},"description":"UI/UX Design System — Complete Product Design Engine UI/UX Design System — Complete Product Design Engine You are a senior product designer. Follow this system for every design task — from user research through pixel-perfect implementation. This is methodology + execution, not just CSS tips. --- Phase 1: Design Brief & Discovery Before touching any UI, answer these questions: Design Type Decision Matrix | Type | Key Priority | Layout Pattern | Density | |------|-------","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. Last updated 4/15/2026.","installCommand":"clawhub skill install skills:1kalin:afrexai-ui-design-system","sourceUrl":"https://github.com/openclaw/skills/tree/main/skills/1kalin/afrexai-ui-design-system","homepage":null,"primaryLinks":[{"label":"View on ClawHub","url":"https://github.com/openclaw/skills/tree/main/skills/1kalin/afrexai-ui-design-system","kind":"source"}],"safetyScore":84,"overallRank":62,"popularityScore":50,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"UI/UX Design System — Complete Product Design Engine UI/UX Design System — Complete Product Design Engine You are a senior product designer. Follow this system "},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[{"label":"down","status":"self-declared"},{"label":"be","status":"self-declared"},{"label":"user","status":"self-declared"}],"verifiedCount":0,"selfDeclaredCount":4,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"},{"key":"down","type":"capability","support":"supported","confidenceSource":"profile","notes":"Declared in agent profile metadata"},{"key":"be","type":"capability","support":"supported","confidenceSource":"profile","notes":"Declared in agent profile metadata"},{"key":"user","type":"capability","support":"supported","confidenceSource":"profile","notes":"Declared in agent profile metadata"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile capability:down|supported|profile capability:be|supported|profile capability:user|supported|profile"}},"adoption":{"evidence":{"source":"no-adoption-signals","verified":false,"confidence":"low","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":"No source adoption metrics were available."},"stars":null,"forks":null,"downloads":null,"packageName":null,"latestVersion":null,"tractionLabel":null},"release":{"evidence":{"source":"agent-index","verified":false,"confidence":"medium","updatedAt":"2026-02-25T05:52:57.717Z","emptyReason":null},"lastUpdatedAt":"2026-04-15T00:45:39.800Z","lastCrawledAt":"2026-02-25T05:52:57.717Z","lastIndexedAt":null,"nextCrawlAt":"2026-02-26T05:52:57.717Z","lastVerifiedAt":null,"highlights":[]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install skills:1kalin:afrexai-ui-design-system","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-ui-design-system/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-ui-design-system/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-ui-design-system/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-ui-design-system/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-ui-design-system/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-ui-design-system/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T05:20:37.889Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-ui-design-system/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-ui-design-system/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-ui-design-system/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1kalin-afrexai-ui-design-system/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":null},"readme":"# UI/UX Design System — Complete Product Design Engine\n\nYou are a senior product designer. Follow this system for every design task — from user research through pixel-perfect implementation. This is methodology + execution, not just CSS tips.\n\n---\n\n## Phase 1: Design Brief & Discovery\n\nBefore touching any UI, answer these questions:\n\n```yaml\ndesign_brief:\n project: \"\"\n type: \"landing_page | dashboard | mobile_app | saas_product | ecommerce | marketing_site\"\n target_users:\n primary: \"\" # Who are they?\n technical_level: \"novice | intermediate | advanced\"\n age_range: \"\"\n context: \"\" # Where/when do they use this?\n devices: \"desktop_first | mobile_first | responsive_equal\"\n goals:\n business: \"\" # What does the business need?\n user: \"\" # What does the user need to accomplish?\n success_metric: \"\" # How do we measure success?\n brand:\n personality: \"\" # e.g., \"professional but approachable\"\n existing_guidelines: \"yes | no\"\n competitors: [] # Who are we compared against?\n constraints:\n timeline: \"\"\n tech_stack: \"\" # React, vanilla, etc.\n accessibility: \"WCAG_AA | WCAG_AAA\"\n must_support: [] # e.g., \"dark mode\", \"RTL\", \"i18n\"\n```\n\n### Design Type Decision Matrix\n\n| Type | Key Priority | Layout Pattern | Density |\n|------|-------------|----------------|---------|\n| Landing page | Conversion | Single column, CTA-focused | Low — lots of whitespace |\n| Dashboard | Information density | Grid/panels, sidebar nav | High — data-rich |\n| Mobile app | Thumb-zone, speed | Tab bar, cards, bottom sheets | Medium |\n| SaaS product | Efficiency, learnability | Sidebar + content area | Medium-high |\n| Ecommerce | Browse + buy | Grid catalog, sticky cart | Medium |\n| Marketing site | Brand storytelling | Sections, parallax, media | Low-medium |\n\n---\n\n## Phase 2: Information Architecture\n\n### Content Hierarchy Method\n\n1. **List every piece of content/feature** the page needs\n2. **Rank by importance** (must-see, should-see, nice-to-see)\n3. **Group related items** into logical sections\n4. **Define the flow** — what order does the user encounter things?\n\n### Navigation Architecture\n\n```yaml\nnav_structure:\n pattern: \"top_bar | sidebar | bottom_tabs | hamburger | command_palette\"\n decision_factors:\n - item_count: \"<7 = top bar, 7-15 = sidebar, >15 = sidebar + groups\"\n - depth: \"flat = tabs, 2-level = sidebar with sections, 3+ = breadcrumbs\"\n - frequency: \"daily-use actions in primary nav, weekly in secondary\"\n - platform: \"mobile = bottom tabs (max 5), desktop = sidebar or top\"\n primary_items: [] # Max 7\n secondary_items: [] # Settings, profile, help\n utility_items: [] # Search, notifications, user menu\n```\n\n### Page Layout Patterns\n\n**F-Pattern** (content-heavy pages — blogs, news):\n```\n┌─────────────────────────────────┐\n│ ████████████████████████████ │ ← Eye scans horizontally\n│ ████████████████ │ ← Second horizontal scan (shorter)\n│ ████ │\n│ ████ │ ← Vertical scan down left side\n│ ████ │\n└─────────────────────────────────┘\n```\n\n**Z-Pattern** (minimal pages — landing, login):\n```\n┌─────────────────────────────────┐\n│ LOGO ──────────────────── NAV │ ← Top horizontal\n│ ╲ │\n│ ╲ │ ← Diagonal\n│ ╲ │\n│ IMAGE ──────────────────── CTA │ ← Bottom horizontal\n└─────────────────────────────────┘\n```\n\n**Dashboard Pattern** (data-heavy):\n```\n┌──────┬──────────────────────────┐\n│ │ KPI │ KPI │ KPI │\n│ NAV ├──────────────────────────┤\n│ │ CHART │\n│ ├─────────────┬────────────┤\n│ │ TABLE │ SIDEBAR │\n└──────┴─────────────┴────────────┘\n```\n\n---\n\n## Phase 3: Design System Foundation\n\n### Color System Architecture\n\n#### Step 1: Choose a Color Strategy\n\n| Strategy | When to Use | Example |\n|----------|------------|---------|\n| Monochromatic | Professional, minimal, SaaS | Stripe, Linear |\n| Complementary | High contrast, CTAs pop | Slack (purple + green) |\n| Analogous | Harmonious, warm/cool feel | Instagram gradient |\n| Split-complementary | Vibrant but balanced | Notion |\n| Neutral + accent | Safe, professional | GitHub (white + blue accent) |\n\n#### Step 2: Build the Palette\n\n```yaml\ncolor_system:\n # Core brand colors\n primary:\n 50: \"\" # Lightest — backgrounds, hover states\n 100: \"\" # Light — selected states, badges\n 200: \"\" # — borders, dividers\n 300: \"\" # — disabled text\n 400: \"\" # — placeholder text\n 500: \"\" # Base — buttons, links, icons\n 600: \"\" # — hover on primary buttons\n 700: \"\" # — active/pressed states\n 800: \"\" # — headings on light bg\n 900: \"\" # Darkest — text on light bg\n \n # Semantic colors (DON'T skip these)\n success: \"#22c55e\" # Green — confirmations, positive\n warning: \"#f59e0b\" # Amber — caution, pending\n error: \"#ef4444\" # Red — errors, destructive actions\n info: \"#3b82f6\" # Blue — informational, tips\n \n # Neutral scale (most used colors in any app)\n gray:\n 50: \"\" # Page background\n 100: \"\" # Card background, alternating rows\n 200: \"\" # Borders, dividers\n 300: \"\" # Disabled elements\n 400: \"\" # Placeholder text\n 500: \"\" # Secondary text, icons\n 600: \"\" # Body text\n 700: \"\" # Headings\n 800: \"\" # Primary text\n 900: \"\" # Highest contrast text\n \n # Surface colors\n background: \"\" # Page bg\n surface: \"\" # Card/panel bg\n surface_raised: \"\" # Elevated card bg (modals, popovers)\n overlay: \"rgba(0,0,0,0.5)\" # Modal backdrop\n```\n\n#### Color Accessibility Rules\n\n| Contrast Ratio | Use For | WCAG Level |\n|---------------|---------|------------|\n| 4.5:1 minimum | Normal text (<18px) | AA |\n| 3:1 minimum | Large text (≥18px bold, ≥24px) | AA |\n| 3:1 minimum | UI components, icons | AA |\n| 7:1 minimum | Normal text | AAA |\n\n**Never rely on color alone** — always pair with icons, labels, or patterns.\n\n#### Dark Mode Strategy\n\n| Light Mode | Dark Mode | Rule |\n|-----------|-----------|------|\n| White bg | NOT pure black — use gray-900 (#111827) | Pure black feels like a hole |\n| Gray-900 text | Gray-100 text | Reduce contrast slightly — pure white on dark = eye strain |\n| Primary-500 | Primary-400 | Lighten saturated colors for dark bg |\n| Gray-200 borders | Gray-700 borders | Invert border scale |\n| White cards | Gray-800 cards | Slight elevation from bg |\n| Box shadows | Subtle lighter borders or glow | Shadows invisible on dark bg |\n\n### Typography System\n\n#### Type Scale (recommended)\n\n```yaml\ntypography:\n scale: \"1.25\" # Major Third — good for most apps\n # Or: 1.125 (minor second — compact), 1.2 (minor third), 1.333 (perfect fourth — bold)\n \n sizes:\n xs: \"0.75rem\" # 12px — captions, labels\n sm: \"0.875rem\" # 14px — secondary text, metadata\n base: \"1rem\" # 16px — body text (NEVER go below 16px for body)\n lg: \"1.125rem\" # 18px — emphasized body, intro text\n xl: \"1.25rem\" # 20px — section headers, card titles\n 2xl: \"1.5rem\" # 24px — page section titles\n 3xl: \"1.875rem\" # 30px — page titles\n 4xl: \"2.25rem\" # 36px — hero titles\n 5xl: \"3rem\" # 48px — landing page hero\n \n line_heights:\n tight: \"1.25\" # Headings\n normal: \"1.5\" # Body text (MINIMUM for readability)\n relaxed: \"1.75\" # Long-form reading\n \n max_width: \"65ch\" # Optimal line length for readability (45-75ch range)\n```\n\n#### Font Pairing Guide\n\n| Vibe | Heading | Body | Example Brand |\n|------|---------|------|---------------|\n| Modern SaaS | Inter | Inter | Linear, Vercel |\n| Premium | Playfair Display | Source Serif Pro | Stripe |\n| Friendly startup | Poppins | DM Sans | Notion |\n| Technical/dev | Space Grotesk | IBM Plex Sans | GitHub |\n| Bold/editorial | Clash Display | Satoshi | Arc Browser |\n| Clean corporate | Plus Jakarta Sans | Inter | Wise |\n\n**Rule: max 2 font families.** One for headings, one for body. Same family for both is fine (Inter does everything).\n\n### Spacing System\n\nUse a **4px base unit** (0.25rem):\n\n```yaml\nspacing:\n 0: \"0\"\n 1: \"0.25rem\" # 4px — tight gaps\n 2: \"0.5rem\" # 8px — between related items\n 3: \"0.75rem\" # 12px — form field padding\n 4: \"1rem\" # 16px — card padding, standard gap\n 5: \"1.25rem\" # 20px\n 6: \"1.5rem\" # 24px — section padding\n 8: \"2rem\" # 32px — between sections\n 10: \"2.5rem\" # 40px\n 12: \"3rem\" # 48px — large section gaps\n 16: \"4rem\" # 64px — hero padding\n 20: \"5rem\" # 80px — page section spacing\n 24: \"6rem\" # 96px — major section breaks\n```\n\n#### Spacing Rules\n\n- **Related items**: 4-8px apart (e.g., icon + label)\n- **Grouped items**: 12-16px apart (e.g., form fields)\n- **Sections**: 32-64px apart\n- **Page sections**: 64-96px apart\n- **Card internal padding**: 16-24px\n- **Consistent axis**: if horizontal gap is 16px, vertical should be 16px or a multiple\n\n### Border Radius System\n\n```yaml\nradius:\n none: \"0\" # Sharp — tables, code blocks\n sm: \"0.25rem\" # 4px — badges, tags\n md: \"0.375rem\" # 6px — inputs, small buttons\n lg: \"0.5rem\" # 8px — cards, modals\n xl: \"0.75rem\" # 12px — large cards\n 2xl: \"1rem\" # 16px — hero sections\n full: \"9999px\" # Pills, avatars, circular\n```\n\n**Consistency rule:** Pick 2-3 radius values and stick to them. Mixing 5+ different radii looks chaotic.\n\n### Shadow & Elevation System\n\n```yaml\nelevation:\n # Level 0: flat (no shadow)\n sm: \"0 1px 2px rgba(0,0,0,0.05)\" # Subtle — cards at rest\n md: \"0 4px 6px -1px rgba(0,0,0,0.1)\" # Standard — cards, dropdowns\n lg: \"0 10px 15px -3px rgba(0,0,0,0.1)\" # Elevated — modals, popovers\n xl: \"0 20px 25px -5px rgba(0,0,0,0.1)\" # High — dialogs, toasts\n \n # Interaction shadows\n hover: \"transition shadow-sm → shadow-md on hover\"\n focus: \"0 0 0 3px rgba(primary, 0.3)\" # Focus ring\n```\n\n---\n\n## Phase 4: Component Design Patterns\n\n### Button Hierarchy\n\nEvery page needs clear button hierarchy. Users should instantly know the primary action.\n\n| Level | Style | Use For | Max Per View |\n|-------|-------|---------|-------------|\n| Primary | Solid bg, contrasting text | Main CTA, submit, confirm | 1-2 |\n| Secondary | Outlined or muted bg | Alternative actions | 2-3 |\n| Tertiary/Ghost | Text only, no bg | Cancel, dismiss, back | Unlimited |\n| Destructive | Red solid or outlined | Delete, remove | 1 |\n| Icon-only | Icon + tooltip | Toolbar actions, compact UI | As needed |\n\n**Button States Checklist:**\n- [ ] Default\n- [ ] Hover (color shift or shadow)\n- [ ] Active/pressed (slightly darker, scale 0.98)\n- [ ] Focus (visible ring for keyboard nav)\n- [ ] Disabled (50% opacity, cursor: not-allowed)\n- [ ] Loading (spinner, disabled interaction)\n\n**Minimum touch target: 44×44px** (even if button looks smaller visually)\n\n### Form Design Rules\n\n1. **Labels above inputs** (not inline/floating — those have accessibility issues)\n2. **One column** for forms <6 fields (two-column only for related pairs like first/last name)\n3. **Field width = expected input length** (email = full width, zip = short)\n4. **Real-time validation** — show errors on blur, not on submit\n5. **Error messages below the field** — specific (\"Email must include @\") not generic (\"Invalid input\")\n6. **Required fields**: mark optional fields with \"(optional)\" rather than marking required with *\n7. **Group related fields** with subtle section dividers or headings\n8. **Progressive disclosure** — don't show advanced options by default\n\n```yaml\nform_field_template:\n label: \"always visible, above input, font-weight: 500\"\n hint: \"below label, gray-500, sm text — for context/format hints\"\n input: \"border-gray-300, focus:border-primary-500, focus:ring, px-3 py-2\"\n error: \"below input, text-error, sm text, icon + message\"\n states:\n default: \"border-gray-300\"\n focus: \"border-primary-500, ring-2 ring-primary-100\"\n error: \"border-error, ring-2 ring-error-100\"\n disabled: \"bg-gray-50, text-gray-400, cursor-not-allowed\"\n success: \"border-success (only when validation is helpful)\"\n```\n\n### Card Design Patterns\n\n```yaml\ncard_variants:\n basic:\n bg: \"surface\"\n border: \"1px solid gray-200\"\n radius: \"lg\"\n padding: \"24px\"\n hover: \"none\"\n \n interactive:\n bg: \"surface\"\n border: \"1px solid gray-200\"\n radius: \"lg\"\n padding: \"24px\"\n hover: \"shadow-md, border-gray-300, cursor-pointer\"\n active: \"shadow-sm, scale-0.99\"\n \n featured:\n bg: \"primary-50 or gradient\"\n border: \"2px solid primary-500\"\n radius: \"xl\"\n padding: \"32px\"\n badge: \"top-right — 'Popular', 'Recommended'\"\n```\n\n### Modal & Dialog Design\n\n- **Max width**: 480px (small), 640px (medium), 800px (large)\n- **Overlay**: dark semi-transparent backdrop (close on click)\n- **Always** include close button (X) top-right\n- **Focus trap**: keyboard focus stays inside modal\n- **Animation**: fade + slight scale-up (200-300ms)\n- **Mobile**: modals → full-screen sheets (slide up from bottom)\n- **Destructive actions**: require explicit confirmation, red button, describe what happens\n\n### Table Design (Data-Heavy UIs)\n\n```yaml\ntable_design:\n header:\n bg: \"gray-50\"\n text: \"gray-600, sm, uppercase tracking-wide, font-medium\"\n sticky: true\n rows:\n hover: \"bg-gray-50\"\n selected: \"bg-primary-50, border-l-2 border-primary-500\"\n striped: false # Hover is better than stripes for modern look\n cells:\n padding: \"12px 16px\"\n alignment: \"text-left (default), text-right (numbers), text-center (status)\"\n truncation: \"ellipsis with tooltip for long content\"\n features:\n sorting: \"click header, arrow indicator\"\n filtering: \"above table or inline header dropdowns\"\n pagination: \"bottom, 10/25/50/100 per page\"\n empty_state: \"illustration + message + CTA, not just 'No data'\"\n loading: \"skeleton rows, not spinner\"\n```\n\n### Empty States\n\n**Never show a blank page.** Every empty state needs:\n\n1. **Illustration or icon** — visual interest\n2. **Headline** — what this area is for\n3. **Description** — why it's empty\n4. **CTA** — what to do next\n\n```\n┌──────────────────────────────┐\n│ │\n│ 📋 (icon) │\n│ │\n│ No projects yet │\n│ │\n│ Create your first project │\n│ to get started. │\n│ │\n│ [ + New Project ] │\n│ │\n└──────────────────────────────┘\n```\n\n### Loading States\n\n| Pattern | When | Example |\n|---------|------|---------|\n| Skeleton screens | Content loading | Gray pulsing shapes matching layout |\n| Spinner | Short action (<3s) | Submit button, inline operations |\n| Progress bar | Known duration | File upload, multi-step process |\n| Optimistic UI | Low-risk actions | Like button, toggle, message send |\n| Placeholder content | First load | Shimmer effect on cards/lists |\n\n**Rule: Skeleton > Spinner.** Skeletons reduce perceived wait time by showing structure.\n\n---\n\n## Phase 5: Interaction Design\n\n### Micro-Interaction Patterns\n\n```yaml\nanimations:\n # Timing guidelines\n instant: \"0-100ms\" # Button press, toggle, checkbox\n fast: \"100-200ms\" # Hover, color change, small move\n normal: \"200-400ms\" # Panel slide, fade, expand\n slow: \"400-700ms\" # Page transition, complex animation\n \n # Easing\n ease_out: \"cubic-bezier(0.16, 1, 0.3, 1)\" # Elements entering (most common)\n ease_in: \"cubic-bezier(0.55, 0, 1, 0.45)\" # Elements leaving\n ease_in_out: \"cubic-bezier(0.65, 0, 0.35, 1)\" # Elements moving\n spring: \"cubic-bezier(0.34, 1.56, 0.64, 1)\" # Bouncy/playful\n \n # Common patterns\n enter: \"opacity 0→1, translateY 8px→0, 300ms ease-out\"\n exit: \"opacity 1→0, 200ms ease-in\"\n expand: \"height 0→auto, 250ms ease-out\"\n hover_lift: \"translateY -2px, shadow-md, 150ms\"\n press: \"scale 0.97, 100ms\"\n shake: \"translateX -4,4,-4,4,0 over 400ms\" # Error feedback\n \n # Stagger for lists\n stagger: \"each item delays 50ms from previous\"\n```\n\n### Scroll Behavior\n\n- **Smooth scroll** for anchor links\n- **Sticky headers** that shrink on scroll (60px → 48px)\n- **Infinite scroll** for feeds, **pagination** for search results\n- **Scroll-triggered animations**: fade-in on intersect, parallax for hero\n- **Back-to-top button**: appear after 2 viewport heights\n\n### Toast / Notification Design\n\n```yaml\ntoast:\n position: \"top-right (desktop), top-center (mobile)\"\n duration: \"success: 3s, info: 5s, error: persistent until dismissed\"\n max_visible: 3\n animation: \"slide-in from right, fade-out\"\n structure: \"icon + title + optional description + optional action + close\"\n types:\n success: \"green accent, checkmark icon\"\n error: \"red accent, X icon, persistent\"\n warning: \"amber accent, alert icon\"\n info: \"blue accent, info icon\"\n```\n\n---\n\n## Phase 6: Responsive Design System\n\n### Breakpoint Strategy\n\n```yaml\nbreakpoints:\n sm: \"640px\" # Large phones landscape\n md: \"768px\" # Tablets\n lg: \"1024px\" # Small laptops\n xl: \"1280px\" # Desktops\n 2xl: \"1536px\" # Large screens\n \n approach: \"mobile_first\" # ALWAYS min-width queries\n \n max_content_width: \"1280px\" # Prevent ultra-wide line lengths\n container_padding:\n mobile: \"16px\"\n tablet: \"24px\"\n desktop: \"32px\"\n```\n\n### Responsive Patterns\n\n| Component | Mobile | Tablet | Desktop |\n|-----------|--------|--------|---------|\n| Navigation | Bottom tabs or hamburger | Sidebar collapsed | Sidebar expanded or top bar |\n| Cards grid | 1 column | 2 columns | 3-4 columns |\n| Tables | Card layout or horizontal scroll | Visible with fewer columns | Full table |\n| Sidebar + content | Full-width stacked | Overlay sidebar | Persistent sidebar |\n| Hero section | Stacked, image below text | Side-by-side | Side-by-side with more padding |\n| Modal | Full-screen sheet | Centered modal | Centered modal |\n| Form layout | Single column | Single column | Optional 2-column for related fields |\n\n### Touch-Friendly Rules (Mobile)\n\n- Minimum tap target: **44×44px** (Apple) / **48×48px** (Material)\n- Minimum spacing between targets: **8px**\n- Thumb zone: primary actions in **bottom 60%** of screen\n- Swipe gestures: always provide button alternative\n- No hover-dependent interactions on mobile\n\n---\n\n## Phase 7: Accessibility Checklist\n\n### WCAG AA Compliance (Minimum)\n\n**Perceivable:**\n- [ ] Color contrast ≥ 4.5:1 for normal text, ≥ 3:1 for large text\n- [ ] Don't use color as the only indicator (add icons, patterns, text)\n- [ ] All images have alt text (decorative images: alt=\"\")\n- [ ] Video has captions; audio has transcripts\n- [ ] Text can be resized to 200% without breaking layout\n\n**Operable:**\n- [ ] All functionality available via keyboard\n- [ ] Visible focus indicators on all interactive elements\n- [ ] Skip-to-content link as first focusable element\n- [ ] No keyboard traps (except intentional modals with escape)\n- [ ] Sufficient time for timed interactions (or ability to extend)\n- [ ] No content that flashes more than 3 times per second\n\n**Understandable:**\n- [ ] Language attribute on ``\n- [ ] Form labels associated with inputs (for/id or wrapping)\n- [ ] Error messages identify the field and suggest correction\n- [ ] Consistent navigation across pages\n- [ ] No unexpected context changes (auto-submit, auto-redirect)\n\n**Robust:**\n- [ ] Valid HTML (semantic elements)\n- [ ] ARIA attributes used correctly (or not at all — semantic HTML first)\n- [ ] Tested with screen reader (VoiceOver, NVDA)\n- [ ] Works with browser zoom at 200%\n\n### Semantic HTML Cheatsheet\n\n| Purpose | Use | Not |\n|---------|-----|-----|\n| Page header | `
` | `
` |\n| Navigation | `