asciikit-mcp 2.0.0

package/dist/patterns/bundle.json

@@ -0,0 +1,104 @@
+{
+  "patterns": {
+    "authentication/account-recovery": "# Account Recovery\n\n**ID:** `authentication/account-recovery`\n**Category:** authentication\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to regain access to their accounts when they've lost credentials, using security questions, email verification, or SMS codes.\n\n**Use this pattern when user mentions:**\n- \"account recovery\", \"can't access account\", \"locked out\"\n- \"security questions\", \"forgot email\", \"lost access\"\n- \"verify identity\", \"recover account\", \"account rescue\"\n- \"backup codes\", \"emergency access\"\n- \"users locked out of accounts\"\n\n**Common contexts:**\n- Password reset flows where email is inaccessible\n- Account locked due to security concerns\n- Users who lost access to email or phone\n- Compromised account recovery\n- Apps with high-value accounts (gaming, financial)\n- Identity verification before account changes\n\n**UX Tradeoffs:**\n- **Pro:** Provides emergency access when standard recovery fails\n- **Pro:** Security questions work without external dependencies\n- **Pro:** Multiple recovery methods increase success rate\n- **Con:** Security questions can be weak (guessable answers)\n- **Con:** Additional setup burden during registration\n\n**Pairs well with:**\n- `authentication/password-reset` - Standard recovery attempt first\n- `authentication/login` - Return destination after recovery\n- `authentication/signup-screen` - Set up recovery during registration\n- `authentication/two-factor-auth` - Additional verification layer\n- `forms/contact-support` - Escalation when recovery fails\n- `settings/security-settings` - Update recovery options\n\n**Variants available:**\n- **Minimal:** Email verification only (use for \"simple recovery\" or \"low-security apps\")\n- **Standard:** Security questions or SMS codes (use for most apps)\n- **Comprehensive:** Multiple methods with backup codes (use for \"high-security apps\" or \"valuable accounts\")\n\n**Related patterns:**\n- Instead of this, consider `authentication/password-reset` if user has email access\n- Instead of this, consider `forms/contact-support` if automated recovery insufficient\n- Instead of this, skip recovery if accounts aren't critical (guest mode available)\n\n---\n\n## Description\n\nMulti-step account recovery system using security questions, email verification, or SMS codes to restore account access. Provides fallback authentication when users lose primary credentials. Balances security with accessibility for legitimate account owners.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Account Recovery               │\n├────────────────────────────────────┤\n│                                    │\n│  Verify Your Identity              │\n│                                    │\n│  Please confirm your email to      │\n│  recover access to your account    │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [@] Email Address            │  │\n│  │ j***n@example.com            │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [Send Verification Code]          │\n│                                    │\n│  We'll send a 6-digit code to      │\n│  this email address                │\n│                                    │\n│  [Try Another Method]              │\n│                                    │\n│  Need help? [Contact Support]      │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Account Recovery               │\n├────────────────────────────────────┤\n│                                    │\n│  Answer Security Questions         │\n│                                    │\n│  Question 1 of 3                   │\n│  ┌──────────────────────────────┐  │\n│  │ What city were you born in?  │  │\n│  │                              │  │\n│  │ [Your answer_____________]   │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Question 2 of 3                   │\n│  ┌──────────────────────────────┐  │\n│  │ Your first pet's name?       │  │\n│  │                              │  │\n│  │ [Your answer_____________]   │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Question 3 of 3                   │\n│  ┌──────────────────────────────┐  │\n│  │ Mother's maiden name?        │  │\n│  │                              │  │\n│  │ [Your answer_____________]   │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [Verify Answers]                  │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Recover Account                │\n├────────────────────────────────────┤\n│                                    │\n│  Choose Recovery Method            │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [@] Email Verification       │  │\n│  │ Send code to j***@email.com  │  │\n│  │                      [Send]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [#] SMS Verification         │  │\n│  │ Send code to (***) ***-1234  │  │\n│  │                      [Send]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [?] Security Questions       │  │\n│  │ Answer 3 personal questions  │  │\n│  │                    [Answer]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [*] Backup Code              │  │\n│  │ Use recovery code from setup │  │\n│  │                     [Enter]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  None of these work?               │\n│  [Contact Support]                 │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\naccount-recovery, security-questions, authentication, verification, emergency-access, locked-account, identity-verification, backup-codes\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Users need a way to recover their account if they forget both password and lose email access\"\n\n**AI selects this pattern because:**\n- User mentioned \"recover account\" (keyword match)\n- Scenario covers lost email AND password (needs alternative method)\n- Security questions provide email-independent recovery\n- High-value account context (gaming, financial)\n\n**AI generates:**\nStandard variant with security questions as primary method, plus contact support escalation\n\n**AI explains tradeoff:**\n- \"Security questions provide recovery without email access. More vulnerable to social engineering than email verification, but necessary when email is unavailable. Required 3 correct answers balances security with usability. Contact support available as final fallback.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Recovery methods** - Email, SMS, security questions, backup codes, authenticator app\n2. **Verification steps** - Number of questions, code length, retry limits\n3. **Method priority** - Order recovery options by security/convenience\n4. **Fallback paths** - Human support, ID verification, waiting periods\n\n**App-specific adaptations:**\n- **Banking/finance:** Strict verification (ID upload, in-branch visit), no security questions\n- **Gaming accounts:** Backup codes, purchase history verification, original email\n- **Social media:** Trusted contacts, photo recognition, account activity timeline\n- **Email providers:** SMS, alternate email, account creation details\n- **Enterprise:** IT help desk, manager approval, device verification\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Escalation from failed password reset\n- Alternative to standard login when locked out\n- Pre-step before critical account changes\n\n**What comes before:**\n- `authentication/password-reset` - User tried reset but email unavailable\n- `authentication/login` - Failed login with \"Can't access account?\" link\n- Account locked notification\n\n**What comes after:**\n- `authentication/password-reset` - Create new password after identity verified\n- `authentication/login` - Log in with newly reset credentials\n- `settings/security-settings` - Update recovery options\n- `forms/contact-support` - If automated recovery fails\n\n**Complete flow example:**\n`authentication/login` → Forgot password → `authentication/password-reset` → Email inaccessible → **Account Recovery** → Verify identity → Create new password → `authentication/login`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App accounts are low-value (easy to create new one)\n- Guest mode provides full functionality\n- Standard password reset sufficient for 99% of cases\n- App can't securely verify user identity\n\n**Use instead:**\n- `authentication/password-reset` - For standard \"forgot password\" flows\n- `forms/contact-support` - For manual account recovery only\n- Allow new account creation - If data isn't valuable\n- No recovery - For throwaway/temporary accounts\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Users forget security question answers over time\n- Too many verification steps increase abandonment\n- Delayed recovery (24-hour holds) frustrate users\n- Lack of clear next steps when all methods fail\n\n**Conversion optimization:**\n- Show all recovery options upfront (reduce decision fatigue)\n- Provide hints for security questions during setup\n- Allow users to test recovery process without locking account\n- Clear communication of timing (instant vs. 24-hour wait)\n- Progress indicators for multi-step verification\n- Save partial progress (don't make users restart)\n\n**Accessibility notes:**\n- Security questions must support screen readers\n- Provide alternatives to SMS for hearing-impaired users\n- Large tap targets for method selection (44x44pt min)\n- Clear error messages explaining why verification failed\n- Support keyboard navigation through all steps\n- Time limits should be generous with extension options\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "authentication/biometric-auth": "# Biometric Authentication\n\n**ID:** `authentication/biometric-auth`\n**Category:** authentication\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables quick, secure re-authentication using device biometrics (Face ID, Touch ID, fingerprint) for returning users who have already logged in.\n\n**Use this pattern when user mentions:**\n- \"biometric\", \"Face ID\", \"Touch ID\", \"fingerprint\"\n- \"quick login\", \"fast authentication\", \"secure unlock\"\n- \"facial recognition\", \"biometric security\"\n- \"convenient login\", \"passwordless\", \"seamless auth\"\n- \"returning users\", \"quick access\"\n\n**Common contexts:**\n- Mobile apps requiring frequent re-authentication\n- Banking and finance apps (secure but convenient)\n- Health apps with sensitive data\n- Productivity apps with device-stored credentials\n- Apps where users access multiple times per day\n- Password manager re-authentication\n\n**UX Tradeoffs:**\n- **Pro:** Fastest authentication method (1-2 seconds)\n- **Pro:** No password to remember or type\n- **Pro:** High security with convenience\n- **Con:** Requires device biometric hardware (not all devices)\n- **Con:** May fail in certain conditions (wet fingers, poor lighting)\n\n**Pairs well with:**\n- `authentication/login` - Initial login, then biometric for re-auth\n- `authentication/two-factor-auth` - Biometric as second factor\n- `settings/privacy-settings` - Enable/disable biometric option\n- `authentication/password-reset` - Fallback if biometric unavailable\n- `forms/pin-entry` - Alternative quick unlock method\n\n**Variants available:**\n- **Minimal:** Single biometric prompt only (use for \"quick re-auth\" or \"simple unlock\")\n- **Standard:** Biometric with PIN/password fallback (use for most apps)\n- **Comprehensive:** Multiple biometric options, help text, security info (use for \"first-time biometric setup\" or \"banking apps\")\n\n**Related patterns:**\n- Instead of this, consider `authentication/login` if first-time authentication\n- Instead of this, consider `forms/pin-entry` if biometric hardware unavailable\n- Instead of this, skip re-auth entirely if app data isn't sensitive\n\n---\n\n## Description\n\nQuick secure authentication using device biometrics (Face ID, Touch ID, fingerprint scanning). Provides instant access for returning users while maintaining high security. Includes fallback options for when biometric authentication fails or is unavailable.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│          Welcome Back              │\n│                                    │\n│                                    │\n│         ┌────────────────┐         │\n│         │                │         │\n│         │   [Face Icon]  │         │\n│         │                │         │\n│         └────────────────┘         │\n│                                    │\n│       Face ID Required             │\n│                                    │\n│   Look at your device to unlock    │\n│                                    │\n│                                    │\n│   [────── Authenticate ──────]     │\n│                                    │\n│   [Use PIN Instead]                │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│          Unlock App                │\n│                                    │\n│         ┌────────────────┐         │\n│         │                │         │\n│         │  [Fingerprint] │         │\n│         │                │         │\n│         └────────────────┘         │\n│                                    │\n│       Touch ID Required            │\n│                                    │\n│   Place your finger on the         │\n│   Home button to unlock            │\n│                                    │\n│   [────── Authenticate ──────]     │\n│                                    │\n│   Having trouble?                  │\n│   [Enter Password] [Use PIN]       │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [X] Biometric Authentication       │\n├────────────────────────────────────┤\n│                                    │\n│  Choose Authentication Method      │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │  [Face Icon]  Face ID        │  │\n│  │  Fastest and most secure     │  │\n│  │                       [Use]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │  [Finger]  Touch ID          │  │\n│  │  Quick and reliable          │  │\n│  │                       [Use]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │  [#]  Enter PIN              │  │\n│  │  4-digit backup code         │  │\n│  │                       [Use]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  (i) Your biometric data never     │\n│  leaves your device                │\n│                                    │\n│  [Enter Password Instead]          │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nauthentication, biometric, face-id, touch-id, fingerprint, security, passwordless, quick-auth, mobile, device-auth\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I want users to unlock the app quickly with Face ID after they've logged in once\"\n\n**AI selects this pattern because:**\n- User mentioned \"Face ID\" (direct keyword match)\n- Context is re-authentication (after initial login)\n- Mobile app scenario (biometric hardware available)\n- Need for quick, secure access\n\n**AI generates:**\nStandard variant with Face ID prompt, visual icon, instruction text, and PIN fallback option\n\n**AI explains tradeoff:**\n- \"Face ID provides instant access (1-2 seconds) without typing. More secure than PIN but requires compatible device. PIN fallback ensures access if Face ID fails. Best for apps users access frequently.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Biometric type** - Face ID (iPhone X+), Touch ID (older iPhone/iPad), Android fingerprint\n2. **Fallback options** - PIN, password, pattern, security questions\n3. **Help text** - Instructions vary by device/platform\n4. **Failure handling** - Retry limits, automatic fallback after failures\n\n**App-specific adaptations:**\n- **Banking apps:** Strict retry limits (3 attempts), mandatory password fallback\n- **Health apps:** Explain why biometric required (HIPAA compliance)\n- **Password managers:** Biometric with master password fallback only\n- **Social apps:** Optional biometric (can skip), remember device option\n- **Productivity:** Quick biometric for convenience, easy disable in settings\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Re-authentication screen for returning users\n- App unlock after backgrounding\n- Sensitive action confirmation (payments, data access)\n\n**What comes before:**\n- App launch (for returning users)\n- App coming to foreground after background\n- Sensitive feature access attempt\n- `authentication/login` - Initial setup of biometric\n\n**What comes after:**\n- `navigation/home-screen` - Successful authentication\n- `forms/pin-entry` - If user chooses PIN fallback\n- `authentication/login` - If user chooses password fallback\n- Feature screen (if confirming sensitive action)\n\n**Complete flow example:**\nApp launch (returning user) → **Biometric Auth** → `navigation/home-screen`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- First-time user authentication (use full login)\n- Device doesn't support biometrics\n- App data is not sensitive (no auth needed)\n- User has disabled biometric in settings\n- Web application (biometric limited browser support)\n\n**Use instead:**\n- `authentication/login` - For first-time authentication\n- `forms/pin-entry` - For devices without biometric hardware\n- Direct access - For non-sensitive apps\n- `authentication/two-factor-auth` - If biometric is second factor, not primary\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Biometric fails in poor conditions (wet hands, bright sun for face)\n- User frustration if no clear fallback visible\n- First-time setup confusion (when/why to enable)\n- Privacy concerns about biometric data storage\n\n**Conversion optimization:**\n- Show biometric as optional enhancement, not requirement\n- Make fallback option immediately visible\n- Explain biometric data stays on device\n- Allow easy disable in settings\n- Auto-fallback after 2-3 failed attempts\n- Clear visual feedback during scanning\n\n**Accessibility notes:**\n- Provide non-biometric alternatives (not all users can use)\n- Clear instruction text for screen readers\n- Large tap targets for fallback buttons (44x44pt min)\n- Support voice commands for hands-free operation\n- Consider users with physical disabilities (tremors, missing fingers)\n- Allow authentication method preference in settings\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "authentication/login": "# Login Screen\n\n**ID:** `authentication/login`\n**Category:** authentication\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to securely access their accounts using email/password credentials with optional social login and biometric authentication methods.\n\n**Use this pattern when user mentions:**\n- \"login\", \"sign in\", \"authentication\"\n- \"user accounts\", \"secure access\", \"credentials\"\n- \"email password\", \"login form\", \"auth screen\"\n- \"users need to access their accounts\"\n- \"app requires user authentication\"\n- \"secure login\", \"member access\"\n\n**Common contexts:**\n- Apps with personalized user accounts\n- Apps requiring secure data access\n- Social or community platforms\n- E-commerce with order history\n- SaaS or productivity apps\n- Any app with user-specific content\n\n**UX Tradeoffs:**\n- **Pro:** Familiar pattern with high user recognition\n- **Pro:** Supports multiple authentication methods (email, social, biometric)\n- **Pro:** Secure access control for sensitive data\n- **Con:** Adds friction for first-time users (must create account)\n- **Con:** Password fatigue (users may forget credentials)\n\n**Pairs well with:**\n- `authentication/signup-screen` - \"Don't have account?\" link\n- `authentication/password-reset` - \"Forgot password?\" link\n- `authentication/two-factor-auth` - Additional security layer after login\n- `authentication/biometric-auth` - Quick re-authentication option\n- `navigation/home-screen` - Destination after successful login\n- `onboarding/welcome` - First-time user experience after signup\n\n**Variants available:**\n- **Minimal:** Email and password only (use for \"simple login\" or \"basic auth\")\n- **Standard:** Email, password, social login options (use for most apps)\n- **Comprehensive:** All methods plus biometric, remember me, SSO (use for \"enterprise apps\" or \"maximum flexibility\")\n\n**Related patterns:**\n- Instead of this, consider `authentication/biometric-auth` if returning users on mobile\n- Instead of this, consider `authentication/signup-screen` if targeting new user acquisition\n- Instead of this, skip authentication entirely if app doesn't need user accounts\n\n---\n\n## Description\n\nStandard login interface supporting email/password authentication with social login alternatives and biometric options. Provides secure account access while offering multiple authentication methods to reduce friction. Use for apps requiring user accounts with flexible authentication preferences.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│          Welcome Back              │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [@] Email                    │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [#] Password                 │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│           Forgot password?         │\n│                                    │\n│  [         Login         ]         │\n│                                    │\n│  Don't have an account? Sign up    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│          Welcome Back              │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [@] Email                    │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [#] Password                 │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [         Login         ]         │\n│                                    │\n│  ───────── or continue with ─────  │\n│                                    │\n│  [[A]] [G] [f]                     │\n│                                    │\n│  Don't have an account? Sign up    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│          Welcome Back              │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [@] Email                    │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [#] Password                 │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [ ] Remember me  Forgot password? │\n│                                    │\n│  [         Login         ]         │\n│                                    │\n│  ───────── or continue with ─────  │\n│                                    │\n│  [[A]] [G] [f] [Face ID]           │\n│                                    │\n│  Don't have an account? Sign up    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nauthentication, login, signin, email-password, social-login, biometric, credentials, access-control, user-accounts, security\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a login screen for my fitness app where users can sign in with email or social accounts\"\n\n**AI selects this pattern because:**\n- User mentioned \"login screen\" (keyword match)\n- App has user accounts (fitness tracking)\n- Needs both email and social options\n- Standard authentication pattern appropriate\n\n**AI generates:**\nStandard variant with email/password fields, social login buttons (Apple, Google), forgot password link, and sign up prompt\n\n**AI explains tradeoff:**\n- \"Login provides secure access to personal fitness data. Social login reduces friction (no password to remember). Email option for users who prefer traditional auth. Forgot password link reduces support burden.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Social providers** - Apple, Google, Facebook, GitHub, Microsoft based on audience\n2. **Biometric options** - Face ID, Touch ID for mobile apps\n3. **Remember me** - Add checkbox for convenience vs. security tradeoff\n4. **SSO options** - Enterprise apps may add SAML/OAuth providers\n\n**App-specific adaptations:**\n- **Consumer apps:** Social login prominent, passwordless options\n- **Enterprise SaaS:** SSO providers, MFA requirements, domain restrictions\n- **Banking/finance:** No social login, strong password requirements, security questions\n- **Gaming:** Platform-specific logins (Steam, Xbox, PlayStation)\n- **Educational:** School/university SSO, Google Classroom integration\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Entry point for returning users\n- After splash screen or app launch\n- From \"Sign In\" button on landing page\n\n**What comes before:**\n- App launch/splash screen\n- Landing page with \"Get Started\" call-to-action\n- `onboarding/welcome` - New users exit to create account\n\n**What comes after:**\n- `navigation/home-screen` - Successful login destination\n- `authentication/two-factor-auth` - If MFA enabled\n- `onboarding/profile-setup` - First-time login additional setup\n- `authentication/password-reset` - If user clicks forgot password\n- `authentication/signup-screen` - If user clicks sign up\n\n**Complete flow example:**\nApp launch → **Login Screen** → `authentication/two-factor-auth` → `navigation/home-screen`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App doesn't require user accounts or personalization\n- Guest mode provides full functionality\n- Single Sign-On (SSO) is the only auth method\n- App is kiosk-mode or public terminal\n\n**Use instead:**\n- `authentication/biometric-auth` - For quick re-authentication on mobile\n- Direct to home - For apps without accounts\n- SSO-only screen - For enterprise single-provider auth\n- `onboarding/welcome` - If prioritizing new user acquisition\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Password field errors frustrate users\n- Too many social options create decision paralysis\n- Missing \"forgot password\" link increases support tickets\n- No loading state after submit creates uncertainty\n\n**Conversion optimization:**\n- Make social login visually prominent (reduces friction)\n- Auto-focus email field on screen load\n- Show password requirements before errors occur\n- Add \"Remember me\" for convenience\n- Clear error messages with recovery actions\n- Loading indicator after submit button tap\n\n**Accessibility notes:**\n- Email and password fields need clear labels\n- Error messages must be announced to screen readers\n- Sufficient tap target sizes (44x44pt minimum)\n- Support password managers and autofill\n- Keyboard navigation between fields\n- High contrast for text on backgrounds\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "authentication/password-reset": "# Password Reset\n\n**ID:** `authentication/password-reset`\n**Category:** authentication\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to securely reset forgotten passwords via email verification link, restoring account access without support intervention.\n\n**Use this pattern when user mentions:**\n- \"forgot password\", \"reset password\", \"password recovery\"\n- \"can't remember password\", \"lost password\"\n- \"password reset flow\", \"recover password\"\n- \"users forgot their password\"\n- \"password help\", \"reset credentials\"\n\n**Common contexts:**\n- Login screen \"Forgot password?\" link\n- Account security settings (change password)\n- Locked account recovery\n- Suspicious activity password change\n- User-requested password update\n- Compliance-required password rotation\n\n**UX Tradeoffs:**\n- **Pro:** Self-service (no support ticket needed)\n- **Pro:** Email verification ensures account owner\n- **Pro:** Familiar pattern users understand\n- **Con:** Requires access to registered email\n- **Con:** Email delays frustrate users (can take minutes)\n\n**Pairs well with:**\n- `authentication/login` - \"Forgot password?\" link initiates flow\n- `authentication/account-recovery` - Escalation if email unavailable\n- `authentication/two-factor-auth` - Additional verification for sensitive resets\n- `forms/contact-support` - Help option if email not received\n- `settings/security-settings` - Proactive password changes\n\n**Variants available:**\n- **Minimal:** Email input and send link (use for \"simple reset\" or \"basic security\")\n- **Standard:** Email input, confirmation message, help links (use for most apps)\n- **Comprehensive:** Multiple methods (email/SMS), security questions, expiration warnings (use for \"banking apps\" or \"high security\")\n\n**Related patterns:**\n- Instead of this, consider `authentication/account-recovery` if email access lost\n- Instead of this, consider passwordless authentication to eliminate passwords entirely\n- Instead of this, use `forms/contact-support` for manual password reset (high-security cases)\n\n---\n\n## Description\n\nPassword recovery flow initiated from login screen, sending a secure reset link to user's registered email address. Provides clear next steps, expiration warnings, and help options. Self-service solution that maintains security while minimizing support burden.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Reset Password                 │\n├────────────────────────────────────┤\n│                                    │\n│  Forgot your password?             │\n│                                    │\n│  Enter your email and we'll send   │\n│  you a link to reset it            │\n│                                    │\n│  Email Address:                    │\n│  ┌──────────────────────────────┐  │\n│  │ you@example.com              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [Send Reset Link]                 │\n│                                    │\n│  Remember your password? Sign in   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Reset Password                 │\n├────────────────────────────────────┤\n│                                    │\n│  Check Your Email                  │\n│                                    │\n│  We sent a password reset link to: │\n│  john@example.com                  │\n│                                    │\n│  Click the link in the email to    │\n│  create a new password             │\n│                                    │\n│  Link expires in 1 hour            │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ (i) Check spam folder if you │  │\n│  │ don't see it in 5 minutes    │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Didn't receive it?                │\n│  [Resend Email] [Try SMS]          │\n│                                    │\n│  [Back to Sign In]                 │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Create New Password            │\n├────────────────────────────────────┤\n│                                    │\n│  Choose a strong password          │\n│                                    │\n│  New Password:                     │\n│  ┌──────────────────────────────┐  │\n│  │ ••••••••                     │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Confirm Password:                 │\n│  ┌──────────────────────────────┐  │\n│  │ ••••••••                     │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Requirements:                     │\n│  [X] At least 8 characters         │\n│  [X] One uppercase letter          │\n│  [ ] One number or symbol          │\n│                                    │\n│  [Reset Password]                  │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nauthentication, password-reset, forgot-password, account-recovery, email-verification, security, password-recovery\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Users who forgot their password should be able to reset it by email\"\n\n**AI selects this pattern because:**\n- User mentioned \"forgot their password\" (keyword match)\n- \"Reset it by email\" specifies method\n- Standard self-service recovery pattern\n- Login flow context\n\n**AI generates:**\nStandard variant with email input, send link button, confirmation screen with help text, and resend option\n\n**AI explains tradeoff:**\n- \"Email-based password reset is secure and self-service. User must have email access. Link expires in 1 hour for security. Confirmation screen sets expectations (check spam). Resend option reduces support tickets. Most users complete reset in under 2 minutes.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Verification method** - Email link (most common), SMS code, security questions\n2. **Link expiration** - 15 minutes (high security) to 24 hours (convenience)\n3. **Password requirements** - Length, complexity, no reuse of previous passwords\n4. **Help options** - Resend, try alternative method, contact support\n\n**App-specific adaptations:**\n- **Banking:** Short expiration (15min), mandatory 2FA, no password hints\n- **E-commerce:** 1-hour expiration, order history verification\n- **Social apps:** Magic link (no password), email or phone option\n- **Enterprise:** IT help desk integration, admin override option\n- **Healthcare:** HIPAA logging, security questions required\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Initiated from login screen \"Forgot password?\" link\n- Security settings password change\n- Forced reset after suspicious activity\n\n**What comes before:**\n- `authentication/login` - User clicks \"Forgot password?\"\n- Account locked notification\n- Security alert (suspicious activity detected)\n\n**What comes after:**\n- Email sent confirmation screen (interim step)\n- Password creation form (from email link)\n- Success message → `authentication/login`\n- `authentication/account-recovery` - If email method fails\n\n**Complete flow example:**\n`authentication/login` → **Password Reset** (email entry) → Check email screen → Email link click → Create new password → Success → `authentication/login`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App uses passwordless authentication\n- Accounts are temporary/disposable\n- Admin-only password reset (enterprise)\n- Social login only (no password to reset)\n\n**Use instead:**\n- `authentication/account-recovery` - If email access lost\n- `forms/contact-support` - Manual verification for sensitive accounts\n- Magic link authentication - Eliminate passwords entirely\n- Admin reset - Enterprise/internal tools\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Email delivery delays (30 seconds to 5 minutes)\n- Spam folders hide reset emails\n- Link expiration before user checks email\n- Typos in email address prevent delivery\n- Multiple reset attempts cause confusion\n\n**Conversion optimization:**\n- Set clear expectations (check email, check spam)\n- Show masked email for verification (\"j***n@example.com\")\n- Generous expiration time (1 hour standard)\n- Resend option immediately available\n- Alternative methods visible (SMS, support)\n- Auto-login after successful password reset\n- Confirmation screen with visual success state\n\n**Accessibility notes:**\n- Clear instructions for screen readers\n- Email field with type=\"email\" for keyboard\n- Password visibility toggle for new password entry\n- Error messages specific and actionable\n- Support keyboard navigation throughout\n- Sufficient time limits (don't expire too quickly)\n- Confirm success with clear messaging\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "authentication/signup-screen": "# Sign Up Screen\n\n**ID:** `authentication/signup-screen`\n**Category:** authentication\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables new users to create accounts by collecting necessary information (name, email, password) and optionally offering social signup for faster onboarding.\n\n**Use this pattern when user mentions:**\n- \"sign up\", \"create account\", \"register\", \"registration\"\n- \"new user\", \"onboarding\", \"join\", \"get started\"\n- \"user registration\", \"account creation\"\n- \"new account flow\", \"signup form\"\n- \"users need to create accounts\"\n\n**Common contexts:**\n- New user acquisition flows\n- Apps requiring personalized accounts\n- E-commerce platforms (save cart, orders)\n- Social or community apps\n- SaaS product trial signup\n- Mobile apps with cloud sync\n\n**UX Tradeoffs:**\n- **Pro:** Enables personalization and data persistence\n- **Pro:** Social signup reduces friction (fewer fields)\n- **Pro:** Captures user information for marketing/support\n- **Con:** Creates barrier to entry vs guest mode\n- **Con:** Password creation friction (users abandon)\n\n**Pairs well with:**\n- `authentication/login` - \"Already have account?\" link\n- `authentication/terms-conditions` - Required agreement before signup\n- `onboarding/welcome` - Next step after account creation\n- `onboarding/profile-setup` - Additional profile details post-signup\n- `forms/form-validation` - Real-time field validation\n- `navigation/home-screen` - Destination after signup complete\n\n**Variants available:**\n- **Minimal:** Email and password only (use for \"quick signup\" or \"minimal friction\")\n- **Standard:** Name, email, password, terms checkbox (use for most apps)\n- **Comprehensive:** Extended fields, social signup, password strength, profile photo (use for \"detailed onboarding\" or \"social apps\")\n\n**Related patterns:**\n- Instead of this, consider `authentication/login` with social auth (faster for existing social users)\n- Instead of this, skip signup entirely if guest mode sufficient\n- Instead of this, use invitation-only signup for private/exclusive apps\n\n---\n\n## Description\n\nNew user registration form collecting essential account information with optional social signup alternatives. Balances thorough data collection with signup friction, offering email/password or social authentication paths. Includes terms acceptance and password requirements for security compliance.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│          Create Account            │\n│                                    │\n│  Email:                            │\n│  ┌──────────────────────────────┐  │\n│  │ you@example.com              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Password:                         │\n│  ┌──────────────────────────────┐  │\n│  │ ••••••••                     │  │\n│  └──────────────────────────────┘  │\n│  At least 8 characters             │\n│                                    │\n│  [Create Account]                  │\n│                                    │\n│  Already have an account? Sign in  │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│          Create Account            │\n│                                    │\n│  Join thousands enjoying our app!  │\n│                                    │\n│  Full Name:                        │\n│  ┌──────────────────────────────┐  │\n│  │ John Doe                     │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Email:                            │\n│  ┌──────────────────────────────┐  │\n│  │ john@example.com             │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Password:                         │\n│  ┌──────────────────────────────┐  │\n│  │ ••••••••                     │  │\n│  └──────────────────────────────┘  │\n│  Must be 8+ characters             │\n│                                    │\n│  [ ] I agree to Terms & Privacy    │\n│                                    │\n│  [Create Account]                  │\n│                                    │\n│  Already have an account? Sign in  │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│          Create Account            │\n│                                    │\n│  Join thousands enjoying our app!  │\n│                                    │\n│  Full Name:                        │\n│  ┌──────────────────────────────┐  │\n│  │ John Doe                     │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Email:                            │\n│  ┌──────────────────────────────┐  │\n│  │ john@example.com             │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Password:                         │\n│  ┌──────────────────────────────┐  │\n│  │ ••••••••                     │  │\n│  └──────────────────────────────┘  │\n│  [||||......] Medium strength      │\n│                                    │\n│  [ ] I agree to Terms & Privacy    │\n│                                    │\n│  [Create Account]                  │\n│                                    │\n│  ─────── or sign up with ───────   │\n│                                    │\n│  [[A]] [G] [f]                     │\n│                                    │\n│  Already have an account? Sign in  │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nauthentication, signup, registration, create-account, onboarding, new-user, social-signup, email-password, user-registration\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a signup screen where users can create an account with their name, email, and password or use Google login\"\n\n**AI selects this pattern because:**\n- User mentioned \"signup screen\" and \"create account\" (keywords)\n- Specified fields needed (name, email, password)\n- Mentioned Google login (social signup option)\n- Standard new user registration flow\n\n**AI generates:**\nComprehensive variant with full name, email, password fields, password strength indicator, terms checkbox, social login buttons (Apple, Google, Facebook), and \"Sign in\" link\n\n**AI explains tradeoff:**\n- \"Signup form balances data collection with user friction. Full name enables personalization. Password strength meter improves security. Social login reduces friction (50% faster signup). Terms checkbox ensures legal compliance. Sign in link prevents duplicate accounts.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Required fields** - Minimal (email/password) vs detailed (name, phone, company)\n2. **Social providers** - Apple, Google, Facebook, GitHub based on audience\n3. **Password requirements** - Length, complexity, strength indicator\n4. **Terms acceptance** - Checkbox vs auto-accept vs separate screen\n\n**App-specific adaptations:**\n- **Consumer apps:** Minimal fields, prominent social signup, optional name\n- **B2B SaaS:** Company name, team size, use case questions\n- **E-commerce:** Optional phone for shipping, newsletter checkbox\n- **Social platforms:** Username, profile photo, bio during signup\n- **Healthcare:** HIPAA consent, date of birth, insurance info\n- **Gaming:** Username (unique), avatar selection, gamer tag\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Entry point for new users\n- After \"Get Started\" or \"Try Free\" CTA\n- Alternative to login for first-time visitors\n\n**What comes before:**\n- Landing page \"Sign Up\" call-to-action\n- `authentication/login` - \"Don't have account?\" link\n- Marketing page conversion point\n- App download/install\n\n**What comes after:**\n- `authentication/terms-conditions` - If terms on separate screen\n- `onboarding/welcome` - Welcome and tour for new users\n- `onboarding/profile-setup` - Additional profile customization\n- Email verification step\n- `navigation/home-screen` - Direct to app if no onboarding\n\n**Complete flow example:**\nLanding page → **Sign Up Screen** → Email verification → `onboarding/welcome` → `onboarding/profile-setup` → `navigation/home-screen`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App works fully in guest mode (no account needed)\n- Invitation-only signup (use invite code entry)\n- Single Sign-On (SSO) only (corporate apps)\n- Progressive signup (collect info after app usage)\n\n**Use instead:**\n- Guest mode - Allow immediate app usage without signup\n- `authentication/login` with social - If most users have social accounts\n- Progressive onboarding - Delay signup until value demonstrated\n- Invitation flow - For private beta or exclusive apps\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Every additional field reduces conversion by 5-10%\n- Password creation frustration (complexity requirements)\n- Terms checkbox often missed (users skip)\n- Long forms on mobile keyboards painful\n- Email typos prevent account access\n\n**Conversion optimization:**\n- Show value proposition above form (\"Join 10,000 users\")\n- Minimize required fields (collect details later)\n- Social signup as primary path (reduce to 2 clicks)\n- Password strength meter (not just requirements)\n- Inline validation (immediate feedback on errors)\n- Auto-format inputs (phone, credit card)\n- Progress indicator if multi-step\n- Skip email verification initially (verify later)\n\n**Accessibility notes:**\n- Proper label-input association for screen readers\n- Email field type=\"email\" for correct mobile keyboard\n- Password visibility toggle for error checking\n- Clear error messages with recovery actions\n- Support password managers (proper attributes)\n- Keyboard navigation between fields (Tab)\n- Sufficient tap targets (44x44pt minimum)\n- High contrast for all text and form elements\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "authentication/terms-conditions": "# Terms and Conditions\n\n**ID:** `authentication/terms-conditions`\n**Category:** authentication\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nPresents legal terms, privacy policy, and user agreements that must be accepted before account creation or using the service, ensuring legal compliance.\n\n**Use this pattern when user mentions:**\n- \"terms and conditions\", \"terms of service\", \"TOS\"\n- \"privacy policy\", \"legal agreement\", \"user agreement\"\n- \"accept terms\", \"legal compliance\", \"GDPR\"\n- \"terms acceptance\", \"policy consent\"\n- \"users must agree to terms\"\n\n**Common contexts:**\n- Signup flow (before account creation)\n- First app launch (mobile apps)\n- Major feature access requiring consent\n- Policy updates requiring re-acceptance\n- Age verification and parental consent\n- GDPR/CCPA compliance requirements\n\n**UX Tradeoffs:**\n- **Pro:** Legal protection for company and users\n- **Pro:** Transparency about data usage (GDPR requirement)\n- **Pro:** Industry standard, users expect it\n- **Con:** Major friction point (users skip reading)\n- **Con:** Can reduce signup conversion by 10-20%\n\n**Pairs well with:**\n- `authentication/signup-screen` - Required step before account creation\n- `authentication/login` - Policy updates shown at login\n- `onboarding/welcome` - Post-acceptance onboarding flow\n- `settings/privacy-settings` - Link to view terms anytime\n- `forms/age-verification` - Age gate before terms acceptance\n\n**Variants available:**\n- **Minimal:** Checkbox with inline links (use for \"simple acceptance\" or \"low-friction signup\")\n- **Standard:** Scrollable terms with required checkboxes (use for most apps)\n- **Comprehensive:** Full terms display, multiple agreements, version tracking (use for \"regulated industries\" or \"enterprise apps\")\n\n**Related patterns:**\n- Instead of this, use inline checkbox on signup form if terms are simple\n- Instead of this, show terms post-signup if not legally required upfront\n- Instead of this, skip entirely if no user accounts or data collection\n\n---\n\n## Description\n\nLegal terms and privacy policy presentation requiring user acceptance before service use. Provides scrollable content with clear acceptance mechanism and links to full documents. Balances legal requirements with user experience by offering digestible format and optional detailed review.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Terms & Conditions             │\n├────────────────────────────────────┤\n│                                    │\n│  Before you continue:              │\n│                                    │\n│  [ ] I accept the Terms of Service │\n│  [ ] I accept the Privacy Policy   │\n│                                    │\n│  [View Terms] [View Privacy]       │\n│                                    │\n│  [Continue]                        │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Terms of Service               │\n├────────────────────────────────────┤\n│                                    │\n│  Please review and accept          │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ Last updated: Jan 15, 2026   │  │\n│  │                              │  │\n│  │ 1. Acceptance of Terms       │  │\n│  │ By using this service, you   │  │\n│  │ agree to these terms...      │  │\n│  │                              │  │\n│  │ 2. User Responsibilities     │  │\n│  │ You are responsible for...   │  │\n│  │                              │  │\n│  │ 3. Privacy & Data            │  │\n│  │ We protect your data...      │  │\n│  │                              │  │\n│  │ [Scroll for more...]         │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [ ] I have read and accept these  │\n│  terms and conditions              │\n│                                    │\n│  [Accept & Continue]               │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Legal Agreements               │\n├────────────────────────────────────┤\n│                                    │\n│  Review Required Agreements        │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ Terms of Service             │  │\n│  │ Updated: Jan 15, 2026        │  │\n│  │ [Read Full Document]         │  │\n│  │                              │  │\n│  │ Key points:                  │  │\n│  │ - Account usage rules        │  │\n│  │ - Service limitations        │  │\n│  │ - Termination policy         │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [ ] I accept Terms of Service     │\n│  [ ] I accept Privacy Policy       │\n│  [ ] Email me updates (optional)   │\n│                                    │\n│  By continuing, you agree to all   │\n│  checked agreements above          │\n│                                    │\n│  [Accept All & Continue]           │\n│                                    │\n│  Need help? [Contact Support]      │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nauthentication, terms-conditions, legal, privacy-policy, compliance, GDPR, user-agreement, consent, TOS\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Before users can create an account, they need to accept our terms of service and privacy policy\"\n\n**AI selects this pattern because:**\n- User mentioned \"accept our terms\" (keyword match)\n- \"Before users can create account\" signals signup flow position\n- Legal compliance requirement\n- Multiple documents (terms + privacy)\n\n**AI generates:**\nStandard variant with scrollable terms content, two checkboxes (Terms of Service, Privacy Policy), links to full documents, and Continue button\n\n**AI explains tradeoff:**\n- \"Terms acceptance is legally required before signup. Scrollable preview lets users review without leaving flow. Separate checkboxes for terms and privacy ensure explicit consent (GDPR compliance). Links to full documents satisfy transparency requirements. Reduces signup conversion slightly but necessary for legal protection.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Presentation format** - Inline checkbox, scrollable preview, full-page view\n2. **Required agreements** - Terms only, Terms + Privacy, additional consents\n3. **Update handling** - Version tracking, highlight changes, require re-acceptance\n4. **Acceptance proof** - Checkbox, signature, click-through, timestamp logging\n\n**App-specific adaptations:**\n- **SaaS/B2B:** Service Level Agreement (SLA), data processing terms\n- **Healthcare:** HIPAA consent, medical disclaimer, patient rights\n- **Finance:** Risk disclosure, arbitration clause, fee schedules\n- **Gaming:** Code of conduct, content policy, age verification\n- **Social media:** Community guidelines, content rights, data sharing\n- **Children's apps:** COPPA compliance, parental consent flow\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Before signup completion (during registration)\n- First app launch (mobile apps)\n- Before accessing paid features\n- After major policy updates\n\n**What comes before:**\n- `authentication/signup-screen` - User fills registration form\n- App download and first launch\n- Free trial conversion to paid\n- Policy update notification\n\n**What comes after:**\n- `authentication/signup-screen` - Complete account creation\n- `onboarding/welcome` - Begin onboarding flow\n- `navigation/home-screen` - Direct to app if no onboarding\n- Email verification step\n\n**Complete flow example:**\n`authentication/signup-screen` → **Terms & Conditions** → Accept → Email verification → `onboarding/welcome`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App collects no personal data (no privacy policy needed)\n- No user accounts created\n- B2B with signed master agreements (not click-through)\n- Internal tools with company-wide policies\n\n**Use instead:**\n- Inline checkbox on signup form - For simple, short terms\n- Post-signup terms review - If not legally required upfront\n- Email-based agreement - For enterprise/B2B contracts\n- No terms - If truly no data collection or accounts\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Nobody reads long legal documents (but must be provided)\n- Checkbox easily missed causing signup errors\n- Multiple checkboxes confuse users (\"which do I need?\")\n- \"Wall of text\" causes abandonment\n- Mobile scrolling through long documents painful\n\n**Conversion optimization:**\n- Minimize friction: checkbox on signup form (don't require separate screen)\n- Plain language summary before legal text\n- \"Key points\" bullet list (what users actually care about)\n- Accept all button vs individual checkboxes\n- Progressive disclosure (details available but not forced)\n- Highlight what changed (policy updates)\n- Allow signup without reading (checkbox sufficient)\n- Fast access to full terms without leaving flow\n\n**Accessibility notes:**\n- Terms must be readable by screen readers\n- Sufficient contrast for long-form text\n- Clear checkbox labels (not just \"I agree\")\n- Links to terms are keyboard accessible\n- Scrollable content supports screen reader navigation\n- Checkbox states clearly announced\n- Font size respects user preferences\n- Support text selection/copy for review\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "authentication/two-factor-auth": "# Two-Factor Authentication\n\n**ID:** `authentication/two-factor-auth`\n**Category:** authentication\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nAdds an additional security layer after login by requiring a time-sensitive code from SMS, authenticator app, or email to verify user identity.\n\n**Use this pattern when user mentions:**\n- \"two-factor\", \"2FA\", \"MFA\", \"multi-factor\"\n- \"verification code\", \"security code\", \"authentication code\"\n- \"authenticator app\", \"Google Authenticator\", \"SMS code\"\n- \"extra security\", \"second factor\", \"secure login\"\n- \"banking security\", \"high-security authentication\"\n\n**Common contexts:**\n- Banking and financial apps\n- Apps handling sensitive personal data\n- Healthcare apps (HIPAA compliance)\n- Enterprise SaaS platforms\n- Admin panels and dashboards\n- E-commerce checkout for high-value purchases\n- Account settings changes (password, email)\n\n**UX Tradeoffs:**\n- **Pro:** Significantly increases account security\n- **Pro:** Prevents unauthorized access even with stolen password\n- **Pro:** Industry standard for sensitive apps\n- **Con:** Adds friction to every login (reduces convenience)\n- **Con:** Users can lose access if phone unavailable\n\n**Pairs well with:**\n- `authentication/login` - Primary authentication before 2FA\n- `authentication/biometric-auth` - Quick re-auth after initial 2FA\n- `settings/security-settings` - Enable/disable 2FA, manage backup codes\n- `authentication/account-recovery` - Alternative when 2FA device lost\n- `forms/pin-entry` - Backup authentication method\n\n**Variants available:**\n- **Minimal:** SMS code only (use for \"simple 2FA\" or \"SMS verification\")\n- **Standard:** SMS or authenticator app (use for most apps requiring 2FA)\n- **Comprehensive:** Multiple methods, backup codes, trusted devices (use for \"banking apps\" or \"maximum security\")\n\n**Related patterns:**\n- Instead of this, consider `authentication/biometric-auth` for device-based security without codes\n- Instead of this, skip 2FA if app doesn't handle sensitive data\n- Consider passwordless authentication as alternative to password + 2FA\n\n---\n\n## Description\n\nSecondary verification step requiring users to enter a time-sensitive code from SMS, authenticator app, or email after password login. Provides strong security for sensitive apps while offering multiple verification methods and backup options for accessibility.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Verification                   │\n├────────────────────────────────────┤\n│                                    │\n│  Enter Verification Code           │\n│                                    │\n│  We sent a code to (***) ***-5678  │\n│                                    │\n│  ┌───────────────────────────────┐ │\n│  │  [_] [_] [_] [_] [_] [_]      │ │\n│  └───────────────────────────────┘ │\n│                                    │\n│  Code expires in 4:32              │\n│                                    │\n│  [Verify Code]                     │\n│                                    │\n│  Didn't receive it? [Resend]       │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Two-Factor Authentication      │\n├────────────────────────────────────┤\n│                                    │\n│  Enter Authentication Code         │\n│                                    │\n│  Open your authenticator app and   │\n│  enter the 6-digit code            │\n│                                    │\n│  ┌─────┐ ┌─────┐ ┌─────┐           │\n│  │  3  │ │  7  │ │  2  │           │\n│  └─────┘ └─────┘ └─────┘           │\n│  ┌─────┐ ┌─────┐ ┌─────┐           │\n│  │  9  │ │  1  │ │  4  │           │\n│  └─────┘ └─────┘ └─────┘           │\n│                                    │\n│  [Verify Code]                     │\n│                                    │\n│  [ ] Trust this device for 30 days │\n│                                    │\n│  [Use SMS Instead]                 │\n│  [Use Backup Code]                 │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Secure Login                   │\n├────────────────────────────────────┤\n│                                    │\n│  Choose Verification Method        │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [#] Authenticator App        │  │\n│  │ Most secure option           │  │\n│  │                       [Use]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [@] Email Code               │  │\n│  │ Send to j***n@email.com      │  │\n│  │                       [Use]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [*] SMS Code                 │  │\n│  │ Send to (***) ***-5678       │  │\n│  │                       [Use]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Lost your device?                 │\n│  [Enter Backup Code]               │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nauthentication, two-factor, 2fa, mfa, verification-code, authenticator, sms-code, security, multi-factor-auth, otp\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"After users log in to the banking app, they need to enter a code from their authenticator app for security\"\n\n**AI selects this pattern because:**\n- User mentioned \"enter a code\" (keyword match)\n- Banking app context (high security required)\n- Authenticator app specified (2FA method)\n- After login timing (secondary verification)\n\n**AI generates:**\nStandard variant with authenticator app code entry, 6-digit input boxes, SMS fallback option, and \"Trust device\" checkbox\n\n**AI explains tradeoff:**\n- \"Two-factor authentication prevents unauthorized access even if password is stolen. Authenticator app codes are more secure than SMS. Adds 15-30 seconds to login but critical for banking security. Trust device option reduces frequency for known devices.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Code delivery method** - SMS, email, authenticator app, hardware token\n2. **Code format** - 4-digit, 6-digit, 8-digit alphanumeric\n3. **Expiration time** - 30 seconds (authenticator), 5-10 minutes (SMS/email)\n4. **Trust device option** - Remember device for 7/30/90 days\n\n**App-specific adaptations:**\n- **Banking:** Mandatory 2FA, no trust device, strict expiration\n- **Healthcare:** HIPAA-compliant, audit logging, no SMS option\n- **E-commerce:** Optional 2FA, trust device for convenience\n- **Enterprise:** Hardware tokens, integration with corporate directory\n- **Social media:** Optional 2FA, recovery codes, trusted contacts\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Immediately after successful password login\n- Before accessing sensitive features (settings, payments)\n- During account recovery verification\n\n**What comes before:**\n- `authentication/login` - User enters correct email/password\n- Sensitive action attempt (payment, settings change)\n- New device login detected\n\n**What comes after:**\n- `navigation/home-screen` - Successful verification\n- Sensitive feature screen (if verifying action)\n- Error state with retry option (if code incorrect)\n- `authentication/account-recovery` - If user lost 2FA device\n\n**Complete flow example:**\n`authentication/login` → **Two-Factor Auth** → `navigation/home-screen`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App doesn't handle sensitive data\n- User convenience is paramount over security\n- Target users can't reliably receive SMS/email\n- Biometric authentication provides sufficient security\n\n**Use instead:**\n- `authentication/biometric-auth` - Device-based security without codes\n- `authentication/login` only - If security risk is low\n- Passwordless authentication - Modern alternative to password + 2FA\n- Risk-based authentication - 2FA only on suspicious logins\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Users without phone access can't log in\n- Authenticator app setup confusing for non-technical users\n- SMS delays frustrate users (30+ seconds)\n- Lost device = locked out without backup codes\n- Required on every login reduces convenience\n\n**Conversion optimization:**\n- Provide multiple verification methods (SMS, email, app)\n- Trust device option for known devices\n- Clear setup instructions during enrollment\n- Backup codes generated and saved during setup\n- Auto-fill code from SMS on mobile\n- Skip 2FA for low-risk actions\n\n**Accessibility notes:**\n- Support screen readers for code input fields\n- Large input boxes for visibility (44x44pt minimum)\n- Voice-based code delivery for visually impaired\n- Clear timing communication (countdown visible)\n- Allow code paste from SMS/email\n- Provide non-SMS alternatives (not all users have phones)\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "communication/chat_interface": "# Chat Conversation Screen\n\n**ID:** `communication/chat_interface`\n**Category:** communication\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nReal-time messaging interface showing conversation history, user/recipient messages in distinct visual styles, timestamps, media sharing, and input area. Enables asynchronous communication between two or more users.\n\n**Use this pattern when user mentions:**\n- \"chat\", \"messaging\", \"real-time messaging\"\n- \"direct messages\", \"DM\", \"private chat\"\n- \"conversation history\", \"message thread\"\n- \"typing indicator\", \"read receipts\", \"online status\"\n- \"file sharing\", \"media in chat\"\n\n**Common contexts:**\n- Social apps with messaging\n- Team communication tools\n- Customer support chat\n- Dating/social matching apps\n- Multiplayer games with chat\n- AI assistant conversations\n\n**UX Tradeoffs:**\n- **Pro:** Familiar pattern users know from WhatsApp/iMessage\n- **Pro:** Shows full conversation context\n- **Pro:** Real-time feedback feels responsive\n- **Pro:** Media sharing (photos, files) enriches conversation\n- **Con:** Requires scrolling in long conversations\n- **Con:** Notifications can become overwhelming\n- **Con:** Always-on responsiveness expectations\n\n**Pairs well with:**\n- `social/messaging-chat` - Advanced chat with reactions\n- `social/notifications` - Message notifications\n- `modals/user-profile` - Tapping user to see profile\n- `states/loading_screen` - Loading messages\n- `modals/media-viewer` - Expanding shared images\n\n**Variants available:**\n- **Minimal:** Basic messages only, no timestamps/read receipts\n- **Standard:** Messages, timestamps, typing indicator, file sharing\n- **Comprehensive:** Reactions, read receipts, online status, rich media\n\n---\n\n## Description\n\nReal-time chat conversation with bidirectional messaging. Shows sender messages on left (different styling), recipient on right, timestamps, typing indicator, and input area with send and media options. Supports text and media sharing.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ ← [@] Sarah M.           [C] [V] : │\n├────────────────────────────────────┤\n│                                    │\n│ ┌─────────────────────────────────┐│\n│ │ Hey! How's the project going?   ││\n│ │                        2:14 PM  ││\n│ └─────────────────────────────────┘│\n│                                    │\n│                     ┌────────────┐ │\n│                     │ Going well!│ │\n│                     │ Finished   │ │\n│                     │ the mockups│ │\n│                     │     2:15 PM│ │\n│                     └────────────┘ │\n│                                    │\n│ ┌─────────────────────────────────┐│\n│ │ That's awesome! Can you share   ││\n│ │ them with the team?             ││\n│ │                        2:16 PM  ││\n│ └─────────────────────────────────┘│\n│                                    │\n│                     ┌────────────┐ │\n│                     │ Sure thing!│ │\n│                     │ v2.sketch  │ │\n│                     │ 2.4 MB     │ │\n│                     │     2:17 PM│ │\n│                     └────────────┘ │\n│                                    │\n│ ┌─────────────────────────────────┐│\n│ │ Perfect! Meeting at 3 PM?       ││\n│ │                        2:18 PM  ││\n│ └─────────────────────────────────┘│\n│                                    │\n│ ┌─────────────────────────────────┐│\n│ │ [*] Type a message...           ││\n│ │                       [o] [M] > ││\n│ └─────────────────────────────────┘│\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nchat, messaging, real-time, conversation, direct-message, thread, bidirectional, media-sharing, timestamps\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I'm building a messaging feature where users can have real-time conversations with photos and see when messages were read\"\n\n**AI selects this pattern because:**\n- User mentioned \"messaging feature\" (keyword match)\n- Real-time conversations mentioned\n- Photo/media sharing requirement\n- Read receipts mentioned in context\n- Standard variant fits most messaging apps\n\n**AI generates:**\nStandard variant with media sharing, timestamps, and visual distinction between sender/recipient\n\n**AI explains tradeoff:**\n- \"Chat interfaces show full conversation history so users have context. Timestamps show when messages were sent. Different styling for sender vs. recipient makes conversation flow clear. Trade-off: Long conversations require scrolling, and always-on messaging creates expectation of immediate response.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Message styling** - Background color/shape for sender vs. recipient\n2. **Timestamps** - Show for every message vs. only when time gap exists\n3. **Typing indicator** - Simple text vs. animated dots vs. 'seeing' indicator\n4. **Media handling** - Inline thumbnails vs. expandable gallery\n5. **Read receipts** - Single/double check marks or explicit \"read\" time\n\n**App-specific adaptations:**\n- **Team chat:** Thread indentation, @mentions, reaction emojis\n- **Customer support:** Agent notes, ticket status, escalation\n- **Dating app:** Typing indicator hidden (privacy), enhanced photos\n- **Gaming chat:** Rich embeds for game invites, clip sharing\n- **AI assistant:** Continuous scrolling, code blocks, markdown formatting\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary screen within conversation list\n- Accessed by tapping conversation from list\n- Bottom navigation or tab bar stays visible\n\n**What comes before:**\n- `social/messaging-chat-list` - Conversation list selection\n- `modals/user-profile` - Create new conversation\n- `authentication/login` - Initial app load\n\n**What comes after:**\n- Same screen (message appended)\n- `modals/profile` - Tap user name to see profile\n- `states/loading_screen` - Loading previous messages\n- `modals/media-viewer` - Tap image to expand\n\n**Complete flow example:**\n`messaging-list` → Tap conversation → **Chat Screen** → Send message → Message appears → Recipient reads → Read receipt shows\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Communication is one-directional (notifications, alerts)\n- Not real-time (use email-style interface instead)\n- Group chat needs threaded replies (use thread variant)\n- Conversation is formal documentation (use formal message template)\n\n**Use instead:**\n- `notifications/toast` - For one-way notifications\n- `content/comment-section` - For reply-to-comment style\n- `modals/alert` - For critical messages/announcements\n- Thread-based chat - For large group discussions\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Scrolling to find old messages in long chats\n- Ambiguous read receipts (read vs. delivered vs. typing)\n- No context when jumping into active conversation\n- Unclear who is typing in group chats\n- Photos slow down scrolling performance\n\n**Conversion optimization:**\n- Jumps to new messages (unread badge marker)\n- Search within conversation\n- Swipe to reply (thread previous message)\n- Typing indicator shows responsiveness\n- Delivery/read status reduces uncertainty\n- Media preview loading low-res thumbnail first\n\n**Accessibility notes:**\n- Screen readers announce sender/recipient for each message\n- Timestamp should include full date context for old messages\n- Media descriptions necessary (alt text for images)\n- Typing indicator animated respectfully (reduce motion support)\n- Message input has large touch target for send button\n- Focus management when messages loaded\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "dashboards/analytics_dashboard_001": "# Business Analytics Dashboard\n\n**ID:** `dashboards/analytics_dashboard_001`\n**Category:** dashboards\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays key business metrics, performance indicators, and trends for data-driven decision making in SaaS, e-commerce, and business applications.\n\n**Use this pattern when user mentions:**\n- \"dashboard\", \"analytics\", \"business metrics\", \"overview\"\n- \"revenue\", \"customers\", \"conversion\", \"sales performance\"\n- \"KPIs\", \"key metrics\", \"business data\", \"performance tracking\"\n- \"data visualization\", \"trends\", \"insights\", \"reports\"\n- \"SaaS dashboard\", \"business intelligence\", \"executive summary\"\n\n**Common contexts:**\n- SaaS admin panels requiring performance monitoring\n- E-commerce platforms tracking sales and customers\n- Business applications needing executive overview\n- Data-driven apps with multiple metrics to display\n- Applications requiring at-a-glance business health\n\n**UX Tradeoffs:**\n- **Pro:** At-a-glance insights enable quick decision making\n- **Pro:** Trend indicators show direction without deep analysis\n- **Pro:** Visual charts convey patterns faster than raw numbers\n- **Pro:** Multiple metrics in single view reduce navigation\n- **Con:** Information density can overwhelm if poorly organized\n- **Con:** Real-time updates can be expensive to implement\n- **Con:** Too many metrics reduce focus on key drivers\n- **Con:** Chart complexity increases on small screens\n\n**Pairs well with:**\n- `dashboards/sales-analytics` - Detailed sales drill-down\n- `dashboards/finance_overview_001` - Financial metrics focus\n- `dashboards/task-dashboard` - Operational task management\n- `special/data-table-advanced` - Detailed data exploration\n- `settings/preferences-advanced` - Dashboard customization options\n- `special/notifications-center` - Alert users to metric changes\n\n**Variants available:**\n- **Minimal:** Top 3-4 KPIs only (use for \"executive summary\" or \"quick overview\")\n- **Standard:** Key metrics plus weekly trends (use for most business dashboards)\n- **Comprehensive:** Full analytics with insights, forecasts, comparisons (use for \"detailed analytics\" or \"power users\")\n\n**Related patterns:**\n- Instead of this, consider `dashboards/sales-analytics` if focused on sales pipeline only\n- Instead of this, consider `dashboards/finance_overview_001` if focused on financial data only\n- Instead of this, consider `dashboards/task-dashboard` if tracking projects/tasks not business metrics\n\n---\n\n## Description\n\nComprehensive business analytics dashboard displaying revenue, customer acquisition, conversion rates, and trend visualizations. Shows current performance with comparison to previous periods using trend indicators. Includes visual charts for pattern recognition and key insights section for AI-generated observations. Balances information density with scanability through clear metric grouping and progressive disclosure.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ Business Analytics      [Share]    │\n├────────────────────────────────────┤\n│                                    │\n│ Today's Performance                │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Revenue                        │ │\n│ │ $45,892                        │ │\n│ │ ↗ +18.3% from yesterday        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ New Customers                  │ │\n│ │ 127                            │ │\n│ │ ↗ +22.5% from yesterday        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Conversion Rate                │ │\n│ │ 8.4%                           │ │\n│ │ ↘ -1.2% from yesterday         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Weekly Trends                      │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Sales Performance              │ │\n│ │                                │ │\n│ │     ████                       │ │\n│ │   ██████                       │ │\n│ │ ████████████                   │ │\n│ │ Mon Tue Wed Thu Fri Sat Sun    │ │\n│ │                                │ │\n│ │ Target: $250K  Actual: $287K   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Key Insights                       │\n│                                    │\n│ > Mobile traffic increased 45%     │\n│   iOS users show higher engagement │\n│                                    │\n│ > Product launch impact visible    │\n│   Premium tier adoption growing    │\n│                                    │\n│ > Geographic expansion working     │\n│   European markets showing growth  │\n│                                    │\n│ [─── View Detailed Report ───]     │\n│                                    │\n├────────────────────────────────────┤\n│ [Overview] [Sales] [Traffic] [Goal]│\n└────────────────────────────────────┘\n```\n\n### Minimal Variant (Executive Summary)\n\n```\n┌────────────────────────────────────┐\n│ Business Overview       [Share]    │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Revenue    $45,892  ↗ +18.3%   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Customers  127      ↗ +22.5%   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Convert.   8.4%     ↘ -1.2%    │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── View Full Dashboard ────]    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (Detailed Analytics)\n\n```\n┌────────────────────────────────────┐\n│ Analytics Dashboard     [Export]   │\n├────────────────────────────────────┤\n│ [Today] [This Week] [This Month]   │\n│                                    │\n│ Key Metrics                        │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Revenue      │ │ Customers     │ │\n│ │ $45,892      │ │ 127           │ │\n│ │ ↗ +18.3%     │ │ ↗ +22.5%      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Conversion   │ │ Avg Order     │ │\n│ │ 8.4%         │ │ $361          │ │\n│ │ ↘ -1.2%      │ │ ↗ +5.8%       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Revenue Trend (7 days)             │\n│ ┌────────────────────────────────┐ │\n│ │        ████                    │ │\n│ │      ██████                    │ │\n│ │    ████████████                │ │\n│ │ M  T  W  T  F  S  S            │ │\n│ │ Goal: $250K  Actual: $287K     │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Traffic Sources                    │\n│ ┌────────────────────────────────┐ │\n│ │ Direct        45%  ████████    │ │\n│ │ Organic       32%  ██████      │ │\n│ │ Social        15%  ███         │ │\n│ │ Paid          8%   ██          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ AI Insights                        │\n│ > Conversion dip expected          │\n│   Weekend traffic typically lower  │\n│                                    │\n│ > Revenue ahead of forecast        │\n│   Premium tier driving growth      │\n│                                    │\n│ [──── Detailed Report ────]        │\n│                                    │\n├────────────────────────────────────┤\n│ [Overview] [Sales] [Traffic] [More]│\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ndashboard, analytics, business-metrics, kpi, revenue, customers, conversion, trends, charts, data-visualization, saas, e-commerce, insights, performance\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I'm building a SaaS admin panel and need a dashboard showing revenue, customer count, and conversion rate with trend indicators\"\n\n**AI selects this pattern because:**\n- User mentioned \"dashboard\" and \"admin panel\" (keyword matches)\n- Specific metrics listed: revenue, customers, conversion (KPI tracking)\n- \"Trend indicators\" suggests comparison and direction\n- SaaS context fits business analytics use case\n- Standard variant appropriate for admin monitoring\n\n**AI generates:**\nStandard variant with today's performance section showing revenue ($45,892 ↗ +18.3%), customers (127 ↗ +22.5%), conversion rate (8.4% ↘ -1.2%) with weekly trend chart and key insights section\n\n**AI explains tradeoff:**\n- \"Business analytics dashboard prioritizes at-a-glance insights with trend indicators (↗ ↘) so you see direction instantly. Grouped metrics reduce cognitive load compared to scattered numbers. Weekly chart shows patterns visually. Insights section highlights key observations. Information density is high but organized by category for scanability. Real-time updates would require backend polling. Tab navigation allows drill-down to detailed views.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Metrics displayed** - Revenue, customers, MRR, ARR, churn, LTV, CAC depending on business model\n2. **Time periods** - Today, This Week, This Month, This Quarter, YTD, Custom range\n3. **Comparison baseline** - Yesterday, Last week, Last month, Same period last year, Target/goal\n4. **Chart types** - Bar charts (trends), Line charts (time series), Pie charts (composition), Sparklines (inline trends)\n5. **Insights source** - Manual curated, AI-generated, Rule-based alerts, Anomaly detection\n\n**App-specific adaptations:**\n- **SaaS:** MRR, ARR, churn rate, trial conversions, seat utilization, feature adoption\n- **E-commerce:** Revenue, orders, AOV, cart abandonment, top products, customer LTV\n- **Marketplace:** GMV, take rate, active buyers/sellers, transaction volume, listing quality\n- **Content platform:** MAU, DAU, engagement rate, content created, retention cohorts\n- **Mobile app:** Downloads, DAU/MAU, session length, retention, in-app purchases, crash rate\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary landing screen after login for admin/business users\n- Main navigation destination (Home, Dashboard)\n- Entry point to detailed analytics and reports\n\n**What comes before:**\n- `authentication/login` - User authentication before dashboard access\n- `special/splash-screen` - App loading state\n- `special/onboarding-welcome` - First-time user setup\n\n**What comes after:**\n- `dashboards/sales-analytics` - Drill down into sales details\n- `special/data-table-advanced` - View detailed transaction data\n- `settings/account-settings` - Configure dashboard preferences\n- Detailed report screens with filtered/segmented data\n\n**Complete flow example:**\n`authentication/login` → **Business Analytics Dashboard** → `dashboards/sales-analytics` → `special/data-table-advanced`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Application has single simple metric (use status card instead)\n- Users don't need business intelligence features (consumer apps)\n- Data is too sensitive to show in overview (use drill-down only)\n- Real-time monitoring is critical (use dedicated monitoring dashboard)\n- Audience is end-users not admins (use app-specific views)\n\n**Use instead:**\n- `dashboards/task-dashboard` - If tracking projects/tasks not business metrics\n- `dashboards/sales-analytics` - If focused purely on sales pipeline\n- `dashboards/finance_overview_001` - If focused on financial accounting\n- Simple status cards - For single-metric displays\n- `special/data-table-advanced` - For raw data exploration without aggregation\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many metrics cause paralysis (limit to 6-8 key metrics)\n- Unclear comparison context (always specify \"vs yesterday\", \"vs target\")\n- Missing time period selector (users need to control timeframe)\n- Small charts hard to interpret (ensure sufficient size/contrast)\n- Insights without action (link observations to actionable items)\n\n**Conversion optimization:**\n- Group related metrics logically (revenue/financial, growth/acquisition, engagement)\n- Use consistent trend indicators (↗ up, ↘ down, → flat)\n- Show percentage AND absolute changes (+$1,200 / +18.3%)\n- Color-code positive/negative but don't rely on color alone\n- Include goal/target comparison to show progress\n- Provide \"last updated\" timestamp for data freshness\n- Add export/share functionality for reporting\n- Enable drill-down from summary to details\n- Support custom date range selection\n- Allow metric customization/personalization\n\n**Accessibility notes:**\n- Trend arrows should have text equivalents (\"up\", \"down\", \"flat\")\n- Chart data must be available in table format alternative\n- Color contrast sufficient for readability (especially red/green)\n- Metric labels clear and descriptive\n- Interactive elements (tabs, buttons) keyboard accessible\n- Screen reader announces metric values and changes\n- Loading states for async data updates\n- Error states when data unavailable\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "dashboards/data-comparison": "# Data Comparison Dashboard\n\n**ID:** `dashboards/data-comparison`\n**Category:** dashboards\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays side-by-side comparison of two or more items, time periods, or data sets with visual metrics, charts, and trend analysis for data-driven decision making and performance evaluation.\n\n**Use this pattern when user mentions:**\n- \"compare\", \"comparison dashboard\", \"side-by-side\"\n- \"A/B comparison\", \"before and after\", \"vs\", \"versus\"\n- \"compare data\", \"comparison view\", \"trend comparison\"\n- \"benchmark\", \"performance comparison\", \"data analysis\"\n- \"side by side\", \"compare metrics\", \"difference analysis\"\n\n**Common contexts:**\n- Analytics tools comparing time periods\n- A/B testing dashboards showing variants\n- Product comparison in admin panels\n- Team performance comparisons\n- Regional or segment comparisons\n- Before/after analysis dashboards\n\n**UX Tradeoffs:**\n- **Pro:** Side-by-side comparison highlights differences clearly\n- **Pro:** Visual bars/charts make relative sizes obvious\n- **Pro:** Trend comparisons show improvement or decline\n- **Pro:** Enables data-driven decisions between options\n- **Con:** Limited to 2-3 items before becoming cluttered\n- **Con:** Too many metrics create cognitive overload\n- **Con:** Requires consistent data structure for comparison\n- **Con:** Mobile screens constrain side-by-side layouts\n\n**Pairs well with:**\n- ANY dashboard pattern - Comparison tool for metrics\n- `shopping/advanced-product-comparison` - Product comparison extension\n- `dashboards/analytics_dashboard_001` - Compare time periods\n- `dashboards/sales-analytics` - Compare sales regions or teams\n- `special/data-table-advanced` - Drill into detailed comparisons\n\n**Variants available:**\n- **Minimal:** Two-way comparison with key metrics only (use for \"A/B comparison\" or \"before/after\")\n- **Standard:** Side-by-side with multiple dimensions (use for most comparisons)\n- **Comprehensive:** Multi-way comparison with trends and insights (use for \"detailed analysis\" or \"competitive benchmarking\")\n\n**Related patterns:**\n- Combine with any dashboard for comparative analysis\n- Instead of this, consider `special/data-table-advanced` if comparing many items (>3)\n\n---\n\n## Description\n\nData comparison dashboard displaying side-by-side metrics, performance indicators, and trend analysis for comparing two or more items across multiple dimensions. Shows quantitative differences with visual representations (charts, progress bars). Supports A/B testing results, time period comparisons (this month vs last month), product/option comparisons, team performance comparisons, or any two-way data analysis. Generic pattern adaptable to any comparison context.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version (Two-Way Comparison)\n\n```\n┌────────────────────────────────────┐\n│ Performance Comparison  [Filter]   │\n├────────────────────────────────────┤\n│                                    │\n│ Q4 2024 vs Q3 2024                 │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Q4 2023        Q3 2023         │ │\n│ │ $1.8M          $1.2M           │ │\n│ │ ↗ +50% growth                  │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Revenue Comparison                 │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Q4 2023  ████████████████      │ │\n│ │ $1.8M                          │ │\n│ │                                │ │\n│ │ Q3 2023  ████████░░░░░░░░      │ │\n│ │ $1.2M                          │ │\n│ │                                │ │\n│ │ Growth: +50% quarter over      │ │\n│ │ quarter                        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Key Metrics Comparison             │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │            Q3      Q4          │ │\n│ │ Revenue    $1.2M   $1.8M       │ │\n│ │ Customers   4.2K    5.1K       │ │\n│ │ Conversion  6.8%    8.2%       │ │\n│ │ Churn      2.1%     1.8%       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Winner Analysis                    │\n│                                    │\n│ > Q4 outperformed Q3 by 50%        │\n│   All key metrics improved         │\n│                                    │\n│ > Customer acquisition up 21%      │\n│   Marketing campaign effective     │\n│                                    │\n│ [──── Detailed Report ────]        │\n│                                    │\n├────────────────────────────────────┤\n│ [Compare] [Trends] [Export] [Share]│\n└────────────────────────────────────┘\n```\n\n### Minimal Variant (Simple A/B Comparison)\n\n```\n┌────────────────────────────────────┐\n│ A/B Test Results        [Filter]   │\n├────────────────────────────────────┤\n│                                    │\n│ Variant A vs Variant B             │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Variant A  Variant B           │ │\n│ │ 8.2%       12.5%               │ │\n│ │ Conversion Rate                │ │\n│ │                                │ │\n│ │ Winner: Variant B (+52%)       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Variant A  ████████░░░░  3,847     │\n│ Variant B  ████████████  5,892     │\n│                                    │\n│ [──── View Details ────]           │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (Multi-Way Comparison)\n\n```\n┌────────────────────────────────────┐\n│ Regional Comparison     [Export]   │\n├────────────────────────────────────┤\n│ [Q1] [Q2] [Q3] [Q4]                │\n│                                    │\n│ Performance by Region              │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │      North  Europe  APAC       │ │\n│ │ Rev  $1.8M  $850K   $420K      │ │\n│ │ Cust 5.1K   2.8K    1.2K       │ │\n│ │ Conv 8.2%   7.5%    6.9%       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Revenue Visualization              │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ North America                  │ │\n│ │ ████████████████████  $1.8M    │ │\n│ │                                │ │\n│ │ Europe                         │ │\n│ │ ██████████░░░░░░░░░  $850K     │ │\n│ │                                │ │\n│ │ APAC                           │ │\n│ │ █████░░░░░░░░░░░░░░  $420K     │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Growth Trends                      │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │        North                   │ │\n│ │      ██████                    │ │\n│ │    ████████████  ↗ +45%        │ │\n│ │                                │ │\n│ │        Europe                  │ │\n│ │      ████                      │ │\n│ │    ████████  ↗ +28%            │ │\n│ │                                │ │\n│ │        APAC                    │ │\n│ │      ██                        │ │\n│ │    ████  ↗ +12%                │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Insights                           │\n│                                    │\n│ > North America leads by 2.1x      │\n│   Highest conversion rate (8.2%)   │\n│                                    │\n│ > Europe growing fastest (+45% YoY)│\n│   Investment in local teams        │\n│                                    │\n│ > APAC needs attention             │\n│   Consider pricing adjustments     │\n│                                    │\n│ [──── Detailed Analysis ────]      │\n│                                    │\n├────────────────────────────────────┤\n│ [Compare] [Trends] [Export] [Team] │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ndashboard, data-comparison, side-by-side, A/B-testing, before-after, performance-comparison, benchmark, trend-comparison, metrics-comparison, analysis, versus, competitive-analysis\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need to compare Q4 performance against Q3 with revenue, customer count, and conversion rate side by side to see which quarter performed better\"\n\n**AI selects this pattern because:**\n- User mentioned \"compare\" and \"side by side\" (keyword matches)\n- Two time periods being compared (Q4 vs Q3)\n- Specific metrics listed for comparison (revenue, customers, conversion)\n- Standard variant appropriate for two-way quarterly comparison\n\n**AI generates:**\nStandard variant showing Q4 2023 ($1.8M) vs Q3 2023 ($1.2M) with +50% growth indicator, horizontal bar chart comparison showing relative sizes, key metrics table (Revenue, Customers, Conversion, Churn) for both quarters, and winner analysis highlighting Q4 outperformance\n\n**AI explains tradeoff:**\n- \"Comparison dashboard shows Q4 vs Q3 side-by-side making differences clear. Bar charts visualize relative performance. Metrics table enables direct number comparison. Growth percentage (+50%) quantifies improvement. Winner analysis summarizes insights. Trade-off: Limited to 2-3 items before becoming cluttered. Works best for comparing consistent data structures. Mobile requires vertical stacking of comparisons.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Comparison subjects** - Time periods, regions, products, teams, variants, campaigns, competitors\n2. **Metrics compared** - Revenue, users, conversion, engagement, performance, satisfaction, any KPIs\n3. **Visualization types** - Horizontal bars, side-by-side columns, line overlays, percentage differences\n4. **Difference indicators** - Percentage change, absolute difference, trend arrows, winner badges\n5. **Time ranges** - Day-over-day, week-over-week, month-over-month, year-over-year, custom periods\n\n**App-specific adaptations:**\n- **A/B testing:** Variant A vs B, conversion rates, statistical significance, confidence intervals\n- **E-commerce:** Product performance, category comparisons, seasonal trends, geographic sales\n- **SaaS:** Plan tiers, feature usage, customer segments, cohort analysis\n- **Marketing:** Campaign performance, channel effectiveness, ROI comparison, creative variations\n- **Operations:** Team performance, process efficiency, resource utilization, before/after improvements\n- **Finance:** Account comparisons, budget vs actual, forecast vs reality, investment options\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Secondary analysis screen from main dashboard\n- Comparison mode toggle in analytics tools\n- Report section showing competitive analysis\n\n**What comes before:**\n- Any dashboard pattern with \"Compare\" action\n- `dashboards/analytics_dashboard_001` - Main business metrics\n- `dashboards/sales-analytics` - Sales performance view\n- Selector for choosing items to compare\n\n**What comes after:**\n- Detailed view of winning/losing option\n- `special/data-table-advanced` - Drill into item-level data\n- Export/share comparison report\n- Action to optimize based on insights\n\n**Complete flow example:**\n`dashboards/analytics_dashboard_001` → [Compare Q3 vs Q4] → **Data Comparison Dashboard** → `special/data-table-advanced` (Q4 Transactions)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Only viewing single item without comparison (use standard dashboard)\n- Comparing many items (>3) simultaneously (use table or list view)\n- Data structures incompatible for comparison (use separate views)\n- Mobile-only app with limited horizontal space (use vertical cards instead)\n- Real-time monitoring more important than historical comparison\n\n**Use instead:**\n- `special/data-table-advanced` - For comparing many items (>3) in sortable table\n- `dashboards/analytics_dashboard_001` - For single time period view without comparison\n- Vertical card stack - For mobile-optimized comparisons\n- Overlay chart view - For time-series trend comparisons\n- Scorecard view - For simple metric comparison without visuals\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many metrics compared overwhelm users (limit to 5-7 key metrics)\n- Inconsistent data makes comparison meaningless (validate data compatibility)\n- Missing context about why comparing (explain comparison purpose)\n- Unclear winner determination (highlight best performer)\n- No action after comparison (provide next steps)\n\n**Conversion optimization:**\n- Highlight percentage differences prominently (+50%, -12%)\n- Use visual indicators (↗ ↘ → ✓ !) for quick scanning\n- Show clear winner with badge or highlight\n- Provide insights about what drove differences\n- Enable quick date/item switcher for different comparisons\n- Show statistical significance for A/B tests\n- Include \"Apply insights\" or \"Optimize\" action\n- Allow export for external reporting\n- Support custom metric selection\n- Remember user's comparison preferences\n\n**Accessibility notes:**\n- Bar charts have data table alternative\n- Color not sole indicator of better/worse (use arrows/labels)\n- Screen readers announce comparison subjects clearly\n- Percentage changes announced with context\n- Keyboard navigation between compared items\n- Focus indicators on interactive comparison controls\n- Loading states while fetching comparison data\n- Clear labels for which item is which (A/B, Q3/Q4)\n- High contrast for difference indicators\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "dashboards/finance_overview_001": "# Personal Finance Overview Dashboard\n\n**ID:** `dashboards/finance_overview_001`\n**Category:** dashboards\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays personal financial overview including account balances, recent transactions, spending by category, budget tracking, and monthly financial summaries for personal finance and banking applications.\n\n**Use this pattern when user mentions:**\n- \"finance dashboard\", \"money overview\", \"financial summary\"\n- \"account balances\", \"bank dashboard\", \"spending tracker\"\n- \"budget overview\", \"expense tracking\", \"financial health\"\n- \"personal finance\", \"money management\", \"account summary\"\n- \"banking app dashboard\", \"wallet overview\", \"cash flow\"\n\n**Common contexts:**\n- Personal finance apps tracking spending\n- Banking apps showing account overview\n- Budgeting tools with category breakdown\n- Investment platforms with portfolio view\n- Expense tracking apps\n- Digital wallet applications\n\n**UX Tradeoffs:**\n- **Pro:** Complete financial picture at a glance\n- **Pro:** Category breakdown reveals spending patterns\n- **Pro:** Budget progress prevents overspending\n- **Pro:** Recent transactions provide quick verification\n- **Con:** Sensitive financial data requires strong security\n- **Con:** Multiple accounts create visual complexity\n- **Con:** Real-time sync needed across institutions\n- **Con:** Too much detail may overwhelm casual users\n\n**Pairs well with:**\n- `forms/payment_form` - Making payments or transfers\n- `shopping/payment` - Purchase checkout integration\n- `settings/privacy_settings` - Financial data privacy controls\n- `special/data-table-advanced` - Detailed transaction history\n- `dashboards/analytics_dashboard_001` - Business finance for freelancers\n- `authentication/two-factor-auth` - Enhanced security for financial access\n\n**Variants available:**\n- **Minimal:** Simple balance sheet with total worth (use for \"quick glance\" or \"widget view\")\n- **Standard:** Balances, spending, budget, recent transactions (use for most personal finance apps)\n- **Comprehensive:** Full financial dashboard with investments, goals, trends (use for \"financial planning\" or \"wealth management\")\n\n**Related patterns:**\n- Instead of this, consider `dashboards/analytics_dashboard_001` if business/company finance not personal\n- Instead of this, consider `special/data-table-advanced` if transaction list more important than overview\n- Combine with `forms/payment_form` for bill pay and money transfer features\n\n---\n\n## Description\n\nPersonal finance dashboard displaying account balances (checking, savings, credit cards), monthly spending breakdown by category, budget progress tracking, and recent transaction history. Shows net worth summary with trend indicators. Includes spending insights and category visualizations. Designed for individuals managing personal finances, tracking budgets, and monitoring financial health across multiple accounts.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ Financial Overview      [Menu]     │\n├────────────────────────────────────┤\n│                                    │\n│ Net Worth                          │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Total Balance                  │ │\n│ │ $48,573.28                     │ │\n│ │ ↗ +$2,847 this month           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Accounts                           │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Checking                       │ │\n│ │ $5,247.92                      │ │\n│ │ Available balance              │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Savings                        │ │\n│ │ $24,850.15                     │ │\n│ │ ↗ +$1,200 this month           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Credit Card                    │ │\n│ │ -$2,524.79 balance due         │ │\n│ │ Payment due: Dec 15            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Monthly Budget                     │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ $2,847 spent of $3,500         │ │\n│ │ [████████████████░░░░] 81%     │ │\n│ │ $653 remaining                 │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Top Spending Categories            │\n│                                    │\n│ Housing    $1,850  [████████]      │\n│ Food         $485  [███░░░░░]      │\n│ Transport    $312  [██░░░░░░]      │\n│                                    │\n│ Recent Transactions                │\n│                                    │\n│ > Whole Foods    -$127.45  Today   │\n│ > Salary Deposit +$4,250.00  1d    │\n│ > Mortgage       -$1,850.00  2d    │\n│                                    │\n│ [──── View All Transactions ────]  │\n│                                    │\n├────────────────────────────────────┤\n│ [Home] [Accounts] [Budget] [Goals] │\n└────────────────────────────────────┘\n```\n\n### Minimal Variant (Simple Balance Sheet)\n\n```\n┌────────────────────────────────────┐\n│ My Money                [Menu]     │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Total Balance                  │ │\n│ │ $48,573.28                     │ │\n│ │ ↗ +5.8% this month             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Checking      $5,247.92            │\n│ Savings      $24,850.15            │\n│ Investments  $21,000.00            │\n│ Credit       -$2,524.79            │\n│                                    │\n│ [──── View Details ────]           │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (Wealth Management)\n\n```\n┌────────────────────────────────────┐\n│ Financial Dashboard     [Export]   │\n├────────────────────────────────────┤\n│ [Overview] [Accounts] [Investments]│\n│                                    │\n│ Net Worth Trend                    │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Current: $48,573               │ │\n│ │        ████                    │ │\n│ │      ██████                    │ │\n│ │    ████████████                │ │\n│ │ J  F  M  A  M  J               │ │\n│ │ ↗ +$12,847 YTD (+36%)          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Assets                             │\n│ ┌────────────────────────────────┐ │\n│ │ Cash & Savings   $30,098       │ │\n│ │ Investments      $67,329       │ │\n│ │ Real Estate     $385,000       │ │\n│ │ Total Assets    $482,427       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Liabilities                        │\n│ ┌────────────────────────────────┐ │\n│ │ Credit Cards      $2,525       │ │\n│ │ Mortgage        $285,000       │ │\n│ │ Total Debt      $287,525       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Monthly Cash Flow                  │\n│ ┌────────────────────────────────┐ │\n│ │ Income    +$6,500              │ │\n│ │ Expenses  -$3,847              │ │\n│ │ Savings   +$2,653              │ │\n│ │ Savings Rate: 41%              │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Spending by Category               │\n│ ┌────────────────────────────────┐ │\n│ │ Housing      48%  [████████]   │ │\n│ │ Food & Dining 13% [██░░░░░░]   │ │\n│ │ Transport     8%  [█░░░░░░░]   │ │\n│ │ Shopping      6%  [█░░░░░░░]   │ │\n│ │ Other        25%  [███░░░░░]   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Financial Goals                    │\n│ ┌────────────────────────────────┐ │\n│ │ Emergency Fund  [████████]     │ │\n│ │ $24,850 of $30,000  83%        │ │\n│ │                                │ │\n│ │ House Down Payment [███░░░]    │ │\n│ │ $15,000 of $50,000  30%        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── Detailed Reports ────]       │\n│                                    │\n├────────────────────────────────────┤\n│ [Overview] [Budget] [Goals] [Trend]│\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ndashboard, personal-finance, banking, budget-tracking, expense-tracking, account-balance, spending-categories, financial-overview, money-management, cash-flow, net-worth, transactions\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a finance dashboard for my personal banking app showing account balances, monthly spending by category, and budget progress\"\n\n**AI selects this pattern because:**\n- User mentioned \"finance dashboard\" and \"banking app\" (keyword matches)\n- Specific requirements: account balances, spending categories, budget (personal finance metrics)\n- Personal context not business (individual money management)\n- Standard variant appropriate for personal finance apps\n\n**AI generates:**\nStandard variant with net worth summary ($48,573, ↗ +$2,847), account cards (Checking: $5,247, Savings: $24,850, Credit Card: -$2,525 due Dec 15), monthly budget progress bar (81% used, $653 remaining), top spending categories (Housing, Food, Transport), and recent transactions with amounts and dates\n\n**AI explains tradeoff:**\n- \"Finance dashboard provides complete financial picture with all accounts, spending breakdown, and budget tracking. Account cards show balances at a glance. Category bars reveal spending patterns. Budget progress prevents overspending. Recent transactions enable quick verification. Trade-off: Sensitive data requires security (PIN, biometric, 2FA). Multiple accounts add complexity. Real-time sync with banks needed. Works best for users actively managing budgets and tracking expenses.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Account types** - Checking, savings, credit cards, loans, investments, crypto wallets\n2. **Time periods** - Daily balance, This month, This year, YTD, Custom date range\n3. **Spending categories** - Housing, food, transport, entertainment, shopping (customizable)\n4. **Budget tracking** - Overall budget, per-category budgets, savings goals, debt payoff\n5. **Metrics displayed** - Net worth, cash flow, savings rate, debt-to-income, investment returns\n\n**App-specific adaptations:**\n- **Traditional banking:** Account balances, bill pay, transfers, credit card payments, loan info\n- **Budgeting apps:** Category spending, budget alerts, savings challenges, spending insights\n- **Investment platforms:** Portfolio value, asset allocation, market performance, gains/losses\n- **Crypto wallets:** Coin balances, portfolio diversity, market trends, transaction fees\n- **Expense tracking:** Receipt scanning, merchant categorization, tax deductions, business expenses\n- **Financial planning:** Net worth tracking, retirement projections, goal progress, financial health score\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary landing screen after login for banking/finance apps\n- Main dashboard for budget tracking tools\n- Overview screen for wealth management platforms\n\n**What comes before:**\n- `authentication/login` - User authentication\n- `authentication/two-factor-auth` - Enhanced security for financial access\n- `authentication/biometric-auth` - Quick app unlock\n\n**What comes after:**\n- Individual account detail view (checking, savings detail)\n- `special/data-table-advanced` - Full transaction history with search/filter\n- `forms/payment_form` - Transfer money, pay bills, send payments\n- Budget detail screen showing category breakdown\n- Investment portfolio detail with holdings\n\n**Complete flow example:**\n`authentication/biometric-auth` → **Finance Overview Dashboard** → Checking Account Detail → `special/data-table-advanced` (Transactions)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Business/company accounting not personal finance (use business dashboard)\n- Simple expense tracker without accounts (use list view)\n- Investment-only focus without banking (use portfolio dashboard)\n- Single account app (use account detail view)\n- Cryptocurrency-only wallet (use crypto-specific dashboard)\n\n**Use instead:**\n- `dashboards/analytics_dashboard_001` - For business finance and company accounting\n- `special/data-table-advanced` - If transaction list is primary interface\n- Investment portfolio dashboard - For investment-focused apps\n- Simple expense list - For basic spending tracking without accounts\n- Crypto wallet dashboard - For cryptocurrency-specific interfaces\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Sensitive data creates security concerns (require authentication)\n- Multiple institution syncing can fail (show sync status/errors)\n- Category assignment ambiguity (provide easy recategorization)\n- Overwhelming data for casual users (offer simplified view toggle)\n- Negative balances create anxiety (provide context and solutions)\n\n**Conversion optimization:**\n- Show net worth prominently for positive reinforcement\n- Use trend indicators (↗ ↘) to show progress\n- Highlight budget overspending early with [!] alerts\n- Provide quick actions (transfer, pay bill) in header\n- Show savings goals to motivate good habits\n- Use positive language for spending insights\n- Enable one-tap account refresh for latest data\n- Provide spending insights (\"You spent 15% less on dining this month\")\n- Link directly to bill pay from due date warnings\n- Show progress toward financial goals\n\n**Accessibility notes:**\n- All account balances announced by screen readers\n- Color not sole indicator of negative balances (use \"-\" prefix)\n- Budget progress bars announce percentage\n- Transaction list keyboard navigable\n- Currency values in semantic format ($1,234.56)\n- Spending categories with clear labels\n- Secure input for sensitive operations\n- Loading states for account sync\n- Error messages actionable (\"Tap to reconnect account\")\n- High contrast for financial figures\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "dashboards/fitness_dashboard": "# Fitness Tracking Dashboard\n\n**ID:** `dashboards/fitness_dashboard`\n**Category:** dashboards\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays fitness and activity metrics including steps, workouts, calories, active minutes, and progress toward fitness goals for health and fitness applications.\n\n**Use this pattern when user mentions:**\n- \"fitness dashboard\", \"activity tracking\", \"workout summary\"\n- \"steps counter\", \"calories burned\", \"exercise tracking\"\n- \"fitness goals\", \"health metrics\", \"activity overview\"\n- \"workout dashboard\", \"fitness progress\", \"daily activity\"\n- \"training summary\", \"exercise goals\", \"fitness tracker\"\n\n**Common contexts:**\n- Fitness apps tracking workouts and activity\n- Health platforms monitoring daily movement\n- Wearable device companion apps\n- Gym and training apps with progress tracking\n- Wellness platforms with activity goals\n- Sports and exercise tracking applications\n\n**UX Tradeoffs:**\n- **Pro:** Motivates continued activity through progress visibility\n- **Pro:** Goal tracking provides clear targets and achievements\n- **Pro:** Trends show improvement over time\n- **Pro:** Gamification elements (streaks, badges) increase engagement\n- **Con:** Too many metrics can overwhelm casual users\n- **Con:** Requires device/manual input for accuracy\n- **Con:** Comparison features may demotivate some users\n- **Con:** Wearable sync issues create data gaps\n\n**Pairs well with:**\n- `dashboards/health-metrics` - Medical health data integration\n- `forms/workout-detail` - Logging individual workout sessions\n- `social/feed` - Sharing achievements with friends\n- `settings/notification-settings` - Workout reminders and goals\n- `special/achievement-unlock` - Milestone celebrations\n\n**Variants available:**\n- **Minimal:** Daily summary with key metrics only (use for \"quick glance\" or \"widget view\")\n- **Standard:** Daily activity plus weekly progress and recent workouts (use for most fitness apps)\n- **Comprehensive:** Full analytics with trends, goals, categories, insights (use for \"serious athletes\" or \"detailed tracking\")\n\n**Related patterns:**\n- Instead of this, consider `dashboards/health-metrics` if medical vitals more important than fitness\n- Combine with `social/feed` for fitness social features and challenges\n\n---\n\n## Description\n\nFitness dashboard displaying daily activity metrics (steps, active minutes, calories), workout history, goal progress tracking, and weekly trends. Shows achievements and streaks to motivate continued activity. Includes recent workout summaries and exercise categories. Designed for fitness enthusiasts tracking progress, achieving goals, and maintaining healthy habits through activity monitoring.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ Fitness Dashboard       [Goals]    │\n├────────────────────────────────────┤\n│                                    │\n│ Today's Activity                   │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Steps      [████████░░] 8,247  │ │\n│ │ Goal: 10,000  82% complete     │ │\n│ │ 1,753 steps to go              │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Active Minutes        42 min   │ │\n│ │ [██████████████░░░░░] 70%      │ │\n│ │ Goal: 60 min daily             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Calories Burned      847 cal   │ │\n│ │ ↗ +12% from yesterday          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Weekly Progress                    │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │       ████                     │ │\n│ │     ██████                     │ │\n│ │   ████████████                 │ │\n│ │ M  T  W  T  F  S  S            │ │\n│ │ 5 of 7 days active             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Recent Workouts                    │\n│                                    │\n│ > Running  5.2 km  28 min  [@]     │\n│   This morning                     │\n│                                    │\n│ > Strength Training  45 min  [@]   │\n│   Yesterday                        │\n│                                    │\n│ > Yoga  30 min                     │\n│   2 days ago                       │\n│                                    │\n│ [──── View All Workouts ────]      │\n│                                    │\n├────────────────────────────────────┤\n│ [Today] [Week] [Stats] [Workouts]  │\n└────────────────────────────────────┘\n```\n\n### Minimal Variant (Daily Summary)\n\n```\n┌────────────────────────────────────┐\n│ Daily Activity          [Menu]     │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Steps  8,247  [████████░░]     │ │\n│ │ Goal: 10,000  82%              │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Active  42 min  [██████░░░]    │ │\n│ │ Goal: 60 min  70%              │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Calories  847  ↗ +12%          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── View Details ────]           │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (Athlete Analytics)\n\n```\n┌────────────────────────────────────┐\n│ Fitness Analytics       [Export]   │\n├────────────────────────────────────┤\n│ [Today] [Week] [Month] [Year]      │\n│                                    │\n│ Performance Summary                │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Steps        │ │ Active Time   │ │\n│ │ 8,247        │ │ 42 min        │ │\n│ │ [████████]   │ │ [██████░░]    │ │\n│ │ 82%          │ │ 70%           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Calories     │ │ Heart Rate    │ │\n│ │ 847          │ │ 72 bpm        │ │\n│ │ ↗ +12%       │ │ Resting       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Weekly Activity Trend              │\n│ ┌────────────────────────────────┐ │\n│ │        ████                    │ │\n│ │      ██████                    │ │\n│ │    ████████████                │ │\n│ │ M  T  W  T  F  S  S            │ │\n│ │ 71K steps this week            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Workout Breakdown                  │\n│ ┌────────────────────────────────┐ │\n│ │ Cardio       45%  [████████]   │ │\n│ │ Strength     30%  [█████░░░]   │ │\n│ │ Flexibility  15%  [██░░░░░░]   │ │\n│ │ Sports       10%  [█░░░░░░░]   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Achievements                       │\n│ ┌────────────────────────────────┐ │\n│ │ [@] 7-day streak active        │ │\n│ │ [@] 100K steps milestone       │ │\n│ │ [@] Personal best: 15K steps   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Insights                           │\n│ > You're 24% more active this      │\n│   week compared to last week       │\n│                                    │\n│ > Best workout time: Mornings      │\n│   (6-8 AM)                         │\n│                                    │\n│ [──── Detailed Report ────]        │\n│                                    │\n├────────────────────────────────────┤\n│ [Overview] [Workouts] [Goals] [Soc]│\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ndashboard, fitness-tracking, activity-metrics, workouts, steps-counter, calories-burned, exercise-goals, health-wellness, progress-tracking, daily-activity, fitness-goals, workout-history\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a fitness dashboard showing daily steps, active minutes, calories burned, and recent workouts with progress bars toward goals\"\n\n**AI selects this pattern because:**\n- User mentioned \"fitness dashboard\" (keyword match)\n- Specific metrics: steps, active minutes, calories (fitness tracking)\n- \"Progress bars toward goals\" indicates goal-oriented design\n- \"Recent workouts\" suggests workout history integration\n- Standard variant appropriate for fitness app\n\n**AI generates:**\nStandard variant with today's activity showing steps (8,247/10,000, 82% progress bar), active minutes (42/60 min, 70% progress), calories burned (847 cal, ↗ +12%), weekly activity trend chart (M-S bar graph, 5 of 7 days active), and recent workouts list (Running 5.2km 28min, Strength Training 45min, Yoga 30min) with completion badges\n\n**AI explains tradeoff:**\n- \"Fitness dashboard motivates activity through visual progress toward daily goals. Steps and active time progress bars show completion percentage. Calories with trend indicator (↗ +12%) shows improvement. Weekly chart reveals consistency patterns. Recent workouts with [@] badges gamify achievements. Trade-off: Requires device sync or manual entry for accuracy. Too many metrics may overwhelm casual users. Works best with wearable integration for automatic tracking.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Metrics tracked** - Steps, distance, calories, active minutes, heart rate, workouts, sleep\n2. **Goals** - Daily step goal, weekly workout target, monthly distance, calorie burn, active days\n3. **Workout types** - Cardio, strength, flexibility, sports, custom categories\n4. **Time periods** - Today, This week, This month, This year, All time\n5. **Gamification** - Streaks, badges, achievements, challenges, leaderboards\n\n**App-specific adaptations:**\n- **Running apps:** Distance, pace, splits, routes, personal bests, race training plans\n- **Gym apps:** Strength progress, weights lifted, sets/reps, muscle groups, workout plans\n- **Wearable apps:** Heart rate zones, VO2 max, recovery time, sleep quality, stress levels\n- **Wellness apps:** Mindfulness minutes, water intake, nutrition, weight tracking, habits\n- **Sports apps:** Sport-specific metrics (cycling power, swimming laps, tennis serves)\n- **Challenge apps:** Team challenges, friend competitions, global leaderboards, rewards\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary landing screen for fitness apps\n- Main dashboard after wearable sync\n- Home screen for health platforms\n\n**What comes before:**\n- `authentication/login` - User authentication\n- `special/onboarding-welcome` - Initial goal setting\n- Wearable device sync/pairing\n\n**What comes after:**\n- `forms/workout-detail` - Log individual workout\n- Workout history list with filtering\n- `dashboards/health-metrics` - Detailed health vitals\n- `social/feed` - Share achievements with friends\n- Goal settings and customization\n\n**Complete flow example:**\n`authentication/login` → **Fitness Dashboard** → [Log Workout] → `forms/workout-detail` → Back to dashboard with updated stats\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Medical health vitals more important than fitness (use health dashboard)\n- Simple step counter without goals (use minimal widget)\n- Workout logging primary focus not overview (use workout list)\n- Nutrition tracking primary feature (use nutrition dashboard)\n- Not fitness-focused app (use appropriate domain dashboard)\n\n**Use instead:**\n- `dashboards/health-metrics` - For medical health vitals and conditions\n- Simple step counter widget - For basic activity tracking\n- Workout log list view - If detailed session logging primary\n- Nutrition dashboard - For diet and meal tracking focus\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Missing wearable sync frustrates users (show sync status clearly)\n- Unrealistic goals demotivate (allow goal adjustment easily)\n- Too many metrics create analysis paralysis (prioritize key metrics)\n- Lack of context for numbers (explain what's good/normal)\n- No celebration of achievements (add motivational messages)\n\n**Conversion optimization:**\n- Show progress visually with bars and percentages\n- Use encouraging language (\"Almost there! 1,753 steps to go\")\n- Highlight streaks and consistency (\"5 of 7 days active\")\n- Provide context with trends (↗ +12% from yesterday)\n- Celebrate achievements with badges [@]\n- Enable quick workout logging from dashboard\n- Show weekly patterns to build habits\n- Include social proof from friends/challenges\n- Provide actionable insights (\"Best workout time: Mornings\")\n- Allow easy goal adjustment when too easy/hard\n\n**Accessibility notes:**\n- Progress bars announce percentage to screen readers\n- Goal completion status announced clearly\n- Workout list keyboard navigable\n- Metric values with units announced (\"8,247 steps\")\n- Color not sole indicator of goal achievement\n- Achievement badges have text descriptions\n- Loading states during device sync\n- Clear error messages for sync failures\n- High contrast for progress indicators\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "dashboards/health-metrics": "# Health Metrics Dashboard\n\n**ID:** `dashboards/health-metrics`\n**Category:** dashboards\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays health and wellness metrics including heart rate, blood pressure, sleep quality, medications, and vital signs for medical and health monitoring applications.\n\n**Use this pattern when user mentions:**\n- \"health dashboard\", \"vital signs\", \"health metrics\"\n- \"heart rate monitor\", \"blood pressure tracker\", \"medical dashboard\"\n- \"wellness overview\", \"health tracking\", \"vital statistics\"\n- \"medical records\", \"patient dashboard\", \"health monitoring\"\n- \"chronic condition tracking\", \"medication tracker\"\n\n**Common contexts:**\n- Medical apps tracking patient vitals\n- Health monitoring platforms for chronic conditions\n- Wellness apps with health data\n- Wearable health device apps\n- Telemedicine patient dashboards\n- Personal health record systems\n\n**UX Tradeoffs:**\n- **Pro:** Medical-grade tracking for chronic condition management\n- **Pro:** Vital sign trends identify health issues early\n- **Pro:** Medication reminders improve compliance\n- **Pro:** Appointment tracking reduces missed visits\n- **Con:** Medical data requires strict privacy and security\n- **Con:** Complex metrics may confuse non-medical users\n- **Con:** False alerts create unnecessary anxiety\n- **Con:** Device accuracy varies affecting reliability\n\n**Pairs well with:**\n- `dashboards/fitness_dashboard` - Physical activity integration\n- `settings/privacy_settings` - Health data privacy controls\n- `special/notifications-center` - Medication and appointment reminders\n- `authentication/two-factor-auth` - Enhanced security for medical data\n- `forms/medical-history` - Medical information input\n\n**Variants available:**\n- **Minimal:** Essential vitals only (heart rate, blood pressure) for daily monitoring\n- **Standard:** Vitals, medications, appointments, sleep (use for most health apps)\n- **Comprehensive:** Full medical dashboard with trends, alerts, records (use for \"chronic care\" or \"patient monitoring\")\n\n**Related patterns:**\n- Instead of this, consider `dashboards/fitness_dashboard` if fitness/activity more important than medical vitals\n- Combine with telemedicine video consultation patterns for complete patient care\n\n---\n\n## Description\n\nHealth metrics dashboard displaying vital signs (heart rate, blood pressure, temperature), health trends over time, medication schedules, and upcoming appointments. Shows health score summaries and alerts for abnormal readings. Includes sleep quality tracking and wellness recommendations. Designed for individuals monitoring health conditions, managing medications, and tracking wellness metrics with medical accuracy.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ Health Overview         [Menu]     │\n├────────────────────────────────────┤\n│                                    │\n│ Today's Vitals                     │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Heart Rate          72 bpm     │ │\n│ │ [OK] Resting                   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Blood Pressure    120/80       │ │\n│ │ [OK] Normal range              │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Sleep Last Night   7.5 hrs     │ │\n│ │ [OK] Quality: Good             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Medications Due Today              │\n│                                    │\n│ > Lisinopril 10mg                  │\n│   Morning - 8:00 AM  [Taken]       │\n│                                    │\n│ > Metformin 500mg                  │\n│   Dinner - 6:00 PM  [Upcoming]     │\n│                                    │\n│ Upcoming Appointments              │\n│                                    │\n│ > Dr. Smith - Checkup              │\n│   Tomorrow 2:00 PM                 │\n│                                    │\n│ Weekly Trends                      │\n│                                    │\n│ Steps  [████████░░] 8.2K avg       │\n│ Sleep  [██████████] 7.5 hrs avg    │\n│ HR     [████████░░] 72 bpm avg     │\n│                                    │\n│ [──── View Full Report ────]       │\n│                                    │\n├────────────────────────────────────┤\n│ [Overview] [Vitals] [Meds] [Reports│\n└────────────────────────────────────┘\n```\n\n### Minimal Variant (Essential Vitals)\n\n```\n┌────────────────────────────────────┐\n│ Health Check            [Menu]     │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Heart Rate   72 bpm  [OK]      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ BP  120/80 mmHg  [OK]          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Temp  98.6°F  [OK]             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── Add Reading ────]            │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (Medical Monitoring)\n\n```\n┌────────────────────────────────────┐\n│ Patient Dashboard       [Export]   │\n├────────────────────────────────────┤\n│ [Today] [Week] [Month] [Records]   │\n│                                    │\n│ Vital Signs Status                 │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Heart Rate   │ │ Blood Press.  │ │\n│ │ 72 bpm       │ │ 120/80        │ │\n│ │ [OK] Normal  │ │ [OK] Normal   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Temp         │ │ Blood Gluc.   │ │\n│ │ 98.6°F       │ │ 95 mg/dL      │ │\n│ │ [OK] Normal  │ │ [OK] Normal   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Heart Rate Trend (7 days)          │\n│ ┌────────────────────────────────┐ │\n│ │ 90 ┌──────────────────────     │ │\n│ │ 80 │     ────────────          │ │\n│ │ 70 │ ────────                  │ │\n│ │ 60 └─────────────────────      │ │\n│ │    M  T  W  T  F  S  S         │ │\n│ │ Avg: 72 bpm  Normal range      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Medication Schedule                │\n│ ┌────────────────────────────────┐ │\n│ │ Morning (8:00 AM)              │ │\n│ │ [@] Lisinopril 10mg  Taken     │ │\n│ │ [@] Aspirin 81mg  Taken        │ │\n│ │                                │ │\n│ │ Evening (6:00 PM)              │ │\n│ │ [ ] Metformin 500mg            │ │\n│ │ [ ] Vitamin D 2000 IU          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Health Score: 85/100 [OK]          │\n│ ┌────────────────────────────────┐ │\n│ │ [████████████████░░░░] 85%     │ │\n│ │ Good overall health            │ │\n│ │                                │ │\n│ │ Recommendations:               │ │\n│ │ • Increase daily activity      │ │\n│ │ • Monitor BP weekly            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── Contact Doctor ────]         │\n│                                    │\n├────────────────────────────────────┤\n│ [Health] [Meds] [Appts] [Records]  │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ndashboard, health-metrics, vital-signs, heart-rate, blood-pressure, medical-tracking, wellness-monitoring, health-dashboard, patient-data, chronic-care, medication-tracking, appointments\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a health dashboard for tracking heart rate, blood pressure, medications, and upcoming doctor appointments for chronic condition management\"\n\n**AI selects this pattern because:**\n- User mentioned \"health dashboard\" (keyword match)\n- Specific vitals: heart rate, blood pressure (medical metrics)\n- \"Medications\" and \"doctor appointments\" indicate medical focus\n- \"Chronic condition management\" suggests ongoing monitoring\n- Standard variant appropriate for health monitoring\n\n**AI generates:**\nStandard variant with today's vitals (Heart Rate: 72 bpm [OK] Resting, BP: 120/80 [OK] Normal, Sleep: 7.5 hrs [OK] Good quality), medications due today (Lisinopril 8 AM [Taken], Metformin 6 PM [Upcoming]), upcoming appointments (Dr. Smith checkup tomorrow 2 PM), and weekly trends showing steps, sleep, heart rate averages\n\n**AI explains tradeoff:**\n- \"Health metrics dashboard provides medical-grade tracking for chronic conditions. Vitals with [OK] status indicators show at-a-glance health. Medication schedule prevents missed doses. Appointment reminders reduce no-shows. Weekly trends identify patterns needing attention. Trade-off: Medical data requires strict privacy controls. Device syncing needed for automatic readings. False alerts may cause anxiety. Best for chronic condition management, not casual wellness tracking.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Vitals tracked** - Heart rate, BP, temperature, glucose, oxygen saturation, weight, BMI\n2. **Time periods** - Real-time, Daily, Weekly, Monthly, 3-month trends\n3. **Medication types** - Prescriptions, supplements, vitamins, as-needed medications\n4. **Health conditions** - Diabetes, hypertension, cardiac, respiratory, chronic pain\n5. **Alert thresholds** - Custom ranges for abnormal readings per patient\n\n**App-specific adaptations:**\n- **Diabetes management:** Blood glucose, insulin doses, carb tracking, A1C trends\n- **Cardiac care:** Heart rate variability, blood pressure, EKG, cholesterol, exercise capacity\n- **Respiratory:** Oxygen saturation, peak flow, breathing rate, medication inhaler usage\n- **Chronic pain:** Pain levels, triggers, medication effectiveness, activity limitations\n- **Pregnancy:** Weight, blood pressure, fetal movement, contractions, appointments\n- **Elderly care:** Falls, medication adherence, cognitive assessments, caregiver notes\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary dashboard for health monitoring apps\n- Patient portal home screen\n- Landing screen after device sync\n\n**What comes before:**\n- `authentication/login` - User authentication with 2FA\n- `authentication/biometric-auth` - Secure health data access\n- Device pairing/sync for wearables\n\n**What comes after:**\n- Individual vital detail view with full history\n- `forms/medical-history` - Update health information\n- Medication detail and refill request\n- Appointment scheduling interface\n- Doctor messaging/telemedicine consultation\n\n**Complete flow example:**\n`authentication/two-factor-auth` → **Health Metrics Dashboard** → Heart Rate Detail View → Historical Trends → Share with Doctor\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Fitness/activity more important than medical vitals (use fitness dashboard)\n- Simple step tracking without medical data (use fitness widget)\n- Emergency medical situation (use emergency protocols)\n- Children's health requires parental controls (use family health pattern)\n- Mental health focus not physical health (use mental wellness dashboard)\n\n**Use instead:**\n- `dashboards/fitness_dashboard` - For fitness and activity tracking without medical focus\n- Emergency medical pattern - For acute situations requiring immediate care\n- Mental health dashboard - For mood tracking, therapy, wellness\n- Family health dashboard - For multiple family members and parental controls\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Medical terminology confuses non-medical users (provide plain language explanations)\n- Too many alerts create alarm fatigue (intelligent thresholds)\n- Manual entry burden for vitals (prioritize device integration)\n- Privacy concerns with sensitive data (clear privacy controls)\n- Complicated medication schedules (simplify with reminders)\n\n**Conversion optimization:**\n- Use clear [OK] / [!] status indicators for vital signs\n- Show trends to contextualize single readings\n- Provide explanations for abnormal values\n- Include \"Contact Doctor\" action for concerning readings\n- Enable easy medication logging (checkboxes)\n- Show medication adherence streaks for motivation\n- Integrate calendar for appointments\n- Allow sharing data with healthcare providers\n- Provide health score for overall wellness snapshot\n- Include actionable recommendations\n\n**Accessibility notes:**\n- Vital signs announced with units and status\n- [OK] / [!] / [Warning] status has text and icons\n- Color not sole indicator of health status\n- Screen readers announce medication times and dosages\n- Appointment information fully accessible\n- Trend charts have data table alternatives\n- Emergency contact button prominent and accessible\n- High contrast for readability\n- Large text support for elderly users\n- Voice input for logging vitals\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "dashboards/performance-monitor": "# System Performance Monitor Dashboard\n\n**ID:** `dashboards/performance-monitor`\n**Category:** dashboards\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays system and application performance metrics including CPU usage, memory, network activity, error rates, and uptime for DevOps and system monitoring applications.\n\n**Use this pattern when user mentions:**\n- \"performance monitor\", \"system dashboard\", \"resource monitoring\"\n- \"CPU usage\", \"memory tracking\", \"network monitor\"\n- \"server health\", \"DevOps dashboard\", \"system metrics\"\n- \"application performance\", \"infrastructure monitoring\", \"uptime tracking\"\n- \"resource utilization\", \"system status\", \"monitoring dashboard\"\n\n**Common contexts:**\n- DevOps monitoring tools and platforms\n- Server administration dashboards\n- Application performance monitoring (APM)\n- System resource tracking applications\n- Infrastructure monitoring platforms\n- Technical operations dashboards\n\n**UX Tradeoffs:**\n- **Pro:** Real-time visibility into system health\n- **Pro:** Early detection of performance degradation\n- **Pro:** Resource utilization optimization\n- **Pro:** Historical trends identify patterns\n- **Con:** Technical metrics confuse non-technical users\n- **Con:** Too many alerts create noise and fatigue\n- **Con:** Real-time updates resource intensive\n- **Con:** Requires technical knowledge to interpret\n\n**Pairs well with:**\n- `dashboards/task-dashboard` - DevOps team task tracking\n- `dashboards/analytics_dashboard_001` - Business impact of performance\n- `special/data-table-advanced` - Detailed error logs and events\n- `special/notifications-center` - Performance alerts and incidents\n- `settings/team-management` - On-call rotation management\n\n**Variants available:**\n- **Minimal:** Key metrics only (CPU, memory, uptime) for quick status check\n- **Standard:** Resource metrics plus errors and recent events (use for most monitoring)\n- **Comprehensive:** Full system analytics with trends, alerts, detailed diagnostics (use for \"DevOps teams\" or \"production monitoring\")\n\n**Related patterns:**\n- Instead of this, consider `dashboards/analytics_dashboard_001` if business metrics more important\n- Combine with `dashboards/task-dashboard` for incident response tracking\n\n---\n\n## Description\n\nPerformance monitoring dashboard displaying system resource utilization (CPU, memory, disk, network), application health metrics, error rates, and uptime statistics. Shows real-time performance graphs and threshold alerts. Includes recent incidents and resource trends. Designed for DevOps engineers, system administrators, and technical teams monitoring application and infrastructure health to ensure reliability and performance.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ Performance Monitor     [Alerts]   │\n├────────────────────────────────────┤\n│                                    │\n│ System Resources                   │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ CPU Usage            68%       │ │\n│ │ [██████████████░░░░░░] [OK]    │ │\n│ │ 4 cores  2.8 GHz               │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Memory               12.4 GB   │ │\n│ │ [████████████████░░░░] 78%     │ │\n│ │ 16 GB total                    │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Network Traffic      42 Mbps   │ │\n│ │ ↑ 18 Mbps  ↓ 24 Mbps           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Application Health                 │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Uptime         14d 6h 23m      │ │\n│ │ [OK] 99.8% availability        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Error Rate         0.12%       │ │\n│ │ 47 errors last hour            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Recent Events                      │\n│                                    │\n│ > High CPU spike resolved          │\n│   15 minutes ago                   │\n│                                    │\n│ > Memory threshold exceeded        │\n│   2 hours ago  [Investigating]     │\n│                                    │\n│ [──── View Detailed Logs ────]     │\n│                                    │\n├────────────────────────────────────┤\n│ [Status] [Metrics] [Logs] [Alerts] │\n└────────────────────────────────────┘\n```\n\n### Minimal Variant (Quick Status)\n\n```\n┌────────────────────────────────────┐\n│ System Status           [Alerts]   │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ CPU     68%  [██████░░░]       │ │\n│ │ Memory  78%  [███████░░]       │ │\n│ │ Network 42 Mbps  [OK]          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Uptime  14d 6h  [OK]           │ │\n│ │ Errors  47/hr   [OK]           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── Details ────]                │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (DevOps Analytics)\n\n```\n┌────────────────────────────────────┐\n│ Infrastructure Monitor  [Export]   │\n├────────────────────────────────────┤\n│ [Live] [1h] [24h] [7d]             │\n│                                    │\n│ Resource Utilization               │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ CPU          │ │ Memory        │ │\n│ │ 68%          │ │ 12.4 GB       │ │\n│ │ [██████░░]   │ │ [███████░]    │ │\n│ │ [OK] Normal  │ │ [OK] 78%      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Disk I/O     │ │ Network       │ │\n│ │ 124 MB/s     │ │ 42 Mbps       │ │\n│ │ [████░░░░]   │ │ [████░░░░]    │ │\n│ │ [OK] Low     │ │ [OK] Normal   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ CPU Usage Trend (24h)              │\n│ ┌────────────────────────────────┐ │\n│ │ 100 ┌────────────────────      │ │\n│ │  75 │   ╱╲                     │ │\n│ │  50 │──╱──╲─────────────       │ │\n│ │  25 │╱                         │ │\n│ │   0 └────────────────────      │ │\n│ │     0  6  12 18 24 (hours)     │ │\n│ │ Peak: 92% at 14:23             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Application Metrics                │\n│ ┌────────────────────────────────┐ │\n│ │ Uptime       14d 6h 23m        │ │\n│ │ Availability 99.8%  [OK]       │ │\n│ │                                │ │\n│ │ Request Rate 2,847 req/min     │ │\n│ │ Latency      124ms avg         │ │\n│ │                                │ │\n│ │ Error Rate   0.12% (47/hr)     │ │\n│ │ 5XX Errors   12  [Warning]     │ │\n│ │ 4XX Errors   35  [OK]          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Active Alerts                      │\n│ ┌────────────────────────────────┐ │\n│ │ [!] High memory usage          │ │\n│ │     Threshold: 80%             │ │\n│ │     Action: Scale up           │ │\n│ │                                │ │\n│ │ [OK] All other metrics         │ │\n│ │      nominal                   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── Incident Response ────]      │\n│                                    │\n├────────────────────────────────────┤\n│ [Monitor] [Alerts] [Logs] [Metrics]│\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ndashboard, performance-monitoring, system-metrics, DevOps, CPU-usage, memory-monitoring, network-activity, server-health, uptime-tracking, resource-monitoring, application-performance, infrastructure\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a performance monitoring dashboard for my DevOps team showing CPU, memory, network usage, uptime, and error rates with real-time updates and alerts\"\n\n**AI selects this pattern because:**\n- User mentioned \"performance monitoring dashboard\" and \"DevOps\" (keyword matches)\n- Specific metrics: CPU, memory, network, uptime, error rates (system monitoring)\n- \"Real-time updates and alerts\" indicates live monitoring needs\n- Technical team context (DevOps) suggests comprehensive monitoring\n- Standard variant appropriate for operations monitoring\n\n**AI generates:**\nStandard variant with system resources (CPU: 68% [OK], Memory: 12.4GB/16GB 78%, Network: 42 Mbps ↑18 ↓24), application health (Uptime: 14d 6h 23m, 99.8% availability [OK], Error Rate: 0.12%, 47 errors/hour), and recent events (High CPU spike resolved 15min ago, Memory threshold exceeded 2h ago [Investigating])\n\n**AI explains tradeoff:**\n- \"Performance monitor provides real-time system health visibility for DevOps teams. Resource gauges show utilization with [OK] status indicators. Uptime and error metrics track reliability. Recent events log enables quick incident response. Trade-off: Technical metrics require DevOps knowledge to interpret. Real-time updates consume resources. Too many alerts create fatigue. Best for production monitoring, not end-user dashboards. Threshold tuning critical to reduce false positives.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Resources monitored** - CPU, memory, disk, network, GPU, containers, pods\n2. **Time periods** - Real-time, Last hour, 24 hours, 7 days, 30 days, Custom range\n3. **Application metrics** - Response time, throughput, error rates, queue depth, cache hit rate\n4. **Alert thresholds** - CPU > 80%, memory > 90%, error rate > 1%, custom per metric\n5. **Infrastructure scope** - Single server, cluster, microservices, multi-region, cloud services\n\n**App-specific adaptations:**\n- **Web applications:** Request rate, response time, error codes, session count, database connections\n- **Microservices:** Service mesh metrics, inter-service latency, circuit breaker status, pod health\n- **Databases:** Query performance, connection pool, cache hit rate, replication lag, lock waits\n- **Container orchestration:** Pod status, node health, resource requests/limits, deployment rollout\n- **Cloud infrastructure:** Auto-scaling events, load balancer health, CDN cache rate, cloud service costs\n- **Network monitoring:** Bandwidth utilization, packet loss, latency, DNS resolution time\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary dashboard for DevOps teams\n- Operations center main display\n- Landing screen for monitoring platforms\n\n**What comes before:**\n- `authentication/login` - Operator authentication\n- Alert notification leading to dashboard\n- Main navigation from infrastructure map\n\n**What comes after:**\n- `special/data-table-advanced` - Detailed error logs and events\n- Individual resource detail view (CPU graph, memory breakdown)\n- `dashboards/task-dashboard` - Incident tickets and response\n- Alert configuration and threshold management\n- Runbook and incident response procedures\n\n**Complete flow example:**\nAlert received → `authentication/login` → **Performance Monitor Dashboard** → CPU Detail View → `special/data-table-advanced` (Error Logs) → Create Incident Ticket\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Business metrics more important than technical (use business dashboard)\n- End-user audience not technical team (use appropriate domain dashboard)\n- Simple uptime check sufficient (use status page)\n- Application-specific metrics needed (use APM tool dashboard)\n- Network infrastructure focus (use network monitoring dashboard)\n\n**Use instead:**\n- `dashboards/analytics_dashboard_001` - For business metrics and KPIs\n- Status page pattern - For public uptime communication\n- APM dashboard - For application-specific performance (traces, profiling)\n- Network topology view - For infrastructure relationship visualization\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Technical jargon confuses non-DevOps users (provide glossary or tooltips)\n- Too many metrics overwhelm (prioritize critical indicators)\n- False alerts erode trust (tune thresholds carefully)\n- Lack of context for spikes (show correlated events)\n- No clear action items for issues (link to runbooks)\n\n**Conversion optimization:**\n- Use traffic light colors ([OK] green, [Warning] yellow, [Critical] red)\n- Show percentage utilization with progress bars\n- Provide historical context (vs yesterday, vs last week)\n- Include \"normal range\" indicators on gauges\n- Link metrics to root cause analysis tools\n- Enable quick filtering by time range\n- Show correlated metrics together (CPU spike + error rate increase)\n- Provide one-click incident creation\n- Include recent deployment markers on timelines\n- Allow custom dashboard layouts per team\n\n**Accessibility notes:**\n- [OK] / [Warning] / [Critical] status uses text + color\n- Screen readers announce metric values with units\n- Graphs have data table alternatives\n- Keyboard shortcuts for common actions (acknowledge alert, zoom time range)\n- High contrast mode for operations centers\n- Large text support for wall displays\n- Alert sounds optional (configurable)\n- Status announced when significantly changes\n- Loading states for real-time data updates\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "dashboards/sales-analytics": "# Sales Analytics Dashboard\n\n**ID:** `dashboards/sales-analytics`\n**Category:** dashboards\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays sales pipeline metrics, revenue performance, team achievements, and forecasts for sales-driven organizations and B2B applications.\n\n**Use this pattern when user mentions:**\n- \"sales dashboard\", \"sales analytics\", \"sales performance\"\n- \"revenue tracking\", \"sales pipeline\", \"deals\", \"quota\"\n- \"sales team\", \"rep performance\", \"sales metrics\"\n- \"forecast\", \"targets\", \"won/lost deals\", \"conversion rate\"\n- \"CRM dashboard\", \"sales reporting\", \"pipeline visibility\"\n\n**Common contexts:**\n- Sales CRM applications tracking deals and pipeline\n- B2B SaaS platforms monitoring customer acquisition\n- Enterprise apps requiring sales team performance views\n- Commission tracking and quota management systems\n- Sales operations needing forecast accuracy\n\n**UX Tradeoffs:**\n- **Pro:** Pipeline visibility helps prioritize high-value deals\n- **Pro:** Team performance metrics drive accountability\n- **Pro:** Forecast vs actual comparison enables planning\n- **Pro:** Regional breakdown identifies growth opportunities\n- **Con:** Sales-specific jargon excludes non-sales users\n- **Con:** Too many metrics can obscure key priorities\n- **Con:** Real-time updates expensive for large teams\n- **Con:** Sensitive data requires access controls\n\n**Pairs well with:**\n- `dashboards/analytics_dashboard_001` - Overall business metrics\n- `special/data-table-advanced` - Detailed deal list view\n- `dashboards/finance_overview_001` - Financial performance\n- `settings/team-management` - Sales team roster\n- `special/notifications-center` - Deal alerts and updates\n- `forms/contact-form` - Lead capture integration\n\n**Variants available:**\n- **Minimal:** Key metrics only - total revenue, quota, win rate (use for \"quick overview\" or \"executive summary\")\n- **Standard:** Metrics plus pipeline chart and regional breakdown (use for most sales dashboards)\n- **Comprehensive:** Full analytics with team performance, forecast, stage analysis (use for \"sales ops\" or \"detailed reporting\")\n\n**Related patterns:**\n- Instead of this, consider `dashboards/analytics_dashboard_001` if broader business metrics needed\n- Instead of this, consider `dashboards/task-dashboard` if focused on activities not revenue\n- Instead of this, consider `special/data-table-advanced` if detailed deal list more important than aggregates\n\n---\n\n## Description\n\nSales performance dashboard displaying revenue metrics, pipeline health, quota attainment, and regional breakdown. Shows current quarter performance against targets with trend analysis. Includes visual pipeline representation and team achievements. Designed for sales managers, reps, and leadership to track progress toward goals and identify opportunities.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ Sales Analytics         [Export]   │\n├────────────────────────────────────┤\n│                                    │\n│ Q4 Performance                     │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Total Revenue                  │ │\n│ │ $2.4M                          │ │\n│ │ ↗ +32.5% from last quarter     │ │\n│ │ Target: $2M [@] Exceeded       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Deals Closed    Win Rate       │ │\n│ │ 68             72%             │ │\n│ │ ↗ +15 deals    → -0.3%         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Monthly Trend                      │\n│ ┌────────────────────────────────┐ │\n│ │              ███               │ │\n│ │            █████               │ │\n│ │          ███████               │ │\n│ │      █████████████             │ │\n│ │    ███████████████             │ │\n│ │ ───────────────────────────    │ │\n│ │ Jan Feb Mar Apr May Jun        │ │\n│ │ Peak: June ($285K)             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Regional Breakdown                 │\n│ ┌────────────────────────────────┐ │\n│ │ North America  72%  ████████   │ │\n│ │ $1.7M                          │ │\n│ │                                │ │\n│ │ Europe         28%  ███        │ │\n│ │ $680K                          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── View Pipeline ────]          │\n│                                    │\n├────────────────────────────────────┤\n│ [Overview] [Trends] [Team] [Foreca]│\n└────────────────────────────────────┘\n```\n\n### Minimal Variant (Quick Overview)\n\n```\n┌────────────────────────────────────┐\n│ Sales Summary           [Export]   │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Revenue  $2.4M  ↗ +32.5%       │ │\n│ │ Target: $2M [@] 120%           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Deals    68     ↗ +15          │ │\n│ │ Win Rate: 72%   → -0.3%        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── Full Analytics ────]         │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (Sales Operations)\n\n```\n┌────────────────────────────────────┐\n│ Sales Analytics         [Export]   │\n├────────────────────────────────────┤\n│ [This Month] [This Quarter] [YTD]  │\n│                                    │\n│ Performance vs Target              │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Revenue      │ │ Deals         │ │\n│ │ $2.4M        │ │ 68            │ │\n│ │ Target: $2M  │ │ Quota: 60     │ │\n│ │ [@] 120%     │ │ [@] 113%      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Pipeline by Stage                  │\n│ ┌────────────────────────────────┐ │\n│ │ Prospect     $450K  12 deals   │ │\n│ │ Qualified    $890K  18 deals   │ │\n│ │ Proposal     $1.2M  15 deals   │ │\n│ │ Negotiation  $680K   9 deals   │ │\n│ │ Closed Won   $2.4M  68 deals   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Top Performers                     │\n│ ┌────────────────────────────────┐ │\n│ │ 1. Sarah Chen    $385K  [@]    │ │\n│ │ 2. Mike Torres   $342K  [@]    │ │\n│ │ 3. Lisa Park     $298K         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Forecast Accuracy                  │\n│ ┌────────────────────────────────┐ │\n│ │ Forecast: $2.3M                │ │\n│ │ Actual:   $2.4M                │ │\n│ │ Variance: +4.3% [@]            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Regional Performance               │\n│ ┌────────────────────────────────┐ │\n│ │ N. America  72%  $1.7M  [@]    │ │\n│ │ Europe      28%  $680K         │ │\n│ │ APAC         0%  $0            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── Detailed Report ────]        │\n│                                    │\n├────────────────────────────────────┤\n│ [Dash] [Pipeline] [Team] [Forecast]│\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ndashboard, sales-analytics, sales-performance, revenue, pipeline, quota, crm, deals, forecast, win-rate, team-performance, b2b, sales-ops\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a sales dashboard for my CRM showing revenue, deals closed, and how we're tracking against quota with regional breakdown\"\n\n**AI selects this pattern because:**\n- User mentioned \"sales dashboard\" and \"CRM\" (keyword matches)\n- Specific metrics: revenue, deals, quota tracking (sales KPIs)\n- \"Regional breakdown\" indicates geographic segmentation\n- Sales-focused context clear from description\n- Standard variant fits CRM dashboard use case\n\n**AI generates:**\nStandard variant with Q4 performance showing revenue ($2.4M vs $2M target, 120% attainment), deals closed (68, ↗ +15), win rate (72%), monthly trend chart, and regional breakdown (North America 72% / Europe 28%)\n\n**AI explains tradeoff:**\n- \"Sales analytics dashboard focuses on revenue and quota attainment for sales teams. Target comparison (120% of quota) shows progress clearly. Win rate tracks deal success. Monthly trend reveals seasonality patterns. Regional breakdown identifies market opportunities. Sales terminology assumes users are familiar with CRM concepts. Real-time pipeline updates would require backend integration. Tab navigation enables drill-down to team performance and detailed forecasts.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Metrics tracked** - Revenue, ARR, MRR, deal count, pipeline value, average deal size, sales cycle length\n2. **Time periods** - This month, This quarter, YTD, Trailing 12 months, Custom date range\n3. **Quota/target** - Individual, team, company targets with attainment percentage\n4. **Pipeline stages** - Prospect, Qualified, Demo, Proposal, Negotiation, Closed Won/Lost\n5. **Segmentation** - By region, product line, customer segment, deal size, rep/team\n\n**App-specific adaptations:**\n- **B2B SaaS:** ARR, MRR, expansion revenue, churn, net retention, land-and-expand metrics\n- **E-commerce:** GMV, average order value, repeat purchase rate, customer acquisition cost\n- **Real estate:** Properties sold, average sale price, days on market, commission earned\n- **Insurance:** Policies written, premium volume, renewal rate, loss ratio\n- **Financial services:** AUM, new accounts, transaction volume, revenue per client\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary dashboard for sales teams after login\n- Sales tab/section in broader business analytics app\n- Entry point to detailed pipeline and deal views\n\n**What comes before:**\n- `authentication/login` - Sales user authentication\n- `dashboards/analytics_dashboard_001` - Overall business metrics\n- Main navigation or role-based dashboard selector\n\n**What comes after:**\n- `special/data-table-advanced` - Detailed deal list with filters\n- Deal detail view showing specific opportunity\n- `dashboards/analytics_dashboard_001` - Broader business context\n- Team performance detail screens\n\n**Complete flow example:**\n`authentication/login` → **Sales Analytics Dashboard** → `special/data-table-advanced` (Pipeline) → Deal Detail\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Application doesn't track sales or revenue (use general analytics)\n- Users are customers/end-users not sales team (wrong audience)\n- Single metric more important than dashboard overview (use focused view)\n- Operational metrics more relevant than revenue (use task dashboard)\n- Product-led growth with no sales team (use product analytics instead)\n\n**Use instead:**\n- `dashboards/analytics_dashboard_001` - For general business metrics across departments\n- `dashboards/task-dashboard` - If tracking sales activities not revenue outcomes\n- `dashboards/finance_overview_001` - If financial accounting focus vs sales performance\n- `special/data-table-advanced` - If detailed deal list more important than aggregates\n- Product analytics dashboard - For PLG/self-service business models\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Sales jargon confusing for non-sales users (define terms or use tooltips)\n- Too many metrics dilute focus (prioritize top 3-5 KPIs)\n- Unclear target/quota context (always show comparison baseline)\n- Regional data without drill-down (enable click to details)\n- Stale data undermines trust (show last updated timestamp)\n\n**Conversion optimization:**\n- Highlight quota attainment prominently (120% in green, <100% needs attention)\n- Show both absolute and percentage changes ($150K / +32.5%)\n- Use visual indicators for performance ([@] exceeded, [!] behind)\n- Enable quick filtering (this month, this quarter, YTD)\n- Provide export for external reporting (Excel, PDF, Slides)\n- Link metrics to detailed views (click revenue → deal list)\n- Show top performers to drive competition\n- Include forecast vs actual for planning\n- Display pipeline health indicators (aging deals, stage distribution)\n- Support custom goals/quotas per user/team\n\n**Accessibility notes:**\n- Trend arrows have text equivalents (\"up 32.5%\", \"down 1.2%\")\n- Chart data available in table format alternative\n- Color used to enhance but not sole indicator of performance\n- Quota attainment announced clearly (\"120% of quota, exceeded\")\n- Interactive elements keyboard accessible\n- Loading states for async metric updates\n- Error handling when data unavailable\n- Screen reader announces metric changes\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "dashboards/smart-home-control": "# Smart Home Control Dashboard\n\n**ID:** `dashboards/smart-home-control`\n**Category:** dashboards\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays IoT device status and controls for smart home including lights, thermostats, security systems, appliances, and energy usage for home automation applications.\n\n**Use this pattern when user mentions:**\n- \"smart home dashboard\", \"IoT control\", \"home automation\"\n- \"device status\", \"smart devices\", \"home control panel\"\n- \"thermostat control\", \"lighting control\", \"security system\"\n- \"smart home hub\", \"connected devices\", \"energy monitoring\"\n- \"home automation dashboard\", \"IoT dashboard\"\n\n**Common contexts:**\n- Smart home apps controlling multiple devices\n- IoT platform dashboards and hubs\n- Home automation control systems\n- Energy management applications\n- Security and monitoring platforms\n- Smart device aggregator apps\n\n**UX Tradeoffs:**\n- **Pro:** Centralized control for all smart devices\n- **Pro:** At-a-glance status of home systems\n- **Pro:** Energy usage visibility enables optimization\n- **Pro:** Quick access to common actions and scenes\n- **Con:** Device connectivity issues create frustration\n- **Con:** Too many devices overwhelm interface\n- **Con:** Security concerns with connected home\n- **Con:** Incompatible devices limit integration\n\n**Pairs well with:**\n- `settings/notification-settings` - Device alerts and automations\n- `settings/privacy_settings` - Smart home data privacy\n- `dashboards/finance_overview_001` - Energy cost tracking\n- `dashboards/weather_dashboard_001` - Weather-based automation\n- `special/notifications-center` - Security alerts and device notifications\n\n**Variants available:**\n- **Minimal:** Quick controls for most-used devices (use for \"widget\" or \"quick access\")\n- **Standard:** Device status and controls with energy monitoring (use for most smart home apps)\n- **Comprehensive:** Full automation with scenes, schedules, detailed analytics (use for \"power users\" or \"home automation enthusiasts\")\n\n**Related patterns:**\n- Instead of this, consider device-specific control screens if single device focus\n- Combine with `dashboards/weather_dashboard_001` for weather-responsive automation\n\n---\n\n## Description\n\nSmart home dashboard displaying connected device statuses (online/offline), quick controls for lights, thermostats, and security, energy usage monitoring, and automation scenes. Shows real-time device states and provides one-tap control actions. Includes recent device activity and energy cost tracking. Designed for homeowners managing smart devices, optimizing energy usage, and monitoring home security through IoT connectivity.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ Smart Home              [Settings] │\n├────────────────────────────────────┤\n│                                    │\n│ Quick Controls                     │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Living Room                    │ │\n│ │ Thermostat: 72°F  [Heat]       │ │\n│ │ [Down] [Up] [Auto] [Off]       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Kitchen Lights                 │ │\n│ │ ●●●●●●●●●○ 90% brightness      │ │\n│ │ [Dim] [Brighten] [Off]         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Device Status                      │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Security System [OK]           │ │\n│ │ Armed (Away Mode)              │ │\n│ │ All sensors normal             │ │\n│ │ [Disarm] [Change Mode]         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Energy Usage Today                 │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Power: 42.7 kWh                │ │\n│ │ Cost: $8.54                    │ │\n│ │ ↗ +15% vs yesterday            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Active Devices                     │\n│                                    │\n│ > Thermostat - Auto mode           │\n│   Target 72°F, Currently 71°F      │\n│                                    │\n│ > Robot Vacuum - Cleaning          │\n│   Living room, 23 min remaining    │\n│                                    │\n│ [──── Manage Devices ────]         │\n│                                    │\n├────────────────────────────────────┤\n│ [Home] [Devices] [Scenes] [Energy] │\n└────────────────────────────────────┘\n```\n\n### Minimal Variant (Quick Access Widget)\n\n```\n┌────────────────────────────────────┐\n│ Home Control            [Menu]     │\n├────────────────────────────────────┤\n│                                    │\n│ Living Room                        │\n│ Temp: 72°F  [↓] [↑]                │\n│ Lights: 90%  [On] [Off]            │\n│                                    │\n│ Security: Armed [Disarm]           │\n│                                    │\n│ Energy: 42.7 kWh  $8.54            │\n│                                    │\n│ [──── All Devices ────]            │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (Home Automation Hub)\n\n```\n┌────────────────────────────────────┐\n│ Home Automation Hub     [Settings] │\n├────────────────────────────────────┤\n│ [Rooms] [Devices] [Scenes] [Auto]  │\n│                                    │\n│ Home Status                        │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Climate      │ │ Lighting      │ │\n│ │ 72°F         │ │ 12 on         │ │\n│ │ [OK] Normal  │ │ 4 off         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Security     │ │ Energy        │ │\n│ │ Armed        │ │ 42.7 kWh      │ │\n│ │ [OK] Normal  │ │ $8.54 today   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Rooms                              │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Living Room  [Active]          │ │\n│ │ Temp: 72°F  Lights: 90%        │ │\n│ │ TV: On  Speakers: Playing      │ │\n│ │ [Scene: Movie Night]           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Bedroom  [Inactive]            │ │\n│ │ Temp: 68°F  Lights: Off        │ │\n│ │ [Scene: Good Night]            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Energy Usage (24h)                 │\n│ ┌────────────────────────────────┐ │\n│ │      ██                        │ │\n│ │    ████                        │ │\n│ │  ███████                       │ │\n│ │ ████████████                   │ │\n│ │ 6AM   12PM   6PM   12AM        │ │\n│ │ Peak: 3.2 kW at 6 PM           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Automation Scenes                  │\n│ ┌────────────────────────────────┐ │\n│ │ [Movie Night]  [Good Morning]  │ │\n│ │ [Away Mode]    [Bedtime]       │ │\n│ │ [Party Mode]   [Custom...]     │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Recent Activity                    │\n│ > Thermostat adjusted to 72°F      │\n│   15 minutes ago                   │\n│                                    │\n│ > Front door unlocked              │\n│   2 hours ago                      │\n│                                    │\n│ [──── Device Management ────]      │\n│                                    │\n├────────────────────────────────────┤\n│ [Dashboard] [Rooms] [Auto] [Energy]│\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ndashboard, smart-home, IoT-control, home-automation, device-management, thermostat, lighting-control, security-system, energy-monitoring, connected-devices, smart-devices, home-hub\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a smart home dashboard showing thermostat controls, light status, security system, and daily energy usage with quick actions\"\n\n**AI selects this pattern because:**\n- User mentioned \"smart home dashboard\" (keyword match)\n- Specific devices: thermostat, lights, security (IoT device control)\n- \"Energy usage\" indicates monitoring needs\n- \"Quick actions\" suggests dashboard with controls not just status\n- Standard variant appropriate for home automation\n\n**AI generates:**\nStandard variant with quick controls (Living Room Thermostat: 72°F [Heat] with [Down] [Up] [Auto] [Off] buttons, Kitchen Lights: 90% brightness with [Dim] [Brighten] [Off]), device status (Security System [OK] Armed Away Mode, All sensors normal), energy usage today (42.7 kWh, $8.54, ↗ +15%), and active devices (Thermostat Auto mode 72°F target, Robot Vacuum cleaning 23min remaining)\n\n**AI explains tradeoff:**\n- \"Smart home dashboard provides centralized control for IoT devices. Quick controls enable one-tap actions (adjust thermostat, dim lights). Device status shows at-a-glance home health. Energy monitoring reveals usage patterns for cost optimization. Active devices section shows what's currently running. Trade-off: Requires device connectivity (Wi-Fi/Zigbee/Z-Wave). Too many devices clutter interface. Security concerns with connected devices. Works best with 5-20 devices; more requires room-based organization.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Device types** - Lights, thermostats, locks, cameras, speakers, appliances, sensors\n2. **Control actions** - On/off, dim/brighten, temperature adjust, lock/unlock, arm/disarm\n3. **Organization** - By room, by type, by usage frequency, favorites\n4. **Energy tracking** - Real-time usage, daily/weekly totals, cost per device, solar integration\n5. **Automation** - Scenes, schedules, triggers, rules, voice integration\n\n**App-specific adaptations:**\n- **Security-focused:** Cameras, door/window sensors, motion detectors, alarm system, video doorbell\n- **Climate control:** Multi-zone thermostats, smart vents, humidity sensors, fans, air purifiers\n- **Lighting:** Smart bulbs, switches, dimmers, color temperature, scenes, circadian lighting\n- **Entertainment:** Smart TVs, speakers, streaming devices, universal remotes, multi-room audio\n- **Energy management:** Solar panels, battery storage, EV charger, load balancing, time-of-use optimization\n- **Convenience:** Robot vacuums, smart plugs, garage doors, sprinklers, pet feeders, blinds/shades\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary dashboard for smart home apps\n- Main control panel after app launch\n- Widget or lockscreen quick access\n\n**What comes before:**\n- `authentication/biometric-auth` - Quick secure access to home controls\n- `special/onboarding-welcome` - Device setup and pairing\n- Push notification from device alert\n\n**What comes after:**\n- Individual device detail view with full controls\n- Scene/automation editor\n- `dashboards/finance_overview_001` - Detailed energy cost analysis\n- Device settings and configuration\n- `settings/notification-settings` - Alert preferences per device\n\n**Complete flow example:**\nApp launch → **Smart Home Dashboard** → Living Room Climate → Thermostat Detail View → Temperature Schedule Editor\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Single device focus not multiple (use device-specific screen)\n- Commercial building automation (use industrial control system)\n- Professional security system (use professional monitoring dashboard)\n- Simple timer/scheduler needed (use basic automation screen)\n- Voice-first interface (use voice assistant pattern)\n\n**Use instead:**\n- Device-specific control screen - For single device detailed control\n- Industrial automation dashboard - For commercial HVAC/lighting systems\n- Professional security monitoring - For alarm company central stations\n- Simple automation rules list - For basic if-this-then-that scenarios\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Device offline status creates frustration (show connectivity clearly)\n- Too many devices overwhelm (organize by room or favorites)\n- Security concerns with remote access (require authentication)\n- Conflicting automations cause confusion (show active rules)\n- Energy data without actionable insights (provide recommendations)\n\n**Conversion optimization:**\n- Show device status at-a-glance ([OK] / [Offline] / [Warning])\n- Enable one-tap common actions (Good Night scene, Away mode)\n- Display energy cost not just usage ($ resonates more than kWh)\n- Provide quick access to frequently used devices (favorites)\n- Show active automations prominently to avoid conflicts\n- Include contextual controls (weather-based suggestions)\n- Allow custom scenes for common routines\n- Provide energy-saving recommendations\n- Enable voice control integration\n- Show security cameras with motion alerts\n\n**Accessibility notes:**\n- All device controls keyboard accessible\n- Screen readers announce device status and values\n- Large touch targets for control buttons (44x44pt minimum)\n- High contrast for device status indicators\n- Voice control integration for hands-free operation\n- Haptic feedback for control adjustments\n- Loading states during device communication\n- Clear error messages when devices unresponsive\n- Alternative text for camera feeds\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "dashboards/task-dashboard": "# Task Management Dashboard\n\n**ID:** `dashboards/task-dashboard`\n**Category:** dashboards\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays task and project management metrics including task status breakdown, upcoming deadlines, team workload distribution, and progress tracking for productivity and project management applications.\n\n**Use this pattern when user mentions:**\n- \"task dashboard\", \"project dashboard\", \"task management\"\n- \"to-do list overview\", \"task tracking\", \"project status\"\n- \"team workload\", \"task progress\", \"deadline tracking\"\n- \"productivity dashboard\", \"project overview\", \"task metrics\"\n- \"kanban overview\", \"sprint dashboard\", \"work tracking\"\n\n**Common contexts:**\n- Project management tools tracking team tasks\n- Productivity apps with multiple projects\n- Team collaboration platforms\n- Agile/Scrum dashboards for sprints\n- Task management apps with analytics\n- Freelance/agency project tracking\n\n**UX Tradeoffs:**\n- **Pro:** At-a-glance view of all task statuses and priorities\n- **Pro:** Deadline visibility prevents missed due dates\n- **Pro:** Team workload distribution enables resource balancing\n- **Pro:** Progress metrics show productivity trends\n- **Con:** Too many tasks overwhelm the dashboard view\n- **Con:** Status updates require manual maintenance\n- **Con:** Limited detail forces navigation to individual tasks\n- **Con:** Real-time sync needed for team collaboration\n\n**Pairs well with:**\n- `dashboards/analytics_dashboard_001` - Business metrics for project-based work\n- `special/data-table-advanced` - Detailed task list with sorting/filtering\n- `dashboards/performance-monitor` - Technical team velocity metrics\n- `settings/team-management` - Team member assignment\n- `special/notifications-center` - Task deadline and assignment alerts\n- `forms/task-creation` - Adding new tasks\n\n**Variants available:**\n- **Minimal:** Personal task summary with today's tasks only (use for \"simple to-do\" or \"personal productivity\")\n- **Standard:** Team dashboard with task breakdown and deadlines (use for most project management)\n- **Comprehensive:** Full project portfolio with metrics, workload, trends (use for \"managers\" or \"multi-project tracking\")\n\n**Related patterns:**\n- Instead of this, consider `dashboards/analytics_dashboard_001` if tracking business metrics not tasks\n- Instead of this, consider `special/data-table-advanced` if detailed task list more important than overview\n- Combine with `dashboards/performance-monitor` for technical team velocity metrics\n\n---\n\n## Description\n\nTask management dashboard displaying task status breakdown (to-do, in progress, completed), upcoming deadlines, team workload distribution, and progress trends. Shows current sprint or project status with priority indicators. Includes team member assignment visibility and recent activity feed. Designed for project managers, team leads, and individuals tracking multiple tasks and projects.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ Task Dashboard          [+ New]    │\n├────────────────────────────────────┤\n│                                    │\n│ Current Sprint Progress            │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Sprint 42                      │ │\n│ │ [████████████░░░░░░] 68%       │ │\n│ │ 17 of 25 tasks complete        │ │\n│ │ 3 days remaining               │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Task Breakdown                     │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ To Do        8 tasks           │ │\n│ │ In Progress  6 tasks           │ │\n│ │ Review       3 tasks           │ │\n│ │ Completed   17 tasks           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Upcoming Deadlines                 │\n│                                    │\n│ > [!] User authentication          │\n│   Due today  [High]  @Sarah        │\n│                                    │\n│ > Payment integration              │\n│   Due tomorrow  [Medium]  @Mike    │\n│                                    │\n│ > Dashboard redesign               │\n│   Due in 3 days  [Low]  @Lisa      │\n│                                    │\n│ Team Workload                      │\n│                                    │\n│ Sarah Chen    [████████] 8 tasks   │\n│ Mike Torres   [██████░░] 6 tasks   │\n│ Lisa Park     [████░░░░] 4 tasks   │\n│                                    │\n│ [──── View All Tasks ────]         │\n│                                    │\n├────────────────────────────────────┤\n│ [Overview] [Tasks] [Team] [Reports]│\n└────────────────────────────────────┘\n```\n\n### Minimal Variant (Personal Tasks)\n\n```\n┌────────────────────────────────────┐\n│ My Tasks                [+ New]    │\n├────────────────────────────────────┤\n│                                    │\n│ Today's Focus                      │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ 5 of 8 tasks completed         │ │\n│ │ [████████████░░░░░░] 63%       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ > [!] Finish project proposal      │\n│   Due today  [High]                │\n│                                    │\n│ > Review design mockups            │\n│   Due tomorrow  [Medium]           │\n│                                    │\n│ > Update client presentation       │\n│   Due Friday  [Low]                │\n│                                    │\n│ [──── View All ────]               │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (Project Portfolio)\n\n```\n┌────────────────────────────────────┐\n│ Project Dashboard       [Export]   │\n├────────────────────────────────────┤\n│ [Active] [Backlog] [Completed]     │\n│                                    │\n│ Active Projects                    │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Mobile App   │ │ Web Redesign  │ │\n│ │ [████████]   │ │ [██████░░░]   │ │\n│ │ 85% done     │ │ 72% done      │ │\n│ │ 12 tasks     │ │ 8 tasks       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Task Status Across Projects        │\n│ ┌────────────────────────────────┐ │\n│ │ To Do        24 tasks          │ │\n│ │ In Progress  15 tasks          │ │\n│ │ Blocked       3 tasks [!]      │ │\n│ │ Completed   142 tasks          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Weekly Velocity Trend              │\n│ ┌────────────────────────────────┐ │\n│ │        ████                    │ │\n│ │      ██████                    │ │\n│ │    ████████████                │ │\n│ │ M  T  W  T  F  S  S            │ │\n│ │ Avg: 32 tasks/week             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Team Capacity                      │\n│ ┌────────────────────────────────┐ │\n│ │ Sarah Chen    [@] 12 tasks     │ │\n│ │   Mobile lead  85% capacity    │ │\n│ │                                │ │\n│ │ Mike Torres      10 tasks      │ │\n│ │   Backend dev  72% capacity    │ │\n│ │                                │ │\n│ │ Lisa Park         6 tasks      │ │\n│ │   Designer     45% capacity    │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Recent Activity                    │\n│ > Task completed: API integration  │\n│   @Sarah • 15 minutes ago          │\n│                                    │\n│ > New task assigned: Testing       │\n│   @Mike • 1 hour ago               │\n│                                    │\n│ [──── Detailed Reports ────]       │\n│                                    │\n├────────────────────────────────────┤\n│ [Projects] [Tasks] [Team] [Charts] │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ndashboard, task-management, project-tracking, to-do-list, productivity, deadlines, team-workload, task-status, kanban, sprint-tracking, project-dashboard, agile, progress-tracking\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a task dashboard for my project management tool showing tasks by status, upcoming deadlines, and which team members are assigned to what\"\n\n**AI selects this pattern because:**\n- User mentioned \"task dashboard\" and \"project management\" (keyword matches)\n- Specific requirements: tasks by status, deadlines, team assignments (task metrics)\n- Team collaboration context requires workload visibility\n- Standard variant appropriate for team project management\n\n**AI generates:**\nStandard variant with sprint progress bar (17 of 25 tasks, 68% complete), task breakdown by status (To Do: 8, In Progress: 6, Review: 3, Completed: 17), upcoming deadlines with priority tags ([!] High, [Medium], [Low]), and team workload distribution showing tasks assigned to each member\n\n**AI explains tradeoff:**\n- \"Task dashboard provides at-a-glance project status with sprint progress, task breakdown, and deadline visibility. Team workload section helps balance assignments. Priority indicators ([!] High) draw attention to urgent items. Trade-off: High-level overview requires navigation to individual tasks for details. Real-time updates needed for team collaboration. Works best with 5-30 active tasks; more requires filtering.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Task organization** - By status (to-do/done), by project, by priority, by assignee, by sprint\n2. **Time periods** - Today's tasks, This week, This sprint, This month, Custom range\n3. **Metrics displayed** - Task count, completion percentage, velocity, burn-down, cycle time\n4. **Team visibility** - Individual workload, capacity percentage, assignments, availability\n5. **Progress indicators** - Simple percentage, burn-down charts, velocity trends, forecasts\n\n**App-specific adaptations:**\n- **Agile/Scrum:** Sprint velocity, story points, burn-down chart, sprint retrospective data\n- **Kanban:** Work-in-progress limits, cycle time, throughput, cumulative flow diagram\n- **Personal productivity:** Daily focus, habit tracking, pomodoro sessions, energy levels\n- **Agency/client work:** Project budgets, billable hours, client approvals, milestone tracking\n- **Software development:** GitHub integration, code review status, CI/CD pipeline, bug counts\n- **Marketing:** Campaign tasks, content calendar, social media schedule, approval workflows\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary landing screen after login for productivity apps\n- Main dashboard for project management tools\n- Team lead overview for collaboration platforms\n\n**What comes before:**\n- `authentication/login` - User authentication\n- `special/splash-screen` - App loading\n- Main navigation or project selector\n\n**What comes after:**\n- `special/data-table-advanced` - Detailed task list with sorting/filtering\n- Individual task detail view\n- `forms/task-creation` - Create new task\n- `dashboards/analytics_dashboard_001` - Business metrics view\n\n**Complete flow example:**\n`authentication/login` → **Task Dashboard** → `special/data-table-advanced` (Task List) → Task Detail View\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App has only simple checklist (use basic list view)\n- No team collaboration or projects (use personal to-do list)\n- Time tracking more important than tasks (use time dashboard)\n- Customer support ticket queue (use ticket dashboard instead)\n- Single-project focus (use project detail view)\n\n**Use instead:**\n- `special/data-table-advanced` - For detailed task list as primary interface\n- `dashboards/analytics_dashboard_001` - If business metrics more important than tasks\n- Simple checklist pattern - For personal to-do without projects\n- `dashboards/performance-monitor` - For technical team velocity focus\n- Kanban board view - For visual workflow management\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many tasks make dashboard overwhelming (limit to critical/upcoming)\n- Outdated status info undermines trust (need real-time or clear timestamps)\n- Unclear priority system causes confusion (standardize [!] High, [Medium], [Low])\n- Missing context forces clicking into tasks (show enough detail in overview)\n- No quick actions slows workflow (add inline complete, assign, defer)\n\n**Conversion optimization:**\n- Show completion progress prominently (motivates continued work)\n- Highlight overdue tasks with [!] indicator\n- Display team workload to enable self-balancing\n- Include quick \"Add Task\" button in header\n- Show recent activity to create social accountability\n- Use progress bars for visual satisfaction\n- Group by priority or deadline for focus\n- Enable drag-and-drop for quick status changes\n- Provide sprint/project switcher for context\n- Show velocity trends for productivity insights\n\n**Accessibility notes:**\n- Status indicators need text labels not just colors\n- Progress bars should announce percentage to screen readers\n- Priority tags ([!] High) need semantic meaning\n- Deadline dates in ISO format for international users\n- Team member names readable by screen readers\n- Interactive elements keyboard accessible\n- Sufficient color contrast for status categories\n- Loading states for async task updates\n- Clear focus indicators when navigating with keyboard\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "dashboards/weather_dashboard_001": "# Weather Information Dashboard\n\n**ID:** `dashboards/weather_dashboard_001`\n**Category:** dashboards\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays current weather conditions, forecasts, temperature trends, precipitation, air quality, and weather alerts for weather information and meteorological applications.\n\n**Use this pattern when user mentions:**\n- \"weather dashboard\", \"forecast\", \"current conditions\"\n- \"temperature\", \"weather app\", \"meteorology\"\n- \"climate info\", \"weather data\", \"forecast dashboard\"\n- \"weather alerts\", \"weather tracking\", \"weather information\"\n- \"local weather\", \"weather forecast\", \"weather conditions\"\n\n**Common contexts:**\n- Weather apps showing current and forecast data\n- Travel and outdoor activity planning tools\n- Smart home weather integration\n- News and information platforms\n- Agriculture and outdoor work applications\n- Aviation and marine weather systems\n\n**UX Tradeoffs:**\n- **Pro:** Essential information for daily planning\n- **Pro:** Forecast visibility enables advance preparation\n- **Pro:** Weather alerts provide safety warnings\n- **Pro:** Visual representation (icons, graphs) aids comprehension\n- **Con:** Inaccurate forecasts undermine trust\n- **Con:** Too much detail overwhelming for casual users\n- **Con:** Hyperlocal data not always available\n- **Con:** Requires location permissions for relevance\n\n**Pairs well with:**\n- `dashboards/smart-home-control` - Weather-based home automation\n- `special/notifications-center` - Weather alerts and warnings\n- `navigation/home-screen` - Weather widget on home\n- Travel planning patterns - Trip weather forecasting\n- Outdoor activity apps - Activity-specific weather\n\n**Variants available:**\n- **Minimal:** Current conditions only with simple forecast (use for \"widget\" or \"glance\")\n- **Standard:** Current, hourly, daily forecast with key metrics (use for most weather apps)\n- **Comprehensive:** Full meteorological data with maps, air quality, detailed forecasts (use for \"weather enthusiasts\" or \"professional use\")\n\n**Related patterns:**\n- Combine with `dashboards/smart-home-control` for weather-responsive automation\n- Instead of this, use hyperlocal weather pattern if micro-climate focus\n\n---\n\n## Description\n\nWeather dashboard displaying current conditions (temperature, feels-like, conditions), hourly and multi-day forecasts, precipitation probability, wind speed, humidity, air quality index, and UV index. Shows weather alerts and recommendations. Includes sunrise/sunset times and weather maps. Designed for anyone planning activities, checking daily weather, monitoring conditions, or tracking meteorological trends for outdoor activities and travel planning.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ Weather                 [Location] │\n├────────────────────────────────────┤\n│                                    │\n│ San Francisco, CA                  │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │         ○                      │ │\n│ │                                │ │\n│ │        72°F                    │ │\n│ │       Sunny                    │ │\n│ │                                │ │\n│ │ Feels like 75°F                │ │\n│ │ Humidity 62%  Wind 8 mph       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Today's Forecast                   │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Morning  Afternoon  Evening    │ │\n│ │   ○         ☼         ●        │ │\n│ │  68°F      78°F      65°F      │ │\n│ │  9 AM      2 PM      8 PM      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Air Quality & UV                   │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Air Quality: Good (45 AQI)     │ │\n│ │ [████████████░░░░░░░░] 45%     │ │\n│ │                                │ │\n│ │ UV Index: High (8/10)          │ │\n│ │ [████████████████░░░░] 80%     │ │\n│ │ Sunscreen recommended          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ 7-Day Outlook                      │\n│                                    │\n│ > Today  ○  Sunny                  │\n│   72°F / 58°F  0% rain             │\n│                                    │\n│ > Tomorrow  ☁  Partly Cloudy       │\n│   75°F / 61°F  10% rain            │\n│                                    │\n│ > Wed  ☂  Light Rain               │\n│   68°F / 54°F  60% rain            │\n│                                    │\n│ [──── Extended Forecast ────]      │\n│                                    │\n├────────────────────────────────────┤\n│ [Today] [Hourly] [Weekly] [Maps]   │\n└────────────────────────────────────┘\n```\n\n### Minimal Variant (Quick Glance)\n\n```\n┌────────────────────────────────────┐\n│ Weather                 [Location] │\n├────────────────────────────────────┤\n│                                    │\n│ San Francisco, CA                  │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │        ○  72°F                 │ │\n│ │          Sunny                 │ │\n│ │ Feels like 75°F                │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Today:  High 78°F  Low 58°F        │\n│ Tomorrow:  Partly Cloudy  75°F     │\n│                                    │\n│ [──── Full Forecast ────]          │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (Meteorological Dashboard)\n\n```\n┌────────────────────────────────────┐\n│ Weather Dashboard       [Settings] │\n├────────────────────────────────────┤\n│ [Current] [Hourly] [Daily] [Radar] │\n│                                    │\n│ San Francisco, CA  Updated 2m ago  │\n│                                    │\n│ Current Conditions                 │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │     ○        │ │ Temperature   │ │\n│ │              │ │ 72°F          │ │\n│ │   Sunny      │ │ Feels 75°F    │ │\n│ │              │ │ Dew 58°F      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Wind         │ │ Precipitation │ │\n│ │ 8 mph NW     │ │ 0.0 in        │ │\n│ │ Gusts 12 mph │ │ 0% chance     │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Hourly Forecast (24h)              │\n│ ┌────────────────────────────────┐ │\n│ │ 80°┌──────────────────────     │ │\n│ │ 70°│    ╱╲                     │ │\n│ │ 60°│──╱──╲─────────────        │ │\n│ │ 50°│╱                          │ │\n│ │    Now  6h  12h  18h  24h      │ │\n│ │ Peak: 78°F at 2 PM             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ 10-Day Forecast                    │\n│ ┌────────────────────────────────┐ │\n│ │ Today    ○   72°/58°  0%       │ │\n│ │ Tomorrow ☁   75°/61°  10%      │ │\n│ │ Wed      ☂   68°/54°  60%      │ │\n│ │ Thu      ☂   65°/52°  70%      │ │\n│ │ Fri      ☁   70°/56°  20%      │ │\n│ │ Sat      ○   73°/59°  5%       │ │\n│ │ Sun      ○   76°/62°  0%       │ │\n│ │ Mon      ☁   74°/60°  15%      │ │\n│ │ Tue      ○   75°/61°  10%      │ │\n│ │ Wed      ○   77°/63°  5%       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Air Quality & Health               │\n│ ┌────────────────────────────────┐ │\n│ │ AQI: 45  [OK] Good             │ │\n│ │ UV: 8    [!] High              │ │\n│ │ Pollen: 3/10  Low              │ │\n│ │                                │ │\n│ │ Recommendations:               │ │\n│ │ • Apply SPF 30+ sunscreen      │ │\n│ │ • Good day for outdoor         │ │\n│ │   activities                   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Sun & Moon                         │\n│ ┌────────────────────────────────┐ │\n│ │ Sunrise: 6:52 AM               │ │\n│ │ Sunset: 7:23 PM                │ │\n│ │ Moon: Waxing Gibbous (78%)     │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [──── Weather Maps ────]           │\n│                                    │\n├────────────────────────────────────┤\n│ [Now] [Forecast] [Radar] [Alerts]  │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ndashboard, weather-forecast, current-conditions, temperature, meteorology, precipitation, air-quality, UV-index, weather-alerts, climate-data, forecast, weather-app\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a weather dashboard showing current temperature, today's hourly forecast, 7-day outlook, and air quality for planning outdoor activities\"\n\n**AI selects this pattern because:**\n- User mentioned \"weather dashboard\" (keyword match)\n- Specific requirements: current temperature, hourly, 7-day, air quality (weather data)\n- \"Planning outdoor activities\" indicates decision-making use case\n- Standard variant appropriate for general weather app\n\n**AI generates:**\nStandard variant with San Francisco current conditions (72°F Sunny ○, feels like 75°F, humidity 62%, wind 8mph), today's hourly forecast (Morning 68°F ○, Afternoon 78°F ☼, Evening 65°F ●), air quality (Good 45 AQI with bar), UV index (High 8/10 with sunscreen recommendation), and 7-day outlook (Today Sunny 72°/58° 0% rain, Tomorrow Partly Cloudy 75°/61° 10% rain, Wed Light Rain 68°/54° 60% rain)\n\n**AI explains tradeoff:**\n- \"Weather dashboard provides essential planning information. Current conditions with feels-like temperature account for wind/humidity. Hourly forecast shows temperature progression through day (morning/afternoon/evening). 7-day outlook enables advance planning. Air quality (45 AQI Good) and UV index (8 High) inform health decisions. Weather icons (○ ☁ ☂) provide quick visual scan. Trade-off: Forecast accuracy decreases beyond 3-5 days. Hyperlocal conditions may vary. Requires location permission. Best for general planning, not emergency weather.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Data displayed** - Temp, precipitation, wind, humidity, pressure, visibility, UV, air quality\n2. **Forecast periods** - Current, Hourly (1-48h), Daily (3-14 days), Monthly outlook\n3. **Location** - Current GPS, saved locations, multi-location tracking\n4. **Units** - Fahrenheit/Celsius, mph/km/h, inches/mm, 12h/24h time\n5. **Alerts** - Severe weather, temperature extremes, precipitation, air quality, pollen\n\n**App-specific adaptations:**\n- **General public:** Simple current + forecast, weather-appropriate clothing suggestions\n- **Outdoor recreation:** Activity-specific conditions (hiking, cycling, sailing), trail conditions\n- **Aviation:** METAR/TAF, winds aloft, visibility, ceiling, turbulence, icing conditions\n- **Marine:** Wave height, tide times, marine wind, sea temperature, small craft advisories\n- **Agriculture:** Soil moisture, growing degree days, frost warnings, precipitation accumulation\n- **Professional meteorology:** Detailed models, satellite imagery, radar composites, upper-air data\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary screen for weather apps\n- Widget on device home screen\n- Quick glance in notification center\n- Integrated in smart home dashboard\n\n**What comes before:**\n- App launch or location selection\n- Location permission request\n- Saved locations list\n\n**What comes after:**\n- Hourly forecast detail (24-48 hour breakdown)\n- Daily forecast detail (extended outlook)\n- Weather radar/map visualization\n- `settings/notification-settings` - Weather alert preferences\n- Historical weather data\n\n**Complete flow example:**\nApp Launch → [Allow Location] → **Weather Dashboard** → Hourly Forecast Detail → Weather Radar Map\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Emergency weather warnings primary focus (use alert-first design)\n- Hyperlocal micro-climate critical (use specialized weather pattern)\n- Historical weather data more important (use weather history view)\n- Weather just supplementary info (use simple widget)\n- Indoor-only application context (weather less relevant)\n\n**Use instead:**\n- Severe weather alert pattern - For emergency warnings and safety\n- Weather map primary view - For radar/satellite imagery focus\n- Historical weather analysis - For climate trends and past data\n- Simple weather widget - For minimal glance information\n- Hyperlocal weather - For micro-climate precision applications\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Inaccurate forecasts erode trust (show data source and update time)\n- Too many metrics overwhelming (prioritize based on user goals)\n- Location not current creates irrelevance (easy location switching)\n- Units wrong for user's region (auto-detect or easy toggle)\n- Missing context for numbers (explain what's typical/unusual)\n\n**Conversion optimization:**\n- Show \"feels like\" temperature (more relevant than actual)\n- Use weather icons for quick visual scanning (○ ☁ ☂ ☃)\n- Include precipitation percentage prominently (decision factor)\n- Provide actionable recommendations (\"Sunscreen recommended\")\n- Show hourly breakdown for planning day activities\n- Include air quality for health-conscious users\n- Enable multiple saved locations (home, work, vacation)\n- Show sunrise/sunset for outdoor activity planning\n- Provide severe weather alerts prominently\n- Allow unit toggle (°F/°C) easily accessible\n\n**Accessibility notes:**\n- Weather icons have text descriptions (\"Sunny\", \"Partly Cloudy\")\n- Temperature announced with units by screen readers\n- Precipitation percentage clear (\"60% chance of rain\")\n- Color not sole indicator of severity (use icons + text)\n- High contrast for readability in bright sunlight\n- Large text support for outdoor viewing\n- Voice announcements for weather alerts\n- Alternative text for weather maps\n- Clear forecast descriptions not just numbers\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "forms/address_form": "# Address Form\n\n**ID:** `forms/address_form`\n**Category:** forms\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nCollects shipping or billing addresses with support for residential and commercial addresses, including optional fields and address type selection.\n\n**Use this pattern when user mentions:**\n- \"address\", \"shipping\", \"billing\", \"delivery\"\n- \"location\", \"mailing address\", \"street address\"\n- \"where to ship\", \"delivery address\", \"send to\"\n- \"address form\", \"enter address\", \"address input\"\n- \"home address\", \"work address\", \"shipping info\"\n\n**Common contexts:**\n- E-commerce checkout flows\n- Account profile setup\n- Delivery or service booking\n- Contact information collection\n- Billing address for payment\n- Multiple saved addresses management\n\n**UX Tradeoffs:**\n- **Pro:** Structured fields reduce entry errors and ensure valid addresses\n- **Pro:** Address type selection enables saving multiple locations\n- **Pro:** Optional fields (apartment, company) accommodate all address types\n- **Con:** High field count increases abandonment (8-10 fields typical)\n- **Con:** International addresses need different field structures\n\n**Pairs well with:**\n- `shopping/shopping-cart` - Address collection during checkout\n- `forms/payment_form` - Billing address after payment details\n- `authentication/signup-screen` - Profile setup with address\n- `settings/account-settings` - Manage multiple saved addresses\n- `special/confirmation-screen` - Review address before order\n\n**Variants available:**\n- **Minimal:** Name, street, city, state, ZIP only (use for \"US domestic\" or \"quick checkout\")\n- **Standard:** All fields plus address type, save option (use for most e-commerce flows)\n- **Comprehensive:** International support, address validation, multiple addresses (use for \"global shipping\" or \"account management\")\n\n**Related patterns:**\n- Instead of this, consider geolocation if address used only for nearby search\n- Instead of this, consider address autocomplete API if speed prioritized\n\n---\n\n## Description\n\nAddress collection form supporting shipping and billing addresses with structured fields for name, street, city, state, and ZIP code. Includes optional fields for apartment numbers and special instructions, plus address type selection (home/work/other) and save preferences. Use for e-commerce checkout, profile setup, or any context requiring physical address collection. Balances completeness with conversion through optional fields and auto-fill support.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Shipping Address     [Cancel]  │\n├────────────────────────────────────┤\n│                                    │\n│ Full Name                          │\n│ ┌──────────────────────────────┐   │\n│ │ Sarah Johnson                │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Street Address                     │\n│ ┌──────────────────────────────┐   │\n│ │ 123 Main Street              │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Apt, Suite, etc. (Optional)        │\n│ ┌──────────────────────────────┐   │\n│ │ Apt 4B                       │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ City                               │\n│ ┌──────────────────────────────┐   │\n│ │ San Francisco                │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ State             ZIP Code         │\n│ ┌─────────────┐ ┌──────────────┐   │\n│ │ California  │ │ 94102        │   │\n│ └─────────────┘ └──────────────┘   │\n│                                    │\n│ [ ] Save for future orders         │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │      Continue to Payment     │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Add Address                    │\n├────────────────────────────────────┤\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Sarah Johnson                │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ 123 Main Street              │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ San Francisco, CA 94102      │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ (555) 123-4567               │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Address Type                       │\n│ [@] Home  [ ] Work  [ ] Other      │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │       Save Address           │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Delivery Address     [Done]    │\n├────────────────────────────────────┤\n│                                    │\n│ Saved Addresses                    │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [@] Home                     │   │\n│ │     123 Main St, Apt 4B      │   │\n│ │     San Francisco, CA 94102  │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [ ] Work                     │   │\n│ │     456 Office Blvd, Ste 200 │   │\n│ │     San Jose, CA 95110       │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ [+] Add New Address                │\n│                                    │\n│ Special Instructions (Optional)    │\n│ ┌──────────────────────────────┐   │\n│ │ Leave at front door          │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │      Use This Address        │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\naddress, shipping, billing, location, delivery, mailing-address, street-address, checkout, address-form, postal-address\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a checkout flow where customers enter their shipping address before payment\"\n\n**AI selects this pattern because:**\n- User mentioned \"shipping address\" and \"checkout\" (keyword matches)\n- E-commerce context detected (customers, payment, checkout)\n- Address collection required before payment step\n- Standard address form is appropriate\n\n**AI generates:**\nStandard variant with full name, street address, apartment (optional), city, state, ZIP, phone number, and \"Save for future orders\" checkbox\n\n**AI explains tradeoff:**\n- \"Address form collects structured shipping data to ensure valid delivery. Apartment field is optional to reduce friction for single-family homes. Phone number helps delivery drivers contact customers. Each field adds friction (~5-10% abandonment), so only essential fields included. Save option reduces friction on repeat purchases.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Field requirements** - Mark truly required fields, make everything else optional\n2. **Address validation** - Real-time validation via USPS API or similar service\n3. **Auto-complete** - Google Places API for address autocomplete\n4. **International support** - Different field structures for non-US addresses\n5. **Multiple addresses** - Allow saving home, work, other addresses\n\n**App-specific adaptations:**\n- **E-commerce:** Emphasize speed, minimal required fields, express checkout option\n- **Food delivery:** GPS location option, delivery instructions prominent, apartment/unit critical\n- **Service booking:** Appointment address, parking instructions, access codes\n- **SaaS/B2B:** Company name, billing address separate from service address\n- **Subscription boxes:** Gift address option, recurring delivery schedule\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Early checkout step (after cart, before payment)\n- Profile setup during account creation\n- Settings page for managing multiple addresses\n- Order detail update for address changes\n\n**What comes before:**\n- `shopping/shopping-cart` - Cart review before address\n- `authentication/signup-screen` - New account, now add address\n- `shopping/product-detail` - Buy now → address\n- Checkout start screen\n\n**What comes after:**\n- `forms/payment_form` - Payment details after shipping address\n- Address verification/confirmation screen\n- Shipping method selection (if multiple options)\n- `special/confirmation-screen` - Order review before placing\n\n**Complete flow example:**\n`shopping/shopping-cart` → **Address Form** → Shipping method → `forms/payment_form` → `special/confirmation-screen`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Address only used for geolocation/search (use location picker)\n- Digital products with no shipping (skip address entirely)\n- Payment processor collects address (Stripe, PayPal)\n- Address already on file and not editable\n\n**Use instead:**\n- Location picker/map - For nearby search or general location\n- Payment processor form - If they handle billing address\n- Simple text field - For informal address collection\n- Geolocation API - For automatic location detection\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- High field count (8-10 fields) significantly increases abandonment\n- State dropdown slow to navigate (especially on mobile)\n- ZIP code format validation confusing (5 vs 9 digits)\n- Apartment/suite field often overlooked (delivery failures)\n- International addresses don't fit US structure\n- Auto-fill doesn't work if field names non-standard\n\n**Conversion optimization:**\n- Pre-fill from account if user logged in\n- Support browser auto-fill (use standard field names)\n- Smart defaults (detect country, pre-select state from ZIP)\n- Address autocomplete (Google Places API)\n- One-line entry option (\"123 Main St, Apt 4B, San Francisco CA 94102\")\n- ZIP lookup for city/state auto-fill\n- Clear optional field labels (don't make everything required)\n- Save address by default (opt-out not opt-in)\n- Express checkout with saved address prominent\n\n**Accessibility notes:**\n- Clear field labels (not just placeholders)\n- Required fields indicated with text (\"Required\") not just asterisk\n- Error messages specific and actionable\n- State dropdown should support type-ahead search\n- Sufficient tap targets (44x44pt minimum)\n- Logical tab order through fields\n- Autocomplete attributes for browser auto-fill\n- Error summary at form top after validation\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "forms/event-scheduling": "# Event Scheduling Form\n\n**ID:** `forms/event-scheduling`\n**Category:** forms\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to create or edit events and appointments with date/time selection, location, reminders, and recurrence options.\n\n**Use this pattern when user mentions:**\n- \"schedule event\", \"create event\", \"add appointment\"\n- \"calendar\", \"meeting\", \"booking\", \"schedule\"\n- \"date picker\", \"time picker\", \"event form\"\n- \"set reminder\", \"recurring event\", \"repeat\"\n- \"book appointment\", \"schedule meeting\"\n\n**Common contexts:**\n- Calendar and scheduling applications\n- Appointment booking systems\n- Meeting scheduling tools\n- Event management features\n- Reminder and task apps with time components\n- Service booking interfaces\n\n**UX Tradeoffs:**\n- **Pro:** Familiar calendar/event interface pattern (high recognition)\n- **Pro:** Date/time pickers reduce entry errors\n- **Pro:** Recurring events handle complex schedules efficiently\n- **Con:** Many fields can overwhelm for simple events\n- **Con:** Date/time selection slower than text entry for power users\n\n**Pairs well with:**\n- `special/calendar-view` - Navigate to event form from calendar\n- `navigation/home-screen` - Quick event creation from home\n- `special/confirmation-screen` - Event created confirmation\n- `settings/notification-settings` - Reminder preferences\n- `social/user-profile` - Invite attendees to events\n\n**Variants available:**\n- **Minimal:** Title, date, time only (use for \"quick event\" or \"simple booking\")\n- **Standard:** Title, date, time, location, reminders (use for most calendar/scheduling apps)\n- **Comprehensive:** All fields plus recurrence, attendees, attachments (use for \"meeting scheduler\" or \"complex events\")\n\n**Related patterns:**\n- Instead of this, consider quick add if event creation should be ultra-fast (natural language)\n- Instead of this, consider booking flow if selecting from available time slots\n\n---\n\n## Description\n\nEvent creation and scheduling form with date picker, time selection, location entry, reminder configuration, and recurrence options. Supports single and recurring events with flexible reminder timing. Use for calendar apps, appointment booking, meeting scheduling, or any time-based event creation. Balances comprehensive event details with streamlined entry for simple events.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [x] Cancel     New Event   [Save]  │\n├────────────────────────────────────┤\n│                                    │\n│ Title                              │\n│ ┌──────────────────────────────┐   │\n│ │ Team Planning Meeting        │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Date                               │\n│ [#] Jan 15, 2025              [▼]  │\n│                                    │\n│ Start Time         End Time        │\n│ [10:00 AM ▼]    [11:30 AM ▼]       │\n│                                    │\n│ Location (Optional)                │\n│ ┌──────────────────────────────┐   │\n│ │ Conference Room A            │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Reminder                           │\n│ 15 minutes before            [▼]   │\n│                                    │\n│ [ ] All-day event                  │\n│ [ ] Repeat                         │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [x] Cancel   Schedule      [Done]  │\n├────────────────────────────────────┤\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Doctor Appointment           │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ [#] Wed, Jan 15              [▼]   │\n│                                    │\n│ [2:30 PM ▼]     [3:30 PM ▼]        │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Medical Center - Suite 200   │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Dr. Sarah Martinez           │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Reminders                          │\n│ [x] 1 day before                   │\n│ [x] 1 hour before                  │\n│                                    │\n│ Notes                              │\n│ ┌──────────────────────────────┐   │\n│ │ Bring insurance card         │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │      Confirm Appointment     │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Back      Team Sync    [Save]  │\n├────────────────────────────────────┤\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Weekly Team Sync             │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ [#] Mon, Jan 13              [▼]   │\n│                                    │\n│ [9:00 AM ▼]     [10:00 AM ▼]       │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Zoom (link in notes)         │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Repeat                             │\n│ [@] Weekly on Monday               │\n│ [ ] Ends: Never               [▼]  │\n│                                    │\n│ Attendees (3)                      │\n│ [@] sarah@co.com                   │\n│ [@] john@co.com                    │\n│ [+] Add attendee                   │\n│                                    │\n│ Reminder: 10 minutes before        │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │      Create Event            │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nevent, scheduling, calendar, appointment, booking, date-picker, time-picker, reminder, recurring-event, meeting\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a form where users can schedule appointments with date, time, location, and set reminders\"\n\n**AI selects this pattern because:**\n- User mentioned \"schedule appointments\" with time components (keyword match)\n- Appointment booking context detected\n- Date, time, location, and reminders all mentioned\n- Standard event scheduling form is appropriate\n\n**AI generates:**\nStandard variant with title, date picker, start/end time pickers, location field, reminder dropdown (15 min, 30 min, 1 hour, 1 day options), and save button\n\n**AI explains tradeoff:**\n- \"Event form uses date/time pickers to prevent format errors and invalid dates. Location optional for virtual meetings. Reminder dropdown offers common options (15 min, 1 hour, 1 day) balancing choice with simplicity. Each field adds friction, but structured input reduces booking errors. All-day toggle simplifies events without specific times.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Recurrence patterns** - None, daily, weekly, monthly, yearly, custom rules\n2. **Reminder options** - Times offered (5 min, 15 min, 30 min, 1 hr, 1 day, 1 week)\n3. **Duration selection** - Separate end time vs duration dropdown (30 min, 1 hr, 2 hr)\n4. **Attendee management** - Email invite, internal user search, RSVP tracking\n5. **Time zones** - Single zone vs multi-zone support for distributed teams\n\n**App-specific adaptations:**\n- **Medical booking:** Provider selection, visit reason, insurance info, patient intake forms\n- **Meeting scheduler:** Video link auto-generation, attendee availability, agenda field\n- **Service booking:** Staff selection, service type, pricing display, payment collection\n- **Personal calendar:** Color coding, calendar selection, privacy settings\n- **Fitness classes:** Instructor, class capacity, waitlist option, cancellation policy\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Event creation from calendar view\n- Quick add from home screen or toolbar\n- Booking form after service/time slot selection\n- Meeting scheduling from team collaboration tools\n\n**What comes before:**\n- `special/calendar-view` - User taps date or \"+\" button\n- `navigation/home-screen` - Quick event creation\n- Service selection screen - User picks service, now schedules\n- Time slot picker - User selects available time\n\n**What comes after:**\n- `special/confirmation-screen` - Event created confirmation\n- `special/calendar-view` - Return to calendar with new event\n- Email/push notification to attendees\n- Add to calendar prompt (if booking from external source)\n\n**Complete flow example:**\n`special/calendar-view` → Tap date → **Event Scheduling Form** → `special/confirmation-screen` → Return to calendar\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Natural language quick add sufficient (\"Coffee with Sarah tomorrow 3pm\")\n- Booking from predefined time slots (use time slot picker)\n- Simple reminder without date (use todo/reminder pattern)\n- Scheduling assistant handles complexity (AI scheduler)\n\n**Use instead:**\n- Natural language input - For power users wanting speed\n- Time slot picker - For booking available appointment times\n- Todo/task pattern - For reminders without specific times\n- Booking widget - For external scheduling (Calendly-style)\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Date/time pickers slower than typing for familiar users\n- Recurrence rules complex and confusing for many users\n- Time zone selection overwhelming (especially for international teams)\n- Too many optional fields tempt users to skip important info\n- Mobile date pickers vary by platform (iOS vs Android behavior)\n\n**Conversion optimization:**\n- Smart defaults (next available slot, 30 min duration, 15 min reminder)\n- Pre-fill location from previous similar events\n- Recent locations list (avoid retyping common places)\n- Natural language alternative (\"Tomorrow at 2pm\")\n- All-day toggle prominently placed (avoids time selection for day events)\n- Duration presets (15 min, 30 min, 1 hr) faster than separate end time\n- Recurrence simplified (daily, weekly, monthly covers 95% of cases)\n- Auto-detect video meeting link from location field\n- Save as draft if user exits before completing\n\n**Accessibility notes:**\n- Date picker needs keyboard navigation and screen reader support\n- Time pickers should support manual text entry as alternative\n- All form fields need clear labels (not just placeholders)\n- Recurrence controls need clear explanations\n- Required fields indicated accessibly\n- Error messages specific and actionable\n- Sufficient tap targets for date/time controls\n- Focus management when pickers open/close\n- Announce changes to screen readers (e.g., \"End time updated to 3:30 PM\")\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "forms/multi-select-interface": "# Multi-Select Interface\n\n**ID:** `forms/multi-select-interface`\n**Category:** forms\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to select multiple items from a list using checkboxes, providing visual feedback on selection count and allowing bulk selection actions.\n\n**Use this pattern when user mentions:**\n- \"multi-select\", \"checkboxes\", \"select multiple\"\n- \"choose multiple items\", \"bulk select\", \"select all\"\n- \"multiple options\", \"checkbox list\", \"pick several\"\n- \"filter by multiple\", \"tag selection\", \"categories\"\n- \"choose interests\", \"preferences selection\"\n\n**Common contexts:**\n- Onboarding preference selection (interests, topics)\n- Filter panels with multiple criteria\n- Bulk actions on list items\n- Tag or category selection\n- Permission or feature toggles\n- Email list subscription preferences\n\n**UX Tradeoffs:**\n- **Pro:** Allows simultaneous selection of multiple items (efficient)\n- **Pro:** Selection state clearly visible (checked vs unchecked)\n- **Pro:** \"Select All\" saves time for many selections\n- **Con:** Too many options create decision paralysis (limit to 15-20 max)\n- **Con:** No clear hierarchy if all options equal weight\n\n**Pairs well with:**\n- `onboarding/welcome` - Interest selection during signup\n- `special/filter-panel` - Multi-criteria filtering\n- `settings/notification-settings` - Multiple notification preferences\n- `forms/multi-step-wizard` - Preference step in wizard\n- `special/data-table-advanced` - Bulk row selection\n\n**Variants available:**\n- **Minimal:** Simple checkbox list (use for \"quick selection\" or \"basic preferences\")\n- **Standard:** Checkboxes with count, Select All/Clear (use for most multi-select scenarios)\n- **Comprehensive:** Grouped categories, search, selection limit (use for \"large lists\" or \"complex filters\")\n\n**Related patterns:**\n- Instead of this, consider radio buttons if only single selection allowed\n- Instead of this, consider toggle switches if items are independent on/off settings\n- Instead of this, consider tags with add/remove if dynamic item creation needed\n\n---\n\n## Description\n\nMulti-select interface using checkboxes to allow selection of multiple items from a list. Shows selection count, provides \"Select All\" and \"Clear All\" shortcuts, and displays apply button to confirm choices. Use for preference selection, filtering, or any scenario requiring multiple simultaneous selections. Balances flexibility of many choices with clear visual feedback.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│         Select Interests           │\n├────────────────────────────────────┤\n│                                    │\n│ [x] Technology                     │\n│ [x] Business                       │\n│ [ ] Entertainment                  │\n│ [x] Sports                         │\n│ [ ] Health                         │\n│ [x] Travel                         │\n│                                    │\n│ Selected: 4 of 6                   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │      Apply Selection         │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│      Choose Your Topics            │\n├────────────────────────────────────┤\n│ Select All │ Clear All             │\n│                                    │\n│ [x] Technology           (125)     │\n│ [x] Business              (89)     │\n│ [ ] Entertainment        (203)     │\n│ [x] Sports                (67)     │\n│ [ ] Health                (91)     │\n│ [x] Travel               (145)     │\n│ [x] Food & Dining         (78)     │\n│ [ ] Science               (45)     │\n│                                    │\n│ 5 of 8 selected                    │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │         Continue             │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│      Filter Products               │\n├────────────────────────────────────┤\n│ [Search categories...]             │\n│                                    │\n│ Select All │ Clear All             │\n│                                    │\n│ Brand                              │\n│ [x] Apple                          │\n│ [ ] Samsung                        │\n│ [x] Google                         │\n│                                    │\n│ Price Range                        │\n│ [ ] Under $50                      │\n│ [x] $50 - $100                     │\n│ [x] $100 - $200                    │\n│ [ ] Over $200                      │\n│                                    │\n│ Features                           │\n│ [x] Wireless                       │\n│ [ ] Water Resistant                │\n│ [x] Fast Charging                  │\n│                                    │\n│ 6 filters active                   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │      Show 47 Results         │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmulti-select, checkboxes, selection, bulk-select, filters, preferences, interests, categories, tags, checkbox-list\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"During onboarding, I want new users to select multiple interest categories so we can personalize their feed\"\n\n**AI selects this pattern because:**\n- User mentioned \"select multiple\" and \"categories\" (keyword match)\n- Onboarding context with preference collection\n- Users should pick several interests (not just one)\n- Multi-select checkbox interface is appropriate\n\n**AI generates:**\nStandard variant with checkbox list of interest categories, \"Select All\" shortcut, selection count (e.g., \"4 of 8 selected\"), and \"Continue\" button\n\n**AI explains tradeoff:**\n- \"Checkboxes allow users to quickly select all relevant interests in one pass. Selection count shows progress and encourages choosing at least a few. 'Select All' helps users who want everything. Too many categories (15+) create decision fatigue, so limit options or group into categories.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Selection limits** - None, minimum required (e.g., \"Select at least 3\"), maximum allowed\n2. **Item metadata** - Item counts in parentheses, icons, descriptions, popularity indicators\n3. **Grouping** - Categories/sections for related items, expandable/collapsible groups\n4. **Search** - Filter long lists by keyword search\n5. **Bulk actions** - \"Select All\", \"Clear All\", \"Invert Selection\"\n\n**App-specific adaptations:**\n- **Onboarding:** Interest selection with icons, recommended tags, minimum 3-5 required\n- **E-commerce filters:** Grouped by facet (Brand, Price, Features), show result count\n- **Email preferences:** Notification categories, frequency options, unsubscribe all\n- **Permissions:** Role-based permission sets, \"Select All Permissions\" shortcut\n- **Content libraries:** Genre/mood selection, combined with preview of filtered results\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Onboarding step for preference collection\n- Filter panel in browse/search interfaces\n- Settings page for notification preferences\n- Bulk action toolbar for list management\n\n**What comes before:**\n- `onboarding/welcome` - Introduction before preference selection\n- `navigation/search-input` - User searches, now filters results\n- Browse screen - User taps \"Filter\" button\n- Settings section entry\n\n**What comes after:**\n- `navigation/home-screen` - Personalized feed based on selections\n- Filtered results screen - Products/content matching selections\n- `settings/account-settings` - Return to settings after saving\n- Confirmation of preference changes\n\n**Complete flow example:**\n`onboarding/welcome` → **Multi-Select Interface** (interests) → `navigation/home-screen` (personalized feed)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Only single selection allowed (use radio buttons instead)\n- Items are independent on/off toggles (use toggle switches)\n- User creates/edits items dynamically (use tag input with add/remove)\n- Binary yes/no choice (use single checkbox or toggle)\n\n**Use instead:**\n- Radio buttons - For single selection from list\n- Toggle switches - For independent on/off settings\n- Tag input - For creating custom selections\n- Dropdown multi-select - If space constrained (not mobile-friendly though)\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Long lists overwhelming (15+ options create decision paralysis)\n- Unclear whether selection minimum/maximum exists\n- No visual feedback on selected count until scrolling to bottom\n- \"Select All\" may select unwanted items users must deselect\n- Search missing on long lists (users can't find items)\n\n**Conversion optimization:**\n- Limit options to 8-12 per category (more = group into sections)\n- Show selection count at top and bottom of long lists\n- Highlight recommended/popular options\n- Provide \"Select All\" but also category grouping for partial bulk selection\n- Show live preview of impact (e.g., \"47 products match these filters\")\n- Make at least one selection required to enable Continue button\n- Auto-scroll to first unselected item after \"Select All\"\n- Persist selections if user navigates away and returns\n\n**Accessibility notes:**\n- Each checkbox needs associated label (not just adjacent text)\n- Keyboard navigation (Tab between items, Space to toggle)\n- Announce selection count to screen readers (\"4 of 6 items selected\")\n- \"Select All\" announces result (\"All 8 items selected\")\n- Group related checkboxes with fieldset and legend\n- Sufficient tap targets (44x44pt minimum including label)\n- High contrast for checked vs unchecked state\n- Focus indicator visible during keyboard navigation\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "forms/multi-step-wizard": "# Multi-Step Form Wizard\n\n**ID:** `forms/multi-step-wizard`\n**Category:** forms\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nBreaks complex forms into manageable steps with progress indicators, allowing users to complete lengthy data collection without overwhelming cognitive load.\n\n**Use this pattern when user mentions:**\n- \"multi-step\", \"wizard\", \"step-by-step form\"\n- \"onboarding flow\", \"setup wizard\", \"registration\"\n- \"progress indicator\", \"step by step\", \"form flow\"\n- \"account setup\", \"profile creation\", \"checkout process\"\n- \"guided form\", \"sequential steps\", \"form stages\"\n\n**Common contexts:**\n- Account creation and onboarding\n- Checkout processes with multiple information types\n- Profile setup requiring various data categories\n- Application or survey forms\n- Configuration wizards\n- Subscription signup flows\n\n**UX Tradeoffs:**\n- **Pro:** Reduces cognitive load by showing one step at a time\n- **Pro:** Progress indicator motivates completion (shows how far along)\n- **Pro:** Allows users to return and edit previous steps\n- **Con:** More screens means more opportunities to abandon (each step loses 10-20%)\n- **Con:** Users can't see full picture of required information upfront\n\n**Pairs well with:**\n- `authentication/signup-screen` - First step in account creation\n- `forms/address_form` - Step for shipping/billing address\n- `forms/payment_form` - Final step in checkout flow\n- `onboarding/welcome` - Introduction before wizard begins\n- `special/confirmation-screen` - Completion confirmation\n\n**Variants available:**\n- **Minimal:** 2-3 steps, basic progress dots (use for \"simple signup\" or \"quick onboarding\")\n- **Standard:** 3-5 steps, numbered progress, back/next navigation (use for most multi-step forms)\n- **Comprehensive:** 5+ steps, detailed progress, step labels, save/resume (use for \"complex applications\" or \"detailed profiles\")\n\n**Related patterns:**\n- Instead of this, use single long form if only 3-5 fields total\n- Instead of this, consider accordion if user needs to see all sections\n\n---\n\n## Description\n\nMulti-step form wizard that breaks complex data collection into sequential screens with progress indicators and navigation controls. Shows current step, total steps, and allows forward/backward movement through form stages. Use for lengthy forms where showing all fields at once would overwhelm users. Balances progressive disclosure with clear navigation and progress feedback.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [x] Cancel      Setup      [Skip]  │\n├────────────────────────────────────┤\n│ Step 1 of 4                        │\n│                                    │\n│ ●───○───○───○                      │\n│ Info Verify Prefs Done             │\n│                                    │\n│ Tell Us About Yourself             │\n│                                    │\n│ Full Name                          │\n│ ┌──────────────────────────────┐   │\n│ │ Sarah Johnson                │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Email Address                      │\n│ ┌──────────────────────────────┐   │\n│ │ sarah@example.com            │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Phone Number (optional)            │\n│ ┌──────────────────────────────┐   │\n│ │ (555) 123-4567               │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │           Next               │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Back        Setup      [Skip]  │\n├────────────────────────────────────┤\n│ Step 2 of 4                        │\n│                                    │\n│ ●───●───○───○                      │\n│ Info Verify Prefs Done             │\n│                                    │\n│ Create Your Password               │\n│                                    │\n│ Password                           │\n│ ┌──────────────────────────────┐   │\n│ │ ••••••••••••                 │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Confirm Password                   │\n│ ┌──────────────────────────────┐   │\n│ │ ••••••••••••                 │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Requirements:                      │\n│ [@] At least 8 characters          │\n│ [@] Contains uppercase letter      │\n│ [x] Contains number                │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │           Next               │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Back        Setup      [Done]  │\n├────────────────────────────────────┤\n│ Step 4 of 4                        │\n│                                    │\n│ ●───●───●───●                      │\n│ Info Verify Prefs Done             │\n│                                    │\n│ Review Your Information            │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Personal Info         [Edit] │   │\n│ │ Sarah Johnson                │   │\n│ │ sarah@example.com            │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Preferences           [Edit] │   │\n│ │ Email notifications: On      │   │\n│ │ Dark mode: Enabled           │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ [x] I agree to Terms of Service    │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │      Complete Setup          │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmulti-step, wizard, form-flow, progress-indicator, onboarding, setup, stepper, sequential-form, guided-form, checkout-flow\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need an account setup flow where new users enter personal info, create a password, set preferences, and review everything before completing\"\n\n**AI selects this pattern because:**\n- User mentioned \"setup flow\" with multiple distinct stages (keyword match)\n- Multiple information types to collect (personal, password, preferences)\n- Need for review step before completion\n- Multi-step wizard reduces overwhelm and guides user through process\n\n**AI generates:**\n4-step wizard with progress indicator, step labels (Info, Verify, Prefs, Done), back/next navigation, and final review step with edit links\n\n**AI explains tradeoff:**\n- \"Breaking signup into 4 steps reduces cognitive load (1-2 fields per screen vs 10+ all at once). Progress bar motivates completion by showing advancement. Each step adds opportunity to abandon (loses ~15% per step), but overall completion higher than single overwhelming form. Review step builds confidence before final submit.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Step count** - 2-3 steps (simple), 3-5 steps (standard), 5+ steps (complex applications)\n2. **Progress style** - Dots, numbered circles, progress bar, step labels, percentage\n3. **Navigation** - Back/Next buttons, Skip options, Save and Resume, Exit confirmation\n4. **Validation timing** - Per-field (inline), per-step (on Next), final only\n\n**App-specific adaptations:**\n- **E-commerce checkout:** Cart → Shipping → Payment → Review (3-4 steps)\n- **Onboarding:** Profile → Preferences → Connections → Tutorial (4-5 steps)\n- **Job applications:** Personal → Experience → Documents → Review (4-6 steps)\n- **Insurance quotes:** Coverage → Details → Quote → Purchase (4 steps)\n- **SaaS signup:** Account → Team → Workspace → Integrations (4 steps)\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Onboarding flow for new users\n- Checkout process in e-commerce\n- Profile setup after initial signup\n- Configuration wizard for new features\n\n**What comes before:**\n- `onboarding/welcome` - Introduction before wizard starts\n- `authentication/signup-screen` - Email/password (wizard step 1)\n- Landing page with \"Get Started\" CTA\n- Feature discovery prompt\n\n**What comes after:**\n- `special/confirmation-screen` - Success confirmation\n- `onboarding/tutorial` - Guided tour of features\n- `navigation/home-screen` - Main app interface\n- Email verification prompt if required\n\n**Complete flow example:**\n`onboarding/welcome` → **Multi-Step Wizard** (4 steps) → `special/confirmation-screen` → `onboarding/tutorial` → `navigation/home-screen`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Form has fewer than 5 total fields (single screen better)\n- User needs to see all fields to understand requirements\n- Data types don't logically separate into distinct steps\n- Speed is prioritized over guidance (express checkout)\n\n**Use instead:**\n- Single form - For 3-5 fields total\n- Accordion form - If user needs overview of all sections\n- Tabbed form - If steps can be completed in any order\n- Express option - Minimal fields with \"More options\" link\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Each additional step increases abandonment risk (~10-15% per step)\n- Back button confusion (browser back vs. wizard back)\n- Progress indicator unclear or missing step labels\n- No way to save progress and return later\n- Validation errors only shown after moving to next step\n- Unexpected total number of steps\n\n**Conversion optimization:**\n- Show total step count upfront (manages expectations)\n- Allow editing previous steps without losing data\n- Validate fields inline (catch errors before Next)\n- Persist data between sessions (save progress)\n- Skip button for optional steps (reduces abandonment)\n- Make first step extremely simple (1-2 fields max builds momentum)\n- Review step with edit links (confidence before final submit)\n- Auto-advance on completed fields (reduce clicks)\n\n**Accessibility notes:**\n- Announce current step and total to screen readers\n- Progress indicator needs text alternative (\"Step 2 of 4\")\n- Back/Next buttons clearly labeled (not just icons)\n- Keyboard navigation between fields and buttons\n- Focus management when moving between steps\n- Error summaries at top of each step\n- Allow skipping to any completed step\n- High contrast for current vs. completed vs. upcoming steps\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "forms/payment_form": "# Payment Form\n\n**ID:** `forms/payment_form`\n**Category:** forms\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nCollects payment card information with validation, security features, and optional save functionality for checkout and subscription flows.\n\n**Use this pattern when user mentions:**\n- \"payment\", \"credit card\", \"debit card\", \"checkout\"\n- \"billing\", \"pay\", \"purchase\", \"card details\"\n- \"payment method\", \"card form\", \"enter card\"\n- \"secure payment\", \"payment processing\"\n- \"e-commerce checkout\", \"subscription payment\"\n\n**Common contexts:**\n- E-commerce checkout flows\n- Subscription signup processes\n- One-time purchase payments\n- Payment method management in settings\n- Adding backup payment methods\n\n**UX Tradeoffs:**\n- **Pro:** Real-time validation reduces errors before submission\n- **Pro:** Card type detection builds trust and confirms input\n- **Pro:** Save option reduces friction for returning customers\n- **Con:** High field count increases abandonment (every field costs 5-10% completion)\n- **Con:** Security concerns make users hesitant to enter card data\n\n**Pairs well with:**\n- `shopping/shopping-cart` - Payment step after cart review\n- `forms/address_form` - Billing address collection\n- `authentication/signup-screen` - New user account creation with payment\n- `settings/account-settings` - Manage saved payment methods\n- `special/confirmation-screen` - Order confirmation after payment\n\n**Variants available:**\n- **Minimal:** Card number, expiry, CVV only (use for \"quick checkout\" or \"fast payment\")\n- **Standard:** All card fields plus save option (use for most e-commerce flows)\n- **Comprehensive:** Full billing details, multiple cards, default selection (use for \"account management\" or \"payment settings\")\n\n**Related patterns:**\n- Instead of this, consider `special/subscription-plan` if selecting plan before payment\n- Instead of this, consider wallet payment if Apple Pay/Google Pay available\n\n---\n\n## Description\n\nPayment card input form with real-time validation, card type detection, and security indicators. Collects card number, expiry date, CVV, and cardholder name with optional billing address and save preferences. Use for checkout flows requiring credit or debit card processing. Balances security requirements with user convenience through progressive disclosure and validation feedback.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Payment Method       [Cancel]  │\n├────────────────────────────────────┤\n│                                    │\n│  Card Information                  │\n│                                    │\n│  Card Number                       │\n│  ┌──────────────────────────────┐  │\n│  │ 4532 1234 5678 9010   [VISA] │  │\n│  └──────────────────────────────┘  │\n│  [@] Valid card number             │\n│                                    │\n│  Expiry Date          CVV          │\n│  ┌──────────────┐  ┌────────────┐  │\n│  │ 12 / 26      │  │ 123   [?]  │  │\n│  └──────────────┘  └────────────┘  │\n│                                    │\n│  Cardholder Name                   │\n│  ┌──────────────────────────────┐  │\n│  │ SARAH JOHNSON                │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [ ] Save for future purchases     │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │      Continue to Review      │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [#] Your payment info is secure   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Add Card                       │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ 4532 1234 5678 9010   [VISA] │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────┐  ┌──────────┐        │\n│  │ 12 / 26  │  │ 123 [?]  │        │\n│  └──────────┘  └──────────┘        │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ SARAH JOHNSON                │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │        Add Card        ]     │  │\n│  └──────────────────────────────┘  │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Payment               [Done]   │\n├────────────────────────────────────┤\n│                                    │\n│  Saved Cards                       │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [@] VISA ****9010      12/26 │  │\n│  │     Primary Card             │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [ ] Mastercard ****5432      │  │\n│  │     Expires 03/27            │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [ ] Amex ****1005            │  │\n│  │     Expires 08/26            │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [+] Add New Card                  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │      Use Selected Card       │  │\n│  └──────────────────────────────┘  │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\npayment, credit-card, debit-card, checkout, billing, card-form, validation, security, e-commerce, subscription, payment-method\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a checkout page where users can enter their credit card to complete a purchase in my online store\"\n\n**AI selects this pattern because:**\n- User mentioned \"credit card\" and \"checkout\" (keyword matches)\n- E-commerce context detected (online store, purchase)\n- Card entry required for payment processing\n- Standard payment form is appropriate\n\n**AI generates:**\nStandard variant with card number, expiry, CVV, cardholder name, validation indicators, and save option\n\n**AI explains tradeoff:**\n- \"Payment form includes real-time validation to catch errors before submission. Card type is auto-detected (Visa, Mastercard, Amex) to build confidence. Save option reduces friction for repeat purchases but adds complexity. Each field reduces completion slightly, so only essential fields included.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Billing address** - Add full address fields for AVS verification (increases security, adds friction)\n2. **Save preferences** - \"Remember card\", \"Set as default\", \"Auto-renew\" checkboxes\n3. **Card types accepted** - Show supported card brands (Visa, MC, Amex, Discover)\n4. **Security badges** - SSL indicators, PCI compliance, secure checkout messaging\n\n**App-specific adaptations:**\n- **E-commerce:** Minimal fields, emphasis on speed, show accepted cards prominently\n- **Subscription SaaS:** Auto-renewal checkbox, billing cycle selector, upgrade/downgrade options\n- **Marketplace:** Split payment options, service fees, seller payout details\n- **Non-profit donations:** Suggested amounts, recurring donation option, tax receipt checkbox\n- **B2B/Enterprise:** Purchase order option, invoice billing, multi-approver workflows\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Final step in checkout before order confirmation\n- Payment method addition in account settings\n- Subscription signup after plan selection\n\n**What comes before:**\n- `shopping/shopping-cart` - Cart review before payment\n- `forms/address_form` - Shipping address collection\n- `special/subscription-plan` - Plan selection for subscriptions\n- `authentication/signup-screen` - Account creation for new users\n\n**What comes after:**\n- `special/confirmation-screen` - Order confirmation with order number\n- `forms/address_form` - Billing address if not collected earlier\n- Processing/loading state during payment authorization\n- `settings/account-settings` - Return to account after saving card\n\n**Complete flow example:**\n`shopping/product-detail` → `shopping/shopping-cart` → `forms/address_form` → **Payment Form** → `special/confirmation-screen`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Payment processor handles card collection (Stripe Checkout, PayPal popup)\n- Only digital wallets accepted (Apple Pay, Google Pay, PayPal)\n- Payment processed offline (invoice, PO, wire transfer)\n- Free product with no payment required\n\n**Use instead:**\n- Hosted payment page - For PCI compliance without card handling\n- Wallet-only buttons - If digital wallets preferred (lower friction)\n- `special/subscription-plan` - If selecting plan, not entering payment yet\n- Invoice/PO form - For B2B offline payment collection\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Card number entry prone to typos (auto-formatting helps)\n- Users forget CVV location (tooltip/image reduces confusion)\n- Expiry date format confusion (MM/YY vs MM/YYYY)\n- Security concerns make users abandon at payment step\n- Mobile keyboard switching between numeric and alpha\n\n**Conversion optimization:**\n- Auto-format card number with spaces (4532 1234 5678 9010)\n- Auto-detect card type and show logo (builds confidence)\n- Inline validation (checkmark for valid input)\n- CVV tooltip with card back image\n- Minimize required fields (only essential data)\n- Show security badges (SSL, PCI, secure checkout)\n- Save card option for repeat purchases\n- Clear error messages with recovery guidance\n- Loading indicator after submit (prevents double-charge concerns)\n\n**Accessibility notes:**\n- Label each field clearly (not just placeholder text)\n- Announce validation errors to screen readers\n- Support autofill/password managers for saved cards\n- Sufficient tap targets (44x44pt minimum)\n- High contrast for field borders and text\n- CVV help should be accessible via keyboard\n- Error messages associated with fields programmatically\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "forms/profile-edit": "# Profile Edit Form\n\n**ID:** `forms/profile-edit`\n**Category:** forms\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to update their personal profile information including name, photo, contact details, bio, and privacy settings.\n\n**Use this pattern when user mentions:**\n- \"edit profile\", \"update profile\", \"profile settings\"\n- \"change name\", \"update photo\", \"edit bio\"\n- \"profile information\", \"personal details\", \"account info\"\n- \"update contact\", \"change email\", \"edit details\"\n- \"profile page\", \"my profile\", \"account profile\"\n\n**Common contexts:**\n- Settings section profile management\n- Social app profile customization\n- Account information updates\n- First-time profile setup after signup\n- Professional profile editing\n- Personal information management\n\n**UX Tradeoffs:**\n- **Pro:** Familiar form layout with clear field organization\n- **Pro:** Photo upload prominent for visual identity\n- **Pro:** Saves each field independently or all at once\n- **Con:** Many fields can overwhelm (group related info)\n- **Con:** Photo upload adds friction on mobile\n\n**Pairs well with:**\n- `settings/account-settings` - Navigate to profile edit from settings\n- `authentication/signup-screen` - Initial profile setup after account creation\n- `social/user-profile` - View profile, tap edit to modify\n- `settings/privacy-settings` - Privacy controls separate from basic info\n- `settings/notification-settings` - Communication preferences\n\n**Variants available:**\n- **Minimal:** Name and photo only (use for \"quick setup\" or \"basic profile\")\n- **Standard:** Name, photo, email, phone, bio (use for most social/community apps)\n- **Comprehensive:** All fields plus privacy toggles, links, verification (use for \"professional profiles\" or \"detailed accounts\")\n\n**Related patterns:**\n- Instead of this, consider inline editing if only one field needs updating\n- Instead of this, consider `forms/multi-step-wizard` if profile setup is complex\n\n---\n\n## Description\n\nProfile editing form for updating user personal information including photo upload, name, contact details, bio, and privacy preferences. Shows current information pre-filled for editing, provides photo upload with preview, and includes save/cancel actions. Use for account settings, social profiles, or any context requiring profile data management. Balances comprehensive information collection with focused field grouping.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Edit Profile           [Done]  │\n├────────────────────────────────────┤\n│                                    │\n│         ┌──────────┐               │\n│         │  [IMG]   │               │\n│         └──────────┘               │\n│       Tap to change photo          │\n│                                    │\n│ First Name                         │\n│ ┌──────────────────────────────┐   │\n│ │ Sarah                        │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Last Name                          │\n│ ┌──────────────────────────────┐   │\n│ │ Johnson                      │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Email                              │\n│ ┌──────────────────────────────┐   │\n│ │ sarah@example.com            │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │       Save Changes           │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Edit Profile           [Done]  │\n├────────────────────────────────────┤\n│                                    │\n│         ┌──────────┐               │\n│         │  [IMG]   │               │\n│         └──────────┘               │\n│       Change Profile Photo         │\n│                                    │\n│ Name                               │\n│ ┌──────────────────────────────┐   │\n│ │ Sarah Johnson                │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Username                           │\n│ ┌──────────────────────────────┐   │\n│ │ @sarahj                      │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Bio                                │\n│ ┌──────────────────────────────┐   │\n│ │ Designer & photographer.     │   │\n│ │ Love exploring new places!   │   │\n│ └──────────────────────────────┘   │\n│ 58/150 characters                  │\n│                                    │\n│ Website                            │\n│ ┌──────────────────────────────┐   │\n│ │ sarahjohnson.com             │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │       Save Changes           │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] My Profile             [Done]  │\n├────────────────────────────────────┤\n│                                    │\n│         ┌──────────┐               │\n│         │  [IMG]   │               │\n│         └──────────┘               │\n│       [Upload Photo] [Remove]      │\n│                                    │\n│ Personal Information               │\n│ ┌──────────────────────────────┐   │\n│ │ Sarah Johnson                │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ sarah@example.com    [@]     │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ (555) 123-4567               │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Bio                                │\n│ ┌──────────────────────────────┐   │\n│ │ Love hiking and photography. │   │\n│ │ Always exploring new places! │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Privacy                            │\n│ Private Account           [ON]     │\n│ Show Online Status        [OFF]    │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │       Save Changes           │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nprofile, edit-profile, user-profile, account-info, personal-info, profile-settings, bio, photo-upload, profile-photo, user-settings\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a profile editing screen where users can update their name, photo, bio, and privacy settings\"\n\n**AI selects this pattern because:**\n- User mentioned \"profile editing\" with multiple fields (keyword match)\n- Social/community app context (photo, bio, privacy)\n- Comprehensive profile data management needed\n- Standard profile edit form is appropriate\n\n**AI generates:**\nComprehensive variant with photo upload, name, username, bio with character counter, website link, email verification badge, and privacy toggles\n\n**AI explains tradeoff:**\n- \"Profile edit form groups personal info, bio, and privacy settings for comprehensive updates. Photo upload is prominent for visual identity (critical in social apps). Bio character limit prevents extremely long descriptions while allowing personality. Privacy toggles inline for convenience. Many fields adds some friction, but users typically edit profile infrequently so completeness prioritized over speed.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Photo handling** - Upload, camera capture, remove, default avatar options\n2. **Verification badges** - Email verified, phone verified, identity verified indicators\n3. **Character limits** - Bio, tagline, description with counters showing remaining\n4. **Privacy controls** - Inline toggles vs separate privacy settings screen\n5. **Field validation** - Real-time validation for username availability, email format\n\n**App-specific adaptations:**\n- **Social networks:** Photo prominent, bio emphasized, username/handle, follower counts\n- **Professional platforms:** Headline, job title, company, skills, certifications\n- **Dating apps:** Photos (multiple), bio, interests, preferences, verification badges\n- **E-commerce:** Display name, shipping addresses link, payment methods link\n- **Fitness apps:** Stats (height, weight, age), goals, activity level, units preference\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Settings section for account management\n- Social profile view with edit button\n- Onboarding after initial signup\n- First-run experience setup\n\n**What comes before:**\n- `settings/account-settings` - Navigate to edit from settings menu\n- `social/user-profile` - View own profile, tap edit button\n- `authentication/signup-screen` - Initial profile setup after account creation\n- Settings search with \"edit profile\" query\n\n**What comes after:**\n- `social/user-profile` - Return to profile view with updated info\n- `settings/account-settings` - Back to settings main screen\n- Confirmation toast \"Profile updated\"\n- `settings/privacy-settings` - Navigate to detailed privacy controls\n\n**Complete flow example:**\n`settings/account-settings` → **Profile Edit** → Save → `social/user-profile` (updated)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Only single field needs updating (use inline editing)\n- Profile setup is complex multi-step process (use wizard)\n- Read-only profile view (no editing allowed)\n- Admin editing another user's profile (different permissions/UI)\n\n**Use instead:**\n- Inline editing - For single field updates on profile view\n- `forms/multi-step-wizard` - For complex onboarding profile setup\n- `settings/account-settings` - For account-level settings vs profile info\n- Admin user management - For editing other users (different layout/permissions)\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Photo upload slow/confusing on mobile\n- Too many fields at once overwhelming\n- Unclear what fields are required vs optional\n- Changes lost if user navigates away before saving\n- No visual feedback on what changed since last save\n- Email/username changes may need verification\n\n**Conversion optimization:**\n- Pre-fill all fields with current values\n- Show \"Save\" button disabled until changes made\n- Auto-save drafts periodically (prevent data loss)\n- Photo upload with drag-drop, paste, camera, and file picker options\n- Character counters for limited fields (encourage completion)\n- Inline validation (username availability, email format)\n- Group related fields visually (Personal Info, Privacy, etc.)\n- Success confirmation after save (toast or checkmark)\n- \"Discard changes?\" confirmation if navigating away with unsaved edits\n\n**Accessibility notes:**\n- Photo upload needs clear instructions for screen readers\n- Alternative text for uploaded photos required\n- All form fields need clear labels (not just placeholders)\n- Character counters announced to screen readers\n- Toggle switches need accessible labels and state\n- Keyboard navigation through all fields\n- Save button accessible via keyboard (Enter key)\n- Error messages associated with specific fields\n- High contrast for field borders and text\n- Sufficient tap targets (44x44pt minimum)\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "forms/review_rating": "# Review and Rating Form\n\n**ID:** `forms/review_rating`\n**Category:** forms\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nCollects user ratings and written reviews for products, services, or experiences with star ratings, text feedback, and optional photo uploads.\n\n**Use this pattern when user mentions:**\n- \"review\", \"rating\", \"feedback\", \"testimonial\"\n- \"star rating\", \"rate product\", \"write review\"\n- \"customer feedback\", \"user reviews\", \"ratings\"\n- \"leave feedback\", \"share experience\", \"rate app\"\n- \"product review\", \"service rating\"\n\n**Common contexts:**\n- E-commerce product reviews after purchase\n- App store rating prompts\n- Service/experience feedback collection\n- Restaurant or venue reviews\n- Course or content ratings\n- Booking confirmation follow-ups\n\n**UX Tradeoffs:**\n- **Pro:** Collects valuable user feedback for trust building\n- **Pro:** Star rating is quick and universal (low friction)\n- **Pro:** Written reviews provide detailed insights\n- **Con:** Multi-field form increases abandonment (50-70% users skip reviews)\n- **Con:** Review moderation required before public display\n\n**Pairs well with:**\n- `shopping/product-detail` - View reviews, tap to write own\n- `special/confirmation-screen` - Post-purchase review prompt\n- `settings/account-settings` - View user's review history\n- `social/user-profile` - Display reviewer profile and credibility\n- `special/success-screen` - Thank you after review submission\n\n**Variants available:**\n- **Minimal:** Star rating only (use for \"quick feedback\" or \"in-app prompts\")\n- **Standard:** Stars plus text review (use for most product/service reviews)\n- **Comprehensive:** Full review with photos, pros/cons, recommendation (use for \"detailed feedback\" or \"verified purchases\")\n\n**Related patterns:**\n- Instead of this, consider quick rating popup if only star rating needed\n- Instead of this, consider `forms/survey` if collecting structured feedback\n\n---\n\n## Description\n\nRating and review form combining star ratings with written feedback and optional photo uploads. Enables users to share experiences and opinions about products, services, or content. Use for post-purchase feedback, app ratings, or any context requiring user-generated reviews. Balances ease of quick ratings with option for detailed feedback.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Write Review         [Cancel]  │\n├────────────────────────────────────┤\n│                                    │\n│  Rate Your Experience              │\n│       [*] [*] [*] [*] [*]          │\n│                                    │\n│  Write Your Review                 │\n│  ┌──────────────────────────────┐  │\n│  │ Amazing product! The quality │  │\n│  │ exceeded my expectations and │  │\n│  │ arrived quickly. Would       │  │\n│  │ definitely recommend to      │  │\n│  │ others.                      │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│  Characters: 128/500               │\n│                                    │\n│  [ ] Post anonymously              │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │       Submit Review          │  │\n│  └──────────────────────────────┘  │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Review Product       [Cancel]  │\n├────────────────────────────────────┤\n│                                    │\n│  Wireless Earbuds Pro              │\n│  Purchased Jan 10, 2025            │\n│                                    │\n│  Overall Rating                    │\n│       [*] [*] [*] [*] [*]          │\n│                                    │\n│  Tell Us More                      │\n│  ┌──────────────────────────────┐  │\n│  │ Great sound quality and      │  │\n│  │ comfortable fit. Battery     │  │\n│  │ lasts all day.               │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│  200 characters minimum            │\n│                                    │\n│  Add Photos (Optional)             │\n│  ┌────┐ ┌────┐ ┌────┐ ┌────┐       │\n│  │[o] │ │[o] │ │[+] │ │    │       │\n│  └────┘ └────┘ └────┘ └────┘       │\n│                                    │\n│  Preferences                       │\n│  [x] Include in public reviews     │\n│  [ ] Share with manufacturer       │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │       Submit Review          │  │\n│  └──────────────────────────────┘  │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Detailed Review      [Cancel]  │\n├────────────────────────────────────┤\n│                                    │\n│  Smart Watch Series 5              │\n│                                    │\n│  Overall Rating                    │\n│       [*] [*] [*] [*] [ ]          │\n│                                    │\n│  Category Ratings                  │\n│  Quality    [*][*][*][*][*]        │\n│  Value      [*][*][*][*][ ]        │\n│  Features   [*][*][*][*][*]        │\n│                                    │\n│  Your Review                       │\n│  ┌──────────────────────────────┐  │\n│  │ Excellent watch with great   │  │\n│  │ fitness tracking. Battery    │  │\n│  │ life could be better.        │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Photos (2/5)                      │\n│  ┌────┐ ┌────┐ ┌────┐              │\n│  │[o] │ │[o] │ │[+] │              │\n│  └────┘ └────┘ └────┘              │\n│                                    │\n│  [x] Recommend to others           │\n│  [ ] Verified purchase badge       │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │       Submit Review          │  │\n│  └──────────────────────────────┘  │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nreview, rating, feedback, stars, testimonial, user-review, product-review, comments, photos, rating-form, customer-feedback\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I want customers to be able to leave reviews with star ratings and photos after they purchase products from my store\"\n\n**AI selects this pattern because:**\n- User mentioned \"reviews\", \"star ratings\", and \"photos\" (keyword matches)\n- E-commerce context detected (customers, products, store, purchase)\n- Post-purchase feedback collection needed\n- Standard review form with photo upload is appropriate\n\n**AI generates:**\nStandard variant with star rating, text review field, photo upload grid (up to 5 photos), character counter, and privacy preferences\n\n**AI explains tradeoff:**\n- \"Review form balances quick star rating (takes 2 seconds) with optional detailed feedback. Photos build trust but increase complexity. Most users only rate without review (quick), but detailed reviews are more valuable for future customers. Post anonymously option reduces friction for shy reviewers.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Rating categories** - Single overall vs. multiple aspects (quality, value, features)\n2. **Character limits** - Minimum (encourages detail) vs. no minimum (reduces abandonment)\n3. **Photo uploads** - Number allowed (0, 3, 5, unlimited) and requirements\n4. **Verification badges** - \"Verified Purchase\", \"Frequent Reviewer\", tenure indicators\n5. **Recommendation toggle** - \"Would you recommend this?\" yes/no question\n\n**App-specific adaptations:**\n- **E-commerce:** Verified purchase badge, photo reviews emphasized, size/fit questions\n- **Restaurants/venues:** Atmosphere, service, food quality separate ratings\n- **App stores:** Version-specific reviews, response to developer option\n- **Services/experiences:** Would recommend toggle, value rating, booking again intent\n- **Content platforms:** Spoiler warnings, helpful vote count, report inappropriate\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Post-purchase follow-up (email or push notification)\n- Order confirmation screen with review prompt\n- Product detail page \"Write a review\" button\n- App rating prompt after key milestone\n\n**What comes before:**\n- `special/confirmation-screen` - Order confirmed, now review\n- `shopping/product-detail` - Product page with \"Write Review\" button\n- Push notification or email with review request\n- Profile section showing \"Items to Review\"\n\n**What comes after:**\n- `special/success-screen` - Thank you for review confirmation\n- `shopping/product-detail` - Return to product with new review visible\n- `social/user-profile` - View all reviews user has written\n- Reward/incentive screen (points, discount for review)\n\n**Complete flow example:**\n`shopping/product-detail` → Purchase → `special/confirmation-screen` → Email reminder → **Review Form** → `special/success-screen`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App doesn't have reviewable content or products\n- Feedback better collected via structured survey\n- Quick NPS score sufficient (1-10 rating)\n- Internal feedback (not public reviews)\n\n**Use instead:**\n- Quick rating modal - For in-app rating prompts (1-5 stars only)\n- `forms/survey` - For structured feedback with specific questions\n- NPS survey - For customer satisfaction measurement\n- Support ticket - For problem reporting vs. reviews\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Most users skip written reviews (50-70% abandonment)\n- Photo upload adds significant friction on mobile\n- Minimum character requirements increase abandonment\n- Privacy concerns about public reviews\n- Form length overwhelming after already completing purchase\n\n**Conversion optimization:**\n- Star rating prominently displayed first (many users stop here)\n- Make text review optional (don't require minimum)\n- Progressive disclosure (photos collapsed until user wants to add)\n- Character counter shows progress, not limitation\n- Anonymous option reduces hesitation\n- Pre-fill product info (user doesn't re-enter)\n- Save draft if user abandons (return later to finish)\n- Timing matters: ask 3-7 days post-purchase (product used, experience fresh)\n\n**Accessibility notes:**\n- Star ratings need keyboard navigation (arrow keys to change rating)\n- Announce current rating to screen readers (\"4 out of 5 stars selected\")\n- Text field needs clear label (not just placeholder)\n- Photo upload alternative text requirements\n- Character counter announced to screen readers\n- Sufficient tap targets for star selection (44x44pt minimum)\n- High contrast for selected vs. unselected stars\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "forms/workout-detail": "# Workout Detail Form\n\n**ID:** `forms/workout-detail`\n**Category:** forms\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to log and track workout sessions with exercise details, sets, reps, weight, duration, and performance notes for fitness tracking.\n\n**Use this pattern when user mentions:**\n- \"workout log\", \"exercise tracking\", \"fitness log\"\n- \"track workout\", \"log exercise\", \"record sets\"\n- \"gym session\", \"training log\", \"workout details\"\n- \"reps and sets\", \"weight tracking\", \"workout notes\"\n- \"fitness tracking\", \"exercise form\", \"training session\"\n\n**Common contexts:**\n- Fitness and workout tracking apps\n- Gym workout loggers\n- Personal training applications\n- Health and wellness platforms\n- Exercise routine builders\n- Sports performance tracking\n\n**UX Tradeoffs:**\n- **Pro:** Real-time tracking during workout keeps users engaged\n- **Pro:** Historical data enables progress tracking over time\n- **Pro:** Structured input ensures consistent data for analytics\n- **Con:** Manual entry between sets interrupts workout flow\n- **Con:** Many fields per exercise adds friction during intense training\n\n**Pairs well with:**\n- `navigation/home-screen` - Start workout from dashboard\n- `special/data-table-advanced` - View workout history and stats\n- `settings/account-settings` - Set weight units, fitness goals\n- `social/user-profile` - Share workouts and achievements\n- `special/confirmation-screen` - Workout completed summary\n\n**Variants available:**\n- **Minimal:** Exercise name, sets, reps only (use for \"quick log\" or \"simple tracking\")\n- **Standard:** Exercise, sets, reps, weight, rest timer (use for most fitness apps)\n- **Comprehensive:** Full details plus tempo, form notes, RPE, progress comparison (use for \"serious training\" or \"personal training\")\n\n**Related patterns:**\n- Instead of this, consider quick log if only total duration matters (cardio sessions)\n- Instead of this, consider pre-built routine if following structured program\n\n---\n\n## Description\n\nWorkout session tracking form with exercise-by-exercise logging of sets, reps, weight, and performance notes. Shows current progress, rest timers, and previous workout comparison. Use for fitness apps, gym workout logging, or personal training tracking. Balances detailed performance data collection with quick in-workout entry.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Workout Details         [Done] │\n├────────────────────────────────────┤\n│                                    │\n│ Morning Strength Training          │\n│ Full Body • 45 minutes             │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Progress: 32:15 / 45:00      │   │\n│ │ Calories: 285 kcal           │   │\n│ │ Heart Rate: 142 bpm          │   │\n│ │                              │   │\n│ │ [───────────◆──────] 72%     │   │\n│ │                              │   │\n│ │ [Pause]  [End Workout]       │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Current Exercise                   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Barbell Squats - Set 3 of 4  │   │\n│ │                              │   │\n│ │ Target: 12 reps @ 135 lbs    │   │\n│ │ Last: 12 reps @ 130 lbs      │   │\n│ │                              │   │\n│ │ Rest Timer: 1:32             │   │\n│ │                              │   │\n│ │ ┌──────────────────────────┐ │   │\n│ │ │   Complete Set           │ │   │\n│ │ └──────────────────────────┘ │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Log Workout             [Save] │\n├────────────────────────────────────┤\n│                                    │\n│ Bench Press                        │\n│                                    │\n│ Set 1                              │\n│ Reps: [8]    Weight: [185] lbs     │\n│ [@] Completed                      │\n│                                    │\n│ Set 2                              │\n│ Reps: [8]    Weight: [185] lbs     │\n│ [@] Completed                      │\n│                                    │\n│ Set 3                              │\n│ Reps: [7]    Weight: [185] lbs     │\n│ [@] Completed                      │\n│                                    │\n│ Set 4                              │\n│ Reps: [__]   Weight: [185] lbs     │\n│ [ ] Not started                    │\n│                                    │\n│ [+] Add Set                        │\n│                                    │\n│ Notes                              │\n│ ┌──────────────────────────────┐   │\n│ │ Form felt good today         │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │     Next Exercise            │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Workout Summary         [Done] │\n├────────────────────────────────────┤\n│                                    │\n│ Upper Body - Jan 13, 2025          │\n│ Duration: 58 minutes               │\n│                                    │\n│ Exercises Completed (4)            │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Bench Press                  │   │\n│ │ 4 sets • 185 lbs             │   │\n│ │ 32, 30, 28, 25 reps          │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Barbell Rows                 │   │\n│ │ 4 sets • 155 lbs             │   │\n│ │ 12, 12, 10, 10 reps          │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Shoulder Press               │   │\n│ │ 3 sets • 95 lbs              │   │\n│ │ 12, 10, 8 reps               │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Total Volume: 12,450 lbs           │\n│ Calories Burned: 342 kcal          │\n│                                    │\n│ [Share] [View Stats]               │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nworkout, fitness, exercise, training-log, gym, sets-reps, weight-tracking, workout-log, fitness-tracking, exercise-form\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a workout tracking screen where users can log exercises with sets, reps, and weight during their gym session\"\n\n**AI selects this pattern because:**\n- User mentioned \"workout tracking\" with specific metrics (keyword match)\n- Gym/fitness context detected (exercises, sets, reps, weight)\n- Real-time logging during workout session\n- Standard workout detail form is appropriate\n\n**AI generates:**\nStandard variant with exercise name, set-by-set logging (reps, weight), completion checkmarks, rest timer between sets, previous workout comparison, and notes field\n\n**AI explains tradeoff:**\n- \"Workout form logs each set individually for detailed tracking (enables progress analysis). Shows last workout data for comparison (motivates improvement). Rest timer helps recovery. Each set logged adds friction during workout, but provides valuable data for long-term progress tracking. Quick 'Complete Set' button minimizes interruption to workout flow.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Metrics tracked** - Reps, weight, time, distance, RPE (rate of perceived exertion)\n2. **Rest timer** - Countdown timer between sets, customizable duration\n3. **Progress indicators** - Comparison to previous workout, personal records highlighted\n4. **Workout notes** - Form notes, difficulty rating, energy level\n5. **Auto-progression** - Suggest weight increases based on performance\n\n**App-specific adaptations:**\n- **Bodybuilding:** Tempo tracking, time under tension, muscle groups targeted\n- **Powerlifting:** 1RM calculations, percentage-based programming, video form checks\n- **CrossFit:** AMRAP rounds, time caps, scaled/RX designations\n- **Cardio tracking:** Distance, pace, heart rate zones, elevation\n- **Personal training:** Client notes, form cues, injury modifications\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Active workout session logging\n- Post-workout data entry and review\n- Exercise detail from workout routine\n- Progress tracking and history review\n\n**What comes before:**\n- `navigation/home-screen` - Start workout button\n- Workout routine selection screen\n- Exercise library selection\n- Previous workout review\n\n**What comes after:**\n- `special/confirmation-screen` - Workout completed summary\n- `special/data-table-advanced` - Workout history and analytics\n- `social/user-profile` - Share workout achievement\n- Rest/recovery timer before next workout\n\n**Complete flow example:**\n`navigation/home-screen` → Select routine → **Workout Detail** (log exercises) → `special/confirmation-screen` (summary) → `social/user-profile` (share)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Only total workout time matters (use simple timer)\n- Following guided video workout (use video player with progress)\n- Group fitness class (use attendance check-in)\n- Automatic tracking via wearable (no manual entry needed)\n\n**Use instead:**\n- Simple workout timer - For timed circuits or HIIT\n- Video workout player - For guided exercise videos\n- Activity tracker integration - If wearable handles logging\n- Quick log - For casual users wanting minimal tracking\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Manual entry between sets interrupts workout rhythm\n- Too many fields per exercise slows logging\n- Small touch targets difficult with sweaty fingers/gloves\n- Keyboard input cumbersome during active workout\n- Forgetting to log sets reduces data accuracy\n- Battery drain from continuous screen-on during workout\n\n**Conversion optimization:**\n- Pre-populate with last workout's data (quick adjustment vs starting from zero)\n- Large tap targets for set completion (easy to hit during workout)\n- Quick entry modes (swipe gestures, voice input, +/- buttons)\n- Auto-save drafts (prevent data loss if app crashes)\n- Offline mode (gym WiFi often unreliable)\n- Background rest timers (audio cues, don't require screen on)\n- Smart suggestions (increase weight if reps exceeded target)\n- Template workouts (tap to start vs building from scratch)\n- Minimal required fields (just reps/weight, everything else optional)\n\n**Accessibility notes:**\n- Large, high-contrast buttons for mid-workout visibility\n- Voice input alternative for hands-free logging\n- Audio feedback for timer completion\n- Haptic feedback for successful set logging\n- Screen brightness considerations (dim gym lighting)\n- Support for landscape orientation on tablets\n- Prevent screen lock during active workout\n- Announce timer countdown to screen readers\n- Simple number pickers for rep/weight entry\n- Undo last entry option for mistakes\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "media/audio-recorder": "# Voice Memo Recorder\n\n**ID:** `media/audio-recorder`\n**Category:** media\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nVoice recording interface with waveform visualization, recording controls, and playback of saved audio memos for note-taking and voice capture.\n\n**Use this pattern when user mentions:**\n- \"voice recorder\", \"record audio\", \"voice memo\"\n- \"audio recording\", \"voice notes\"\n- \"record voice\", \"audio capture\"\n- \"dictation\", \"voice recording app\"\n- \"meeting notes\", \"audio notes\"\n\n**Common contexts:**\n- Note-taking and productivity apps\n- Meeting and lecture recording\n- Podcast recording apps\n- Language learning with voice practice\n- Journalism and interview recording\n\n**UX Tradeoffs:**\n- **Pro:** Waveform visualization provides real-time feedback during recording\n- **Pro:** List of recordings enables quick access to all memos\n- **Pro:** Inline playback controls for instant review\n- **Pro:** Recording duration visible at all times\n- **Con:** Microphone permission required\n- **Con:** Large audio files consume storage space\n- **Con:** Recording list can become overwhelming with many memos\n- **Con:** Waveform may not be meaningful to all users\n\n**Variants available:**\n- **Minimal:** Record button and timer only (use for \"quick voice note\" or \"simple recording\")\n- **Standard:** Add waveform, playback list, basic editing (use for most voice memo apps)\n- **Comprehensive:** Transcription, folders, tagging, sharing, advanced editing (use for \"professional recording app\")\n\n**Pairs well with:**\n- `forms/text-input` - Add text notes or transcription\n- `lists/recordings-list` - Browse and organize recordings\n- `settings/audio-settings` - Configure recording quality\n- `social/feed` - Share audio clips\n- `messaging/chat-thread` - Send voice messages\n\n**Related patterns:**\n- Instead of this, consider `media/audio_player` if playing back audio only\n- Instead of this, consider `messaging/voice-message` for chat-based voice messages\n\n---\n\n## Description\n\nVoice recording interface with real-time waveform visualization, recording controls, and playback list of saved audio memos. Shows recording duration, audio levels via waveform, and saved recordings with timestamps. Includes controls for record/pause/stop and playback of previous memos. Use for note-taking apps, voice memo features, and any audio recording functionality. Balances simplicity with essential recording features.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Voice Memo               [X]   │\n├────────────────────────────────────┤\n│                                    │\n│ Recording Voice Memo               │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │                                │ │\n│ │          [M]                   │ │\n│ │                                │ │\n│ │     Recording: 0:45            │ │\n│ │                                │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ▁▃▅▇▅▃▁▃▅▇▅▃▁▅▇▃▁▃▅▇▃▁▃▅▇          │\n│                                    │\n│ [O] 0:45 / --:--                   │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │My Recording 001 [X]            │ │\n│ │Today at 2:45 PM • 0:45         │ │\n│ │                                │ │\n│ │▁▃▅▇▅▃▁▃▅▇▅▃▁▅▇    [>]          │ │\n│ │0:00 / 0:45                     │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │Meeting Notes [X]               │ │\n│ │Yesterday 10:30 AM • 3:22       │ │\n│ │                                │ │\n│ │▁▃▅▇▅▃▁▃▅▇▅▃▁▅▇    [>]          │ │\n│ │0:00 / 3:22                     │ │\n│ └────────────────────────────────┘ │\n│                                    │\n├────────────────────────────────────┤\n│ [List] [Record] [Share] [Settings] │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmedia, audio-recorder, voice-memo, voice-recording, audio-capture, waveform, voice-notes, recording, dictation, audio-notes\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a voice recorder where users can record audio memos, see recording levels, and play back their saved recordings\"\n\n**AI selects this pattern because:**\n- User mentioned \"voice recorder\" and \"audio memos\" (keyword matches)\n- Recording functionality required with real-time feedback\n- Need to display recording duration and levels\n- Playback of saved recordings mentioned\n- Standard voice memo interface appropriate\n\n**AI generates:**\nStandard variant with recording controls, waveform visualization, timer, and list of saved recordings with inline playback\n\n**AI explains tradeoff:**\n- \"Voice recorder shows waveform visualization for real-time audio level feedback during recording. Recording duration is always visible. List of saved memos enables quick access to all recordings with inline playback controls. Each recording shows timestamp and duration. Microphone permission required. Consider minimal variant if only basic recording needed without playback list.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Recording controls** - Pause/resume, delete recording, mark important, trim/edit\n2. **Waveform display** - Audio levels, frequency spectrum, silence detection indicator\n3. **Recording metadata** - Title editing, tags, folders, location, transcription\n4. **Playback features** - Playback speed, skip silence, bookmark positions, export/share\n\n**App-specific adaptations:**\n- **Note-taking:** Auto-transcription, searchable text, sync with written notes, AI summaries\n- **Podcast recording:** Multi-track recording, noise reduction, compression, audio effects\n- **Language learning:** Pronunciation comparison, slow playback, repetition drills\n- **Journalism:** Interview mode, timestamped markers, speaker labels, export formats\n- **Music practice:** Tuner, metronome, loop sections, layer recordings\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary feature accessed from main navigation\n- Quick record from widget or shortcut\n- Voice note in messaging or collaboration app\n\n**What comes before:**\n- Main app navigation - User accesses recorder\n- `lists/recordings-list` - User views all recordings and starts new one\n- `messaging/chat-thread` - User sends voice message\n- Widget or shortcut - Quick record access\n\n**What comes after:**\n- Transcription view - User reviews auto-generated text\n- `forms/text-input` - User adds title or notes to recording\n- `social/feed` - User shares audio clip\n- `messaging/chat-thread` - User sends recorded audio\n- Export/share options - User saves or shares file\n\n**Complete flow example:**\nQuick record shortcut → **Audio Recorder** → Transcription → `forms/text-input` (add notes) → Save\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Playing back existing audio only (use `media/audio_player`)\n- Chat-based voice messages (use `messaging/voice-message`)\n- Video recording needed (use `media/camera-capture`)\n- Professional multi-track audio production\n\n**Use instead:**\n- `media/audio_player` - For playback of audio content only\n- `messaging/voice-message` - For conversational voice messages in chat\n- `media/camera-capture` - If video recording required\n- Professional audio software - For complex production needs\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Microphone permission required (users may deny)\n- Storage space concerns with many/long recordings\n- Recording list becomes cluttered over time\n- Waveform may not be meaningful to all users\n- Background recording restrictions on mobile\n- Accidental recording deletion\n- Large file sizes for long recordings\n\n**Optimization opportunities:**\n- Auto-pause on silence (save file size)\n- Background recording with notification\n- Quick actions (delete, share, rename) on swipe\n- Folders or tags for organization\n- Auto-transcription for searchability\n- Cloud sync across devices\n- Playback speed control (0.5x - 2x)\n- Trim/edit recording inline\n- Merge multiple recordings\n- Export in multiple formats (M4A, MP3, WAV)\n- Share via standard system share sheet\n\n**Accessibility notes:**\n- Screen reader announces recording status\n- Haptic feedback when recording starts/stops\n- Visual indicator for recording (not just audio)\n- Large touch target for record button (60x60pt+)\n- Voice control to start/stop recording\n- Visual waveform provides feedback for hearing impaired\n- High contrast mode for all controls\n- Alternative to audio-only interface (show transcription)\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "media/audio_player": "# Music Player Interface\n\n**ID:** `media/audio_player`\n**Category:** media\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nAudio playback interface with album art, playback controls, progress tracking, and queue management for music and podcast listening experiences.\n\n**Use this pattern when user mentions:**\n- \"music player\", \"audio player\", \"now playing\"\n- \"play music\", \"listen to songs\", \"music app\"\n- \"playback controls\", \"audio controls\"\n- \"album art\", \"music interface\", \"song player\"\n- \"podcast player\", \"audio playback\"\n\n**Common contexts:**\n- Music streaming applications\n- Podcast listening apps\n- Audio content platforms\n- Media library players\n- Radio or streaming services\n\n**UX Tradeoffs:**\n- **Pro:** Large album artwork creates immersive listening experience\n- **Pro:** Progress bar gives clear visual feedback on playback position\n- **Pro:** Up Next queue helps users plan listening session\n- **Pro:** Standard controls are immediately familiar to all users\n- **Con:** Large artwork takes significant screen space\n- **Con:** Queue preview reduces space for other features\n- **Con:** Multiple control areas can feel cluttered on small screens\n\n**Variants available:**\n- **Minimal:** Basic play/pause and progress only (use for \"simple player\" or \"background audio\")\n- **Standard:** Full controls with album art and up next preview (use for most music apps)\n- **Comprehensive:** Add lyrics, audio effects, sharing, playlist management (use for \"full-featured music app\")\n\n**Pairs well with:**\n- `media/music-playlist` - Browse and select tracks\n- `social/feed` - Share music to social feed\n- `settings/audio-settings` - Configure audio quality and playback\n- `search/search-results` - Find songs and artists\n- `lists/music-library` - Browse user's music collection\n\n**Related patterns:**\n- Instead of this, consider `media/video-player-full` if playing video content\n- Instead of this, consider `media/audio-recorder` if recording audio\n\n---\n\n## Description\n\nAudio playback interface with album artwork, playback controls, progress bar, and up next queue. Displays currently playing track with artist, album, and time information. Includes standard media controls (previous, play/pause, next) and action buttons (like, share, queue). Use for music streaming apps, podcast players, and any audio content platform. Balances visual appeal with functional controls.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Now Playing                    │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │                                │ │\n│ │      [Album Artwork]           │ │\n│ │                                │ │\n│ │                                │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Thinking Out Loud                  │\n│ Ed Sheeran                         │\n│ x (Deluxe Edition)                 │\n│                                    │\n│ ━━━━━━●━━━━━━━━━━━━━━━━━━━━━━━     │\n│ 1:42                        4:41   │\n│                                    │\n│     [<<]    [||]    [>>]           │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │Up Next [+]                     │ │\n│ │                                │ │\n│ │> Photograph                    │ │\n│ │  Ed Sheeran • x                │ │\n│ │                                │ │\n│ │> Shape of You                  │ │\n│ │  Ed Sheeran • ÷                │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [<3] [^] [=] [...]                 │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmedia, audio-player, music-player, now-playing, playback, music-streaming, podcast-player, album-art, queue, playback-controls, audio-playback\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a music player screen where users can see what's playing, control playback, and view upcoming songs\"\n\n**AI selects this pattern because:**\n- User mentioned \"music player\" and \"playback\" (keyword matches)\n- Need to display currently playing track information\n- Playback controls required (play/pause, skip)\n- Queue management mentioned (\"upcoming songs\")\n- Standard music player interface appropriate\n\n**AI generates:**\nStandard variant with album artwork, full playback controls, progress bar, and up next queue preview\n\n**AI explains tradeoff:**\n- \"Music player shows large album artwork for immersive experience, but takes significant screen space. Progress bar gives clear feedback on playback position. Up Next queue helps users plan their listening session. Standard play/pause/skip controls are familiar to all users. Consider minimal variant if screen space is limited.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Queue display** - Show 2-10 upcoming tracks, add drag-to-reorder, clear queue button\n2. **Action buttons** - Like/favorite, share, add to playlist, shuffle, repeat modes\n3. **Progress controls** - Scrubbing, 15-second skip, playback speed controls\n4. **Audio visualizer** - Waveform, spectrum analyzer, now playing animation\n\n**App-specific adaptations:**\n- **Music streaming:** Lyrics display, crossfade settings, audio quality selector, download toggle\n- **Podcast app:** Chapter markers, sleep timer, playback speed (0.5x-2x), skip silence\n- **Radio app:** Station info, live broadcast indicator, record function, station favorites\n- **Audiobook app:** Bookmarks, sleep timer, chapter navigation, reading progress\n- **Meditation app:** Loop controls, ambient mixer, session timer, background sounds\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Full-screen playback interface accessed from anywhere in app\n- Persistent mini-player that expands to this view\n- Now Playing screen in music/podcast apps\n\n**What comes before:**\n- `media/music-playlist` - User selects track from playlist\n- `search/search-results` - User finds and plays song\n- `lists/music-library` - User browses library and selects track\n- `social/feed` - User taps shared music link\n\n**What comes after:**\n- `media/music-playlist` - User opens full queue/playlist\n- `social/feed` - User shares currently playing track\n- `settings/audio-settings` - User adjusts audio quality or playback settings\n- Mini-player collapsed view (user continues browsing app)\n\n**Complete flow example:**\n`search/search-results` → **Audio Player** → `social/feed` (share track) → Mini-player (browse app)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Playing video content (use `media/video-player-full`)\n- Recording audio (use `media/audio-recorder`)\n- Background audio only with no UI needed\n- Web browser audio player (use simplified controls)\n\n**Use instead:**\n- `media/video-player-full` - For video content with audio\n- `media/audio-recorder` - For recording instead of playback\n- Mini-player only - If full-screen player not needed\n- Embedded player controls - For in-content audio (articles, posts)\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Large album art looks great but limits space for other features\n- Queue preview helpful but can feel cluttered on small screens\n- Multiple action buttons can overwhelm users\n- Scrubbing progress bar difficult on mobile (small touch target)\n- Background play expectations when user switches apps\n\n**Optimization opportunities:**\n- Gesture controls (swipe for skip, tap artwork to pause)\n- Lock screen controls (system media controls)\n- Car/headphone integration (external playback controls)\n- Queue gestures (swipe to remove from queue)\n- Smart suggestions (related tracks, radio mode)\n- Crossfade between tracks for seamless listening\n- Gapless playback for albums\n- Cache next track for instant playback\n\n**Accessibility notes:**\n- Announce track changes to screen readers\n- Playback controls should be large touch targets (44x44pt)\n- Support hardware buttons (volume, play/pause on headphones)\n- Voice control compatibility (\"Hey Siri, skip this song\")\n- High contrast mode for controls and text\n- Dynamic type support for track/artist names\n- Alternative text for album artwork\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "media/camera-capture": "# Camera Capture Interface\n\n**ID:** `media/camera-capture`\n**Category:** media\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nCamera interface for capturing photos and videos with mode selection, preview display, and quick access to captured media gallery.\n\n**Use this pattern when user mentions:**\n- \"camera\", \"take photo\", \"capture photo\"\n- \"record video\", \"camera interface\"\n- \"photo capture\", \"video recording\"\n- \"camera app\", \"take picture\"\n- \"selfie\", \"front camera\", \"rear camera\"\n\n**Common contexts:**\n- Social media photo/video sharing\n- Documentation and scanning apps\n- Video calling and conferencing\n- Messaging apps with camera\n- Photo editing and filter apps\n\n**UX Tradeoffs:**\n- **Pro:** Full viewfinder shows exactly what will be captured\n- **Pro:** Mode switcher (photo/video/portrait) is discoverable\n- **Pro:** Gallery thumbnail provides quick access to review\n- **Pro:** Simple capture button matches native camera apps\n- **Con:** Viewfinder requires camera permissions\n- **Con:** Multiple modes can confuse first-time users\n- **Con:** Flash and other settings add complexity\n- **Con:** Gallery thumbnail may expose private photos\n\n**Variants available:**\n- **Minimal:** Viewfinder and capture button only (use for \"quick photo\" or \"simple camera\")\n- **Standard:** Add mode selector and gallery access (use for most camera features)\n- **Comprehensive:** Effects, filters, timer, grid, manual controls (use for \"pro camera app\" or \"photo editing\")\n\n**Pairs well with:**\n- `media/photo-gallery` - Review and select captured photos\n- `social/post-composer` - Share captured media\n- `media/photo-picker-multi` - Select multiple photos after capture\n- `forms/profile-edit` - Upload profile picture\n- `messaging/chat-thread` - Send photos in conversation\n\n**Related patterns:**\n- Instead of this, consider `media/photo-picker-multi` if selecting existing photos only\n- Instead of this, consider `media/video-player-full` if playing back video only\n\n---\n\n## Description\n\nCamera capture interface with live viewfinder, mode selection (photo/video/portrait), and capture controls. Shows live preview with focus indicator, flash toggle, and camera switch. Includes gallery thumbnail for quick access to recently captured media. Use for social apps, messaging, and any feature requiring photo or video capture. Balances simplicity with essential camera features.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [X]                          [!]   │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │                                │ │\n│ │                                │ │\n│ │                                │ │\n│ │           (+)                  │ │\n│ │                                │ │\n│ │                                │ │\n│ │                                │ │\n│ │                                │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Photo  Video  Portrait             │\n│                                    │\n│ [Flash] [O] [Flip]                 │\n│                                    │\n│ ┌─────┐                            │\n│ │ IMG │                            │\n│ │     │                            │\n│ └─────┘                            │\n│                                    │\n├────────────────────────────────────┤\n│ [Library] [Capture] [Filters]      │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmedia, camera, photo-capture, video-capture, camera-interface, viewfinder, take-photo, record-video, camera-modes, portrait-mode\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a camera screen where users can take photos, switch between photo and video mode, and see what they're capturing\"\n\n**AI selects this pattern because:**\n- User mentioned \"camera\" and \"take photos\" (keyword matches)\n- Need viewfinder to show live preview\n- Multiple modes required (photo/video)\n- Standard camera capture interface appropriate\n\n**AI generates:**\nStandard variant with full viewfinder, mode selector (photo/video/portrait), capture button, and gallery thumbnail\n\n**AI explains tradeoff:**\n- \"Camera interface shows full viewfinder so users see exactly what will be captured. Mode switcher (photo/video/portrait) is easily accessible but adds slight complexity. Gallery thumbnail provides quick review access but requires photo library permission. Flash and flip camera controls are essential but add buttons. Consider minimal variant if only basic photo capture needed.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Camera modes** - Photo, video, portrait, panorama, slow-mo, time-lapse, night mode\n2. **Capture controls** - Timer, burst mode, HDR, live photo, filters\n3. **Settings overlay** - Flash (on/off/auto), grid, aspect ratio, resolution\n4. **Effects/filters** - Real-time beauty filters, AR effects, color adjustments\n\n**App-specific adaptations:**\n- **Social media:** Real-time filters, stickers, AR lenses, music overlay for videos\n- **Messaging:** Quick send, disappearing media, drawing tools, text overlay\n- **Documentation:** Document scanner, OCR, edge detection, auto-enhance\n- **Professional photo:** Manual controls (ISO, shutter, focus), RAW capture, histogram\n- **Video conferencing:** Background blur, virtual backgrounds, beauty mode, lighting adjustment\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Accessed from action button or main navigation\n- Quick capture from messaging or social post\n- Profile picture upload flow\n\n**What comes before:**\n- `social/post-composer` - User chooses to add photo/video\n- `messaging/chat-thread` - User sends photo in conversation\n- `forms/profile-edit` - User updates profile picture\n- Main app navigation - User accesses camera feature\n\n**What comes after:**\n- `media/photo-gallery` - User reviews captured media\n- `social/post-composer` - User adds caption and shares\n- `messaging/chat-thread` - User sends captured photo\n- Photo editor - User applies filters or edits\n- Confirmation/review screen before saving\n\n**Complete flow example:**\n`social/post-composer` → **Camera Capture** → Photo editor → `social/post-composer` → Post published\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Only selecting existing photos (use `media/photo-picker-multi`)\n- Playing back video (use `media/video-player-full`)\n- No camera hardware available\n- Web browser limitations (use file upload instead)\n\n**Use instead:**\n- `media/photo-picker-multi` - To select from existing photos only\n- `media/photo-gallery` - To browse already captured photos\n- File upload input - For web/desktop with no camera access\n- QR code scanner - For specialized barcode/QR scanning\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Camera permission required (users may deny)\n- Multiple modes can confuse first-time users\n- Flash settings not always obvious\n- Flip camera button location varies by app\n- Gallery thumbnail may expose sensitive photos\n- Viewfinder orientation on rotation\n- Storage space concerns for large files\n\n**Optimization opportunities:**\n- Tap to focus and expose (standard camera gesture)\n- Pinch to zoom in viewfinder\n- Volume button as shutter (hardware integration)\n- Quick swipe between modes\n- Auto-detect best mode (portrait, night, macro)\n- Grid overlay for composition (rule of thirds)\n- Level indicator for straight photos\n- Instant preview after capture with keep/retake options\n- Burst mode with hold gesture\n- Save location data (geotagging) with permission\n\n**Accessibility notes:**\n- Voice control for hands-free capture (\"Say cheese\")\n- Screen reader descriptions for all controls\n- High contrast mode for buttons and text\n- Large touch targets for capture button (60x60pt+)\n- Haptic feedback on capture\n- Audio feedback when photo taken (adjustable volume)\n- Front camera for users who need to see themselves\n- Alternative to flash (screen flash for selfies)\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "media/music-playlist": "# Music Playlist\n\n**ID:** `media/music-playlist`\n**Category:** media\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nMusic player interface with album artwork, playback controls, queue management, and recently played tracks for comprehensive music listening and playlist navigation.\n\n**Use this pattern when user mentions:**\n- \"music playlist\", \"now playing\", \"music queue\"\n- \"song list\", \"music player with playlist\"\n- \"playback queue\", \"up next\"\n- \"music with track list\", \"playlist view\"\n- \"recently played\", \"music history\"\n\n**Common contexts:**\n- Music streaming applications\n- Playlist management in music apps\n- Radio apps with track history\n- DJ and music mixing apps\n- Podcast apps with episode queues\n\n**UX Tradeoffs:**\n- **Pro:** Large album art creates immersive visual experience\n- **Pro:** Progress bar and controls enable precise playback management\n- **Pro:** Up Next queue helps users plan listening session\n- **Pro:** Recently Played provides easy access to replay favorites\n- **Pro:** Shuffle/repeat controls visible and accessible\n- **Con:** Long track lists push current track info up and out of view\n- **Con:** Queue management can feel overwhelming with many tracks\n- **Con:** Multiple sections compete for limited screen space\n- **Con:** Small text in track lists hard to read while moving\n\n**Variants available:**\n- **Minimal:** Current track with basic controls only (use for \"simple player\" or \"background music\")\n- **Standard:** Add up next queue and playback options (use for most music apps)\n- **Comprehensive:** Full queue editing, lyrics, history, recommendations (use for \"full-featured music platform\")\n\n**Pairs well with:**\n- `media/audio_player` - Simplified player without queue management\n- `search/search-results` - Find and add tracks to queue\n- `lists/music-library` - Browse full music collection\n- `social/feed` - Share currently playing track\n- `settings/audio-settings` - Configure audio quality and playback\n\n**Related patterns:**\n- Instead of this, consider `media/audio_player` if queue management not needed\n- Instead of this, consider `media/video-player-full` if playing video content\n\n---\n\n## Description\n\nComprehensive music player with large album artwork, progress bar, playback controls, and track queue management. Displays currently playing track with artist and album, full playback controls (shuffle, previous, play/pause, next, repeat), up next queue, and recently played tracks. Includes quick actions for liking and adding to playlist. Use for music streaming apps, playlist management, and any music player requiring queue visibility. Balances current track prominence with queue management.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Now Playing                    │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │     [~] Album Art [~]          │ │\n│ │                                │ │\n│ │    Bohemian Rhapsody           │ │\n│ │    by Queen                    │ │\n│ │    A Night at the Opera        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │●━━━━━━━━━◆━━━━━━━━━━━━━━       │ │\n│ │2:34                   5:55     │ │\n│ │                                │ │\n│ │   [<<]   [||]   [>>]           │ │\n│ │                                │ │\n│ │[Shuf] [Rept] [Like]            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Up Next in Queue                   │\n│                                    │\n│ > Somebody to Love                 │\n│   Queen • 4:56                     │\n│                                    │\n│ > Don't Stop Me Now                │\n│   Queen • 3:29                     │\n│                                    │\n│ > Radio Ga Ga                      │\n│   Queen • 5:48                     │\n│                                    │\n│ Recently Played                    │\n│                                    │\n│ > Hotel California                 │\n│   Eagles • 6:30                    │\n│                                    │\n│ > Sweet Child O' Mine              │\n│   Guns N' Roses • 5:56             │\n│                                    │\n│ > Stairway to Heaven               │\n│   Led Zeppelin • 8:02              │\n│                                    │\n│ [Add to Playlist]                  │\n│                                    │\n├────────────────────────────────────┤\n│ [Home] [Search] [Library] [Radio]  │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmedia, music-playlist, now-playing, music-queue, playlist, playback-queue, up-next, music-player, recently-played, track-list\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a music player that shows what's playing, upcoming tracks in the queue, and recently played songs with full playback controls\"\n\n**AI selects this pattern because:**\n- User mentioned \"music player\" with \"queue\" and \"recently played\" (keyword matches)\n- Need to display current track with album art\n- Queue management mentioned (upcoming tracks)\n- Recently played history required\n- Full playback controls needed\n- Comprehensive music player appropriate\n\n**AI generates:**\nComprehensive variant with large album art, progress bar, full playback controls (shuffle, previous, play/pause, next, repeat), up next queue section, and recently played section\n\n**AI explains tradeoff:**\n- \"Comprehensive music player shows large album artwork for immersive experience, with progress bar and full playback controls (shuffle, repeat, like). Up Next queue (3-5 tracks) helps users plan listening session. Recently Played section enables quick replay of favorites. Multiple sections provide full functionality but compete for screen space. Long track lists can feel overwhelming. Consider standard variant if space is limited (just up next without history), or minimal variant for simple background playback.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Queue management** - Drag to reorder, swipe to remove, clear queue, save as playlist\n2. **Playback modes** - Shuffle (on/off), repeat (off/one/all), crossfade, gapless\n3. **Track actions** - Add to playlist, download, share, go to album/artist, lyrics\n4. **Visual elements** - Animated album art, waveform, color theme from artwork\n\n**App-specific adaptations:**\n- **Music streaming:** Lyrics display, crossfade toggle, audio quality selector, collaborative queue\n- **Podcast app:** Chapter markers, skip silence, playback speed, sleep timer\n- **DJ app:** BPM display, mix transitions, loop controls, effects\n- **Radio app:** Live broadcast indicator, schedule, request song, call-in\n- **Workout music:** BPM matching, energy level, automatic tempo adjustment\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary music playback screen\n- Expanded from mini-player\n- Now Playing view in music apps\n\n**What comes before:**\n- `search/search-results` - User finds and plays track\n- `lists/music-library` - User selects track from library\n- `media/audio_player` - User expands to see queue\n- Mini-player - User taps to see full player\n- `social/feed` - User plays shared track\n\n**What comes after:**\n- `search/search-results` - User searches for more tracks to add\n- `lists/music-library` - User browses library to build queue\n- `social/feed` - User shares currently playing track\n- `settings/audio-settings` - User adjusts audio quality\n- Album/artist page - User explores more from current artist\n- Lyrics view - User views song lyrics\n\n**Complete flow example:**\n`search/search-results` → **Music Playlist** → Add tracks to queue → `social/feed` (share track)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Simple playback without queue management (use `media/audio_player`)\n- Video content (use `media/video-player-full`)\n- Recording audio (use `media/audio-recorder`)\n- Minimal background music player needed\n\n**Use instead:**\n- `media/audio_player` - For simpler player without queue management\n- `media/video-player-full` - For video content\n- Mini-player only - For background playback without full screen\n- `lists/music-library` - For browsing music without immediate playback\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Multiple sections compete for limited screen space\n- Long track lists push current track info out of view\n- Queue management feels overwhelming with many tracks\n- Small text in track lists hard to read while moving\n- Shuffle/repeat state not always clear\n- Accidental skip when trying to scroll queue\n- Recently played may expose private listening\n\n**Optimization opportunities:**\n- Collapse/expand queue and history sections\n- Swipe on track for quick actions (remove, add to playlist)\n- Drag tracks to reorder queue\n- Tap album art for full-screen immersive mode\n- Double-tap skip forward/back 15 seconds\n- Volume slider integrated into interface\n- Queue auto-scroll to show current + upcoming\n- Smart queue suggestions based on listening\n- Crossfade between tracks for seamless listening\n- Lyrics synchronization with playback\n- Share specific timestamp in track\n- Animated visualizer option\n\n**Accessibility notes:**\n- Screen reader announces current track and queue position\n- Large touch targets for playback controls (44x44pt)\n- High contrast mode for text and controls\n- Voice control for all playback functions\n- Announce shuffle/repeat state changes\n- Support hardware buttons (headphone controls)\n- Haptic feedback on skip/like actions\n- Alternative to visual progress bar (time announcements)\n- Track list navigable with keyboard on desktop\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "media/photo-gallery": "# Photo Gallery\n\n**ID:** `media/photo-gallery`\n**Category:** media\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nPhoto feed interface displaying user-submitted photos with photographer info, captions, engagement metrics, and social interaction for photography sharing communities.\n\n**Use this pattern when user mentions:**\n- \"photo gallery\", \"photo feed\", \"image gallery\"\n- \"photography portfolio\", \"photo sharing\"\n- \"browse photos\", \"photo stream\"\n- \"photography community\", \"photo social feed\"\n- \"image feed\", \"photo showcase\"\n\n**Common contexts:**\n- Photography-focused social networks\n- Portfolio and showcase platforms\n- Photo contest and competition apps\n- Travel and adventure photo sharing\n- Professional photographer portfolios\n\n**UX Tradeoffs:**\n- **Pro:** Large photo display showcases visual content effectively\n- **Pro:** Photographer attribution builds community and recognition\n- **Pro:** Like/comment counts encourage engagement\n- **Pro:** Vertical scroll enables endless browsing\n- **Con:** Large images consume bandwidth and load slowly\n- **Con:** Engagement metrics can create comparison anxiety\n- **Con:** Heavy scrolling required to see many photos\n- **Con:** Text captions can be too long and overshadow images\n\n**Variants available:**\n- **Minimal:** Images only with minimal metadata (use for \"simple gallery\" or \"slideshow\")\n- **Standard:** Photos with photographer info, captions, likes (use for most photo sharing apps)\n- **Comprehensive:** Add comments, tags, location, EXIF data, collections (use for \"professional portfolio\" or \"photo community\")\n\n**Pairs well with:**\n- `social/profile` - View photographer's profile and portfolio\n- `comments/comment-thread` - Discuss photo in detail\n- `media/camera-capture` - Upload new photos to gallery\n- `search/search-results` - Find photos by tag, location, photographer\n- `lists/collections` - Organize photos into curated collections\n\n**Related patterns:**\n- Instead of this, consider `social/feed` if general social content, not just photos\n- Instead of this, consider `media/photo-picker-multi` if selecting photos, not viewing\n\n---\n\n## Description\n\nPhotography feed displaying user-submitted photos with photographer attribution, timestamps, captions, and engagement metrics. Each post shows large photo, photographer avatar/name/specialty, posting time, descriptive caption, and like/comment/share counts. Use for photography communities, portfolio platforms, and photo-centric social networks. Balances visual impact with creator attribution and social engagement.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ Feed                          [+]  │\n├────────────────────────────────────┤\n│                                    │\n│ Photography Feed                   │\n│ Share your portfolio and discover  │\n│ amazing work from other artists    │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │[@] John Doe          [...]     │ │\n│ │Professional Photographer       │ │\n│ │2 hours ago                     │ │\n│ │                                │ │\n│ │[Mountain landscape photo]      │ │\n│ │                                │ │\n│ │\"Golden hour at Mt Rainier.     │ │\n│ │The light was perfect for       │ │\n│ │capturing the peak.\"            │ │\n│ │                                │ │\n│ │<3 24  [*] 8  [Share]           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │[@] Jane Smith        [...]     │ │\n│ │Portrait Specialist             │ │\n│ │4 hours ago                     │ │\n│ │                                │ │\n│ │[Portrait photo]                │ │\n│ │                                │ │\n│ │\"Natural light portrait in      │ │\n│ │downtown Seattle. Love the      │ │\n│ │shadows with urban arch.\"       │ │\n│ │                                │ │\n│ │<3 156  [*] 23  [Share]         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │[@] Mike Chen         [...]     │ │\n│ │Wildlife Photographer           │ │\n│ │6 hours ago                     │ │\n│ │                                │ │\n│ │[Wildlife photo]                │ │\n│ │                                │ │\n│ │\"Spotted this eagle during      │ │\n│ │morning hike. Patience pays     │ │\n│ │off in wildlife photos!\"        │ │\n│ │                                │ │\n│ │<3 89  [*] 12  [Share]          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n├────────────────────────────────────┤\n│ [Home] [Explore] [Upload] [Profile]│\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmedia, photo-gallery, photo-feed, photography, image-gallery, photo-sharing, portfolio, photo-stream, photography-community, social-photos\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a photography feed where users can browse beautiful photos, see who took them, and like or comment on images\"\n\n**AI selects this pattern because:**\n- User mentioned \"photography feed\" and \"browse photos\" (keyword matches)\n- Need to display photos with photographer attribution\n- Social engagement features mentioned (like, comment)\n- Photography-focused community context\n- Standard photo gallery feed appropriate\n\n**AI generates:**\nStandard variant with large photo display, photographer info (avatar, name, specialty), timestamps, captions, and engagement metrics (likes, comments, share)\n\n**AI explains tradeoff:**\n- \"Photo gallery feed displays large images to showcase visual content effectively. Each photo includes photographer attribution (name, specialty) to build community and recognition. Captions provide context and story. Like/comment counts encourage engagement. Vertical scroll enables endless browsing. Large images consume bandwidth and load slowly. Consider minimal variant if bandwidth is concern, or comprehensive variant for professional portfolio platform with EXIF data and collections.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Photo metadata** - Camera settings (EXIF), location, tags, category, awards/features\n2. **Photographer info** - Bio, follower count, portfolio link, verification badge\n3. **Engagement options** - Like, favorite, bookmark, comment, share, buy print\n4. **Feed organization** - Following feed, explore/discover, trending, curated collections\n\n**App-specific adaptations:**\n- **Professional portfolio:** High-res display, licensing info, print purchasing, client galleries\n- **Photo contests:** Voting buttons, contest categories, submission details, rankings\n- **Travel photography:** Location maps, travel guides, gear used, itinerary details\n- **Stock photography:** Download options, licensing types, similar images, search by color\n- **Photography education:** Tutorial links, technique breakdowns, behind-the-scenes, settings used\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Main browsing interface for photo apps\n- Explore/discover feed in social networks\n- Portfolio showcase for photographers\n\n**What comes before:**\n- Main app navigation - User opens app to browse photos\n- `search/search-results` - User finds photos by tag or photographer\n- `social/profile` - User views photographer's portfolio\n- `lists/collections` - User explores curated collection\n\n**What comes after:**\n- `comments/comment-thread` - User views/adds comments\n- `social/profile` - User visits photographer's profile\n- `media/video-player-full` - If photo is actually video\n- Save to collection/favorites - User bookmarks photo\n- Share dialog - User shares photo externally\n\n**Complete flow example:**\n`search/search-results` (landscape photos) → **Photo Gallery** → `comments/comment-thread` → `social/profile` (photographer)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- General social feed with mixed content types (use `social/feed`)\n- Selecting photos rather than viewing (use `media/photo-picker-multi`)\n- User's own photo library (use system photo picker)\n- Product photos in e-commerce (use product gallery)\n\n**Use instead:**\n- `social/feed` - For mixed content (text, photos, videos, links)\n- `media/photo-picker-multi` - For selecting photos from library\n- Product image gallery - For e-commerce product photos\n- Grid gallery - If need compact grid view without social features\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Large images consume bandwidth and load slowly\n- Engagement metrics can create comparison anxiety\n- Heavy scrolling required to see many photos\n- Long captions can overshadow images\n- No easy way to compare similar photos\n- Difficult to organize or save favorites\n- Photographer attribution may be overlooked\n\n**Optimization opportunities:**\n- Lazy load images as user scrolls (performance)\n- Progressive image loading (blur to sharp)\n- Double-tap to like (standard gesture)\n- Tap photo for full-screen immersive view\n- Swipe between photos in full-screen\n- Quick actions on long-press (save, share, report)\n- Filter by category, location, photographer\n- Sort by recent, popular, trending\n- Infinite scroll with \"load more\" option\n- Image caching for faster return visits\n- Pull-to-refresh for new content\n\n**Accessibility notes:**\n- Alt text descriptions for photos\n- Screen reader announces photographer and caption\n- High contrast mode for text overlays on photos\n- Large touch targets for like/comment buttons (44x44pt)\n- Support keyboard navigation on desktop\n- Captions should be readable against photo (overlay with background)\n- Announce engagement metrics to screen readers\n- Voice control for like, comment, share actions\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "media/photo-picker-multi": "# Multi-Photo Picker\n\n**ID:** `media/photo-picker-multi`\n**Category:** media\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nPhoto selection interface enabling users to choose multiple photos from their library with visual grid display, selection indicators, and media type badges.\n\n**Use this pattern when user mentions:**\n- \"select photos\", \"choose multiple photos\"\n- \"photo picker\", \"multi-select photos\"\n- \"upload photos\", \"add photos\"\n- \"photo selection\", \"pick images\"\n- \"gallery picker\", \"image selector\"\n\n**Common contexts:**\n- Social media post creation\n- File upload in forms\n- Photo sharing features\n- Album creation and curation\n- Messaging with photo attachments\n\n**UX Tradeoffs:**\n- **Pro:** Grid layout shows many photos at once for quick scanning\n- **Pro:** Selection count helps users track limit\n- **Pro:** Media type badges (IMG, VID, LIVE) clarify content type\n- **Pro:** Checkmarks provide clear visual feedback on selection\n- **Con:** Small thumbnails make details hard to see\n- **Con:** Selection limit may frustrate users wanting to share more\n- **Con:** Requires photo library permission\n- **Con:** Large photo libraries slow to load\n\n**Variants available:**\n- **Minimal:** Grid with simple checkmarks only (use for \"basic photo select\")\n- **Standard:** Add media type badges, selection count, albums (use for most photo pickers)\n- **Comprehensive:** Preview on tap, multi-album select, search, filters (use for \"advanced photo management\")\n\n**Pairs well with:**\n- `social/post-composer` - Add photos to social post\n- `messaging/chat-thread` - Send multiple photos in conversation\n- `forms/profile-edit` - Select profile/cover photos\n- `media/camera-capture` - Switch between capture and select\n- `lists/album-view` - Browse photos by album before selecting\n\n**Related patterns:**\n- Instead of this, consider `media/camera-capture` if taking new photos only\n- Instead of this, consider single photo picker if only one photo needed\n\n---\n\n## Description\n\nMulti-photo selection interface with grid display of photo thumbnails, selection checkmarks, and media type indicators. Shows count of selected photos with maximum limit, allows tab switching between Recents/Favorites/Albums. Each thumbnail displays badge for image, video, or live photo type. Use for social sharing, messaging attachments, and any feature requiring multiple photo selection. Balances quick scanning with clear selection feedback.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [Cancel] Select Photos    [Done]   │\n├────────────────────────────────────┤\n│                                    │\n│ Select up to 10 photos             │\n│                                    │\n│ ┌─────┐  ┌─────┐  ┌─────┐          │\n│ │ IMG │  │ IMG │  │LIVE │          │\n│ │     │  │ [@] │  │ [@] │          │\n│ └─────┘  └─────┘  └─────┘          │\n│                                    │\n│ ┌─────┐  ┌─────┐  ┌─────┐          │\n│ │ IMG │  │ VID │  │ IMG │          │\n│ │ [@] │  │2:34 │  │     │          │\n│ └─────┘  └─────┘  └─────┘          │\n│                                    │\n│ ┌─────┐  ┌─────┐  ┌─────┐          │\n│ │ IMG │  │ IMG │  │ IMG │          │\n│ │     │  │ [@] │  │     │          │\n│ └─────┘  └─────┘  └─────┘          │\n│                                    │\n│ ┌─────┐  ┌─────┐  ┌─────┐          │\n│ │LIVE │  │ IMG │  │ VID │          │\n│ │     │  │     │  │0:45 │          │\n│ └─────┘  └─────┘  └─────┘          │\n│                                    │\n│ 4 of 10 selected                   │\n│                                    │\n├────────────────────────────────────┤\n│ [Recents] [Favorites] [Albums]     │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmedia, photo-picker, multi-select, photo-selection, image-picker, gallery-picker, upload-photos, select-multiple, photo-library, media-picker\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a screen where users can select multiple photos from their library to share in a post\"\n\n**AI selects this pattern because:**\n- User mentioned \"select multiple photos\" (keyword matches)\n- Need to display photo library in grid\n- Multiple selection required\n- Social sharing context detected\n- Standard photo picker appropriate\n\n**AI generates:**\nStandard variant with grid display, checkmark selection, media type badges, selection count, and album tabs\n\n**AI explains tradeoff:**\n- \"Multi-photo picker shows grid of thumbnails for quick scanning of many photos at once. Checkmarks provide clear visual feedback on what's selected. Selection count (4 of 10) helps users track limit. Media type badges (IMG, VID, LIVE) clarify content type before selection. Small thumbnails make details hard to see but allow more photos on screen. Album tabs help organize large libraries. Consider adding preview on tap if users need to verify photo details.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Selection limits** - Adjust maximum (10, 20, unlimited), show count remaining vs used\n2. **Grid layout** - 3 or 4 columns, adjustable thumbnail size, list vs grid toggle\n3. **Album organization** - Smart albums (selfies, videos, screenshots), custom albums, search\n4. **Media filtering** - Photos only, videos only, both, live photos, file types\n\n**App-specific adaptations:**\n- **Social media:** Reorder selected photos, tag people in preview, aspect ratio preview\n- **Messaging:** Quick access to recent photos, camera button in picker, attach limit based on file size\n- **E-commerce:** Product photo upload, quality requirements indicator, crop/edit inline\n- **Cloud backup:** Select all in album, date range selection, exclude already backed up\n- **Photo editor:** Batch editing preview, filter compatibility check, resolution warning\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Photo selection step in content creation\n- Attachment flow in messaging\n- Upload step in forms and profiles\n\n**What comes before:**\n- `social/post-composer` - User chooses to add photos\n- `messaging/chat-thread` - User taps attach photo icon\n- `forms/profile-edit` - User updates profile/cover photos\n- `media/camera-capture` - User switches from capture to select existing\n\n**What comes after:**\n- `social/post-composer` - User adds caption and posts\n- `messaging/chat-thread` - Photos sent to conversation\n- Photo preview/editor - User crops or applies filters\n- Confirmation screen - Review selections before upload\n- Upload progress indicator - Files uploading\n\n**Complete flow example:**\n`social/post-composer` → **Photo Picker** → Photo editor → `social/post-composer` → Post published\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Only single photo needed (use simple file picker)\n- Taking new photos only (use `media/camera-capture`)\n- Browsing photos without selection (use `media/photo-gallery`)\n- File types other than photos/videos\n\n**Use instead:**\n- Single photo picker - If only one photo allowed\n- `media/camera-capture` - For taking new photos only\n- `media/photo-gallery` - For browsing without selection intent\n- File system picker - For documents and non-media files\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Photo library permission required (users may deny)\n- Small thumbnails hard to distinguish similar photos\n- Selection limit frustrates users wanting to share more\n- Large libraries slow to load and scroll\n- Difficult to find specific old photos\n- No way to preview full-size before selecting\n- Accidental selections with small touch targets\n\n**Optimization opportunities:**\n- Tap thumbnail for full-size preview\n- Search by date, location, people, things\n- Smart suggestions (recent, favorites, best photos)\n- Drag to select multiple at once\n- Quick select all in album\n- Show file size if limit applies\n- Maintain selection across album switches\n- Cancel/Done always visible (sticky header)\n- Visual feedback on tap (animation, haptic)\n- Load thumbnails progressively as user scrolls\n- Cache thumbnail data for faster return visits\n\n**Accessibility notes:**\n- Screen reader announces selection state for each photo\n- Alternative to visual checkmarks (audio confirmation)\n- Large enough tap targets for selection (44x44pt)\n- High contrast selection indicators\n- Voice control to select/deselect photos\n- Describe media type badges for screen readers\n- Announce selection count changes\n- Support keyboard navigation on desktop\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "media/video-player-full": "# Full-Screen Video Player\n\n**ID:** `media/video-player-full`\n**Category:** media\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nFull-screen video playback interface with player controls, progress tracking, quality settings, and subtitle support for immersive video viewing experiences.\n\n**Use this pattern when user mentions:**\n- \"video player\", \"watch video\", \"play video\"\n- \"full-screen video\", \"video playback\"\n- \"movie player\", \"video streaming\"\n- \"video controls\", \"video interface\"\n- \"YouTube-style player\", \"video app\"\n\n**Common contexts:**\n- Video streaming platforms\n- Educational video platforms\n- Social media video feeds\n- News and media apps\n- Entertainment and movie apps\n\n**UX Tradeoffs:**\n- **Pro:** Full-screen maximizes content visibility and immersion\n- **Pro:** Standard video controls are universally recognized\n- **Pro:** Quality/subtitle settings enhance viewing experience\n- **Pro:** Progress bar enables quick navigation through content\n- **Con:** Controls overlay can obscure video content\n- **Con:** Quality settings increase complexity\n- **Con:** Subtitle display reduces viewing area\n- **Con:** Bandwidth requirements for HD video\n\n**Variants available:**\n- **Minimal:** Basic play/pause and progress only (use for \"simple video\" or \"embedded clips\")\n- **Standard:** Full controls with quality and subtitle options (use for most video apps)\n- **Comprehensive:** Add chapters, annotations, sharing, playlists, picture-in-picture (use for \"professional video platform\")\n\n**Pairs well with:**\n- `social/feed` - Video thumbnails in feed\n- `lists/video-library` - Browse video collection\n- `search/search-results` - Find videos\n- `comments/comment-thread` - Discuss video content\n- `settings/video-settings` - Configure video preferences\n\n**Related patterns:**\n- Instead of this, consider `media/audio_player` if audio-only content\n- Instead of this, consider `media/camera-capture` if recording video\n\n---\n\n## Description\n\nFull-screen video player with playback controls, progress scrubbing, quality selection, and subtitle options. Displays video title, description, and time remaining. Includes standard video controls (rewind, play/pause, forward) and settings for quality and captions. Use for video streaming apps, educational platforms, and any video content service. Balances immersive viewing with accessible controls.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Nature Documentary      [...]  │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │                                │ │\n│ │                                │ │\n│ │          [[>]]                 │ │\n│ │                                │ │\n│ │     Wildlife in Action         │ │\n│ │                                │ │\n│ │                                │ │\n│ │                                │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [>] ━━━●━━━━━━━━━━━ 5:23/12:45     │\n│                                    │\n│     [<<]    [||]    [>>]           │\n│                                    │\n│ The African savanna comes alive    │\n│ witness the daily struggle for     │\n│ survival in this documentary.      │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │Video Quality [*]               │ │\n│ │1080p HD • Auto                 │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │Subtitles [CC]                  │ │\n│ │English (Auto-generated)        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n├────────────────────────────────────┤\n│ [List] [Share] [Save] [Info]       │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmedia, video-player, full-screen, video-streaming, video-playback, movie-player, video-controls, subtitles, video-quality, playback-controls\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a full-screen video player where users can watch videos, adjust quality, and turn on subtitles\"\n\n**AI selects this pattern because:**\n- User mentioned \"video player\" and \"full-screen\" (keyword matches)\n- Video playback interface required\n- Quality settings mentioned\n- Subtitle functionality needed\n- Standard video player appropriate\n\n**AI generates:**\nStandard variant with full-screen video display, playback controls, progress scrubbing, quality selector, and subtitle options\n\n**AI explains tradeoff:**\n- \"Full-screen video player maximizes content visibility for immersive viewing. Standard controls (play/pause, skip) are universally recognized. Quality and subtitle settings enhance experience but add complexity. Progress bar enables quick navigation. Controls overlay video but auto-hide after inactivity. Consider minimal variant for simple embedded videos.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Video controls** - Add 10-second skip, playback speed, rotate orientation, zoom/pan\n2. **Quality settings** - Auto, 4K, 1080p, 720p, 480p, data saver mode\n3. **Subtitle options** - Multiple languages, size/position adjustment, style customization\n4. **Player overlay** - Chapter markers, annotations, interactive elements, live chat\n\n**App-specific adaptations:**\n- **Streaming platform:** Continue watching, next episode autoplay, intro skip, watch party\n- **Education platform:** Transcript view, note-taking, bookmarks, speed controls (0.5x-2x)\n- **Social media:** Like/react overlay, comment stream, share button, creator profile\n- **Live streaming:** Live indicator, viewer count, live chat, donation/tipping\n- **Security/surveillance:** Multi-camera view, DVR controls, snapshot, export clip\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Full-screen playback from video thumbnail\n- Expanded from inline video preview\n- Direct link to video content\n\n**What comes before:**\n- `social/feed` - User taps video thumbnail in feed\n- `lists/video-library` - User selects video from library\n- `search/search-results` - User finds and plays video\n- `media/camera-capture` - User reviews just-recorded video\n\n**What comes after:**\n- `social/feed` - User shares video or returns to feed\n- `comments/comment-thread` - User views comments/discussion\n- `lists/video-library` - User browses related videos\n- `settings/video-settings` - User adjusts video preferences\n- Picture-in-picture mode (user continues browsing)\n\n**Complete flow example:**\n`search/search-results` → **Video Player** → `comments/comment-thread` → `social/feed` (share)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Audio-only content (use `media/audio_player`)\n- Recording video (use `media/camera-capture`)\n- Short social media clips (use inline video player)\n- Video preview/thumbnail only (no full playback needed)\n\n**Use instead:**\n- `media/audio_player` - For podcasts or audio content\n- `media/camera-capture` - For recording instead of playback\n- Inline video player - For feed videos that play in place\n- Video thumbnail - If linking to external platform\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Control overlay can obscure important video content\n- Quality switching causes buffering interruption\n- Subtitle text can cover key visual elements\n- Scrubbing on mobile difficult (small touch target)\n- Accidental taps pause video unexpectedly\n- Bandwidth requirements for HD video\n\n**Optimization opportunities:**\n- Auto-hide controls after 3 seconds of inactivity\n- Double-tap left/right to skip 10 seconds\n- Pinch to zoom for detail inspection\n- Picture-in-picture for multitasking\n- Adaptive quality based on connection speed\n- Preload/buffer upcoming segments\n- Resume from last position\n- Download for offline viewing\n- Airplay/Chromecast support\n\n**Accessibility notes:**\n- Audio descriptions for visual content\n- Closed captions/subtitles for hearing impaired\n- Screen reader announcements for controls\n- Large touch targets for playback controls (44x44pt)\n- Keyboard shortcuts for desktop (space=play/pause, arrows=skip)\n- High contrast mode for controls\n- Adjustable caption size and style\n- Gesture alternatives for all controls\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "navigation/home-screen": "# Home Screen\n\n**ID:** `navigation/home-screen`\n**Category:** navigation\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nServes as the main landing screen after login, welcoming users and providing quick access to key features and personalized content.\n\n**Use this pattern when user mentions:**\n- \"home screen\", \"landing page\", \"main screen\"\n- \"dashboard\", \"home\", \"welcome screen\"\n- \"app home\", \"starting point\", \"main page\"\n- \"after login\", \"first screen\"\n- Users need a central hub to access app features\n\n**Common contexts:**\n- Post-authentication landing screen\n- Main navigation hub for mobile apps\n- App launcher/home for any app type\n- Welcome screen with personalized content\n- Starting point for user journeys\n\n**UX Tradeoffs:**\n- **Pro:** Familiar pattern users expect in every app\n- **Pro:** Provides quick access to multiple features from one place\n- **Pro:** Can show personalized content and recent activity\n- **Con:** Can become cluttered if too many features compete for attention\n- **Con:** Generic home may not serve any one use case deeply\n\n**Pairs well with:**\n- `navigation/nav-bar-header` - Top navigation and menu access\n- `special/tab-bar-interface` - Bottom navigation to other sections\n- `shopping/product-catalog` - \"Shop Now\" action leads here\n- `social/activity-feed` - Recent activity section\n\n**Variants available:**\n- **Minimal:** Simple welcome with primary actions (use for \"simple apps\" or \"focused experience\")\n- **Standard:** Welcome, quick actions, recent activity (use for most app types)\n- **Comprehensive:** Personalized widgets, stats, recommendations (use for \"feature-rich apps\" or \"power users\")\n\n**Related patterns:**\n- Instead of this, consider `dashboards/*` patterns if app is data/analytics focused\n- Instead of this, consider `social/activity-feed` if app is primarily a social feed\n- Instead of this, consider `shopping/product-catalog` if app is primarily e-commerce\n\n---\n\n## Description\n\nA welcoming landing screen that serves as the central hub for app navigation. Shows personalized content, quick actions to key features, recent activity, and guidance for next steps. Unlike domain-specific dashboards, this is a versatile home suitable for any app type.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [@]              MyApp      [=] [!]│\n├────────────────────────────────────┤\n│                                    │\n│ Good morning, Alex!                │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Continue where you left off    │ │\n│ │                                │ │\n│ │ [IMG]  Project Wireframes      │ │\n│ │        Updated 2 hours ago     │ │\n│ │        [Continue >]            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Quick Actions                      │\n│ ┌──────────┐ ┌──────────┐          │\n│ │  [+]     │ │  [#]     │          │\n│ │          │ │          │          │\n│ │  New     │ │  Search  │          │\n│ │  Project │ │          │          │\n│ └──────────┘ └──────────┘          │\n│ ┌──────────┐ ┌──────────┐          │\n│ │  [@]     │ │  [*]     │          │\n│ │          │ │          │          │\n│ │  Team    │ │  Saved   │          │\n│ │          │ │          │          │\n│ └──────────┘ └──────────┘          │\n│                                    │\n│ Recent Activity                    │\n│ ┌────────────────────────────────┐ │\n│ │ Sarah shared \"Mobile Design\"   │ │\n│ │ 1 hour ago               [View]│ │\n│ └────────────────────────────────┘ │\n│ ┌────────────────────────────────┐ │\n│ │ You completed \"Task Board\"     │ │\n│ │ Yesterday                [View]│ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [View all activity >]              │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│               MyApp         [=] [@]│\n├────────────────────────────────────┤\n│                                    │\n│                                    │\n│         Welcome back, Alex!        │\n│                                    │\n│                                    │\n│ What would you like to do?         │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │       [ Start New ]            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │       [ Browse All ]           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │       [ Your Saved ]           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │       [ Settings ]             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│                                    │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [@]              MyApp      [#] [!]│\n├────────────────────────────────────┤\n│                                    │\n│ Good morning, Alex! [Streak: 5d]   │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Your Progress                  │ │\n│ │ ████████░░░░░░░ 60% to goal    │ │\n│ │ 12 of 20 tasks completed       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Resume: Project Wireframes     │ │\n│ │ [PREVIEW IMAGE]                │ │\n│ │ Last edited: 2 hours ago       │ │\n│ │ [Continue Working >]           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Quick Actions                      │\n│ ┌────────┐┌────────┐┌────────┐     │\n│ │  [+]   ││  [#]   ││  [@]   │     │\n│ │  New   ││ Search ││  Team  │     │\n│ └────────┘└────────┘└────────┘     │\n│ ┌────────┐┌────────┐┌────────┐     │\n│ │  [*]   ││  [!]   ││  [=]   │     │\n│ │  Saved ││ Notify ││  More  │     │\n│ └────────┘└────────┘└────────┘     │\n│                                    │\n│ Recommended for You                │\n│ ┌──────┐ ┌──────┐ ┌──────┐         │\n│ │[IMG] │ │[IMG] │ │[IMG] │         │\n│ │Design│ │Mobile│ │Guide │         │\n│ │Tips  │ │UI Kit│ │Book  │         │\n│ └──────┘ └──────┘ └──────┘         │\n│                                    │\n│ Recent Activity                    │\n│ • Sarah shared \"Mobile Design\"     │\n│   1 hour ago                       │\n│ • You completed \"Task Board\"       │\n│   Yesterday                        │\n│ • Team joined \"Sprint Planning\"    │\n│   2 days ago                       │\n│ [View all >]                       │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nhome, landing, dashboard, welcome, main-screen, start, hub, navigation, personalized\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a home screen for my productivity app where users can see their recent projects and quick actions\"\n\n**AI selects this pattern because:**\n- User mentioned \"home screen\" (direct keyword match)\n- Needs quick actions and recent activity\n- General-purpose app (not data dashboard)\n- Post-login landing context\n\n**AI generates:**\nStandard variant with personalized greeting, recent projects section, quick action buttons, and activity feed\n\n**AI explains tradeoff:**\n- \"Home screen provides immediate access to recent work and common actions. Personalized greeting creates welcoming experience. Quick actions reduce taps to key features. Recent activity helps users resume where they left off.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Quick actions grid** - 2x2, 3x2, or single column based on number of features\n2. **Personalization depth** - Name only vs. stats, streaks, progress\n3. **Content sections** - Recent activity, recommendations, featured content\n4. **Visual style** - Minimal/text-focused vs. image-heavy cards\n\n**App-specific adaptations:**\n- **Social app:** Activity feed prominent, friend suggestions, trending content\n- **E-commerce:** Product recommendations, order tracking, deals/promotions\n- **Fitness app:** Today's workout, progress stats, achievement badges\n- **Learning app:** Continue course, daily streak, recommended lessons\n- **Productivity:** Recent documents, upcoming tasks, quick create actions\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- First screen after login/onboarding\n- Return destination after completing tasks\n- Tab bar home button destination\n\n**What comes before:**\n- `authentication/login` - User logs in successfully\n- `onboarding/welcome` - New user completes onboarding\n- App launch (if already authenticated)\n\n**What comes after:**\n- Any feature accessed via quick actions\n- Detail screens from recent activity\n- Search, settings, or other tab bar destinations\n\n**Complete flow example:**\n`authentication/login` → **Home Screen** → Quick action → Feature screen → Back to home\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App is single-purpose focused (calendar app opens to today)\n- Data analytics is primary value (use `dashboards/*` patterns)\n- Social feed is the main experience (use `social/activity-feed`)\n- E-commerce focused (use `shopping/product-catalog`)\n\n**Use instead:**\n- `dashboards/*` - For data/analytics-focused apps\n- `social/activity-feed` - For social feed-first apps\n- `shopping/product-catalog` - For shopping-first apps\n- Direct feature screen - For single-purpose apps\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many options overwhelm users\n- Generic welcome without personalization feels cold\n- Buried key actions require too many taps\n- Stale \"recent activity\" feels abandoned\n\n**Conversion optimization:**\n- Surface most-used actions prominently\n- Personalize with user's name and context\n- Show progress/achievements to drive engagement\n- Make \"resume\" action obvious for returning users\n- Reduce taps to core value\n\n**Accessibility notes:**\n- Greeting should be readable by screen readers\n- Quick action buttons need sufficient size (44x44pt min)\n- Activity items should be keyboard navigable\n- Ensure sufficient contrast in all cards/sections\n- Support dynamic text sizing\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "navigation/nav-bar-header": "# Navigation Bar Header\n\n**ID:** `navigation/nav-bar-header`\n**Category:** navigation\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides top-level navigation, branding, and access to common actions (search, profile, menu) on every screen.\n\n**Use this pattern when user mentions:**\n- \"header\", \"nav bar\", \"navigation bar\", \"top bar\"\n- \"app header\", \"screen header\", \"title bar\"\n- \"back button\", \"navigation\"\n- \"menu bar\", \"toolbar\"\n- Users need consistent navigation across screens\n\n**Common contexts:**\n- Top of every screen in mobile apps\n- Header navigation in web apps\n- Screen title with contextual actions\n- Back navigation in hierarchical flows\n- Menu/profile access point\n\n**UX Tradeoffs:**\n- **Pro:** Consistent navigation users can rely on\n- **Pro:** Always-visible access to key actions\n- **Pro:** Clear screen context with title\n- **Con:** Takes up valuable screen real estate\n- **Con:** Can become cluttered with too many actions\n\n**Pairs well with:**\n- `special/tab-bar-interface` - Bottom tab navigation\n- `navigation/search-input` - Search icon leads here\n- `special/navigation-drawer` - Menu icon opens drawer\n- Every screen pattern - Headers appear on all screens\n\n**Variants available:**\n- **Minimal:** Back button and title only (use for \"simple screens\" or \"deep navigation\")\n- **Standard:** Back/title/1-2 actions (use for most screens)\n- **Comprehensive:** Logo, tabs, search, multiple actions (use for \"home screen\" or \"feature-rich apps\")\n\n**Related patterns:**\n- Instead of this, consider `special/tab-bar-interface` for primary navigation (bottom tabs)\n- Instead of this, consider `special/navigation-drawer` for menu-heavy apps (hamburger menu)\n\n---\n\n## Description\n\nA persistent header bar appearing at the top of screens providing navigation controls (back button), screen context (title or logo), and quick access to common actions (search, profile, menu). This is the foundational navigation element present on virtually every screen.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<]  Screen Title       [#] [@]    │\n├────────────────────────────────────┤\n│                                    │\n│                                    │\n│         Screen content here        │\n│                                    │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<]  Screen Title                  │\n├────────────────────────────────────┤\n│                                    │\n│                                    │\n│         Screen content here        │\n│                                    │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [=]  MyApp Logo     [#] [!] [@]    │\n├────────────────────────────────────┤\n│ [Home] [Explore] [Library] [More]  │\n├────────────────────────────────────┤\n│                                    │\n│         Screen content here        │\n│                                    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Additional Variants\n\n### With Search Bar\n\n```\n┌────────────────────────────────────┐\n│ [<]  [Search...]            [@]    │\n├────────────────────────────────────┤\n│                                    │\n│         Screen content here        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### With Tabs\n\n```\n┌────────────────────────────────────┐\n│ [<]  Products           [#] [@]    │\n├────────────────────────────────────┤\n│ [All] [New] [Sale] [Featured]      │\n├────────────────────────────────────┤\n│                                    │\n│         Tab content here           │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### With Breadcrumbs\n\n```\n┌────────────────────────────────────┐\n│ [<]  Home > Products > Earbuds     │\n├────────────────────────────────────┤\n│                                    │\n│         Screen content here        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### With Action Menu\n\n```\n┌────────────────────────────────────┐\n│ [<]  Document.pdf       [*] [...]  │\n├────────────────────────────────────┤\n│                                    │\n│         Screen content here        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Home Screen Header\n\n```\n┌────────────────────────────────────┐\n│ [@]  Good morning, Alex!    [=] [!]│\n├────────────────────────────────────┤\n│                                    │\n│         Screen content here        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### With Logo & Multiple Actions\n\n```\n┌────────────────────────────────────┐\n│ [LOGO]              [#][*][!][@][=]│\n├────────────────────────────────────┤\n│                                    │\n│         Screen content here        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nheader, navigation, nav-bar, toolbar, title-bar, back-button, menu, app-bar, top-bar\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a header with a back button, screen title, search icon, and profile icon\"\n\n**AI selects this pattern because:**\n- User mentioned \"header\" (direct keyword match)\n- Navigation elements requested (back button)\n- Common actions specified (search, profile)\n- Standard app structure\n\n**AI generates:**\nStandard variant with back button on left, title centered or left-aligned, search and profile icons on right\n\n**AI explains tradeoff:**\n- \"Header provides consistent navigation on every screen. Back button for hierarchy, title for context, search and profile for quick access to key features. Keeps header uncluttered by limiting to 2 right-side actions.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Left side** - Back button, menu icon, close button, or logo\n2. **Center/title** - Screen title, logo, search bar, or breadcrumbs\n3. **Right side** - 1-3 action icons (search, share, more, profile)\n4. **Sub-header** - Tabs, filters, breadcrumbs, or category pills\n\n**App-specific adaptations:**\n- **Social app:** Profile icon, notifications, search, messages\n- **E-commerce:** Search bar prominent, cart icon, menu\n- **Content app:** Back, title, bookmark, share icons\n- **Messaging:** Contact name/photo, video call, voice call icons\n- **Maps:** Menu, search bar, current location button\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Top of every screen in the app\n- Persistent across navigation\n- Contextual actions change per screen\n\n**What comes before:**\n- N/A - Header is always present\n\n**What comes after:**\n- Same header persists on next screen (content changes)\n- Modal/overlay screens may have modified headers\n- Back button navigates to previous screen\n\n**Complete flow example:**\n**Header (Home)** → Tap feature → **Header (Feature)** → Tap back → **Header (Home)**\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Full-screen immersive experience (video player, game)\n- Login/onboarding screens (simpler header or none)\n- Modal dialogs (use modal-specific header)\n- Marketing landing pages (use web-style header)\n\n**Use instead:**\n- No header - For full-screen immersive content\n- Simple title only - For modals and dialogs\n- Custom header - For login/splash screens\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many actions = cluttered and overwhelming\n- Tiny tap targets = accidental taps and frustration\n- Inconsistent header across screens = confusion\n- Missing back button in deep hierarchy = trapped users\n\n**Conversion optimization:**\n- Limit right-side actions to 2-3 most important\n- Make back button consistently positioned\n- Use clear, recognizable icons\n- Ensure header doesn't obscure content\n- Make search prominent if it's a primary feature\n\n**Accessibility notes:**\n- All header icons must have accessible labels\n- Back button should be minimum 44x44pt tap target\n- Ensure sufficient color contrast for icons/text\n- Header should stay visible when scrolling (or snap back)\n- Support keyboard navigation for all actions\n- Icons should have text labels for screen readers\n\n---\n\n## Icon Reference\n\nCommon header icons used in these patterns:\n\n- `[<]` - Back button\n- `[=]` - Menu (hamburger)\n- `[@]` - Profile/Account\n- `[#]` - Search\n- `[!]` - Notifications\n- `[*]` - Favorites/Bookmark\n- `[...]` - More actions menu\n- `[X]` - Close/Cancel\n- `[+]` - Add/Create\n- `[CART]` - Shopping cart\n- `[LOGO]` - App logo/branding\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "navigation/search-input": "# Search Input\n\n**ID:** `navigation/search-input`\n**Category:** navigation\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides a dedicated search interface with suggestions, recent searches, and category filtering to help users find content quickly.\n\n**Use this pattern when user mentions:**\n- \"search\", \"find\", \"search bar\", \"search screen\"\n- \"search input\", \"search page\", \"search interface\"\n- \"look up\", \"discover\", \"explore\"\n- \"filter\", \"find items\"\n- Users need to search through app content\n\n**Common contexts:**\n- E-commerce product search\n- Content discovery (articles, videos, posts)\n- Contact/user search in social apps\n- Document/file search in productivity apps\n- Any app with searchable content\n\n**UX Tradeoffs:**\n- **Pro:** Familiar search pattern users recognize instantly\n- **Pro:** Suggestions help users start searching quickly\n- **Pro:** Recent searches reduce repeat typing\n- **Con:** Empty state can feel sparse if no suggestions\n- **Con:** Requires search results screen to complete flow\n\n**Pairs well with:**\n- `special/search-results-interface` - Display search results\n- `shopping/product-catalog` - Search within products\n- `navigation/nav-bar-header` - Search icon in header leads here\n- `forms/filter-sort` - Advanced filtering from search\n\n**Variants available:**\n- **Minimal:** Simple input field with placeholder (use for \"basic search\" or \"simple apps\")\n- **Standard:** Input, recent searches, popular searches (use for most search scenarios)\n- **Comprehensive:** Input, categories, filters, trending, voice search (use for \"complex search\" or \"large catalogs\")\n\n**Related patterns:**\n- Instead of this, consider `special/search-results-interface` if already in results view\n- Instead of this, consider `forms/filter-sort` if filtering existing list, not searching entire app\n\n---\n\n## Description\n\nA focused search interface that appears when users tap the search icon or bar. Shows search input field with helpful starting points like recent searches, popular/trending searches, and category shortcuts. Designed to get users searching with minimal friction.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<]  [Search...]            [X]    │\n├────────────────────────────────────┤\n│                                    │\n│ Recent Searches                    │\n│ ┌────────────────────────────────┐ │\n│ │ [#]  wireless earbuds      [x] │ │\n│ └────────────────────────────────┘ │\n│ ┌────────────────────────────────┐ │\n│ │ [#]  laptop stand          [x] │ │\n│ └────────────────────────────────┘ │\n│ ┌────────────────────────────────┐ │\n│ │ [#]  phone case            [x] │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ [Clear all]                        │\n│                                    │\n│ Popular Searches                   │\n│ ┌────────────────────────────────┐ │\n│ │ [*]  wireless charger          │ │\n│ └────────────────────────────────┘ │\n│ ┌────────────────────────────────┐ │\n│ │ [*]  bluetooth speaker         │ │\n│ └────────────────────────────────┘ │\n│ ┌────────────────────────────────┐ │\n│ │ [*]  usb-c cable               │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Browse by Category                 │\n│ [Electronics] [Home] [Fashion]     │\n│ [Sports] [Books] [Toys]            │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<]  [Search...]            [X]    │\n├────────────────────────────────────┤\n│                                    │\n│                                    │\n│                                    │\n│                                    │\n│                                    │\n│                                    │\n│    Start typing to search...       │\n│                                    │\n│                                    │\n│                                    │\n│                                    │\n│                                    │\n│                                    │\n│ Popular:                           │\n│ wireless charger                   │\n│ bluetooth speaker                  │\n│ usb-c cable                        │\n│                                    │\n│                                    │\n│                                    │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] [Search products...] [Mic] [X] │\n├────────────────────────────────────┤\n│                                    │\n│ Categories                         │\n│ [All] [Electronics] [Fashion] [+]  │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Filters              [Clear]   │ │\n│ │ Price: Any           ▼         │ │\n│ │ Rating: 4+ stars     ▼         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Recent Searches                    │\n│ ┌────────────────────────────────┐ │\n│ │ [#]  wireless earbuds      [x] │ │\n│ └────────────────────────────────┘ │\n│ ┌────────────────────────────────┐ │\n│ │ [#]  laptop stand          [x] │ │\n│ └────────────────────────────────┘ │\n│ ┌────────────────────────────────┐ │\n│ │ [#]  phone case            [x] │ │\n│ └────────────────────────────────┘ │\n│ [Clear all recent]                 │\n│                                    │\n│ Trending Now [Fire]                │\n│ ┌────────────────────────────────┐ │\n│ │ [*]  mechanical keyboard       │ │\n│ │      [Up arrow] +245%          │ │\n│ └────────────────────────────────┘ │\n│ ┌────────────────────────────────┐ │\n│ │ [*]  standing desk             │ │\n│ │      [Up arrow] +180%          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Suggested for You                  │\n│ Based on your browsing history     │\n│ ┌──────┐ ┌──────┐ ┌──────┐         │\n│ │[IMG] │ │[IMG] │ │[IMG] │         │\n│ │Mouse │ │Keys  │ │Desk  │         │\n│ │$29.99│ │$89.99│ │$199  │         │\n│ └──────┘ └──────┘ └──────┘         │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nsearch, find, discover, search-bar, input, recent-searches, trending, categories, filter\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a search screen where users can search products, see their recent searches, and browse trending items\"\n\n**AI selects this pattern because:**\n- User mentioned \"search screen\" (direct keyword match)\n- E-commerce context (products)\n- Need for recent/trending searches\n- Search discovery features required\n\n**AI generates:**\nStandard or comprehensive variant with search input, recent searches list, trending section, and category shortcuts\n\n**AI explains tradeoff:**\n- \"Search input at top for immediate access. Recent searches help repeat common queries. Trending section inspires discovery. Category shortcuts provide alternative navigation path when users aren't sure what to search for.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Suggestions type** - Recent only, popular only, or both\n2. **Category display** - Pills, grid, or hidden until after typing\n3. **Voice search** - Include microphone icon or omit\n4. **Filter integration** - Basic categories or full filter panel\n\n**App-specific adaptations:**\n- **E-commerce:** Product categories, price filters, recent products viewed\n- **Social media:** User search, hashtag search, trending topics\n- **Content apps:** Article categories, author search, topic tags\n- **Productivity:** File type filters, date ranges, folder shortcuts\n- **Maps/local:** Location search, recent places, nearby categories\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Activated from search icon in header\n- Tab in bottom navigation\n- Overlay modal from any screen\n\n**What comes before:**\n- `navigation/nav-bar-header` - User taps search icon\n- `navigation/home-screen` - User taps search quick action\n- Any screen with search affordance\n\n**What comes after:**\n- `special/search-results-interface` - User submits search query\n- `shopping/product-catalog` - User taps category shortcut\n- Same screen with autocomplete suggestions (as user types)\n\n**Complete flow example:**\n`navigation/home-screen` → Tap search → **Search Input** → Type query → `special/search-results-interface` → Tap result → Detail screen\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Search is not a primary feature (use search icon in header only)\n- Filtering existing list (use `forms/filter-sort` instead)\n- Already showing search results (use `special/search-results-interface`)\n- Single-category browsing (use filters on catalog screen)\n\n**Use instead:**\n- `special/search-results-interface` - When showing results\n- `forms/filter-sort` - When filtering/sorting existing list\n- Inline search bar - When search is secondary feature\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Empty search screen feels unhelpful\n- Too many suggestions overwhelm users\n- Unclear what content is searchable\n- No voice search on mobile feels outdated\n\n**Conversion optimization:**\n- Show recent searches to reduce typing\n- Suggest popular/trending to inspire discovery\n- Provide category shortcuts for browsing alternative\n- Make it clear what content type is being searched\n- Support voice input on mobile devices\n\n**Accessibility notes:**\n- Search input must be keyboard accessible and properly labeled\n- Recent search items should be clearable individually\n- Suggestions should be navigable with keyboard/screen reader\n- Voice search button needs clear label for screen readers\n- Ensure cancel/clear buttons are easily tappable (44x44pt)\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "onboarding/books_onboarding": "# Books App Onboarding\n\n**ID:** `onboarding/books_onboarding`\n**Category:** onboarding\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nGuided welcome flow for new app users introducing key features and value proposition before main app access. Creates strong first impression, reduces support questions, and increases feature awareness.\n\n**Use this pattern when user mentions:**\n- \"onboarding\", \"welcome screen\", \"tutorial flow\"\n- \"first-time user\", \"new user introduction\"\n- \"feature walkthrough\", \"app introduction\"\n- \"getting started guide\", \"welcome carousel\"\n- \"feature discovery\", \"capability introduction\"\n\n**Common contexts:**\n- New user first app launch\n- Major app update with new features\n- Permission requests needing context\n- Marketplace or content apps (reading, music, video)\n- Productivity or complex feature apps\n- Social platforms with discovery\n\n**UX Tradeoffs:**\n- **Pro:** Educates users on app capabilities immediately\n- **Pro:** Can explain complex features before users encounter them\n- **Pro:** Sets expectations about app strengths\n- **Pro:** Increases feature adoption and engagement\n- **Con:** Users can skip and never see information\n- **Con:** Required flow feels heavy/friction-heavy\n- **Con:** Features shown may not match user needs\n\n**Pairs well with:**\n- `authentication/login` - Login after onboarding\n- `states/empty_state` - Onboard to empty content areas\n- `modals/permission-request` - Request permissions with context\n- `content/main-feed` - First content view after onboarding\n\n**Variants available:**\n- **Minimal:** Single welcome screen with get started button\n- **Standard:** 3-4 slide carousel showing key features\n- **Comprehensive:** Multi-slide guided tour with interactive examples\n\n---\n\n## Description\n\nMulti-slide carousel onboarding introducing app features, value proposition, and key capabilities. Shows app logo, benefits, feature list, and calls to action (Get Started, Sign In). Allows skipping entire flow. Horizontal swipe or dot indicators for navigation.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│                                    │\n│                                    │\n│        Welcome to BookShelf        │\n│                                    │\n│             [B Logo]               │\n│                                    │\n│     Your Digital Library           │\n│                                    │\n│ Discover, Read, Share              │\n│                                    │\n│ Build your personal library with   │\n│ thousands of books at your         │\n│ fingertips. Track your reading     │\n│ progress and connect with fellow   │\n│ book lovers.                       │\n│                                    │\n│ Key Features:                      │\n│ • Unlimited book downloads         │\n│ • Personalized recommendations     │\n│ • Reading statistics & goals       │\n│ • Book club discussions            │\n│ • Offline reading mode             │\n│                                    │\n│          [Get Started]             │\n│                                    │\n│    Already have an account?        │\n│          [Sign In]                 │\n│                                    │\n│ [●] [○] [○] [○]          [Skip]    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nonboarding, welcome, first-time-user, tutorial, feature-discovery, carousel, introduction, getting-started\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I'm building a reading app and need a welcome flow that shows new users what features are available before they start\"\n\n**AI selects this pattern because:**\n- User mentioned \"welcome flow\" and \"reading app\" (keyword match)\n- New user education is primary goal\n- Feature discovery/capability introduction needed\n- Standard carousel variant suits reading app content showcase\n- \"Sign In\" option for returning users\n\n**AI generates:**\nStandard 3-slide carousel with logo, features, and value proposition customized for reading content\n\n**AI explains tradeoff:**\n- \"Onboarding educates users on app capabilities upfront so they use features that matter to them. Carousel format shows multiple benefits with skip option. Trade-off: Users can skip and miss key information, or onboarding feels like friction before accessing app.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Number of slides** - 1-5 slides depending on complexity\n2. **Content per slide** - Feature highlight vs. benefit-focused copy\n3. **Visual treatment** - Logo/illustration, feature icons, screenshots\n4. **CTA buttons** - Get Started vs. Create Account vs. Browse\n5. **Accessibility** - Skip always available, dots navigation\n\n**App-specific adaptations:**\n- **Social apps:** Show user feed, profile creation, follow features\n- **E-commerce:** Show categories, deals, checkout simplicity\n- **Productivity:** Show dashboard, templates, power features\n- **Media:** Show content library, personalization, quality settings\n- **Fitness:** Show tracking, social, achievement features\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- First screen after app install/launch\n- Before login/signup flows\n- Not returned to after completed\n- Can be revisited from Settings/About\n\n**What comes before:**\n- App icon tap / app launch\n- `authentication/signup` transition after onboarding\n\n**What comes after:**\n- `authentication/login` - Sign in if existing user\n- `authentication/signup` - Create new account\n- `content/main-feed` - First content view\n- Skip → `modals/permission-request` - Permissions needed\n\n**Complete flow example:**\nApp launch → **Onboarding Carousel** → Skip/Complete → `authentication/login` OR `authentication/signup` → `content/main-feed`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App is very simple with obvious features\n- Mobile app with very limited onboarding tolerance\n- Users have high urgency (data app, tool)\n- Can use contextual help instead\n\n**Use instead:**\n- Single welcome modal - For simple features\n- Contextual tooltips - For feature-specific help\n- Empty state guidance - For showing features when needed\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Users skip without reading (carousel shows high skip rates)\n- Long onboarding delays first-time interaction\n- Feature list without context feels overwhelming\n- No visual preview of actual app appearance\n- Inconsistent with iOS standard onboarding patterns\n\n**Conversion optimization:**\n- Keep to 3-4 slides maximum (users skip after 2)\n- Use clear benefit language, not feature lists\n- Show actual screenshots of app, not illustrations\n- Always provide skip/back buttons (no forced flow)\n- A/B test carousel vs. single welcome screen\n- Make first slide compelling to reduce skips\n- Clear visual distinction between slides\n\n**Accessibility notes:**\n- Swipe gesture must have dot navigation alternative\n- Screen readers announce slide numbers and content\n- Sufficient color contrast for text over images\n- Touch targets for skip and navigation buttons (>44pt)\n- Respects reduce motion (less swipe animation)\n- Text scaling support for longer descriptions\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "productivity/calendar_view": "# Calendar View Screen\n\n**ID:** `productivity/calendar_view`\n**Category:** productivity\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nCalendar grid view showing days/weeks/months with event indicators and detailed event list for selected day. Enables schedule viewing, event discovery, and quick navigation. Shows both overview (calendar) and details (events) simultaneously.\n\n**Use this pattern when user mentions:**\n- \"calendar\", \"schedule view\", \"calendar grid\"\n- \"events\", \"appointments\", \"meetings\"\n- \"agenda\", \"weekly view\", \"monthly view\"\n- \"event list\", \"today's events\", \"upcoming events\"\n- \"event details\", \"event time\", \"location\"\n\n**Common contexts:**\n- Productivity apps (Google Calendar, Apple Calendar)\n- Social apps with events\n- Meeting scheduling apps\n- Fitness/class booking apps\n- Travel apps showing reservations\n- Workplace/team scheduling\n\n**UX Tradeoffs:**\n- **Pro:** Shows overview and details in one screen\n- **Pro:** Visual scanning of month/week layout\n- **Pro:** Event indicators show busy days at a glance\n- **Pro:** Tapping day shows detailed list\n- **Con:** Small calendar grid (hard to tap specific days)\n- **Con:** Limited space for event details in list\n- **Con:** Month view doesn't show time details\n\n**Pairs well with:**\n- `modals/event-detail` - Tapping event for full details\n- `modals/event-create` - Adding new events\n- `states/empty_state` - Empty day/calendar\n- `notifications/reminder` - Event reminders\n\n**Variants available:**\n- **Minimal:** Calendar grid only, no event list\n- **Standard:** Calendar + today's event list below\n- **Comprehensive:** Calendar + detailed event list with scrolling\n\n---\n\n## Description\n\nCombined calendar view with month/week grid and event list for selected day. Shows calendar with date numbers and event indicators (dots/colors). Below calendar displays selected day's events with time, title, location, and attendee info. Includes add event button.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ [←] Calendar            [+ Event]  │\n├────────────────────────────────────┤\n│                                    │\n│  S  M  T  W  T  F  S               │\n│                 1  2               │\n│  3  4  5  6  7  8  9               │\n│ 10 11 12 13 14 15 16               │\n│ 17 18 19 20 21 22 23               │\n│ 24 25 26 27 28 29 30               │\n│     ● ●    ●                       │\n│                                    │\n│ Today's Events (May 6)             │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Team Meeting                   │ │\n│ │ 9:00 AM - 10:30 AM             │ │\n│ │ Conference Room B  5 attendees │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Lunch with Sarah               │ │\n│ │ 12:30 PM - 1:30 PM             │ │\n│ │ The Garden Cafe  2 guests      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Gym Workout                    │ │\n│ │ 6:00 PM - 7:00 PM              │ │\n│ │ FitLife Gym  Personal          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ [←] Calendar                       │\n├────────────────────────────────────┤\n│                                    │\n│  S  M  T  W  T  F  S               │\n│                 1  2               │\n│  3  4  5  6  7  8  9               │\n│ 10 11 12 13 14 15 16               │\n│ 17 18 19 20 21 22 23               │\n│ 24 25 26 27 28 29 30               │\n│     ● ●    ●                       │\n│                                    │\n│          [+ Add Event]             │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│ [←] Calendar  [Today] [+ Event]    │\n├────────────────────────────────────┤\n│                                    │\n│  S  M  T  W  T  F  S               │\n│                 1  2               │\n│  3  4  5  6  7  8  9               │\n│ 10 11 12 13 14 15 16               │\n│ 17 18 19 20 21 22 23               │\n│ 24 25 26 27 28 29 30               │\n│     ● ●    ●                       │\n│                                    │\n│ May 6                              │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ 9:00 AM Team Meeting           │ │\n│ │ Conference Room B  5 attendees │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ 12:30 PM Lunch with Sarah      │ │\n│ │ The Garden Cafe  2 guests      │ │\n│ │ Discuss project updates        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ 6:00 PM Gym Workout            │ │\n│ │ FitLife Gym  Personal workout  │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│         [< Prev] [Next >]          │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ncalendar, schedule, events, appointments, agenda, productivity, time-management, meeting, event-planning\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a calendar view where users can see their monthly schedule and upcoming events for the day\"\n\n**AI selects this pattern because:**\n- User mentioned \"calendar view\" and \"schedule\" (keyword match)\n- Monthly overview needed\n- Daily event list required\n- Standard variant provides balance of overview + detail\n\n**AI generates:**\nStandard variant with calendar grid and event list for selected day\n\n**AI explains tradeoff:**\n- \"Calendar grids show full month overview so users see busy/free patterns at a glance. Below-calendar event list shows details for selected day. Trade-off: Month view doesn't show times, so users must tap day for details. Small grid makes tapping specific days harder on mobile.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Time display** - 12hr vs. 24hr format, duration vs. time range\n2. **Event indicators** - Dots vs. colors vs. bars vs. background shading\n3. **Detail level** - Just title vs. title+location vs. title+location+attendees\n4. **Add event** - Floating action button vs. top button vs. long-press\n5. **View options** - Day/Week/Month toggle\n\n**App-specific adaptations:**\n- **Team/workplace:** Attendee avatars, accept/decline RSVP\n- **Social events:** Guest count, \"going/interested\" status\n- **Fitness:** Class type/intensity, spots available\n- **Travel:** Confirmation numbers, check-in times\n- **Medical:** Appointment type, doctor name, prep notes\n- **Education:** Class name, instructor, room location\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary view in calendar app\n- Secondary view in productivity apps\n- Accessed from bottom navigation or menu\n\n**What comes before:**\n- `navigation/bottom-tab-navigation` - Calendar tab selection\n- `authentication/login` - Initial app load\n- Previous date view (month/week)\n\n**What comes after:**\n- `modals/event-detail` - Tap event for full details\n- `modals/event-create` - Tap + button to add event\n- `modals/event-edit` - Tap event to edit\n- `states/empty_state` - Empty days\n\n**Complete flow example:**\n`navigation` → **Calendar View** → Tap event → `event-detail` OR Tap + → `event-create`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Only need simple date picker (use date-picker modal)\n- Event list without calendar overview needed (use agenda list)\n- Busy schedule with many events (use week/day view)\n- Read-only calendar display (simplified version)\n\n**Use instead:**\n- `modals/date-picker` - For date selection only\n- Agenda list view - For linear event browsing\n- Week view - For detailed time-based schedule\n- Day view - For deep focus on single day\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Small date cells hard to tap on mobile\n- Month view loses time information\n- Many events crowd day list below\n- Scrolling between calendar and event list\n- Switching months requires tapping back button\n- No drag-to-create events (mobile limitation)\n\n**Conversion optimization:**\n- Make date cells large enough to tap easily (>44pt)\n- Quick month navigation (left/right swipe)\n- Tap date header to jump to today\n- Tap event time to go to that hour in day view\n- Show event color indicators for category\n- Highlight today's date distinctly\n- Show # of events badge on busy days\n\n**Accessibility notes:**\n- Date numbers must be focusable for keyboard nav\n- Screen readers announce full date context\n- Color alone shouldn't indicate events (use icons/text too)\n- Event list scrollable (doesn't hijack calendar scroll)\n- Touch target minimum 44x44pt for dates\n- Clear visual indication of selected date\n- High contrast for event indicators and text\n- Support landscape orientation\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "settings/app-settings": "# App Settings\n\n**ID:** `settings/app-settings`\n**Category:** settings\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides comprehensive settings hub for any app type with user profile, account management, preferences, display controls, and support access. Consolidates all app configuration in one organized interface adaptable to any domain.\n\n**Use this pattern when user mentions:**\n- \"settings\", \"preferences\", \"app settings\"\n- \"account settings\", \"user settings\", \"configuration\"\n- \"manage settings\", \"settings screen\", \"settings page\"\n- \"customize app\", \"app preferences\"\n- \"users need to configure the app\"\n\n**Common contexts:**\n- Any app with user accounts and preferences\n- Apps requiring theme/display customization\n- Apps with notification controls\n- Apps with subscription or account management\n- Social, productivity, content, fitness, or e-commerce apps\n- Apps needing organized settings consolidation\n\n**UX Tradeoffs:**\n- **Pro:** Single hub for all settings improves discoverability\n- **Pro:** Profile section shows user identity and stats at a glance\n- **Pro:** Organized categories reduce cognitive load\n- **Pro:** Quick access to common tasks (account, theme, notifications)\n- **Con:** Long scrolling list if too many options (use tabs/search for 15+ items)\n- **Con:** Profile stats at top add friction to accessing settings quickly\n- **Con:** Flat list structure can feel cluttered vs grouped sections\n\n**Pairs well with:**\n- `settings/theme-customization` - Dedicated theme/appearance controls\n- `settings/notification-settings` - Detailed notification preferences\n- `settings/privacy_settings` - Data and privacy controls\n- `authentication/login` - Account management and security\n- `forms/profile-edit` - User profile updates\n- `special/search-results-interface` - Settings search for large apps\n\n**Variants available:**\n- **Minimal:** Essential settings only (account, theme, notifications) - Use for simple apps with few options\n- **Standard:** Balanced settings with profile, core preferences, and support - Use for most apps\n- **Comprehensive:** All settings including advanced features, data management, integrations - Use for feature-rich apps\n\n**Related patterns:**\n- Combine with `settings/theme-customization` for dedicated appearance controls\n- Combine with `settings/privacy_settings` for health/sensitive data controls\n- Instead of this, consider individual settings screens if app has 25+ settings (better as multi-screen flow)\n\n---\n\n## Description\n\nGeneric settings hub adaptable to any app domain featuring user profile summary with customizable stats, account management (subscription, billing, security), app preferences (notifications, theme, data sync), display controls, and support access. Profile section can show domain-specific achievements (books read, workouts completed, posts created, etc.). Use for any app requiring organized settings consolidation across account, preferences, and support categories.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ [←] Settings                       │\n├────────────────────────────────────┤\n│                                    │\n│  Profile                           │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ John Doe                     │  │\n│  │ john@example.com             │  │\n│  │                              │  │\n│  │ Member since 2022            │  │\n│  │ 1,247 activities             │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Account                           │\n│  ───────────────────────────────   │\n│  > Subscription & Billing          │\n│  > Password & Security             │\n│  > Connected Accounts              │\n│                                    │\n│  Preferences                       │\n│  ───────────────────────────────   │\n│  > Notifications                   │\n│  > Theme & Display                 │\n│  > Language & Region               │\n│  > Data & Storage                  │\n│                                    │\n│  Support                           │\n│  ───────────────────────────────   │\n│  > Help Center                     │\n│  > Contact Support                 │\n│  > Privacy Policy                  │\n│  > Terms of Service                │\n│                                    │\n│  v1.2.4 • Logout                   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Minimal Version\n\n```\n┌────────────────────────────────────┐\n│ [←] Settings                       │\n├────────────────────────────────────┤\n│                                    │\n│  [@] john@example.com              │\n│  Member                            │\n│                                    │\n│  ───────────────────────────────   │\n│                                    │\n│  > Account & Security              │\n│  > Notifications                   │\n│  > Theme                           │\n│                                    │\n│  > Help & Support                  │\n│                                    │\n│  [       Logout       ]            │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Version\n\n```\n┌────────────────────────────────────┐\n│ [←] Settings              [Search] │\n├────────────────────────────────────┤\n│                                    │\n│  Profile                           │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [@] John Doe • Pro Member    │  │\n│  │ john@example.com             │  │\n│  │                              │  │\n│  │ Joined Jan 2022 • Level 42   │  │\n│  │ 1,247 actions • 156 streak   │  │\n│  │ [Edit Profile]               │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Account                           │\n│  ───────────────────────────────   │\n│  > Subscription & Billing [Pro]    │\n│  > Password & Security             │\n│  > Connected Accounts (3)          │\n│  > Email Preferences               │\n│  > Download Your Data              │\n│                                    │\n│  Preferences                       │\n│  ───────────────────────────────   │\n│  > Notifications                   │\n│  > Theme & Display                 │\n│  > Language & Region               │\n│  > Data & Storage                  │\n│  > Accessibility                   │\n│  > Privacy Controls                │\n│                                    │\n│  Integrations                      │\n│  ───────────────────────────────   │\n│  > Connected Apps                  │\n│  > API Access                      │\n│  > Webhooks                        │\n│                                    │\n│  Support & About                   │\n│  ───────────────────────────────   │\n│  > Help Center                     │\n│  > Contact Support                 │\n│  > What's New                      │\n│  > Privacy Policy                  │\n│  > Terms of Service                │\n│                                    │\n│  v1.2.4 • [Logout]                 │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Usage Example\n\n**Domain-specific customization examples:**\n\n**Books/Reading App:**\n- Profile stats: \"147 books read • 3,452 pages\"\n- Preferences: Add \"Reading Theme\", \"Page Turn Animation\"\n\n**Fitness/Health App:**\n- Profile stats: \"247 workouts • Level 42\"\n- Preferences: Add \"Units (kg/lbs)\", \"Health Data Sync\"\n\n**Social Media App:**\n- Profile stats: \"1.2K followers • 342 posts\"\n- Preferences: Add \"Privacy Controls\", \"Block & Mute\"\n\n**Productivity App:**\n- Profile stats: \"89 projects • 1,245 tasks\"\n- Preferences: Add \"Default View\", \"Calendar Sync\"\n\n**E-commerce App:**\n- Profile stats: \"12 orders • $1,234 spent\"\n- Preferences: Add \"Saved Addresses\", \"Payment Methods\"\n\n---\n\n## Customization Guide\n\n**Profile Section:**\nReplace generic stats (\"1,247 activities\") with domain-specific achievements:\n- Reading: books read, reading streak, pages\n- Fitness: workouts completed, current level, achievements\n- Social: followers, posts created, likes received\n- Productivity: tasks completed, projects, time tracked\n- Shopping: orders placed, loyalty points, total spent\n\n**Preferences:**\nAdd domain-specific preference items between Theme and Data sections:\n- Reading: Font size, page turn style, reading goals\n- Fitness: Units of measurement, workout reminders, health app sync\n- Social: Privacy controls, content preferences, blocked users\n- Productivity: Default views, keyboard shortcuts, integrations\n- Shopping: Saved addresses, payment methods, order notifications\n\n**Account Section:**\nCustomize based on monetization model:\n- Subscription apps: \"Subscription & Billing\" prominent\n- Free apps: Remove subscription, emphasize \"Connected Accounts\"\n- E-commerce: Add \"Payment Methods\", \"Saved Addresses\"\n\n---\n\n## Tags\n\nsettings, preferences, account, profile, configuration, user-settings, app-settings, account-management, theme, notifications, support, generic-settings, customizable, adaptable\n\n---\n\n## Accessibility Notes\n\n- Use clear hierarchy with section headers\n- Ensure tappable areas are 44x44pt minimum\n- Provide labels for all interactive elements\n- Support VoiceOver navigation through sections\n- Consider adding search for apps with 15+ settings items\n\n---\n\n## Technical Notes\n\n**Performance:**\n- Lazy-load user profile stats if network-dependent\n- Cache settings locally for instant display\n- Batch settings updates to reduce network calls\n\n**State Management:**\n- Toggle switches should update immediately (optimistic UI)\n- Show loading state for network-dependent changes\n- Provide undo option for destructive actions (logout, delete account)\n\n**Navigation:**\n- Each row should link to dedicated settings detail screen\n- Use modal presentation for simple toggles/pickers\n- Support deep linking to specific settings screens\n",
+    "settings/notification-settings": "# Notification Settings\n\n**ID:** `settings/notification-settings`\n**Category:** settings\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nControls notification preferences including delivery methods, timing, and granular per-feature notification toggles. Helps users customize which alerts they receive and how they're delivered to reduce notification fatigue while staying informed.\n\n**Use this pattern when user mentions:**\n- \"notifications\", \"notification settings\", \"alerts\"\n- \"push notifications\", \"notification preferences\"\n- \"notification control\", \"manage notifications\"\n- \"users need to control notifications\"\n- \"reduce notification noise\", \"notification fatigue\"\n- \"quiet hours\", \"do not disturb\", \"notification schedule\"\n\n**Common contexts:**\n- Social apps with multiple notification types (likes, comments, messages)\n- Productivity apps with reminders and updates\n- E-commerce with order updates and promotions\n- Messaging apps with conversation alerts\n- Fitness apps with workout reminders\n- Any app sending push notifications\n\n**UX Tradeoffs:**\n- **Pro:** Reduces notification fatigue through granular control\n- **Pro:** Users stay engaged without being overwhelmed\n- **Pro:** Quiet hours prevent late-night disturbances\n- **Pro:** Per-feature toggles increase user satisfaction\n- **Con:** Complex UI with many toggles may confuse users\n- **Con:** Too many options create decision paralysis\n- **Con:** Users may disable all notifications and miss important updates\n\n**Pairs well with:**\n- `settings/privacy_settings` - Privacy for notification data\n- `settings/preferences-advanced` - Additional app preferences\n- `authentication/login` - Account-based notification settings\n- `social/feed` - Notification sources\n- `messaging/inbox` - Message notifications\n\n**Variants available:**\n- **Minimal:** Master toggle only with optional quiet hours\n- **Standard:** Per-category toggles with delivery style options\n- **Comprehensive:** Granular per-feature controls, scheduling, custom rules\n\n**Related patterns:**\n- Instead of this, consider inline notification prompts if app has single notification type\n- Combine with `settings/privacy_settings` for data-driven notifications\n\n---\n\n## Description\n\nNotification settings interface providing granular control over push notifications, alerts, and delivery methods. Includes per-feature toggles, delivery style options (lock screen, banners, notification center), and quiet hours scheduling. Essential for apps with multiple notification types to reduce user fatigue while maintaining engagement.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ [←] Notifications                  │\n├────────────────────────────────────┤\n│                                    │\n│  Allow Notifications [On]          │\n│                                    │\n│  App Notifications                 │\n│                                    │\n│  > Messages [On]                   │\n│    New messages and replies        │\n│                                    │\n│  > Activity Updates [Off]          │\n│    Likes, follows, and comments    │\n│                                    │\n│  > Reminders [On]                  │\n│    Daily goals and tasks           │\n│                                    │\n│  > System Updates [Auto]           │\n│    App updates and news            │\n│                                    │\n│  Delivery Style                    │\n│                                    │\n│  > Lock Screen [On]                │\n│    Show on locked screen           │\n│                                    │\n│  > Notification Center [On]        │\n│    Show in notification center     │\n│                                    │\n│  > Banners [Temp]                  │\n│    Show as banner alerts           │\n│                                    │\n│  Quiet Hours [9PM-7AM]             │\n│  Reduce notifications during rest  │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ [←] Notifications                  │\n├────────────────────────────────────┤\n│                                    │\n│  Push Notifications [On]           │\n│  Receive alerts from this app      │\n│                                    │\n│  Quiet Hours                       │\n│  9:00 PM - 7:00 AM                 │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│ [←] Notifications                  │\n├────────────────────────────────────┤\n│                                    │\n│  Master Control                    │\n│  Allow Notifications [On]          │\n│                                    │\n│  Social                            │\n│                                    │\n│  > New Messages [On]               │\n│    Direct messages & chats         │\n│                                    │\n│  > Likes & Reactions [Off]         │\n│    Post interactions               │\n│                                    │\n│  > Comments & Replies [On]         │\n│    Comment threads                 │\n│                                    │\n│  > New Followers [Off]             │\n│    Account follows                 │\n│                                    │\n│  > Mentions [On]                   │\n│    When you're tagged              │\n│                                    │\n│  Activity                          │\n│                                    │\n│  > Daily Reminders [On]            │\n│    Morning motivation              │\n│                                    │\n│  > Milestone Achievements [On]     │\n│    Goal completions                │\n│                                    │\n│  > Inactivity Alerts [Off]         │\n│    Re-engagement prompts           │\n│                                    │\n│  System                            │\n│                                    │\n│  > App Updates [Auto]              │\n│    New features & improvements     │\n│                                    │\n│  > Security Alerts [On]            │\n│    Login & security events         │\n│                                    │\n│  > Promotional [Off]               │\n│    Special offers & events         │\n│                                    │\n│  Delivery Preferences              │\n│                                    │\n│  > Lock Screen [On]                │\n│  > Notification Center [On]        │\n│  > Banners [Temporary]             │\n│  > Sounds [On]                     │\n│  > Badge App Icon [On]             │\n│                                    │\n│  Schedule                          │\n│                                    │\n│  Quiet Hours [Custom]              │\n│  Weekdays: 10PM - 7AM              │\n│  Weekends: 11PM - 9AM              │\n│                                    │\n│  > Edit Schedule                   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nsettings, notifications, push-notifications, alerts, notification-control, quiet-hours, delivery-style, notification-settings, notification-preferences, do-not-disturb\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need notification settings for my social app where users can turn off likes but keep messages on, and set quiet hours at night\"\n\n**AI selects this pattern because:**\n- User mentioned \"notification settings\" (keyword match)\n- Social app needs granular per-feature controls\n- User wants selective notifications (messages on, likes off)\n- User mentioned \"quiet hours\" feature\n- Standard/Comprehensive variant appropriate\n\n**AI generates:**\nStandard variant with separate toggles for Messages (On), Likes (Off), Comments, Follows, plus Quiet Hours section with time range selector (9PM-7AM default)\n\n**AI explains tradeoff:**\n- \"Granular notification controls reduce fatigue by letting users keep important alerts (messages) while disabling noisy ones (likes). Quiet hours prevent sleep disruption. Trade-off: More toggles add complexity, but essential for user satisfaction in social apps with high notification volume.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Notification categories** - Customize based on app features (Social, Productivity, Commerce, etc.)\n2. **Delivery methods** - iOS vs. Android have different notification systems\n3. **Quiet hours UI** - Simple on/off, time range picker, or weekday/weekend schedules\n4. **Toggle granularity** - Category level vs. per-feature level\n\n**App-specific adaptations:**\n- **Social apps:** Messages, Likes, Comments, Follows, Mentions, Tags\n- **E-commerce:** Order updates, Shipping, Promotions, Price drops, Back in stock\n- **Productivity:** Task reminders, Due dates, Team mentions, Calendar events\n- **Messaging:** New messages, Group updates, Voice/video calls, Typing indicators\n- **Fitness:** Workout reminders, Goal achievements, Friend challenges, Health alerts\n- **News apps:** Breaking news, Topic alerts, Digest schedules\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Nested in Settings menu\n- Accessible during onboarding permission flow\n- Linked from push notification permission prompt\n\n**What comes before:**\n- `navigation/settings-menu` - Main settings hub\n- `onboarding/permissions` - Initial notification request\n- `modals/notification-prompt` - System permission dialog\n\n**What comes after:**\n- Same screen (toggles update in place)\n- System Settings (if permissions denied)\n- `settings/privacy_settings` - Related settings\n\n**Complete flow example:**\n`onboarding/permissions` → System prompt → **Notification Settings** → Per-feature customization\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App sends no notifications\n- App has single notification type (use inline toggle)\n- Notification permission not yet granted (use permission prompt first)\n- Simple app with minimal notification needs\n\n**Use instead:**\n- Inline toggle on home screen for single-notification apps\n- `onboarding/permissions` - For initial notification request\n- `settings/preferences-advanced` - For non-notification app preferences\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many toggles overwhelm non-technical users\n- Users may disable all notifications out of frustration\n- Unclear category names (what's in \"Activity Updates\"?)\n- Missing \"Allow All\" / \"Disable All\" shortcuts\n- Quiet hours UI complexity (time pickers are fiddly)\n\n**Conversion optimization:**\n- Group related notifications into clear categories\n- Provide \"Allow All\" / \"Disable All\" quick actions\n- Use plain language for category names\n- Show notification examples in toggle descriptions\n- Default to sensible settings (messages on, promotional off)\n- Make quiet hours easy to set (presets: 9PM-7AM, 10PM-6AM, Custom)\n- Badge count on settings icon showing active notification count\n\n**Accessibility notes:**\n- Toggle states clearly labeled (On/Off, not just colors)\n- Category headers semantically marked\n- Screen readers announce toggle state changes\n- Time picker for quiet hours accessible via keyboard\n- Sufficient tap targets for all toggles (44x44pt minimum)\n- High contrast between sections\n- Support dynamic type for descriptions\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "settings/preferences-advanced": "# Advanced Preferences Settings\n\n**ID:** `settings/preferences-advanced`\n**Category:** settings\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides technical and power-user controls for app behavior including performance tuning, caching, network settings, and debug options. Gives advanced users fine-grained control over app functionality beyond standard user preferences.\n\n**Use this pattern when user mentions:**\n- \"advanced settings\", \"advanced preferences\", \"power user settings\"\n- \"performance settings\", \"technical settings\"\n- \"cache settings\", \"network settings\", \"timeout\"\n- \"debug mode\", \"developer settings\", \"verbose logging\"\n- \"app tuning\", \"optimization settings\"\n- \"users need advanced control\"\n\n**Common contexts:**\n- Technical apps with power users\n- Developer tools and utilities\n- Apps with performance-sensitive features\n- Media apps with quality/bandwidth controls\n- Productivity apps with workflow customization\n- Apps offering debug/diagnostic features\n\n**UX Tradeoffs:**\n- **Pro:** Empowers power users with fine-grained control\n- **Pro:** Reduces support tickets from technical users\n- **Pro:** Enables troubleshooting and diagnostics\n- **Pro:** Performance optimization for different use cases\n- **Con:** Overwhelming for average users (needs to be hidden)\n- **Con:** Misuse can break app functionality\n- **Con:** Increases maintenance burden (more configuration states)\n\n**Pairs well with:**\n- `settings/privacy_settings` - Data-related advanced settings\n- `settings/theme-customization` - Visual customization\n- `settings/notification-settings` - Notification scheduling\n- `authentication/login` - Developer/admin access\n- `modals/confirmation` - Warning before dangerous changes\n\n**Variants available:**\n- **Minimal:** Essential technical settings only (cache, network timeout)\n- **Standard:** Balanced performance and display controls\n- **Comprehensive:** Full developer mode with debug logging and diagnostics\n\n**Related patterns:**\n- Instead of this, consider standard `settings/preferences` for non-technical users\n- Combine with `modals/confirmation` for settings with significant impact\n\n---\n\n## Description\n\nAdvanced preferences interface for power users and developers requiring fine-grained technical controls. Includes performance settings (animation speed, cache size), network configuration (timeout, retries), display tuning (brightness, font size), and debug options (logging, verbose mode). Use for apps targeting technical audiences or providing troubleshooting capabilities.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ [←] Advanced Preferences           │\n├────────────────────────────────────┤\n│                                    │\n│  Display Settings                  │\n│                                    │\n│  Brightness                        │\n│  [●━━━━━━━━━━━━━━━━━━━] 75%        │\n│                                    │\n│  Font Size                         │\n│  [─] 16 [+]                        │\n│                                    │\n│  Performance                       │\n│                                    │\n│  Animation Speed                   │\n│  [━━━━━●━━━━━━━━━━━━━] 40%         │\n│                                    │\n│  Cache Size (MB)                   │\n│  [─] 128 [+]                       │\n│                                    │\n│  Network                           │\n│                                    │\n│  Timeout (seconds)                 │\n│  [─] 30 [+]                        │\n│                                    │\n│  Max Retries                       │\n│  [─] 3 [+]                         │\n│                                    │\n│  Debug Options                     │\n│                                    │\n│  Log Level                         │\n│  [━━━●━━━━━━━━━━━━━━━] 20%         │\n│                                    │\n│  Verbose Logging          [●━━]    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ [←] Advanced Settings              │\n├────────────────────────────────────┤\n│                                    │\n│  Performance                       │\n│                                    │\n│  Cache Size                        │\n│  [─] 128 MB [+]                    │\n│                                    │\n│  > Clear Cache                     │\n│                                    │\n│  Network                           │\n│                                    │\n│  Request Timeout                   │\n│  [─] 30 seconds [+]                │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│ [←] Advanced Preferences           │\n├────────────────────────────────────┤\n│                                    │\n│  Display                           │\n│                                    │\n│  Brightness                        │\n│  [●━━━━━━━━━━━━━━━━━━━] 75%        │\n│                                    │\n│  Contrast                          │\n│  [━━━━━━━━━●━━━━━━━━━] 50%         │\n│                                    │\n│  Font Size (pt)                    │\n│  [─] 16 [+]  [Reset]               │\n│                                    │\n│  Line Height                       │\n│  [━━━━━●━━━━━━━━━━━━━] 1.5         │\n│                                    │\n│  Performance                       │\n│                                    │\n│  Animation Speed                   │\n│  [━━━━━●━━━━━━━━━━━━━] Normal      │\n│                                    │\n│  > Reduce Motion [Off]             │\n│    Minimize animations             │\n│                                    │\n│  Cache Size (MB)                   │\n│  [─] 256 [+]  [Clear Cache]        │\n│                                    │\n│  Preload Images [On]               │\n│  Load images ahead of time         │\n│                                    │\n│  Network                           │\n│                                    │\n│  Connection Timeout (s)            │\n│  [─] 30 [+]                        │\n│                                    │\n│  Read Timeout (s)                  │\n│  [─] 60 [+]                        │\n│                                    │\n│  Max Retries                       │\n│  [─] 3 [+]                         │\n│                                    │\n│  Retry Backoff                     │\n│  ● Exponential  ○ Linear           │\n│                                    │\n│  Data                              │\n│                                    │\n│  > Auto Sync [On]                  │\n│    Background data sync            │\n│                                    │\n│  Sync Interval                     │\n│  [─] 15 minutes [+]                │\n│                                    │\n│  > Compress Uploads [On]           │\n│    Reduce bandwidth usage          │\n│                                    │\n│  Developer                         │\n│                                    │\n│  > Enable Debug Mode [Off]         │\n│    Show technical information      │\n│                                    │\n│  Log Level                         │\n│  ○ Error  ● Warning  ○ Info        │\n│                                    │\n│  > Verbose Logging [Off]           │\n│    Detailed diagnostic logs        │\n│                                    │\n│  > Export Logs                     │\n│    Share diagnostics               │\n│                                    │\n│  > Reset All Settings              │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nsettings, advanced-preferences, power-user, performance, cache, network, debug, developer-settings, technical-settings, diagnostics, optimization\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need advanced settings for my media app where power users can adjust cache size, network timeouts, and enable debug logging for troubleshooting\"\n\n**AI selects this pattern because:**\n- User mentioned \"advanced settings\" (keyword match)\n- Media app benefits from performance tuning (cache for images/videos)\n- User wants technical controls (network timeouts)\n- User mentioned \"debug logging\" for diagnostics\n- Standard variant provides balanced controls\n\n**AI generates:**\nStandard variant with Performance section (cache size slider), Network section (timeout, retries), and Debug Options section (log level, verbose logging toggle)\n\n**AI explains tradeoff:**\n- \"Advanced settings empower power users to optimize app performance for their use case. Cache size controls storage usage, network timeouts handle slow connections, and debug logging helps troubleshoot issues. Trade-off: These settings can break the app if misconfigured, so they're best hidden from average users in an Advanced section.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Setting categories** - Customize based on app type (Display, Performance, Network, Media Quality, etc.)\n2. **Input methods** - Sliders vs. steppers vs. dropdowns based on data type\n3. **Reset options** - Individual reset vs. \"Reset All\" button\n4. **Developer mode toggle** - Show/hide debug features\n\n**App-specific adaptations:**\n- **Media apps:** Video quality presets, audio bitrate, buffer size, hardware acceleration\n- **Developer tools:** API endpoints, request logging, mock data, feature flags\n- **Productivity apps:** Keyboard shortcuts, workflow automation, batch operations\n- **Gaming apps:** Graphics quality, FPS limit, control sensitivity, input lag\n- **E-commerce:** Image quality, lazy loading, prefetch settings\n- **Social apps:** Feed algorithm controls, content filters, data usage limits\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Nested deep in Settings menu\n- Often requires \"Advanced\" toggle to reveal\n- Linked from About screen for diagnostics\n\n**What comes before:**\n- `navigation/settings-menu` - Main settings hub\n- `settings/preferences-advanced` toggle or button\n- Easter egg (tap version number 7 times) for debug mode\n\n**What comes after:**\n- Same screen (settings update in place)\n- `modals/confirmation` - For destructive actions (clear cache, reset)\n- `modals/alert` - For settings requiring app restart\n- App restart prompt if settings require it\n\n**Complete flow example:**\n`navigation/settings-menu` → Advanced toggle → **Advanced Preferences** → Adjust settings → `modals/alert` (restart required)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App targets non-technical users only\n- Settings can break core functionality\n- No legitimate use case for advanced controls\n- Debug features belong in internal builds only\n\n**Use instead:**\n- Standard `settings/preferences` - For consumer-facing settings\n- Hidden debug menu accessed via gesture/code - For internal diagnostics\n- Server-side configuration - For settings that shouldn't be user-controlled\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Technical jargon confuses average users\n- Too many numeric inputs slow down interaction\n- Users can break the app with wrong settings\n- No clear \"safe defaults\" to revert to\n- Settings requiring app restart cause frustration\n\n**Conversion optimization:**\n- Hide advanced settings behind toggle or separate screen\n- Use plain language with tooltips explaining technical terms\n- Provide sensible defaults and \"Recommended\" badges\n- Add \"Reset to Default\" option for each setting\n- Show impact of settings changes (e.g., \"Larger cache = more storage used\")\n- Validate input ranges (prevent 0 second timeout)\n- Warn before settings requiring app restart\n\n**Accessibility notes:**\n- Sliders need clear labels with current values\n- Stepper buttons (+/-) must have sufficient tap targets\n- Screen readers should announce value changes\n- Support keyboard navigation for numeric inputs\n- High contrast for text and controls\n- Dynamic type support for longer descriptions\n- Confirmation modals for destructive actions (clear cache)\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "settings/privacy_settings": "# Privacy Settings\n\n**ID:** `settings/privacy_settings`\n**Category:** settings\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nControls how user data is collected, shared, and used within the app. Provides transparency and user control over privacy preferences, data sharing, and account deletion in compliance with privacy regulations.\n\n**Use this pattern when user mentions:**\n- \"privacy\", \"privacy settings\", \"data privacy\"\n- \"data control\", \"data sharing\", \"data collection\"\n- \"GDPR\", \"CCPA\", \"privacy compliance\"\n- \"users need to control their data\"\n- \"privacy controls\", \"data transparency\"\n- \"delete account\", \"export data\"\n\n**Common contexts:**\n- Apps handling personal user data\n- Social platforms with sharing features\n- Apps requiring privacy compliance (GDPR/CCPA)\n- E-commerce with data collection\n- Health/fitness apps with sensitive data\n- Any app with third-party integrations\n\n**UX Tradeoffs:**\n- **Pro:** User trust through transparency and control\n- **Pro:** Privacy compliance (GDPR, CCPA requirements)\n- **Pro:** Reduces privacy-related support tickets\n- **Pro:** Empowers users with data ownership\n- **Con:** Complex UI with many toggles creates decision fatigue\n- **Con:** Too many options may overwhelm non-technical users\n- **Con:** \"Export data\" and \"Delete account\" increase churn risk\n\n**Pairs well with:**\n- `settings/notification-settings` - Privacy for notification data\n- `authentication/login` - Account security settings\n- `forms/profile-edit` - Personal data management\n- `settings/preferences-advanced` - Additional data controls\n- `authentication/two-factor-auth` - Security enhancement\n\n**Variants available:**\n- **Minimal:** Essential privacy toggles only (analytics, personalized ads)\n- **Standard:** Balanced privacy controls with export/delete options\n- **Comprehensive:** Granular controls, compliance features, audit logs\n\n**Related patterns:**\n- Instead of this, consider `settings/preferences-advanced` if privacy is not the primary concern\n- Combine with `authentication/two-factor-auth` for security-focused apps\n\n---\n\n## Description\n\nPrivacy settings interface providing transparency and control over data collection, sharing, and usage. Includes essential privacy toggles (analytics, personalized ads), data export functionality, and account deletion options. Critical for apps requiring GDPR/CCPA compliance and building user trust through data transparency.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ [←] Privacy                        │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [#] Your Privacy Matters     │  │\n│  │ Control how your data is     │  │\n│  │ collected and used.          │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Data Collection                   │\n│                                    │\n│  > Analytics & Crash Reports [On]  │\n│    Help improve the app            │\n│                                    │\n│  > Usage Statistics [Off]          │\n│    Anonymous usage patterns        │\n│                                    │\n│  > Personalized Ads [Off]          │\n│    Tailored advertising            │\n│                                    │\n│  Data Sharing                      │\n│                                    │\n│  > Share with Partners [Off]       │\n│    Third-party integrations        │\n│                                    │\n│  Your Data                         │\n│                                    │\n│  > Export Data                     │\n│    Download your information       │\n│                                    │\n│  > Delete Account                  │\n│    Permanently remove data         │\n│                                    │\n│  Privacy Policy • Terms of Service │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ [←] Privacy                        │\n├────────────────────────────────────┤\n│                                    │\n│  Data Collection                   │\n│                                    │\n│  Analytics [On]                    │\n│  Help us improve the app           │\n│                                    │\n│  Personalized Ads [Off]            │\n│  Show relevant ads                 │\n│                                    │\n│  Privacy Policy                    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│ [←] Privacy & Data                 │\n├────────────────────────────────────┤\n│                                    │\n│  Data Collection                   │\n│                                    │\n│  > Analytics & Diagnostics [On]    │\n│    App performance & crash reports │\n│                                    │\n│  > Usage Analytics [Off]           │\n│    Feature usage & behavior        │\n│                                    │\n│  > Location Data [Ask]             │\n│    GPS tracking for features       │\n│                                    │\n│  Advertising                       │\n│                                    │\n│  > Personalized Ads [Off]          │\n│    Interest-based advertising      │\n│                                    │\n│  > Ad Tracking [Off]               │\n│    Cross-app advertising tracking  │\n│                                    │\n│  Data Sharing                      │\n│                                    │\n│  > Share with Partners [Off]       │\n│    Third-party service providers   │\n│                                    │\n│  > Social Media Sharing [Custom]   │\n│    Control what friends can see    │\n│                                    │\n│  > Research & Analytics [Off]      │\n│    Anonymized data for research    │\n│                                    │\n│  Your Data Rights                  │\n│                                    │\n│  > Export My Data                  │\n│    Download all your information   │\n│                                    │\n│  > Data Access Log                 │\n│    See who accessed your data      │\n│                                    │\n│  > Delete My Account               │\n│    Permanently erase all data      │\n│                                    │\n│  Legal                             │\n│                                    │\n│  Privacy Policy • Terms of Service │\n│  GDPR Rights • CCPA Rights         │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nsettings, privacy, data-control, GDPR, CCPA, compliance, data-export, account-deletion, privacy-settings, data-transparency, user-rights\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need privacy settings for my social app where users can control what data we collect and have the option to delete their account\"\n\n**AI selects this pattern because:**\n- User mentioned \"privacy settings\" (keyword match)\n- Social app requires data collection transparency\n- User explicitly wants \"delete their account\" option\n- Standard variant provides balanced controls\n\n**AI generates:**\nStandard variant with data collection toggles (analytics, usage), data sharing controls, export data option, and prominent delete account button\n\n**AI explains tradeoff:**\n- \"Privacy settings build user trust and ensure compliance with regulations like GDPR. Data collection toggles let users opt out while still allowing essential analytics. Export/delete options are legally required in many jurisdictions. Trade-off: Complex UI with many options, but necessary for transparency.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Data collection categories** - Customize based on what data your app collects (location, health, usage)\n2. **Granularity of controls** - Simple on/off vs. detailed per-feature toggles\n3. **Danger zone styling** - \"Delete Account\" visually separated (red text, bottom placement)\n4. **Legal links** - Privacy Policy, Terms, GDPR/CCPA rights based on jurisdiction\n\n**App-specific adaptations:**\n- **Social apps:** Add \"Who can see my profile\", \"Activity visibility\", \"Friend suggestions\"\n- **Health/fitness apps:** Health data sharing, third-party app integrations, research participation\n- **E-commerce:** Purchase history visibility, marketing emails, product recommendations\n- **SaaS/productivity:** Team visibility, data retention, compliance certifications\n- **Children's apps:** COPPA compliance, parental controls, no behavioral advertising\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Nested in Settings menu\n- Accessible from Account/Profile settings\n- Linked from onboarding privacy consent\n\n**What comes before:**\n- `navigation/settings-menu` - Main settings hub\n- `forms/profile-edit` - Account settings section\n- `onboarding/privacy-consent` - Initial privacy setup\n\n**What comes after:**\n- Same screen (toggles update in place)\n- `modals/confirmation` - For delete account confirmation\n- `modals/export-data` - Data export progress/download\n- `authentication/login` - After account deletion\n\n**Complete flow example:**\n`navigation/settings-menu` → **Privacy Settings** → `modals/confirmation` (delete account) → `authentication/login`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App doesn't collect user data beyond essential functionality\n- App is fully anonymous with no tracking\n- Simple app with only crash analytics (use preferences instead)\n- Kids app requiring parental controls (use specialized pattern)\n\n**Use instead:**\n- `settings/preferences-advanced` - For non-privacy technical settings\n- `authentication/account-settings` - For account management without privacy focus\n- Inline privacy toggles during onboarding for simple apps\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many toggles create decision fatigue\n- Legal jargon confuses non-technical users\n- \"Delete Account\" placement (too prominent = accidental clicks, too hidden = compliance issues)\n- Users may not understand what \"analytics\" or \"personalized ads\" means\n\n**Conversion optimization:**\n- Use clear, plain language (avoid \"data processing\", \"telemetry\")\n- Provide context tooltips explaining each toggle\n- Default to privacy-respecting settings (opt-in model)\n- Make \"Delete Account\" require confirmation modal\n- Show benefits of data sharing (\"Help us improve\" vs. abstract terms)\n\n**Accessibility notes:**\n- Toggle states must be clearly indicated (On/Off labels, not just colors)\n- Legal links must be keyboard accessible\n- Screen readers should announce toggle state changes\n- High contrast for danger actions (Delete Account)\n- Support dynamic type for longer descriptions\n- Tooltips should be accessible to keyboard and screen reader users\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "settings/theme-customization": "# Theme Customization Settings\n\n**ID:** `settings/theme-customization`\n**Category:** settings\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides visual appearance controls including theme mode (light/dark/auto), color schemes, typography settings, and interface customization. Enables users to personalize app aesthetics and improve accessibility through visual adjustments.\n\n**Use this pattern when user mentions:**\n- \"theme settings\", \"appearance\", \"customization\"\n- \"dark mode\", \"light mode\", \"theme mode\"\n- \"colors\", \"color scheme\", \"color picker\"\n- \"font size\", \"typography\", \"text settings\"\n- \"users need to customize appearance\"\n- \"visual preferences\", \"personalization\"\n\n**Common contexts:**\n- Apps with dark mode support\n- Creative apps with theme personalization\n- Reading apps with typography controls\n- Productivity apps with visual customization\n- Apps prioritizing accessibility (contrast, text size)\n- Brand-focused apps with color theming\n\n**UX Tradeoffs:**\n- **Pro:** Personalization increases user satisfaction and engagement\n- **Pro:** Dark mode reduces eye strain and saves battery (OLED)\n- **Pro:** Typography controls improve readability and accessibility\n- **Pro:** Color customization enables brand alignment\n- **Con:** Too many options create decision fatigue\n- **Con:** Custom themes may break visual hierarchy\n- **Con:** Maintenance burden (test all theme combinations)\n\n**Pairs well with:**\n- `settings/preferences-advanced` - Additional display controls\n- `settings/notification-settings` - Notification appearance\n- `authentication/login` - Themed authentication screens\n- `navigation/home-screen` - Themed interface preview\n- `forms/profile-edit` - User profile customization\n\n**Variants available:**\n- **Minimal:** Simple light/dark/auto toggle only\n- **Standard:** Theme mode plus basic color and typography controls\n- **Comprehensive:** Full customization with color pickers, presets, and advanced typography\n\n**Related patterns:**\n- Instead of this, consider `settings/preferences-advanced` if appearance is secondary concern\n- Combine with accessibility settings for users with visual impairments\n\n---\n\n## Description\n\nTheme customization interface providing visual appearance controls for theme mode (light/dark/auto), color schemes, and typography settings. Includes color pickers for primary and accent colors, text size adjustments, and interface customization options. Essential for apps prioritizing personalization, accessibility, or brand customization.\n\n---\n\n## ASCII Wireframe\n\n### Standard Version\n\n```\n┌────────────────────────────────────┐\n│ [←] Theme Settings          [Done] │\n├────────────────────────────────────┤\n│                                    │\n│  Appearance                        │\n│                                    │\n│  Theme Mode                        │\n│  [Auto] [Light] [Dark]             │\n│                                    │\n│  Colors                            │\n│                                    │\n│  Primary Color                     │\n│  ┌─────────────┐                   │\n│  │ ● ● ● ● ●   │                   │\n│  │ ● ● ● ● ●   │                   │\n│  └─────────────┘                   │\n│                                    │\n│  Accent Color                      │\n│  ┌─────────────┐                   │\n│  │ ● ● ● ● ●   │                   │\n│  │ ● ● ● ● ●   │                   │\n│  └─────────────┘                   │\n│                                    │\n│  Typography                        │\n│                                    │\n│  Text Size                         │\n│  [─] 16 [+]                        │\n│                                    │\n│  Line Spacing                      │\n│  [━━━●━━━━━━━━━━━━━━━] 20%         │\n│                                    │\n│  Interface                         │\n│                                    │\n│  Corner Radius                     │\n│  [━━━━━●━━━━━━━━━━━━━] 30%         │\n│                                    │\n│  Use System Colors        [●━━]    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ [←] Appearance                     │\n├────────────────────────────────────┤\n│                                    │\n│  Theme                             │\n│                                    │\n│  ○ Light                           │\n│  ● Dark                            │\n│  ○ Auto (System)                   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│ [←] Theme & Appearance      [Done] │\n├────────────────────────────────────┤\n│                                    │\n│  Theme Mode                        │\n│                                    │\n│  [Auto] [Light] [Dark] [Custom]    │\n│                                    │\n│  Color Scheme                      │\n│                                    │\n│  Presets                           │\n│  [Ocean] [Forest] [Sunset] [Night] │\n│                                    │\n│  Primary Color                     │\n│  ┌─────────────┐  #4A90E2          │\n│  │ ● ● ● ● ●   │  [Custom]         │\n│  │ ● ● ● ● ●   │                   │\n│  └─────────────┘                   │\n│                                    │\n│  Accent Color                      │\n│  ┌─────────────┐  #E24A90          │\n│  │ ● ● ● ● ●   │  [Custom]         │\n│  │ ● ● ● ● ●   │                   │\n│  └─────────────┘                   │\n│                                    │\n│  Background                        │\n│  ┌─────────────┐                   │\n│  │ ● ● ● ● ●   │  Pure / Gradient  │\n│  └─────────────┘                   │\n│                                    │\n│  Typography                        │\n│                                    │\n│  Font Family                       │\n│  [System] [Serif] [Mono] [Custom]  │\n│                                    │\n│  Text Size (pt)                    │\n│  [─] 16 [+]  [Reset]               │\n│                                    │\n│  Line Height                       │\n│  [━━━●━━━━━━━━━━━━━━━] 1.5         │\n│                                    │\n│  Letter Spacing                    │\n│  [━━━━━━━━━●━━━━━━━━━] 0.0         │\n│                                    │\n│  Interface                         │\n│                                    │\n│  Corner Radius                     │\n│  [━━━━━●━━━━━━━━━━━━━] 8px         │\n│                                    │\n│  Card Shadow                       │\n│  [━━━●━━━━━━━━━━━━━━━] Subtle      │\n│                                    │\n│  Animation Style                   │\n│  ● Smooth  ○ Snappy  ○ None        │\n│                                    │\n│  Accessibility                     │\n│                                    │\n│  > High Contrast [Off]             │\n│    Increase color contrast         │\n│                                    │\n│  > Reduce Motion [Off]             │\n│    Minimize animations             │\n│                                    │\n│  > Use System Colors [On]          │\n│    Respect system preferences      │\n│                                    │\n│  [── Reset to Default ──]          │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nsettings, theme, appearance, dark-mode, light-mode, customization, colors, typography, personalization, visual-settings, theme-customization, accessibility\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need theme settings for my reading app where users can switch between light and dark mode, adjust text size for readability, and choose from preset color schemes\"\n\n**AI selects this pattern because:**\n- User mentioned \"theme settings\" (keyword match)\n- Reading app benefits from typography controls (text size)\n- User wants light/dark mode toggle\n- User mentioned \"preset color schemes\"\n- Standard/Comprehensive variant appropriate\n\n**AI generates:**\nStandard variant with Theme Mode toggle (Auto/Light/Dark), Color Scheme presets, Typography section with text size slider and line spacing, and \"Use System Colors\" toggle\n\n**AI explains tradeoff:**\n- \"Theme customization improves reading comfort through dark mode (reduces eye strain) and typography controls (better readability). Color presets let users personalize without overwhelming choice. Trade-off: More theme options increase testing complexity, but essential for reading apps where visual comfort is critical.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Theme modes** - Light/Dark/Auto (system), plus custom themes or seasonal themes\n2. **Color controls** - Simple presets vs. full color pickers with hex codes\n3. **Typography options** - Basic text size vs. comprehensive font family, weight, spacing\n4. **Preview** - Real-time preview of theme changes before applying\n\n**App-specific adaptations:**\n- **Reading apps:** Font family (serif/sans-serif), text size, line spacing, background tint, margins\n- **Creative apps:** Full color picker, gradient support, texture overlays, custom fonts\n- **Productivity apps:** Color-coded categories, workspace themes, syntax highlighting (code editors)\n- **Social apps:** Profile theme customization, post appearance, timeline colors\n- **E-commerce:** Brand color alignment, product card styling, seasonal themes\n- **Gaming apps:** Character themes, UI skin packs, seasonal events themes\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Nested in Settings menu\n- Accessible from main navigation (if primary feature)\n- Linked from onboarding customization step\n\n**What comes before:**\n- `navigation/settings-menu` - Main settings hub\n- `onboarding/customization` - Initial theme setup\n- `forms/profile-edit` - Profile appearance section\n\n**What comes after:**\n- Same screen (live preview updates)\n- Confirmation modal if changes require app restart\n- `navigation/home-screen` - Return to see theme applied\n\n**Complete flow example:**\n`onboarding/customization` → **Theme Settings** → Select dark mode + text size → `navigation/home-screen` (themed)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App has strict brand guidelines (no theme customization)\n- Single theme sufficient for all users\n- App targets very simple use case (calculator, timer)\n- Customization adds no value to user experience\n\n**Use instead:**\n- System theme detection only (auto light/dark) without UI\n- `settings/preferences-advanced` - If appearance is minor technical setting\n- Hardcoded theme with no user controls\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many color options cause decision paralysis\n- Custom themes may break readability (low contrast)\n- Typography changes can break layout if not tested\n- Users expect instant preview without \"Apply\" button\n- Reset button placement (accidental resets frustrating)\n\n**Conversion optimization:**\n- Provide sensible presets to reduce choice overload\n- Show live preview of theme changes\n- Validate color contrast for accessibility (WCAG AA minimum)\n- Make \"Auto\" (system theme) the default\n- Group related settings (Colors together, Typography together)\n- Add \"Reset to Default\" option for users who broke their theme\n- Show examples of each preset (thumbnail preview)\n- Persist theme choice across devices (cloud sync)\n\n**Accessibility notes:**\n- High contrast mode for users with visual impairments\n- Text size controls support dynamic type (iOS) / large text (Android)\n- Color selections must maintain WCAG contrast ratios\n- Provide text labels for color swatches (not color-blind dependent)\n- Screen readers announce theme changes\n- Reduce motion option for users sensitive to animations\n- Keyboard navigation for all theme controls\n- Focus indicators clearly visible in all themes\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "shopping/advanced-product-comparison": "# Advanced Product Comparison\n\n**ID:** `shopping/advanced-product-comparison`\n**Category:** shopping\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables side-by-side comparison of multiple products to help users make informed purchase decisions by evaluating features, specs, and pricing directly.\n\n**Use this pattern when user mentions:**\n- \"compare products\", \"comparison\", \"versus\", \"vs\"\n- \"product comparison\", \"feature comparison\", \"specs\"\n- \"which is better\", \"pros and cons\", \"tradeoffs\"\n- Users need to evaluate multiple items before purchasing\n\n**Common contexts:**\n- Electronics (laptops, phones, cameras)\n- Appliances (TVs, refrigerators, washers)\n- Tools and equipment (bikes, power tools)\n- Software subscriptions or plans\n- Any decision-heavy purchase scenario\n\n**UX Tradeoffs:**\n- **Pro:** Direct side-by-side comparison reduces decision anxiety\n- **Pro:** Shows feature/price differences clearly\n- **Pro:** Supports quick switching between products\n- **Con:** Can be overwhelming with too many products (2-4 optimal)\n- **Con:** Requires consistent spec data for all items\n\n**Pairs well with:**\n- `shopping/product-catalog` - Browse and select items to compare\n- `shopping/product-detail` - View full details of selected product\n- `special/shopping-cart` - Add selected item to cart\n- `forms/filter-sort` - Filter by category/price\n\n**Variants available:**\n- **Two-Product:** Basic A/B comparison (use for \"which should I buy\")\n- **Three-Product:** Standard comparison (use for \"comparing options\")\n- **Feature Matrix:** Comprehensive specs table (use for \"detailed specs\")\n\n**Related patterns:**\n- Instead of this, consider `special/data-table-advanced` for displaying raw inventory data\n- Instead of this, consider `shopping/product-detail` if users just need one product\n\n---\n\n## Description\n\nA side-by-side product comparison interface that displays specifications, pricing, and features of multiple items simultaneously. Helps customers evaluate options before making a purchase decision. Reduces decision friction by showing differences directly rather than requiring context switching between product details.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ Product Comparison [×]             │\n├────────────────────────────────────┤\n│ Product A           │ Product B    │\n│ [IMG]               │ [IMG]        │\n│ $99.99              │ $149.99      │\n│ [*][*][*] 4.5       │ [*][*] 4.8   │\n├────────────────────────────────────┤\n│ Size:   S M L XL                   │\n│ Color:  ● ○ ○                      │\n├────────────────────────────────────┤\n│ Qty: [-] 1 [+]                     │\n│                                    │\n│ ┌──────────┐       ┌──────────┐    │\n│ │ Add Cart │       │ Add Cart │    │\n│ └──────────┘       └──────────┘    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nshopping, comparison, products, versus, features, specs, purchase, decision, ecommerce\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need to compare two laptops side-by-side so customers can see the differences\"\n\n**AI selects this pattern because:**\n- User mentioned \"compare\" (keyword match)\n- Two products need side-by-side evaluation\n- Purchase decision context detected\n- Comparison view is optimal for this use case\n\n**AI generates:**\nTwo-product variant with specs, pricing, images, and action buttons\n\n**AI explains tradeoff:**\n- \"Side-by-side layout lets customers evaluate specs without context switching. Limited to 2-3 products for clarity. Consider feature matrix if comparing 4+ items.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Product count** - 2 products (A/B), 3 products (standard), 4+ (advanced matrix)\n2. **Information shown** - Minimal (name/price) to comprehensive (all specs/reviews)\n3. **Spec rows** - Size, color, features, ratings, availability, warranty\n4. **Actions** - Add to cart, view details, save for later\n\n**App-specific adaptations:**\n- **Tech products:** CPU, RAM, storage, display specs prominent\n- **Clothing:** Size charts, materials, fit feedback visible\n- **Plans/subscriptions:** Feature checklist, price comparison, limits highlighted\n- **Appliances:** Capacity, efficiency ratings, warranty shown\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Reached from product catalog (user selects 2-3 items to compare)\n- After user expresses comparison intent\n- Before final purchase decision\n\n**What comes before:**\n- `shopping/product-catalog` - User finds and selects products\n- Category or search results screen\n- Product discovery flow\n\n**What comes after:**\n- `shopping/product-detail` - User clicks for full specs\n- `special/shopping-cart` - User adds selected product\n- Checkout flow\n\n**Complete flow example:**\n`shopping/product-catalog` → **Product Comparison** → `shopping/product-detail` → `special/shopping-cart` → `shopping/payment`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- User is only interested in one product (use `shopping/product-detail`)\n- Comparing 4+ items (use feature matrix or `special/data-table-advanced`)\n- Products are too complex for simple comparison\n- Insufficient consistent spec data available\n\n**Use instead:**\n- `special/data-table-advanced` - For complex specs or 4+ items\n- `shopping/product-detail` - For single-item focus\n- `forms/filter-sort` - To narrow choices before comparison\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many products = cognitive overload (limit to 3 max)\n- Missing specs = incomplete comparison\n- Inconsistent formatting = confusing\n- Small text = hard to read specs\n\n**Conversion optimization:**\n- Highlight key differences with color or emphasis\n- Show price difference prominently\n- Include trust signals (ratings, reviews)\n- Make \"Add to Cart\" obvious for chosen product\n- Show availability/in-stock status\n\n**Accessibility notes:**\n- Use table structure for screen readers\n- Ensure product images have descriptive alt text\n- Make comparison toggles keyboard accessible\n- Support landscape orientation for wider views\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "shopping/payment": "# Payment\n\n**ID:** `shopping/payment`\n**Category:** shopping\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to securely enter payment information and complete purchases with multiple payment methods (credit card, digital wallets, alternative payment services).\n\n**Use this pattern when user mentions:**\n- \"checkout\", \"payment\", \"pay\", \"purchase\"\n- \"credit card\", \"card payment\", \"payment method\"\n- \"Apple Pay\", \"PayPal\", \"digital wallet\"\n- \"complete order\", \"purchase flow\", \"transaction\"\n- Users need to pay for items\n\n**Common contexts:**\n- E-commerce checkout flow\n- In-app purchases and subscriptions\n- Marketplace transactions\n- Food delivery and services\n- Membership or ticket purchases\n\n**UX Tradeoffs:**\n- **Pro:** Multiple payment methods increase conversion (fewer cart drops)\n- **Pro:** Express checkout (Apple Pay) reduces friction\n- **Pro:** Card saving enables repeat purchases\n- **Con:** Too many payment options = choice overload\n- **Con:** Security requirements add complexity\n\n**Pairs well with:**\n- `shopping/product-catalog` - Browse products\n- `shopping/product-detail` - View item details\n- `special/shopping-cart` - Review items before payment\n- `forms/address-form` - Shipping/billing address\n- `forms/payment-form` - Card details input\n\n**Variants available:**\n- **Express:** Apple Pay/PayPal only (fastest checkout)\n- **Standard:** Card + digital wallets (balanced)\n- **Detailed:** Full form with billing address (complete)\n\n**Related patterns:**\n- Instead of this, consider `forms/payment-form` if collecting just card details\n- Instead of this, consider `forms/address-form` if handling billing separately\n- Pair with `navigation/success-screen` for post-purchase confirmation\n\n---\n\n## Description\n\nA payment processing interface that collects payment details from users with support for multiple payment methods. Provides options for credit/debit cards, digital wallets (Apple Pay, PayPal), and billing address management. Core step in e-commerce checkout that handles transaction processing securely.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ ← Back    Payment       [×]        │\n├────────────────────────────────────┤\n│                                    │\n│ Payment Method                     │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Apple Pay              [>]     │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Credit or Debit Card   [>]     │ │\n│ │                                │ │\n│ │ Card Number:                   │ │\n│ │ [4242 4242 4242 4242      ]    │ │\n│ │                                │ │\n│ │ Expiry: [MM/YY]  CVV: [123]    │ │\n│ │                                │ │\n│ │ [ ] Save this card             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ PayPal                 [>]     │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Billing Address                    │\n│ [ ] Same as shipping               │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │  Complete Payment  $99.99    │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nshopping, payment, checkout, card, wallet, transaction, purchase, ecommerce, security\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a payment screen where users can enter their credit card or use Apple Pay to complete checkout\"\n\n**AI selects this pattern because:**\n- User mentioned \"payment\" (keyword match)\n- Multiple payment methods needed\n- Checkout context detected\n- Standard e-commerce pattern\n\n**AI generates:**\nStandard variant with card form, Apple Pay/PayPal options, and billing address\n\n**AI explains tradeoff:**\n- \"Offers three payment methods to minimize drop-off. Card form requires validation. Consider express checkout if most users have Apple Pay/PayPal.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Payment methods** - Apple Pay, Google Pay, PayPal, Stripe, Square\n2. **Form fields** - Card number, expiry, CVV, cardholder name, billing zip\n3. **Billing address** - Full form vs. zipcode only vs. same-as-shipping checkbox\n4. **Validation** - Real-time validation, error messaging, required fields\n\n**App-specific adaptations:**\n- **Subscription apps:** Recurring payment option, cancel anytime messaging\n- **Marketplace:** Seller payouts, fees, tax calculation\n- **International:** Multiple currencies, localized payment methods\n- **Tipping:** Optional tip field, suggested percentages\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Final step before order confirmation\n- After cart review and shipping details\n- Before success/confirmation screen\n\n**What comes before:**\n- `special/shopping-cart` - User reviews items and quantity\n- `forms/address-form` - User enters shipping address\n- Cart summary/order review screen\n\n**What comes after:**\n- `navigation/success-screen` - Order confirmation\n- Confirmation email sent\n- Account order history updated\n\n**Complete flow example:**\n`shopping/product-catalog` → `special/shopping-cart` → `forms/address-form` → **Payment** → `navigation/success-screen`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Using third-party payment processor (Stripe, Square hosted checkout)\n- Only collecting card details (use `forms/payment-form`)\n- Need advanced recurring billing (use specialized billing platform)\n- Very simple single-payment flow\n\n**Use instead:**\n- `forms/payment-form` - Card details only (no address/options)\n- Stripe/Square/PayPal hosted checkout - For PCI compliance\n- `special/data-entry-form` - If creating custom payment flow\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Asking for too much information upfront = higher abandonment\n- Unclear which method is selected = confusion\n- Validation errors without clear guidance = frustration\n- Lack of security messaging = trust concerns\n\n**Conversion optimization:**\n- Lead with fastest method (Apple Pay) for returning users\n- Show security badges (SSL, PCI compliance)\n- Single-use card option for privacy-conscious users\n- Clear minimum/maximum amount information\n- Show order total before payment\n\n**Accessibility notes:**\n- Form labels associated with inputs (screen reader friendly)\n- Clear focus indicators on payment options\n- Validation messages communicated to screen readers\n- Error recovery options clearly visible\n- Support keyboard-only navigation\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "shopping/product-catalog": "# Product Catalog\n\n**ID:** `shopping/product-catalog`\n**Category:** shopping\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to browse and discover products in a grid or list layout with filtering and sorting capabilities.\n\n**Use this pattern when user mentions:**\n- \"products\", \"browse\", \"shop\", \"catalog\"\n- \"store\", \"marketplace\", \"inventory\"\n- \"product listing\", \"product grid\", \"browse items\"\n- \"e-commerce\", \"shopping\", \"buy\"\n- Users need to discover and compare multiple products\n\n**Common contexts:**\n- E-commerce apps and online stores\n- Marketplace platforms (peer-to-peer selling)\n- Retail apps with product browsing\n- Digital storefronts for physical goods\n- Any app where users shop for items\n\n**UX Tradeoffs:**\n- **Pro:** Grid layout maximizes product visibility per screen\n- **Pro:** Familiar shopping pattern users recognize instantly\n- **Pro:** Supports quick scanning and comparison\n- **Con:** May overwhelm users with too many choices\n- **Con:** Requires good product imagery to be effective\n\n**Pairs well with:**\n- `shopping/product-detail` - Tap product to see details\n- `navigation/search-input` - Search within catalog\n- `special/shopping-cart` - Add items while browsing\n- `forms/filter-sort` - Refine product results\n\n**Variants available:**\n- **Minimal:** Simple list, basic info only (use for \"quick browse\" or limited inventory)\n- **Standard:** Grid with images, prices, ratings (use for most e-commerce scenarios)\n- **Comprehensive:** Advanced filters, sorting, categories (use for \"large catalog\" or \"detailed shopping\")\n\n**Related patterns:**\n- Instead of this, consider `special/content-browser-grid` if browsing media/content rather than products\n- Instead of this, consider `special/data-table-advanced` if displaying inventory data rather than customer-facing catalog\n\n---\n\n## Description\n\nA product browsing interface displaying multiple items in a scannable grid or list format. Shows essential product information (image, name, price, rating) with filtering and sorting tools to help users find what they need. This is the primary discovery screen for e-commerce experiences.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Products            [=] [@]    │\n├────────────────────────────────────┤\n│                                    │\n│ [Search products...]        [#]    │\n│                                    │\n│ [All] [New] [Sale] [Top Rated]     │\n│                                    │\n│ Sort: Price ▼      Filters (3)     │\n│                                    │\n│ ┌────────┐  ┌────────┐  ┌────────┐ │\n│ │ [IMG]  │  │ [IMG]  │  │ [IMG]  │ │\n│ │        │  │        │  │        │ │\n│ │Wireless│  │Smart   │  │Portable│ │\n│ │Earbuds │  │Watch   │  │Speaker │ │\n│ │        │  │        │  │        │ │\n│ │$79.99  │  │$299.99 │  │$49.99  │ │\n│ │[*][*]4.│  │[*][*]4.│  │[*][*]4.│ │\n│ └────────┘  └────────┘  └────────┘ │\n│                                    │\n│ ┌────────┐  ┌────────┐  ┌────────┐ │\n│ │ [IMG]  │  │ [IMG]  │  │ [IMG]  │ │\n│ │        │  │        │  │        │ │\n│ │USB-C   │  │Phone   │  │Laptop  │ │\n│ │Cable   │  │Case    │  │Stand   │ │\n│ │        │  │        │  │        │ │\n│ │$12.99  │  │$24.99  │  │$34.99  │ │\n│ │[*][*]4.│  │[*][*]4.│  │[*][*]4.│ │\n│ └────────┘  └────────┘  └────────┘ │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Products                       │\n├────────────────────────────────────┤\n│                                    │\n│ [Search...]                        │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [IMG]  Wireless Earbuds  $79.99│ │\n│ │        [*][*][*][*] 4.5        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [IMG]  Smart Watch      $299.99│ │\n│ │        [*][*][*][*] 4.8        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [IMG]  Portable Speaker  $49.99│ │\n│ │        [*][*][*][*] 4.3        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [IMG]  USB-C Cable       $12.99│ │\n│ │        [*][*][*][*] 4.7        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Electronics         [=] [@]    │\n├────────────────────────────────────┤\n│                                    │\n│ [Search products...]        [#]    │\n│                                    │\n│ Categories:                        │\n│ > Audio  Wearables  Accessories    │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Filters             [Clear All]│ │\n│ │ Price: $0 - $500              ▼│ │\n│ │ Rating: 4+ stars              ▼│ │\n│ │ Brand: All                    ▼│ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Sort: Price Low-High ▼  View: [G]  │\n│                                    │\n│ 147 products found                 │\n│                                    │\n│ ┌────────┐  ┌────────┐  ┌────────┐ │\n│ │ [IMG]  │  │ [IMG]  │  │ [IMG]  │ │\n│ │        │  │        │  │        │ │\n│ │Wireless│  │Smart   │  │Portable│ │\n│ │Earbuds │  │Watch   │  │Speaker │ │\n│ │TechCo  │  │WearTech│  │SoundCo │ │\n│ │$79.99  │  │$299.99 │  │$49.99  │ │\n│ │[*]4.5/5│  │[*]4.8/5│  │[*]4.3/5│ │\n│ │Sale 20%│  │In Stock│  │Low Stck│ │\n│ └────────┘  └────────┘  └────────┘ │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\necommerce, shopping, products, catalog, grid, browse, marketplace, store, listing, discovery\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a screen where users can browse products in my electronics store\"\n\n**AI selects this pattern because:**\n- User mentioned \"browse products\" (keyword match)\n- E-commerce context detected (store)\n- Multiple items need to be displayed\n- Standard shopping pattern is appropriate\n\n**AI generates:**\nStandard variant with 3-column grid, product images, prices, ratings, and basic filtering\n\n**AI explains tradeoff:**\n- \"Grid layout shows 6 products per screen for quick browsing. Added search and category filters to help users narrow choices. Ratings visible for trust signals.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Grid columns** - 2 columns for large items, 3 for standard, 4+ for small items\n2. **Product info shown** - Minimal (name/price) to comprehensive (brand, stock, badges)\n3. **Filter complexity** - From simple search to advanced multi-filter panels\n4. **Sorting options** - Price, rating, newest, popularity, relevance\n\n**App-specific adaptations:**\n- **Fashion store:** Larger images, color variants, size availability\n- **Grocery app:** Add to cart from grid, unit pricing, quantity selector\n- **Marketplace:** Seller info, location, shipping options visible\n- **Digital products:** Download count, file size, compatibility info\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Main shopping screen after home/landing\n- Destination from search or category selection\n- Entry point for product discovery\n\n**What comes before:**\n- `navigation/home-screen` - User taps \"Shop\" or category\n- `navigation/search-input` - User searches for products\n- Category selection screen\n\n**What comes after:**\n- `shopping/product-detail` - User taps product for details\n- `special/shopping-cart` - User taps cart icon\n- Filter/sort modal (user refines results)\n\n**Complete flow example:**\n`navigation/home-screen` → **Product Catalog** → `shopping/product-detail` → `special/shopping-cart` → `shopping/payment`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App has only 1-5 items (use simple list instead)\n- Browsing media/content rather than products (use `special/content-browser-grid`)\n- Displaying data/inventory for admins (use `special/data-table-advanced`)\n- Single-product focus (go directly to `shopping/product-detail`)\n\n**Use instead:**\n- `special/content-browser-grid` - For media libraries, photo galleries\n- `special/data-table-advanced` - For admin inventory management\n- Simple list view - For very small catalogs (< 10 items)\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many products without good filtering = decision paralysis\n- Poor product images = low trust and engagement\n- Slow loading of many images = frustration\n- Hidden filters = users can't find what they need\n\n**Conversion optimization:**\n- Show trust signals (ratings, reviews, stock status)\n- Make \"Add to Cart\" accessible without leaving catalog\n- Progressive disclosure: start simple, reveal filters on demand\n- Clear product hierarchy with visual grouping\n\n**Accessibility notes:**\n- Grid items should have clear tap targets (min 44x44pt)\n- Product names should be readable at small sizes\n- Support list view alternative for screen readers\n- Ensure filter controls are keyboard accessible\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "shopping/product-detail": "# Product Detail\n\n**ID:** `shopping/product-detail`\n**Category:** shopping\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays comprehensive information about a single product to help users make purchase decisions with confidence.\n\n**Use this pattern when user mentions:**\n- \"product page\", \"product detail\", \"item details\"\n- \"product info\", \"product screen\", \"view product\"\n- \"show product\", \"product description\"\n- \"buy screen\", \"purchase page\"\n- Users need to see full product information before buying\n\n**Common contexts:**\n- E-commerce product pages\n- Marketplace item listings\n- Digital product details\n- Service booking details\n- Any transactional screen showing a single item\n\n**UX Tradeoffs:**\n- **Pro:** Provides all information needed for confident purchase decision\n- **Pro:** Supports multiple product variants (size, color) in one place\n- **Pro:** Builds trust with reviews, descriptions, and images\n- **Con:** Can be overwhelming if too much information presented at once\n- **Con:** Longer scroll depth may hide important details\n\n**Pairs well with:**\n- `shopping/product-catalog` - Navigate from catalog to detail\n- `special/shopping-cart` - Add product and proceed to checkout\n- `social/reviews-ratings` - Show customer reviews\n- `media/image-gallery` - Multiple product photos\n\n**Variants available:**\n- **Minimal:** Basic info, single image, add to cart (use for \"simple products\" or \"quick purchase\")\n- **Standard:** Images, variants, description, reviews preview (use for most product pages)\n- **Comprehensive:** Full specs, multiple images, detailed reviews, related products (use for \"high-value items\" or \"considered purchases\")\n\n**Related patterns:**\n- Instead of this, consider `shopping/product-catalog` if showing multiple products\n- Instead of this, consider `special/content-browser-grid` if item is media/content, not a product\n\n---\n\n## Description\n\nA detailed view of a single product showing images, pricing, descriptions, variant selection (size, color), reviews, and purchase actions. This is the decision-making screen where users get all information needed to add an item to their cart with confidence.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<]                    [*] [CART]  │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │                                │ │\n│ │         [PRODUCT IMAGE]        │ │\n│ │                                │ │\n│ │         < 1 / 5 >              │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Wireless Noise-Canceling Earbuds   │\n│ [*][*][*][*][*] 4.8 (2,847 reviews)│\n│                                    │\n│ $79.99  was $99.99  [20% OFF]      │\n│                                    │\n│ Color: Black                       │\n│ [ Black ]  [ White ]  [ Blue ]     │\n│                                    │\n│ Description:                       │\n│ Premium wireless earbuds with      │\n│ active noise cancellation, 30hr    │\n│ battery life, and crystal clear... │\n│ [Read more]                        │\n│                                    │\n│ Specifications:                    │\n│ - Battery: 30 hours                │\n│ - Bluetooth: 5.3                   │\n│ - Water Resistance: IPX4           │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │     [ Add to Cart ]            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Free shipping on orders over $50   │\n│ In stock - Ships within 2 days     │\n│                                    │\n│ You might also like:               │\n│ ┌──────┐ ┌──────┐ ┌──────┐         │\n│ │[IMG] │ │[IMG] │ │[IMG] │         │\n│ │$49.99│ │$24.99│ │$89.99│         │\n│ └──────┘ └──────┘ └──────┘         │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<]                         [CART] │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │                                │ │\n│ │         [PRODUCT IMAGE]        │ │\n│ │                                │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ Wireless Earbuds                   │\n│                                    │\n│ $79.99                             │\n│ [*][*][*][*] 4.8                   │\n│                                    │\n│ Premium wireless earbuds with      │\n│ active noise cancellation and      │\n│ 30-hour battery life.              │\n│                                    │\n│ Color:                             │\n│ [ Black ]  [ White ]  [ Blue ]     │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │     [ Add to Cart ]            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ In stock - Free shipping           │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<]              [Share] [*] [CART]│\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │         [MAIN IMAGE]           │ │\n│ │         < 1 / 8 >              │ │\n│ └────────────────────────────────┘ │\n│ [T][T][T][T][T][T][T][T]  View All │\n│                                    │\n│ Wireless Noise-Canceling Earbuds   │\n│ by TechAudio Pro                   │\n│                                    │\n│ [*][*][*][*][*] 4.8 (2,847 reviews)│\n│ 96% would recommend                │\n│                                    │\n│ $79.99  was $99.99  [SAVE 20%]     │\n│ Or 4 payments of $20 with Affirm   │\n│                                    │\n│ Color: Midnight Black              │\n│ [ Black ]  [ White ]  [ Blue ]     │\n│                                    │\n│ Size: Standard                     │\n│ [ Standard ]  [ Small ]            │\n│                                    │\n│ Quantity: [-] 1 [+]                │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │     [ Add to Cart ]            │ │\n│ └────────────────────────────────┘ │\n│ [ Buy Now ]     [ Add to Wishlist ]│\n│                                    │\n│ ✓ Free shipping over $50           │\n│ ✓ In stock - Ships in 1-2 days     │\n│ ✓ 30-day returns                   │\n│                                    │\n│ ────────────────────────────────── │\n│ Product Details                  ▼ │\n│ ────────────────────────────────── │\n│ Premium wireless earbuds featuring:│\n│ - Active Noise Cancellation        │\n│ - 30-hour battery (6hr + 24hr case)│\n│ - Bluetooth 5.3 connectivity       │\n│ - IPX4 water resistance            │\n│ [Read full description]            │\n│                                    │\n│ ────────────────────────────────── │\n│ Specifications                   ▼ │\n│ ────────────────────────────────── │\n│ Driver: 10mm dynamic               │\n│ Frequency: 20Hz - 20kHz            │\n│ Impedance: 32 ohms                 │\n│ [View all specs]                   │\n│                                    │\n│ ────────────────────────────────── │\n│ Reviews (2,847)                  ▼ │\n│ ────────────────────────────────── │\n│ [*][*][*][*][*] \"Amazing quality!\" │\n│ by Sarah M. - Verified Purchase    │\n│ These earbuds exceeded my...       │\n│ Helpful? [Yes (45)] [No (2)]       │\n│ [View all 2,847 reviews]           │\n│                                    │\n│ ────────────────────────────────── │\n│ Related Products                 ▼ │\n│ ────────────────────────────────── │\n│ ┌──────┐ ┌──────┐ ┌──────┐         │\n│ │[IMG] │ │[IMG] │ │[IMG] │         │\n│ │Case  │ │Cable │ │Stand │         │\n│ │$19.99│ │$12.99│ │$24.99│         │\n│ └──────┘ └──────┘ └──────┘         │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\necommerce, product, detail, shopping, purchase, buy, variants, reviews, product-page, pdp\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a product detail page where customers can see specs, choose color and size, and add to cart\"\n\n**AI selects this pattern because:**\n- User mentioned \"product detail page\" (direct keyword match)\n- Need for variant selection (color, size)\n- E-commerce context with purchase action\n- Comprehensive product information required\n\n**AI generates:**\nStandard or comprehensive variant with image gallery, variant selectors, specifications section, and prominent add-to-cart button\n\n**AI explains tradeoff:**\n- \"Showing product images at top for immediate visual, followed by variants and key specs. Reviews preview builds trust. Add to cart stays accessible as user scrolls. Related products encourage additional browsing.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Image gallery** - Single image, carousel, or full gallery with zoom\n2. **Variant options** - Color/size/material based on product type\n3. **Information depth** - Minimal description vs. full specs/materials/care instructions\n4. **Review prominence** - Preview only vs. full review section\n\n**App-specific adaptations:**\n- **Fashion store:** Size guide, fit photos, style suggestions, color swatch images\n- **Electronics:** Technical specs table, compatibility info, warranty details\n- **Grocery:** Nutritional info, ingredients, allergens, organic badges\n- **Services:** Availability calendar, duration, provider profile\n- **Digital products:** Preview/demo, file formats, system requirements\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Destination after tapping product in catalog\n- Landing page from external links/ads\n- Result from product search\n\n**What comes before:**\n- `shopping/product-catalog` - User taps product to see details\n- `navigation/search-input` - Direct navigation from search results\n- External link, ad, or social share\n\n**What comes after:**\n- `special/shopping-cart` - User adds to cart and proceeds\n- `shopping/product-catalog` - User returns to browse more\n- `social/reviews-ratings` - User taps to see all reviews\n- Login/signup - If required before purchase\n\n**Complete flow example:**\n`navigation/search-input` → Search results → **Product Detail** → `special/shopping-cart` → `shopping/payment`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Showing multiple products (use `shopping/product-catalog`)\n- Product has minimal info (name + price only = use catalog)\n- Non-transactional item (article, video) (use content detail patterns)\n- Service without variants (use simplified booking screen)\n\n**Use instead:**\n- `shopping/product-catalog` - For browsing multiple items\n- Article/content detail pattern - For informational content\n- Service booking screen - For appointments without variants\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too much scrolling to reach \"Add to Cart\" button\n- Unclear variant selection (out of stock states, size guides)\n- Lack of trust signals (reviews, return policy, shipping info)\n- Poor image quality or insufficient product views\n\n**Conversion optimization:**\n- Sticky \"Add to Cart\" button for long pages\n- Show availability and shipping info prominently\n- Make variant selection visual and clear\n- Display trust badges (reviews, returns, secure checkout)\n- Reduce cognitive load with progressive disclosure\n\n**Accessibility notes:**\n- Image carousel should be keyboard navigable\n- Variant selectors need clear labels and selection states\n- Reviews should be properly structured for screen readers\n- Ensure color variants aren't indicated by color alone\n- Maintain sufficient contrast in price/sale indicators\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "social/comments": "# Comments\n\n**ID:** `social/comments`\n**Category:** social\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to have threaded discussions on posts, images, or content items with nested replies, sorting options, and engagement actions.\n\n**Use this pattern when user mentions:**\n- \"comments\", \"comment section\", \"discussion\"\n- \"replies\", \"threaded comments\", \"nested replies\"\n- \"user feedback\", \"conversation\", \"commenting\"\n- \"comment threads\", \"discussion board\"\n- \"users need to discuss content\"\n- \"community conversation\", \"user interaction\"\n\n**Common contexts:**\n- Social media post discussions\n- Blog or article comments\n- Video or photo comments\n- Product reviews and discussions\n- Community forums and threads\n- Q&A platforms with answers\n\n**UX Tradeoffs:**\n- **Pro:** Enables rich community discussion and engagement\n- **Pro:** Threaded replies create organized conversations\n- **Pro:** Sorting options (Best, Newest, Oldest) improve discoverability\n- **Pro:** Vote/like system surfaces quality comments\n- **Con:** Comment sections require active moderation (spam, toxicity)\n- **Con:** Nested threading can become confusing beyond 2-3 levels\n- **Con:** Anonymous/public comments enable harassment\n- **Con:** Long comment threads slow page load performance\n\n**Pairs well with:**\n- `social/feed` - Comments on feed posts\n- `social/likes-reactions` - Like/upvote comments\n- `social/notifications` - Alert when someone replies\n- `settings/privacy-settings` - Control comment notifications\n- `authentication/login` - Require auth to comment\n- `forms/text-input` - Comment composition interface\n\n**Variants available:**\n- **Minimal:** Flat comment list, no threading (use for \"simple comments\" or \"lightweight\")\n- **Standard:** 2-level threading with sorting and likes (use for most social apps)\n- **Comprehensive:** Deep threading, reactions, rich media, moderation tools (use for \"community platform\" or \"forum\")\n\n**Related patterns:**\n- Instead of this, consider simple feedback form if not building community\n- Instead of this, consider `social/messaging-chat` if private 1:1 conversation needed\n- Instead of this, consider ratings only if discussion not desired\n\n---\n\n## Description\n\nThreaded comment system with nested replies, sorting options (Best, Newest, Oldest), and engagement actions (like, reply). Shows user avatars, timestamps, comment text, and vote counts. Supports 2-level threading for organized discussions. Use for social platforms, content sites, and community apps where users discuss shared content. Includes comment composition interface with emoji and media options.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Comments (42)            [=]   │\n├────────────────────────────────────┤\n│ [Best v] [Newest] [Oldest]         │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Alice Chen  · 2h           │ │\n│ │                                │ │\n│ │ Great article! Really helped   │ │\n│ │ me understand the concept.     │ │\n│ │                                │ │\n│ │ <3 12   [Reply]   [···]        │ │\n│ └────────────────────────────────┘ │\n│   ┌──────────────────────────────┐ │\n│   │ [@] Bob Lee  · 1h            │ │\n│   │                              │ │\n│   │ @Alice Thanks! Glad it helped│ │\n│   │                              │ │\n│   │ <3 2   [Reply]   [···]       │ │\n│   └──────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] David Kim  · 3h            │ │\n│ │                                │ │\n│ │ Could you explain more about   │ │\n│ │ the implementation details?    │ │\n│ │                                │ │\n│ │ <3 8   [Reply]   [···]         │ │\n│ └────────────────────────────────┘ │\n│   ┌──────────────────────────────┐ │\n│   │ [@] Alice Chen  · 2h         │ │\n│   │                              │ │\n│   │ Sure! See section 3 for more │ │\n│   │ details on that.             │ │\n│   │                              │ │\n│   │ <3 4   [Reply]   [···]       │ │\n│   └──────────────────────────────┘ │\n│                                    │\n│        [Load More Comments]        │\n│                                    │\n├────────────────────────────────────┤\n│ Add a comment...                   │\n│ ┌────────────────────────────────┐ │\n│ │                                │ │\n│ │                                │ │\n│ └────────────────────────────────┘ │\n│ [:)] [IMG] [@]          [Post]     │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Comments (15)                  │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Sarah Park  · 5m           │ │\n│ │                                │ │\n│ │ First! Great post!             │ │\n│ │                                │ │\n│ │ <3 1   [Reply]                 │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Mike Torres  · 12m         │ │\n│ │                                │ │\n│ │ This is exactly what I needed. │ │\n│ │ Thanks for sharing!            │ │\n│ │                                │ │\n│ │ <3 3   [Reply]                 │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Emma Davis  · 1h           │ │\n│ │                                │ │\n│ │ Has anyone tried this approach │ │\n│ │ in production?                 │ │\n│ │                                │ │\n│ │ <3 7   [Reply]                 │ │\n│ └────────────────────────────────┘ │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Comments (89)            [=]   │\n├────────────────────────────────────┤\n│ [Best v] [Newest] [Oldest]         │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Alex Wong  · 4h            │ │\n│ │                                │ │\n│ │ Brilliant explanation! I've    │ │\n│ │ been struggling with this for  │ │\n│ │ weeks and this finally clicked.│ │\n│ │                                │ │\n│ │ <3 45   [Reply]   [···]        │ │\n│ └────────────────────────────────┘ │\n│   ┌──────────────────────────────┐ │\n│   │ [@] Original Poster  · 3h    │ │\n│   │                              │ │\n│   │ @Alex So glad it helped! Let │ │\n│   │ me know if you have questions│ │\n│   │                              │ │\n│   │ <3 12   [Reply]   [···]      │ │\n│   └──────────────────────────────┘ │\n│   ┌──────────────────────────────┐ │\n│   │ [@] Alex Wong  · 2h          │ │\n│   │                              │ │\n│   │ Will do, thanks!             │ │\n│   │                              │ │\n│   │ <3 3   [Reply]   [···]       │ │\n│   └──────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Jordan Lee  · 6h           │ │\n│ │                                │ │\n│ │ Anyone have a link to the      │ │\n│ │ documentation mentioned?       │ │\n│ │                                │ │\n│ │ <3 8   [Reply]   [···]         │ │\n│ └────────────────────────────────┘ │\n│   ┌──────────────────────────────┐ │\n│   │ [@] Taylor Smith  · 5h       │ │\n│   │                              │ │\n│   │ Here you go: docs.example.com│ │\n│   │                              │ │\n│   │ <3 15   [Reply]   [···]      │ │\n│   └──────────────────────────────┘ │\n│                                    │\n│        [Load More Comments]        │\n│                                    │\n├────────────────────────────────────┤\n│ Add a comment...                   │\n│ ┌────────────────────────────────┐ │\n│ │ What are your thoughts?        │ │\n│ │                                │ │\n│ └────────────────────────────────┘ │\n│ [:)] [IMG] [@]          [Post]     │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\ncomments, discussion, threaded, replies, nested, conversation, engagement, community, feedback, social-interaction, moderation\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a comment section for blog posts where users can reply to each other and upvote good comments\"\n\n**AI selects this pattern because:**\n- User mentioned \"comment section\" (direct keyword match)\n- Blog post context (content discussion)\n- Replies needed (threaded conversation)\n- Upvoting (engagement system)\n\n**AI generates:**\nStandard variant with 2-level threading, sorting by Best/Newest/Oldest, like counts, reply buttons, and comment composition area with emoji picker\n\n**AI explains tradeoff:**\n- \"Comment section enables community discussion on blog posts. Threaded replies keep conversations organized. Sorting by 'Best' surfaces quality comments (upvoted). However, comment sections require active moderation to prevent spam and toxicity. Nested threading limited to 2 levels to maintain readability in 38-char layout. Anonymous commenting may increase harassment risk.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Threading depth** - Flat (no threading), 2-level (standard), unlimited (complex forums)\n2. **Sorting options** - Best, Newest, Oldest, Controversial, Hot\n3. **Engagement actions** - Like, upvote/downvote, reactions, award badges\n4. **Rich text editor** - Plain text, markdown, formatting toolbar, media embeds\n5. **Moderation tools** - Report, flag, hide, delete, pin, lock\n\n**App-specific adaptations:**\n- **Reddit-style:** Upvote/downvote with karma, unlimited threading, collapse threads\n- **YouTube-style:** Flat comments with heart likes, sort by Top/Newest, pinned comments\n- **Medium-style:** Inline comments on specific paragraphs, highlights\n- **Twitter-style:** Flat replies with quote tweets, chronological timeline\n- **Discourse-style:** Forum threads with \"best answer\" marking, trust levels\n- **GitHub-style:** Code comments on specific lines, resolved/unresolved states\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Below post/article content\n- Dedicated comments screen (mobile)\n- Collapsible section below main content\n\n**What comes before:**\n- `social/feed` - User taps \"View comments\" on post\n- Content detail screen - Article/post/video view\n- `social/notifications` - \"Someone replied\" brings user here\n\n**What comes after:**\n- User profile - Tap commenter avatar\n- Reply composition - Tap \"Reply\" on comment\n- Comment detail - View full nested thread\n- Report/moderation flow - Tap menu on comment\n- `social/notifications` - Subscribe to comment thread updates\n\n**Complete flow example:**\n`social/feed` → Post detail → **Comments** → Tap reply → Compose comment → Post → **Comments** updated\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Content doesn't warrant discussion (private, ephemeral)\n- No resources for moderation (comments need oversight)\n- Toxicity risk too high (controversial topics)\n- Audience too small (empty comments look bad)\n\n**Use instead:**\n- Simple feedback form - For structured feedback collection\n- `social/messaging-chat` - For private 1:1 conversations\n- Ratings/reviews only - If discussion not needed\n- Email feedback - If you can't moderate public comments\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Empty comment sections look abandoned\n- Toxic comments drive users away\n- Threading confusion beyond 2-3 levels\n- Slow load times with hundreds of comments\n- Notification overload from active threads\n- Spam and low-quality comments bury good ones\n\n**Conversion optimization:**\n- Show comment count prominently (social proof)\n- Sort by \"Best\" to surface quality first\n- Require authentication to reduce spam\n- Suggest prompts if comments empty (\"Be the first to comment!\")\n- Email notifications bring users back to threads\n- Upvote system surfaces helpful comments\n- Pinned comments from author/moderators\n\n**Accessibility notes:**\n- Thread hierarchy must be clear to screen readers\n- Indentation should use semantic HTML (nested lists)\n- Reply buttons need clear labels\n- Comment actions accessible via keyboard\n- Vote counts announced to screen readers\n- Collapsed threads should indicate hidden content\n- Sorting dropdown keyboard navigable\n- Sufficient color contrast for nested comments\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "social/feed": "# Feed\n\n**ID:** `social/feed`\n**Category:** social\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays a scrollable stream of user-generated content posts from followed users and recommended sources, enabling content discovery and social engagement.\n\n**Use this pattern when user mentions:**\n- \"feed\", \"timeline\", \"stream\", \"posts\"\n- \"social feed\", \"activity feed\", \"news feed\"\n- \"content stream\", \"updates\", \"social posts\"\n- \"infinite scroll\", \"content discovery\"\n- \"users need to see posts from others\"\n- \"social media\", \"community content\"\n\n**Common contexts:**\n- Social networking platforms\n- Community-driven applications\n- Content aggregation apps\n- Professional networking platforms\n- News and media applications\n- Creator economy platforms\n\n**UX Tradeoffs:**\n- **Pro:** Familiar infinite scroll pattern users expect\n- **Pro:** Enables content discovery and social engagement\n- **Pro:** Personalized content increases time spent\n- **Pro:** Stories provide ephemeral, high-engagement content\n- **Con:** Infinite scroll reduces productivity and focus\n- **Con:** Algorithmic feeds create filter bubbles\n- **Con:** Requires active content moderation\n- **Con:** Performance intensive with real-time updates and media\n\n**Pairs well with:**\n- `social/comments` - Users tap to view post comments\n- `social/likes-reactions` - Engagement actions on feed posts\n- `social/notifications` - Alerts about new posts and activity\n- `authentication/signup-screen` - New user onboarding to feed\n- `settings/privacy-settings` - Control what appears in feed\n- `forms/post-creation` - Users create content for feed\n\n**Variants available:**\n- **Minimal:** Simple text posts with basic engagement (use for \"lightweight feed\" or \"text-focused\")\n- **Standard:** Posts with images, engagement counts, stories (use for most social apps)\n- **Comprehensive:** Rich media, sponsored content, recommendations, stories (use for \"full-featured social\" or \"content platform\")\n\n**Related patterns:**\n- Instead of this, consider `navigation/home-screen` if app isn't social-focused\n- Instead of this, consider `dashboards/activity-dashboard` for analytics/metrics view\n- Instead of this, consider content list patterns if no social engagement needed\n\n---\n\n## Description\n\nScrollable content stream displaying posts from users, creators, and brands with engagement actions (like, comment, share). Shows user avatars, timestamps, media previews, and interaction counts. Stories provide quick ephemeral content access. Use for social networking apps where content discovery and community engagement are primary features. Supports algorithmic and chronological sorting.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [@]  Feed            [#] [!] [=]   │\n├────────────────────────────────────┤\n│ Stories                            │\n│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐      │\n│ │[]│ │[]│ │[]│ │[]│ │[]│ │[]│ >    │\n│ └──┘ └──┘ └──┘ └──┘ └──┘ └──┘      │\n│ You  Sara Mike Jess Alex Emma      │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Alice Chen  · 2h           │ │\n│ │                                │ │\n│ │ Just launched my new app!      │ │\n│ │ Check it out and let me know   │ │\n│ │ what you think!                │ │\n│ │                                │ │\n│ │ [Image Preview]                │ │\n│ │                                │ │\n│ │ <3 42   [*] 12   [^] 5         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Bob Lee  · 5h  · Sponsored │ │\n│ │                                │ │\n│ │ Discover the future of mobile  │ │\n│ │ development...                 │ │\n│ │                                │ │\n│ │ [[>] Video Thumbnail]          │ │\n│ │                                │ │\n│ │ <3 156   [*] 23   [^] 18       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│        Loading more posts...       │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [@]  Feed                    [!]   │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Sarah Kim  · 1h            │ │\n│ │                                │ │\n│ │ Beautiful sunset today!        │ │\n│ │                                │ │\n│ │ [IMG]                          │ │\n│ │                                │ │\n│ │ <3 89   [*] 14   [^] 3         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Mike Torres  · 3h          │ │\n│ │                                │ │\n│ │ New blog post: \"10 Tips for    │ │\n│ │ Better Code Reviews\"           │ │\n│ │ [link icon]                    │ │\n│ │                                │ │\n│ │ <3 24   [*] 8   [^] 12         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Jess Park  · 6h            │ │\n│ │                                │ │\n│ │ Coffee and code. Perfect       │ │\n│ │ Monday morning.                │ │\n│ │                                │ │\n│ │ <3 67   [*] 5   [^] 2          │ │\n│ └────────────────────────────────┘ │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [@]  Feed            [#] [!] [=]   │\n├────────────────────────────────────┤\n│ Stories                            │\n│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐      │\n│ │[]│ │[]│ │[]│ │[]│ │[]│ │[]│ >    │\n│ └──┘ └──┘ └──┘ └──┘ └──┘ └──┘      │\n│ You  Sara Mike Jess Alex Emma      │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] TechNews  · 10m            │ │\n│ │                                │ │\n│ │ Breaking: New AI breakthrough  │ │\n│ │ announced today                │ │\n│ │                                │ │\n│ │ [News Thumbnail]               │ │\n│ │                                │ │\n│ │ <3 342   [*] 89   [^] 156      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Emma Davis  · 1h           │ │\n│ │                                │ │\n│ │ Team outing was awesome! Thanks│ │\n│ │ everyone for a great day!      │ │\n│ │                                │ │\n│ │ [Group Photo]                  │ │\n│ │                                │ │\n│ │ <3 45   [*] 6   [^] 1          │ │\n│ │                                │ │\n│ │ [@] Alex: Great times!         │ │\n│ │ [@] Sara: Best team ever!      │ │\n│ │ View all 12 comments           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Suggested for you              │ │\n│ │ [@] CodeMaster · Follow        │ │\n│ │ \"Daily coding tips & tricks\"   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nsocial, feed, timeline, stream, posts, content, infinite-scroll, stories, engagement, discovery, social-network, community\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a social feed for my app where users can see posts from people they follow with photos and videos\"\n\n**AI selects this pattern because:**\n- User mentioned \"social feed\" (direct keyword match)\n- Posts from followed users (core feed functionality)\n- Rich media content (photos, videos)\n- Social engagement context\n\n**AI generates:**\nStandard variant with stories row, post cards showing avatars, names, timestamps, content, media previews, and engagement buttons (like, comment, share)\n\n**AI explains tradeoff:**\n- \"Feed provides familiar infinite scroll experience users expect from social apps. Stories at top enable quick ephemeral content consumption. Engagement buttons drive interaction. Sponsored posts monetize platform. However, infinite scroll can reduce productivity, algorithmic sorting creates filter bubbles, and real-time updates require significant server resources. Content moderation essential.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Stories section** - Add/remove stories row, customize story circle design\n2. **Post card layout** - Text-only, single image, carousel, video, polls, links\n3. **Engagement actions** - Like, love, reactions, comment, share, save, report\n4. **Feed algorithm** - Chronological, algorithmic ranking, topic-based filtering\n5. **Sponsored content** - Ad insertion frequency, sponsored labels, native ads\n\n**App-specific adaptations:**\n- **Twitter-style:** Text-focused, retweets, quote tweets, thread support\n- **Instagram-style:** Image-heavy, double-tap like, carousel posts, reels\n- **LinkedIn-style:** Professional content, article previews, job posts, company updates\n- **TikTok-style:** Full-screen vertical video, swipe navigation, sound-on by default\n- **Reddit-style:** Upvotes/downvotes, subreddit organization, text-first with optional media\n- **Facebook-style:** Mixed content types, reactions (not just likes), extensive sharing\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary home screen after login\n- Tab bar home destination\n- Return point after viewing details\n\n**What comes before:**\n- `authentication/login` - User logs in to see personalized feed\n- `onboarding/welcome` - New user completes onboarding\n- App launch (if already authenticated)\n\n**What comes after:**\n- `social/comments` - User taps to view/add comments\n- `social/likes-reactions` - View who liked/reacted\n- User profile - Tap avatar to view profile\n- Post detail - Tap post for full view\n- `forms/post-creation` - Create new post for feed\n- `social/notifications` - Check engagement notifications\n\n**Complete flow example:**\n`authentication/login` → **Feed** → Tap post → `social/comments` → Back to **Feed**\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App isn't social or community-focused\n- Content is curated/editorial (not user-generated)\n- App is single-user or private (no following system)\n- Content is structured data/analytics (not posts)\n\n**Use instead:**\n- `navigation/home-screen` - For non-social app home\n- `dashboards/*` - For data/analytics dashboard\n- News list pattern - For editorial content without social features\n- Activity log - For user's own activity history only\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Infinite scroll addictive, reduces user agency\n- Algorithmic feeds hide chronological content\n- Sponsored posts disrupt organic content flow\n- Loading states frustrate on slow connections\n- Auto-play videos consume data and attention\n\n**Conversion optimization:**\n- Surface high-engagement content first\n- Stories provide quick dopamine hits\n- Engagement buttons one-tap accessible\n- Infinite scroll removes \"end\" stopping point\n- Recommendations expand network effect\n- Push notifications bring users back\n- Real-time updates create urgency (FOMO)\n\n**Accessibility notes:**\n- Stories row must be keyboard navigable\n- Post content needs semantic HTML structure\n- Images require alt text for screen readers\n- Engagement buttons need clear labels (not just icons)\n- Infinite scroll should support pagination\n- Auto-play videos should respect reduced-motion\n- Color-coded indicators need text alternatives\n- Sufficient contrast for text on images\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "social/followers-following": "# Followers & Following\n\n**ID:** `social/followers-following`\n**Category:** social\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays lists of user connections showing followers (people following you) and following (people you follow) with profiles, bios, mutual connections, and follow/unfollow actions.\n\n**Use this pattern when user mentions:**\n- \"followers\", \"following\", \"connections\"\n- \"follow list\", \"follower list\", \"who follows me\"\n- \"user network\", \"social graph\", \"connections\"\n- \"mutual followers\", \"suggested follows\"\n- \"users need to manage their network\"\n- \"friend list\", \"subscriber list\"\n\n**Common contexts:**\n- Social networking platforms\n- Content creator platforms\n- Professional networking (LinkedIn-style)\n- Community and forum platforms\n- Dating and networking apps\n- Streaming and content platforms\n\n**UX Tradeoffs:**\n- **Pro:** Transparent network visibility builds trust\n- **Pro:** Mutual connections facilitate introductions\n- **Pro:** Follow/unfollow management in one place\n- **Pro:** Discover new connections through network\n- **Con:** Public follower counts create status anxiety\n- **Con:** Asymmetric follow (you follow, they don't) visible\n- **Con:** Large follower lists overwhelming to browse\n- **Con:** Privacy concerns with public connection data\n\n**Pairs well with:**\n- `social/feed` - View followers' content in feed\n- `social/notifications` - Alert when someone follows you\n- `social/messaging-chat` - Message connections\n- User profile - View detailed profile of connection\n- `settings/privacy-settings` - Control follower visibility\n- Search/discovery - Find new people to follow\n\n**Variants available:**\n- **Minimal:** Simple user list with follow buttons (use for \"basic networking\" or \"lightweight\")\n- **Standard:** User cards with bios, mutual connections, follow/message actions (use for most social apps)\n- **Comprehensive:** Detailed profiles, categories, suggestions, analytics (use for \"professional networking\" or \"creator platform\")\n\n**Related patterns:**\n- Instead of this, consider friend list if mutual acceptance required (Facebook-style)\n- Instead of this, consider member directory if not social graph-based\n- Instead of this, skip if app doesn't have follow mechanics\n\n---\n\n## Description\n\nNetwork management interface showing user connections with tabs for Following, Followers, and Requests. Displays user cards with avatars, names, usernames, short bios, and mutual connection counts. Includes follow/unfollow toggle buttons and message actions. Use for social platforms where users build networks through asymmetric or symmetric follow relationships. Supports filtering by mutual connections and follow-back status.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Following (234)          [#]   │\n├────────────────────────────────────┤\n│ [Following] [Followers] [Requests] │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Alice Johnson              │ │\n│ │ @alice · Follows you           │ │\n│ │ Frontend dev & UI designer     │ │\n│ │                                │ │\n│ │ [Following v] [Message]        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Bob Smith                  │ │\n│ │ @bobsmith · 2 mutual           │ │\n│ │ Building cool things w/ React  │ │\n│ │                                │ │\n│ │ [Following v] [Message]        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Carol Davis                │ │\n│ │ @carol_d · Follows you         │ │\n│ │ Product manager & UX advocate  │ │\n│ │                                │ │\n│ │ [Following v] [Message]        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│        [Load More Users]           │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Followers (456)          [#]   │\n├────────────────────────────────────┤\n│ [Following] [Followers] [Requests] │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] David Kim                  │ │\n│ │ @davidk · 5 mutual             │ │\n│ │ Tech enthusiast | Coffee lover │ │\n│ │                                │ │\n│ │ [Follow Back] [Message]        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Emma Wilson                │ │\n│ │ @emmaw                         │ │\n│ │ Designer passionate about UX   │ │\n│ │                                │ │\n│ │ [Following v] [Message]        │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Frank Chen                 │ │\n│ │ @frank · 1 mutual              │ │\n│ │ Full-stack developer & mentor  │ │\n│ │                                │ │\n│ │ [Follow] [Message]             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│        [Load More Users]           │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Follow Requests (8)            │\n├────────────────────────────────────┤\n│ [Following] [Followers] [Requests] │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Grace Lee                  │ │\n│ │ @grace_lee · 3 mutual          │ │\n│ │ Photographer & visual artist   │ │\n│ │                                │ │\n│ │ [Accept] [Decline]             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Henry Taylor               │ │\n│ │ @htaylor                       │ │\n│ │ Marketing professional         │ │\n│ │                                │ │\n│ │ [Accept] [Decline]             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Isabel Martinez            │ │\n│ │ @isabel · 2 mutual             │ │\n│ │ Content creator & storyteller  │ │\n│ │                                │ │\n│ │ [Accept] [Decline]             │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│        [Load More Requests]        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nfollowers, following, connections, network, social-graph, follow, unfollow, mutual, friend-list, subscribers, community\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a screen where users can see their followers and who they're following, with the ability to follow/unfollow people\"\n\n**AI selects this pattern because:**\n- User mentioned \"followers and following\" (direct keyword match)\n- Network visibility requirement\n- Follow/unfollow management needed\n- Social connection context\n\n**AI generates:**\nStandard variant with tabs for Following/Followers/Requests, user cards showing avatars, names, usernames, short bios, mutual connection counts, and follow state toggle buttons with message actions\n\n**AI explains tradeoff:**\n- \"Followers/Following lists provide transparent network visibility. Tabs organize different relationship types. Mutual connections shown for social context and trust. Follow/unfollow buttons in-place for easy management. However, public follower counts create status comparison and anxiety. Asymmetric follows visible (you follow, they don't). Large lists become overwhelming. Consider private follower counts or hiding follow status.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Follow model** - Asymmetric (Twitter), symmetric with approval (Facebook), hybrid (Instagram)\n2. **User card content** - Bio, follower count, mutual connections, recent activity, verification badge\n3. **Action buttons** - Follow, Follow Back, Remove Follower, Block, Mute\n4. **Filtering/sorting** - All, Mutual, Recently followed, Suggested, Categories\n5. **Privacy controls** - Public list, followers-only, private (hidden counts)\n\n**App-specific adaptations:**\n- **Twitter-style:** Asymmetric follow, follower/following counts prominent, suggested users\n- **Instagram-style:** Private accounts with follow requests, mutual friends highlighted\n- **LinkedIn-style:** Connection degrees (1st, 2nd, 3rd), professional info, endorsements\n- **TikTok-style:** Following tab with content feed, suggested creators, mutual follows\n- **GitHub-style:** Followers/following with repository activity, organization affiliations\n- **Patreon-style:** Subscribers with tier levels, join date, supporter badges\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- From user profile (your own or others)\n- From navigation menu or tab bar\n- From \"X new followers\" notification\n- From suggested users section\n\n**What comes before:**\n- User profile - Tap \"X followers\" or \"Y following\"\n- `social/notifications` - \"Someone followed you\"\n- `social/feed` - \"Suggested for you\" section\n- Search results - Find users to follow\n\n**What comes after:**\n- User profile - Tap user card to view full profile\n- `social/messaging-chat` - Tap \"Message\" button\n- `social/feed` - View user's posts after following\n- Follow action - Follow/unfollow state updates\n- `settings/privacy-settings` - Block or report user\n\n**Complete flow example:**\nUser profile → Tap \"234 following\" → **Following list** → Tap user → Profile → Follow/Message\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App doesn't have social networking features\n- All connections are mutual/symmetric friends only\n- Privacy concerns outweigh network transparency\n- Small user base (empty lists look bad)\n\n**Use instead:**\n- Friends list - For mutual approval required (Facebook-style)\n- Team/organization directory - For workspace collaboration\n- Contact list - For messaging without social graph\n- Hide network - If privacy more important than discovery\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Follower count comparison creates anxiety\n- Large lists difficult to scan and manage\n- Accidental unfollows (button too easy to tap)\n- Unclear mutual vs. non-mutual relationship\n- Notification overload for follow requests\n- Stalking concerns with public follower visibility\n\n**Conversion optimization:**\n- Show mutual connections for trust/context\n- Highlight \"Follows you\" for reciprocity prompts\n- Suggest similar users after following\n- Quick follow/unfollow without confirmation (but allow undo)\n- Badge on Requests tab for pending count\n- Filter by \"Not following back\" to curate\n- Show follower growth over time (creator analytics)\n\n**Accessibility notes:**\n- User cards need clear semantic structure\n- Follow button state announced to screen readers\n- Avatar images need alt text with user name\n- Tab navigation keyboard accessible\n- Mutual connection counts readable by screen readers\n- Action buttons clearly labeled (not just icons)\n- Infinite scroll should support pagination\n- Sufficient contrast for bio text\n- Touch targets minimum 44x44pt\n- Announce follow state changes\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "social/likes-reactions": "# Likes & Reactions\n\n**ID:** `social/likes-reactions`\n**Category:** social\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables users to express emotional responses to content through simple likes or rich reactions (love, laugh, surprise), with visibility into who reacted and aggregated reaction counts.\n\n**Use this pattern when user mentions:**\n- \"likes\", \"reactions\", \"engagement\"\n- \"emoji reactions\", \"reaction buttons\", \"express feelings\"\n- \"upvote\", \"heart\", \"love button\"\n- \"users need to react to posts\"\n- \"engagement metrics\", \"social feedback\"\n- \"show who liked\", \"reaction counts\"\n\n**Common contexts:**\n- Social media posts and content\n- Comments and replies\n- Messages and direct communications\n- Blog articles and stories\n- Photos and videos\n- Community posts and updates\n\n**UX Tradeoffs:**\n- **Pro:** Low-friction engagement (one-tap interaction)\n- **Pro:** Emotional expression beyond binary like/dislike\n- **Pro:** Creates viral loops and network effects\n- **Pro:** Provides feedback to content creators\n- **Con:** Like counts create anxiety and comparison\n- **Con:** Reaction-seeking behavior reduces content quality\n- **Con:** Public reactions enable judgment and pile-ons\n- **Con:** Dopamine-driven interaction can be addictive\n\n**Pairs well with:**\n- `social/feed` - React to posts in feed\n- `social/comments` - React to individual comments\n- `social/notifications` - Alert when someone reacts\n- `social/messaging-chat` - React to messages\n- `settings/privacy-settings` - Control reaction visibility\n- Analytics dashboard - Track engagement metrics\n\n**Variants available:**\n- **Minimal:** Simple like button with count (use for \"simple engagement\" or \"lightweight\")\n- **Standard:** Multiple reaction types with counts (use for most social apps)\n- **Comprehensive:** Full reaction palette, user list, detailed analytics (use for \"rich interaction\" or \"community platform\")\n\n**Related patterns:**\n- Instead of this, consider upvote/downvote for content ranking (Reddit-style)\n- Instead of this, consider star ratings for product reviews\n- Instead of this, skip reactions if feedback not desired\n\n---\n\n## Description\n\nSocial engagement interface allowing users to express reactions to content through likes and emoji-style reactions (love, laugh, surprise, etc.). Shows aggregated reaction counts, recent reactors with avatars, and quick reaction picker. Use for social platforms where emotional expression and engagement metrics drive interaction. Supports viewing all users who reacted with filtering by reaction type.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Reactions (42)           [=]   │\n├────────────────────────────────────┤\n│                                    │\n│ <3 28   :) 12   :o 5   [+] 3       │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ Recent Reactions               │ │\n│ │                                │ │\n│ │ ┌────────────────────────────┐ │ │\n│ │ │ [@] Alice Chen  · 2m       │ │ │\n│ │ │ <3 Loved your post!        │ │ │\n│ │ └────────────────────────────┘ │ │\n│ │                                │ │\n│ │ ┌────────────────────────────┐ │ │\n│ │ │ [@] Bob Lee  · 5m          │ │ │\n│ │ │ [+] Liked this             │ │ │\n│ │ └────────────────────────────┘ │ │\n│ │                                │ │\n│ │ ┌────────────────────────────┐ │ │\n│ │ │ [@] Carol Kim  · 8m        │ │ │\n│ │ │ :) Found this funny        │ │ │\n│ │ └────────────────────────────┘ │ │\n│ │                                │ │\n│ │        [Show All 42]           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Sarah Park  · 1h           │ │\n│ │                                │ │\n│ │ Just finished my first app!    │ │\n│ │                                │ │\n│ │ [IMG]                          │ │\n│ │                                │ │\n│ │ <3 15   :) 3   :o 1            │ │\n│ │                                │ │\n│ │ [+]  <3  :)  :o  :(  >:(       │ │\n│ └────────────────────────────────┘ │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Who Reacted              [=]   │\n├────────────────────────────────────┤\n│ [All] [<3 28] [:) 12] [:o 5]       │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Alice Chen            <3   │ │\n│ │ Frontend developer & designer  │ │\n│ │                                │ │\n│ │ [Following]  [Message]         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] David Wong            <3   │ │\n│ │ Building cool things with React│ │\n│ │                                │ │\n│ │ [Follow]  [Message]            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Emma Davis            <3   │ │\n│ │ Product manager & UX advocate  │ │\n│ │                                │ │\n│ │ [Following]  [Message]         │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ [@] Mike Torres           <3   │ │\n│ │ Tech enthusiast | Coffee lover │ │\n│ │                                │ │\n│ │ [Follow]  [Message]            │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│        [Load More Users]           │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nlikes, reactions, engagement, emoji, upvote, heart, social-feedback, interaction, emotions, viral, metrics, social-proof\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a way for users to react to posts with likes and emoji reactions, and see who reacted\"\n\n**AI selects this pattern because:**\n- User mentioned \"react to posts\" (keyword match)\n- Multiple reaction types (likes and emoji)\n- View reactors (user list functionality)\n- Social engagement context\n\n**AI generates:**\nStandard variant with reaction counts displayed on posts, quick reaction picker showing multiple emoji options (<3, :), :o, :(, >:(), and detailed \"Who Reacted\" screen with user avatars and follow/message actions\n\n**AI explains tradeoff:**\n- \"Reactions provide low-friction engagement (one-tap). Multiple reaction types enable emotional expression beyond binary like/dislike. Reaction counts create social proof and viral loops. 'Who Reacted' screen facilitates network discovery. However, public like counts create comparison anxiety and reaction-seeking behavior. Dopamine-driven engagement can be addictive. Consider hiding counts for mental health.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Reaction types** - Like only, like+love, full emoji palette (6-12 reactions)\n2. **Count visibility** - Show exact count, hide for privacy, ranges (10+, 100+)\n3. **User list access** - Public, followers-only, creator-only\n4. **Animation** - Heart burst animation, emoji float effect, haptic feedback\n5. **Quick picker** - Long-press menu, inline buttons, floating picker\n\n**App-specific adaptations:**\n- **Facebook-style:** Six reactions (Like, Love, Haha, Wow, Sad, Angry) with animated picker\n- **Instagram-style:** Simple heart like with double-tap gesture, saves separate\n- **Twitter-style:** Like (heart) and Retweet as separate engagement types\n- **LinkedIn-style:** Professional reactions (Like, Celebrate, Support, Love, Insightful, Curious)\n- **Slack-style:** Unlimited custom emoji reactions on messages\n- **GitHub-style:** Simple thumbs up/down, celebrate, rocket, eyes for code reviews\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Below content (posts, comments, messages)\n- Inline with engagement metrics\n- Quick access from feed view\n\n**What comes before:**\n- `social/feed` - User views post\n- `social/comments` - User views comment\n- `social/notifications` - \"Someone liked your post\"\n\n**What comes after:**\n- **Who Reacted screen** - Tap reaction count to view users\n- User profile - Tap reactor avatar\n- `social/notifications` - Creator receives notification\n- `social/messaging-chat` - Message a reactor\n- Follow action - Follow a reactor\n\n**Complete flow example:**\n`social/feed` → View post → Tap reaction icon → Select emoji → **Reactions** updated → Tap count → **Who Reacted** → Tap user → Profile\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Private content (no social engagement)\n- Professional context where reactions inappropriate\n- Content shouldn't influence virality (news, sensitive topics)\n- Mental health concerns about public metrics\n\n**Use instead:**\n- Anonymous feedback - If privacy essential\n- Star ratings - For product/service reviews\n- Poll/survey - For structured feedback\n- No reactions - If feedback not desired\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Accidental taps on reaction buttons\n- Confusion about which reaction to use\n- Anxiety from seeing low reaction counts\n- Notification overload from popular posts\n- Decision paralysis with too many reaction options\n\n**Conversion optimization:**\n- Make like button prominent and large tap target\n- Animate reactions (heart burst, emoji float)\n- Show friend's reactions first (social proof)\n- Long-press for reaction picker (progressive disclosure)\n- Haptic feedback on reaction tap (satisfying)\n- Show \"You and 42 others\" for personal connection\n- Surface high-engagement content in feed\n\n**Accessibility notes:**\n- Reaction buttons need clear labels for screen readers\n- Announce reaction counts to screen readers\n- Sufficient tap target size (44x44pt minimum)\n- Color shouldn't be only differentiator\n- Keyboard navigation for reaction picker\n- Announce when user adds/removes reaction\n- Alternative text for emoji reactions\n- High contrast for reaction icons\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "social/messaging-chat": "# Messaging & Chat\n\n**ID:** `social/messaging-chat`\n**Category:** social\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nEnables real-time private 1:1 or group conversations with message bubbles, typing indicators, read receipts, and media sharing for direct communication between users.\n\n**Use this pattern when user mentions:**\n- \"messaging\", \"chat\", \"direct message\", \"DM\"\n- \"private conversation\", \"1:1 chat\", \"group chat\"\n- \"real-time messaging\", \"instant messaging\"\n- \"send messages\", \"chat interface\", \"conversation\"\n- \"users need to message each other\"\n- \"private communication\", \"inbox\"\n\n**Common contexts:**\n- Social networking platforms\n- Team collaboration tools\n- Dating and networking apps\n- Customer support chat\n- Community platforms\n- Marketplace buyer-seller communication\n\n**UX Tradeoffs:**\n- **Pro:** Real-time communication enables quick responses\n- **Pro:** Private conversations build deeper connections\n- **Pro:** Read receipts and typing indicators provide context\n- **Pro:** Media sharing (photos, links) enriches conversation\n- **Con:** Expectation of immediate response creates pressure\n- **Con:** Read receipts cause anxiety (\"seen but no response\")\n- **Con:** Always-on notifications interrupt focus\n- **Con:** Message retention and privacy concerns\n\n**Pairs well with:**\n- `social/notifications` - Alert for new messages\n- `social/feed` - \"Message user\" from feed\n- `social/followers-following` - Message connections\n- `authentication/login` - Secure message access\n- `settings/privacy-settings` - Control message permissions\n- User profile - View sender/recipient profile\n\n**Variants available:**\n- **Minimal:** Simple text messages with timestamps (use for \"basic chat\" or \"lightweight\")\n- **Standard:** Messages, read receipts, typing indicator, media (use for most messaging apps)\n- **Comprehensive:** Rich media, reactions, replies, voice, video call, encryption status (use for \"full-featured messenger\" or \"collaboration tool\")\n\n**Related patterns:**\n- Instead of this, consider `social/comments` for public discussions\n- Instead of this, consider email for non-real-time communication\n- Instead of this, consider video call pattern for face-to-face\n\n---\n\n## Description\n\nReal-time chat interface showing conversation with message bubbles (sent/received), timestamps, read receipts, and typing indicators. Supports text messages, photos, and media sharing. Message composition bar includes emoji picker, media attachment, and send button. Use for private 1:1 or group messaging in social platforms, collaboration tools, or customer support. Familiar chat bubble UI with clear sent/received distinction.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Alice Johnson           [i]    │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────┐     │\n│ │ Hey! How's your day going? │     │\n│ │                    11:23 v │     │\n│ └────────────────────────────┘     │\n│                                    │\n│      ┌────────────────────────┐    │\n│      │ Great! Just finished my│    │ \n│      │ presentation. You?     │    │\n│      │                  11:25 │    │\n│      └────────────────────────┘    │\n│                                    │\n│ ┌────────────────────────────┐     │\n│ │ That's awesome! Working on │     │\n│ │ a new project.             │     │\n│ │                    11:27 v │     │\n│ └────────────────────────────┘     │\n│                                    │\n│      ┌────────────────────────┐    │\n│      │ [IMG]                  │    │\n│      │ [Photo Preview]        │    │\n│      │                11:30 vv│    │\n│      └────────────────────────┘    │\n│                                    │\n│ ┌────────────────────────────┐     │\n│ │ Love it! <3                │     │\n│ │                    11:32 v │     │\n│ └────────────────────────────┘     │\n│                                    │\n│      Alice is typing...            │\n│                                    │\n├────────────────────────────────────┤\n│ [+] [:)] Type a message... [Send]  │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Team Chat (5)            [i]   │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────┐     │\n│ │ [@] Sarah: Meeting at 2pm  │     │\n│ │                      10:15 │     │\n│ └────────────────────────────┘     │\n│                                    │\n│      ┌────────────────────────┐    │\n│      │ [@] You: See you there!│    │\n│      │                  10:16 │    │\n│      └────────────────────────┘    │\n│                                    │\n│ ┌────────────────────────────┐     │\n│ │ [@] Mike: Can someone share│     │\n│ │ the deck?            10:20 │     │\n│ └────────────────────────────┘     │\n│                                    │\n│      ┌────────────────────────┐    │\n│      │ [@] You: [Doc] Q4.pdf  │    │\n│      │ [File: 2.3 MB]   10:21 │    │\n│      └────────────────────────┘    │\n│                                    │\n│ ┌────────────────────────────┐     │\n│ │ [@] Emma: Thanks!          │     │\n│ │                      10:22 │     │\n│ └────────────────────────────┘     │\n│                                    │\n├────────────────────────────────────┤\n│ [+] [:)] Type a message... [Send]  │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] David Lee                [i]   │\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────┐     │\n│ │ Quick question about the   │     │\n│ │ project timeline           │     │\n│ │                    09:45 v │     │\n│ └────────────────────────────┘     │\n│                                    │\n│      ┌────────────────────────┐    │\n│      │ Sure! What do you need │    │\n│      │ to know?         09:46 │    │\n│      └────────────────────────┘    │\n│                                    │\n│ ┌────────────────────────────┐     │\n│ │ When's the final deadline? │     │\n│ │                    09:47 v │     │\n│ └────────────────────────────┘     │\n│                                    │\n│      ┌────────────────────────┐    │\n│      │ End of next week. We're│    │\n│      │ on track.        09:48 │    │\n│      └────────────────────────┘    │\n│                                    │\n│ ┌────────────────────────────┐     │\n│ │ Perfect, thanks!           │     │\n│ │                    09:49 v │     │\n│ └────────────────────────────┘     │\n│                                    │\n│      ┌────────────────────────┐    │\n│      │ No problem! [+] to the │    │\n│      │ message for updates    │    │\n│      │                09:50 vv│    │\n│      └────────────────────────┘    │\n│                                    │\n├────────────────────────────────────┤\n│ [+] [:)] Type a message... [Send]  │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmessaging, chat, direct-message, DM, conversation, real-time, private, instant-messaging, read-receipts, typing-indicator, group-chat\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a chat feature where users can send messages to each other with photos and see when messages are read\"\n\n**AI selects this pattern because:**\n- User mentioned \"chat feature\" (direct keyword match)\n- Private messaging between users\n- Photo sharing requirement (media support)\n- Read receipts needed (delivery status)\n\n**AI generates:**\nStandard variant with message bubbles (left for received, right for sent), timestamps, read receipt indicators (v = sent, vv = read), typing indicator, photo preview cards, and message composition bar with attachment and emoji options\n\n**AI explains tradeoff:**\n- \"Chat interface enables real-time private communication. Message bubbles clearly distinguish sent/received. Read receipts (checkmarks) provide delivery confirmation but can create anxiety when 'seen but no reply'. Typing indicator sets expectations. Photo sharing enriches conversation. However, real-time messaging creates pressure for immediate response and constant notification interruptions. Consider delivery indicators vs. read receipts tradeoff.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Message status indicators** - Sent (single check), delivered (double check), read (colored/filled), failed (error icon)\n2. **Rich media types** - Photos, videos, voice messages, files, location, contacts\n3. **Message interactions** - Reply to specific message, react with emoji, forward, delete\n4. **Presence indicators** - Online/offline status, last seen timestamp, active now\n5. **Input enhancements** - Voice input, stickers, GIFs, mentions (@user), formatting\n\n**App-specific adaptations:**\n- **WhatsApp-style:** End-to-end encryption indicator, voice messages, status updates\n- **iMessage-style:** Blue/green bubble distinction, reactions, effects, handwritten messages\n- **Slack-style:** Threaded replies, @mentions, channel organization, integrations\n- **Telegram-style:** Secret chats, self-destruct timers, large group support\n- **Discord-style:** Server/channel organization, voice rooms, rich embeds\n- **Customer support:** Agent info, queue position, transcript email, satisfaction rating\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- From user profile \"Message\" button\n- From followers/connections list\n- From notifications \"New message\"\n- Dedicated Messages tab/section\n\n**What comes before:**\n- User profile - Tap \"Message\" button\n- `social/followers-following` - Message a connection\n- `social/notifications` - \"New message from [user]\"\n- Message list/inbox - Tap conversation\n\n**What comes after:**\n- User profile - Tap avatar/name to view profile\n- Media viewer - Tap photo to view full screen\n- Voice/video call - Tap call button in header\n- `settings/privacy-settings` - Report/block user\n- Conversation settings - Mute, delete, archive\n\n**Complete flow example:**\n`social/feed` → Tap user → Profile → \"Message\" → **Chat** → Send message → **Chat** updated → Receive reply\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Public communication preferred (use comments)\n- Non-real-time async preferred (use email)\n- Broadcast only (use notifications/announcements)\n- No need for private user-to-user communication\n\n**Use instead:**\n- `social/comments` - For public discussions\n- Email pattern - For formal, non-real-time communication\n- `social/notifications` - For one-way announcements\n- Forum/community board - For threaded public discussions\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Typing long messages on mobile keyboards\n- Attachment upload failures on slow connections\n- Notification fatigue from active group chats\n- Confusion with message status indicators\n- Pressure to respond immediately when \"online\"\n- Archiving/searching old messages difficult\n\n**Conversion optimization:**\n- Auto-focus message input on screen load\n- Show typing indicator for engagement cues\n- Haptic feedback on message send\n- Suggest quick replies or emoji reactions\n- Notify when user comes online (if relevant)\n- Prefetch recent conversation history\n- Smooth scroll to latest message\n- Indicate unread messages clearly\n\n**Accessibility notes:**\n- Message bubbles need clear semantic structure\n- Timestamps must be readable by screen readers\n- Send button needs clear label (not just icon)\n- Emoji picker keyboard navigable\n- Color shouldn't be only differentiator for sent/received\n- Attachment options accessible via keyboard\n- Announce new messages to screen readers\n- Support dynamic text sizing for message content\n- Read receipts should have text alternatives\n- Typing indicator announced to screen readers\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "social/notifications": "# Notifications\n\n**ID:** `social/notifications`\n**Category:** social\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays chronological list of user activity alerts (likes, comments, follows, mentions, messages) with read/unread states, grouping, and filtering to keep users informed and drive re-engagement.\n\n**Use this pattern when user mentions:**\n- \"notifications\", \"alerts\", \"activity feed\"\n- \"notification list\", \"activity notifications\"\n- \"updates\", \"what's new\", \"recent activity\"\n- \"users need to see what happened\"\n- \"engagement alerts\", \"interaction updates\"\n- \"inbox\", \"notification center\"\n\n**Common contexts:**\n- Social networking platforms\n- Content creation and sharing apps\n- Team collaboration tools\n- E-commerce and marketplace apps\n- Community and forum platforms\n- Any app with user-to-user interactions\n\n**UX Tradeoffs:**\n- **Pro:** Keeps users informed of social interactions\n- **Pro:** Drives re-engagement and return visits\n- **Pro:** Grouping reduces notification noise\n- **Pro:** Filtering helps users focus on relevant updates\n- **Con:** Notification overload causes anxiety and burnout\n- **Con:** Constant alerts interrupt focus and productivity\n- **Con:** FOMO (fear of missing out) from unread badges\n- **Con:** Privacy concerns with activity visibility\n\n**Pairs well with:**\n- `social/feed` - \"Someone liked your post\" links to feed\n- `social/comments` - \"New comment\" links to comments\n- `social/followers-following` - \"New follower\" links to profile\n- `social/messaging-chat` - \"New message\" links to chat\n- `settings/privacy-settings` - Control notification preferences\n- Badge indicators - Show unread count on app icon\n\n**Variants available:**\n- **Minimal:** Simple chronological list with timestamps (use for \"basic alerts\" or \"lightweight\")\n- **Standard:** Grouped notifications with read/unread, filtering tabs (use for most apps)\n- **Comprehensive:** Rich previews, inline actions, priority sorting, smart grouping (use for \"high-volume\" or \"complex interactions\")\n\n**Related patterns:**\n- Instead of this, consider email digests if in-app notifications too noisy\n- Instead of this, consider activity log if historical record more important\n- Instead of this, skip if app has no social/interactive features\n\n---\n\n## Description\n\nActivity notification list showing user interactions with chronological or grouped display. Shows notification type icons, user avatars, action descriptions, content previews, and timestamps. Supports read/unread states, filtering by type (All, Unread, Mentions, Follows), and inline actions. Use for social platforms, collaboration tools, and any app where user-to-user interactions require timely alerts. Includes unread indicators and batch marking.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [<] Notifications (12)       [=]   │\n├────────────────────────────────────┤\n│ [All] [Unread] [Mentions] [Follows]│\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ • [@] Alice started following  │ │\n│ │   you                          │ │\n│ │   2 minutes ago                │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ • <3 Bob and 5 others liked    │ │\n│ │   your post \"Working on...\"    │ │\n│ │   15 minutes ago               │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │   [*] Carol commented on your  │ │\n│ │   photo: \"Amazing shot!\"       │ │\n│ │   1 hour ago                   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ • [@] David mentioned you in   │ │\n│ │   a comment                    │ │\n│ │   2 hours ago                  │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │   [^] Emma shared your post    │ │\n│ │   \"Building the future of...\"  │ │\n│ │   3 hours ago                  │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│        [Load More]                 │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Notifications            [=]   │\n├────────────────────────────────────┤\n│ [All] [Unread] [Mentions] [Follows]│\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ • <3 Sarah and 3 others liked  │ │\n│ │   your comment                 │ │\n│ │   Just now                     │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ • [@] Mike started following   │ │\n│ │   you                          │ │\n│ │   5 minutes ago                │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ • [!] Your post reached 1000   │ │\n│ │   likes!                       │ │\n│ │   10 minutes ago               │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│   Today                            │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │   [*] Alex replied to your     │ │\n│ │   comment: \"Good point!\"       │ │\n│ │   9:30 AM                      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│   Yesterday                        │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │   <3 Jordan liked your photo   │ │\n│ │   5:20 PM                      │ │\n│ └────────────────────────────────┘ │\n│                                    │\n└────────────────────────────────────┘\n\n┌────────────────────────────────────┐\n│ [<] Notifications (23)       [=]   │\n├────────────────────────────────────┤\n│ [All] [Unread] [Mentions] [Follows]│\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ • <3 15 people liked           │ │\n│ │   your post \"Tips for...\"      │ │\n│ │   [View Post]                  │ │\n│ │   30 minutes ago               │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ • [@] Taylor, Sam, and 3 others│ │\n│ │   started following you        │ │\n│ │   [View Followers]             │ │\n│ │   1 hour ago                   │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ • [*] 8 new comments on        │ │\n│ │   \"Project Update\"             │ │\n│ │   [View Comments]              │ │\n│ │   2 hours ago                  │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │   [@] Casey mentioned you:     │ │\n│ │   \"@you Great work on this!\"   │ │\n│ │   [Reply]                      │ │\n│ │   Yesterday, 8:15 PM           │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│        [Load More]                 │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nnotifications, alerts, activity, updates, engagement, mentions, unread, inbox, notification-center, user-activity, real-time\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a notification screen where users can see when someone likes their posts, comments on their content, or follows them\"\n\n**AI selects this pattern because:**\n- User mentioned \"notification screen\" (direct keyword match)\n- Social engagement triggers (likes, comments, follows)\n- Activity alert requirements\n- User-to-user interaction context\n\n**AI generates:**\nStandard variant with notification list showing notification type icons, user avatars, action descriptions (\"Alice liked your post\"), content previews, timestamps, filtering tabs (All, Unread, Mentions, Follows), and unread dot indicators\n\n**AI explains tradeoff:**\n- \"Notifications keep users informed of social interactions and drive re-engagement. Filtering tabs help focus on specific activity types. Grouped notifications ('5 people liked') reduce noise. Unread indicators provide clarity. However, constant notifications cause anxiety and interrupt focus. Notification overload leads to burnout. Unread badges create FOMO. Consider notification preferences and digest options.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Notification types** - Likes, comments, follows, mentions, messages, shares, tags, achievements\n2. **Grouping strategy** - Individual, smart grouping (\"5 people liked\"), time-based sections\n3. **Inline actions** - Reply, Like, Follow, Accept/Decline, Delete, Mark as read\n4. **Priority/sorting** - Chronological, priority-based, AI-ranked\n5. **Rich previews** - Content thumbnails, user avatars, action context\n\n**App-specific adaptations:**\n- **Twitter-style:** Mentions tab prominent, quote tweets, retweets with comments\n- **Instagram-style:** Like activity grouped, follow requests separate, story mentions\n- **LinkedIn-style:** Professional milestones, connection suggestions, job alerts, article engagement\n- **GitHub-style:** Pull request reviews, issue mentions, repository stars, release notifications\n- **Slack-style:** Channel mentions, direct messages, thread replies, @here/@channel\n- **E-commerce:** Order updates, price drops, back in stock, delivery status\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Dedicated notifications tab/screen\n- Accessible from bell icon in header\n- Badge on tab bar or app icon\n- Push notification leads here\n\n**What comes before:**\n- App launch - Check notifications after opening app\n- Push notification tap - Direct link to specific notification\n- Header bell icon - Tap to view all notifications\n- Badge indicator - Prompts user to check\n\n**What comes after:**\n- `social/feed` - \"Someone liked your post\" → view post\n- `social/comments` - \"New comment\" → view comments\n- `social/followers-following` - \"New follower\" → view profile\n- `social/messaging-chat` - \"New message\" → open chat\n- User profile - Tap notification avatar → view profile\n- Content detail - Tap notification → view referenced content\n\n**Complete flow example:**\nPush notification → Tap → **Notifications** → Tap \"Alice commented\" → `social/comments` → View comment\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App has no user-to-user interactions\n- Single-user app with no social features\n- Notifications would be too noisy (prefer email digest)\n- Real-time alerts not needed\n\n**Use instead:**\n- Email digest - For less urgent, batched updates\n- Activity log - For historical record without urgency\n- In-app messaging - For direct communication\n- Banner alerts - For critical, immediate actions only\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Notification fatigue from too many alerts\n- Unclear what action is needed (passive vs. actionable)\n- Old notifications pile up, creating clutter\n- Missing context (who, what, why)\n- Slow loading with many notifications\n- Accidental dismissal of important alerts\n\n**Conversion optimization:**\n- Deep link to relevant content (not just generic list)\n- Group similar notifications (\"5 people liked\")\n- Clear unread indicators (dot, bold text)\n- Inline actions reduce taps (Reply without leaving)\n- Auto-mark as read when viewed\n- Smart filtering (show most relevant first)\n- Rich previews with avatars and thumbnails\n- \"Mark all as read\" for bulk management\n\n**Accessibility notes:**\n- Notification items need clear semantic structure\n- Unread state announced to screen readers\n- Action links clearly labeled\n- Icons have text alternatives\n- Filter tabs keyboard navigable\n- Timestamps readable by screen readers\n- Grouped notifications indicate count audibly\n- Sufficient contrast for unread indicators\n- Touch targets minimum 44x44pt for actions\n- Announce new notifications when they arrive\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/alert-variants": "# Alert Variants\n\n**ID:** `special/alert-variants`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides a collection of iOS-style alert dialog patterns for user confirmations, warnings, inputs, and multi-option choices with platform-appropriate styling.\n\n**Use this pattern when user mentions:**\n- [alert, dialog, popup, modal-dialog]\n- [confirm, warning, error, success-message]\n- [user-confirmation, destructive-action, prompt]\n- [input-dialog, password-prompt, text-entry]\n- [choice, options, multiple-actions]\n\n**Common contexts:**\n- Apps requiring user confirmation before destructive actions\n- Authentication flows needing password/PIN entry\n- Workflows with multiple action choices\n- Error handling and success notifications\n- Settings changes requiring user acknowledgment\n\n**UX Tradeoffs:**\n- **Pro:** Familiar iOS pattern, clear focus\n- **Pro:** Forces user decision, prevents accidental actions\n- **Pro:** Versatile for many confirmation scenarios\n- **Con:** Interrupts user flow completely\n- **Con:** Can feel heavy for non-critical messages\n- **Con:** Overuse creates \"alert fatigue\"\n\n**Pairs well with:**\n- `special/empty-states-collection` - Show alert when action results in empty state\n- `special/error-states-collection` - Use alert for critical errors\n- `navigation/bottom-tabs` - Return to tab after alert dismissed\n- `forms/button-styles` - Consistent button styling\n\n**Variants available:**\n- **Simple Alert:** Single action, basic acknowledgment (use for \"simple notification\")\n- **Confirmation Alert:** Two actions, cancel/confirm (default for \"confirm action\")\n- **Destructive Alert:** Emphasizes dangerous action (use for \"delete, remove, permanent\")\n- **Input Alert:** Includes text field for user entry (use for \"password, text entry, rename\")\n- **Choice Alert:** Multiple vertical actions (use for \"save/discard/cancel, multiple options\")\n\n---\n\n## Description\n\niOS-style alert dialogs for user confirmations, warnings, and input prompts. Includes simple acknowledgments, confirmation dialogs, destructive action warnings, text input alerts, and multi-choice dialogs. Essential for critical decision points and interrupting user flow intentionally.\n\n---\n\n## ASCII Wireframe\n\n### Simple Alert\n\n```\n┌────────────────────────────────────┐\n│             Welcome!               │\n│                                    │\n│    Thanks for joining us.          │\n│                                    │\n│            [  OK  ]                │\n└────────────────────────────────────┘\n```\n\n### Confirmation Alert (Standard)\n\n```\n┌────────────────────────────────────┐\n│         Unsaved Changes            │\n│                                    │\n│    You have unsaved changes.       │\n│    Do you want to continue?        │\n│                                    │\n│   [ Cancel ]    [ Continue ]       │\n└────────────────────────────────────┘\n```\n\n### Destructive Alert\n\n```\n┌────────────────────────────────────┐\n│         Delete Account?            │\n│                                    │\n│   This action cannot be undone.    │\n│   All data will be permanently     │\n│   deleted.                         │\n│                                    │\n│   [ Cancel ]      [ Delete ]       │\n└────────────────────────────────────┘\n```\n\n### Input Alert\n\n```\n┌────────────────────────────────────┐\n│          Enter Password            │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ ............................ │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│   [ Cancel ]    [ Continue ]       │\n└────────────────────────────────────┘\n```\n\n### Choice Alert\n\n```\n┌────────────────────────────────────┐\n│          Save Changes?             │\n│                                    │\n│    You have unsaved changes.       │\n│                                    │\n│         [ Don't Save ]             │\n│           [ Cancel ]               │\n│            [ Save ]                │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[alert, dialog, modal, confirm, warning, destructive, input-prompt, choice, ios-style, interruption]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need to confirm before deleting user accounts, with a clear warning that it's permanent\"\n\n**AI selects this pattern because:**\n- User mentioned \"confirm\" and \"deleting\" (destructive action)\n- Requires explicit user acknowledgment\n- Action is permanent and dangerous\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│      Delete User Account?          │\n│                                    │\n│   This will permanently delete     │\n│   the account and all associated   │\n│   data. This cannot be undone.     │\n│                                    │\n│   [ Cancel ]      [ Delete ]       │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Destructive alert style makes danger clear (red delete button on iOS), prevents accidental deletion, but completely interrupts flow. Consider less intrusive undo pattern for less critical actions.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Title** - Match severity to action (\"Warning\", \"Error\", \"Confirm\", \"Success\")\n2. **Message** - Explain consequences clearly, especially for destructive actions\n3. **Button labels** - Use specific verbs (\"Delete\", \"Remove\", \"Send\") vs generic (\"OK\", \"Yes\")\n4. **Button count** - 1 for simple acknowledgment, 2 for confirm/cancel, 3+ for choices\n5. **Input fields** - Add for rename, password, or short text entry\n\n**App-specific adaptations:**\n- **Social app:** \"Block User?\", \"Report Post?\", \"Delete Message?\"\n- **E-commerce:** \"Remove from Cart?\", \"Cancel Order?\", \"Delete Payment Method?\"\n- **SaaS dashboard:** \"Delete Project?\", \"Remove Team Member?\", \"Discard Changes?\"\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Triggered by user action requiring confirmation\n- Appears as overlay interrupting current screen\n- Modal focus - must be dismissed to continue\n\n**What comes before:**\n- User taps destructive button (delete, remove, clear)\n- User attempts to navigate away with unsaved changes\n- User triggers action requiring password/input\n- System needs user decision between multiple options\n\n**What comes after:**\n- Action is executed (delete, save, send)\n- User returns to previous screen\n- Navigation continues to next screen\n- Input is processed and confirmed\n\n**Complete flow example:**\nSettings → Tap Delete Account → **Destructive Alert** → Account Deleted → Launch Screen\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Action is easily reversible (use undo toast instead)\n- Message is informational only (use toast or banner)\n- Showing errors that don't need acknowledgment (use inline validation)\n- Confirmation is overly cautious (creates alert fatigue)\n- Multiple alerts might stack (use single comprehensive alert)\n\n**Use instead:**\n- `feedback/toast-snackbar` - For non-critical confirmations with undo\n- `feedback/banner-notification` - For persistent but dismissible messages\n- `special/bottom-sheet-modal` - For more complex confirmations with context\n- Inline validation - For form errors that don't need modal interruption\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Completely interrupts user flow (by design)\n- Requires manual dismissal (can't auto-dismiss)\n- Alert fatigue from overuse reduces effectiveness\n- Multiple alerts in sequence frustrates users\n\n**Conversion optimization:**\n- Use sparingly - only for truly important decisions\n- Make destructive buttons visually distinct\n- Use specific button labels (\"Delete Photo\" vs \"OK\")\n- Explain consequences clearly in message\n- Consider less intrusive alternatives first\n\n**Accessibility notes:**\n- Alert must be announced immediately to screen reader users\n- Focus should trap within alert until dismissed\n- Button labels must be descriptive (not just \"OK\"/\"Cancel\")\n- Support keyboard navigation between buttons\n- Ensure sufficient color contrast for destructive buttons\n\n**Platform considerations:**\n- iOS uses centered alerts with horizontally or vertically stacked buttons\n- Android uses Material dialogs with right-aligned buttons\n- Web can adapt either style consistently within app\n- Consider platform conventions for button order (iOS: Cancel left, Android: Cancel right)\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/bottom-sheet-modal": "# Bottom Sheet Modal\n\n**ID:** `special/bottom-sheet-modal`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides a half-height modal that slides up from the bottom, allowing user interaction while maintaining context of the underlying screen. Common in iOS and modern mobile design.\n\n**Use this pattern when user mentions:**\n- [bottom-sheet, drawer, slide-up, modal]\n- [contextual-actions, quick-actions, share-sheet]\n- [partial-overlay, half-modal, slide-up-panel]\n- [filter-panel, options-menu, action-menu]\n- [maintain-context, non-blocking-modal]\n\n**Common contexts:**\n- Sharing content to other apps/services\n- Filter/sort options for lists or grids\n- Quick settings or preferences\n- Action menus with multiple choices\n- Forms that don't need full-screen focus\n- Contextual options related to selected item\n\n**UX Tradeoffs:**\n- **Pro:** Maintains visual context of underlying screen\n- **Pro:** Feels lighter than full-screen modal\n- **Pro:** Easy to dismiss with swipe down gesture\n- **Pro:** Can be draggable/resizable for flexibility\n- **Con:** Limited vertical space for content\n- **Con:** Can obscure important screen content\n- **Con:** May need full modal for complex forms\n\n**Pairs well with:**\n- `lists/action-list` - Show actions in bottom sheet\n- `forms/filter-controls` - Filter options in sheet\n- `special/context-menus` - Alternative to context menu\n- `content/media-gallery` - Share options for media\n- `lists/list-with-sections` - Sort/filter controls\n\n**Variants available:**\n- **Minimal:** Single action or simple message (use for \"quick action\")\n- **Standard:** Multiple actions with title and dismiss (default choice)\n- **Scrollable:** Long content with internal scroll (use for \"many options, long list\")\n- **With Input:** Includes form fields or controls (use for \"quick settings, filter\")\n\n---\n\n## Description\n\nA modal panel that slides up from the bottom of the screen, covering half or less of the viewport. Maintains context by keeping the underlying screen partially visible. Commonly used for action menus, sharing options, filters, and quick forms. Supports swipe-to-dismiss and can be draggable.\n\n---\n\n## ASCII Wireframe\n\n### Standard Bottom Sheet\n\n```\n┌────────────────────────────────────┐\n│    Main Screen Content             │\n│                                    │\n│    Content remains visible         │\n│    behind the sheet...             │\n│                                    │\n├────────────────────────────────────┤\n│              ────                  │\n│          Share Options             │\n│                                    │\n│    [ ] Message                     │\n│    [ ] Email                       │\n│    [ ] Copy Link                   │\n│    [ ] More...                     │\n│                                    │\n│           [ Cancel ]               │\n└────────────────────────────────────┘\n```\n\n### Minimal Bottom Sheet\n\n```\n┌────────────────────────────────────┐\n│    Main Screen Content             │\n│                                    │\n│    More visible...                 │\n│                                    │\n│                                    │\n├────────────────────────────────────┤\n│              ────                  │\n│                                    │\n│    [ ] Edit                        │\n│    [ ] Delete                      │\n│    [ ] Cancel                      │\n└────────────────────────────────────┘\n```\n\n### Scrollable Bottom Sheet\n\n```\n┌────────────────────────────────────┐\n│    Main Screen Content             │\n│                                    │\n├────────────────────────────────────┤\n│              ────                  │\n│    [X]  Filter Options             │\n│                                    │\n│    Category                        │\n│    [ ] Electronics                 │\n│    [ ] Clothing                    │\n│    [ ] Books                       │\n│    [ ] Home & Garden               │\n│          ... scroll ...            │\n│                                    │\n│    [ Apply ]       [ Reset ]       │\n└────────────────────────────────────┘\n```\n\n### With Input Fields\n\n```\n┌────────────────────────────────────┐\n│    Main Screen Content             │\n│                                    │\n├────────────────────────────────────┤\n│              ────                  │\n│    [X]  Add Note                   │\n│                                    │\n│    Title                           │\n│    ┌──────────────────────────┐    │\n│    │                          │    │\n│    └──────────────────────────┘    │\n│    Description                     │\n│    ┌──────────────────────────┐    │\n│    │                          │    │\n│    └──────────────────────────┘    │\n│                                    │\n│    [ Cancel ]      [ Save ]        │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[bottom-sheet, drawer, modal, slide-up, overlay, contextual-menu, action-sheet, ios-pattern, gesture-dismiss]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need share options when users tap the share button on a post, showing common apps\"\n\n**AI selects this pattern because:**\n- User mentioned \"share options\" (classic bottom sheet use case)\n- Multiple action choices needed\n- User wants to maintain context (see post while choosing)\n- Standard iOS pattern for sharing\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│   [Post content visible above]     │\n│                                    │\n├────────────────────────────────────┤\n│              ────                  │\n│           Share Post               │\n│                                    │\n│    [ ] Copy Link                   │\n│    [ ] Share to Twitter            │\n│    [ ] Share to Facebook           │\n│    [ ] Send via Message            │\n│    [ ] More Options...             │\n│                                    │\n│           [ Cancel ]               │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Bottom sheet keeps post visible so user remembers what they're sharing. Swipe down to dismiss is intuitive. For complex sharing with multiple steps, consider full-screen modal instead.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Height** - Can be 1/4, 1/2, or 3/4 of screen (or draggable)\n2. **Handle indicator** - Drag handle (────) signals dismissible sheet\n3. **Title area** - Optional title with close button\n4. **Content** - Actions, forms, lists, or custom content\n5. **Scrolling** - Fixed height with internal scroll vs. auto-sizing\n\n**App-specific adaptations:**\n- **Social app:** Share sheet, report/block options, post actions\n- **E-commerce:** Product options (size/color), filter products, sort order\n- **SaaS dashboard:** Export options, bulk actions, quick filters\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Triggered by user action (button tap, long press, gesture)\n- Appears as overlay on current screen\n- Dismissed returns to same screen state\n\n**What comes before:**\n- User taps \"Share\" button\n- User taps \"Filter\" or \"Sort\" button\n- User long-presses item for contextual actions\n- User taps \"More options\" menu\n\n**What comes after:**\n- User selects action → sheet dismisses → action executes\n- User swipes down → sheet dismisses → no action\n- User taps cancel → sheet dismisses → returns to previous state\n- Complex action → sheet dismissed → new screen shown\n\n**Complete flow example:**\nPost Detail → Tap Share → **Bottom Sheet (Share Options)** → Select Twitter → Compose Tweet Screen\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Content requires full-screen focus (use full modal)\n- Form is long or complex (use dedicated screen)\n- On desktop/web where full modals are more familiar\n- Need to show large amounts of content (use new screen)\n- Action is destructive and needs strong confirmation (use alert)\n\n**Use instead:**\n- `special/alert-variants` - For critical confirmations requiring focus\n- Full-screen modal - For complex forms or multi-step flows\n- `special/context-menus` - For simple actions without explanation\n- New screen - For extensive content or workflows\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Limited vertical space constrains content\n- Obscures bottom portion of underlying screen\n- User may accidentally dismiss while scrolling\n- Requires careful touch target sizing in compact space\n\n**Conversion optimization:**\n- Use for quick actions that don't need full commitment\n- Make most common actions visible without scrolling\n- Include clear dismiss affordance (handle, close button)\n- Support both swipe-down and tap-outside to dismiss\n- Avoid nested scrolling (sheet scroll vs. content scroll)\n\n**Accessibility notes:**\n- Announce sheet appearance to screen readers\n- Trap focus within sheet while open\n- Support keyboard navigation between actions\n- Provide clear close button for assistive tech\n- Ensure touch targets are 44pt minimum\n- Support reduced motion (slide vs. instant appear)\n\n**Platform considerations:**\n- iOS uses bottom sheets extensively (share sheet, action sheet)\n- Android uses similar pattern (bottom sheet, modal bottom sheet)\n- Web implementations vary - ensure touch-friendly sizing\n- Consider backdrop tap-to-dismiss behavior\n- Draggable sheets need touch gesture handling\n\n**Gesture support:**\n- Swipe down to dismiss (primary dismissal method)\n- Tap outside/backdrop to dismiss (secondary)\n- Drag handle to resize (optional advanced feature)\n- Scroll within sheet if content overflows\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/carousel-content-view": "# Carousel Content View\n\n**ID:** `special/carousel-content-view`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides a horizontally scrollable carousel for browsing multiple content items one at a time, with page indicators and swipe navigation. Common for onboarding, featured content, and image galleries.\n\n**Use this pattern when user mentions:**\n- [carousel, slideshow, swipe, horizontal-scroll]\n- [featured-content, highlights, showcase]\n- [onboarding, tutorial, walkthrough, intro]\n- [product-gallery, image-slider, photo-viewer]\n- [page-indicators, dots, swipe-navigation]\n\n**Common contexts:**\n- App onboarding and feature introduction\n- Featured products or content showcase\n- Photo/image galleries with full-screen viewing\n- Promotional banners and announcements\n- Story-like content (Instagram/Snapchat style)\n- Multi-step tutorials or tips\n\n**UX Tradeoffs:**\n- **Pro:** Space-efficient for multiple items\n- **Pro:** Familiar swipe gesture on mobile\n- **Pro:** Focuses attention on one item at a time\n- **Pro:** Page indicators show progress\n- **Con:** Hidden content may be missed\n- **Con:** Not scannable like grid or list\n- **Con:** Auto-advance can annoy users\n\n**Pairs well with:**\n- `content/media-gallery` - Thumbnail grid → carousel for full view\n- `navigation/bottom-tabs` - Carousel within tab content\n- `content/hero-banner` - Similar to single-item hero\n- `lists/horizontal-scroll-list` - Alternative for browsing multiple items\n- `onboarding/welcome-screens` - Onboarding uses carousel pattern\n\n**Variants available:**\n- **Minimal:** Single slide, simple swipe (use for \"single image viewer\")\n- **Standard:** Multiple slides with page indicators (default choice)\n- **Auto-advance:** Automatic progression with timing (use for \"banner ads, promotions\")\n- **Peek:** Shows edges of adjacent slides (use for \"browsing hint, encourage swipe\")\n\n---\n\n## Description\n\nA horizontally scrollable view displaying one content item at a time. Users swipe left/right to navigate between items. Page indicators (dots) show total count and current position. Commonly used for onboarding flows, featured content, image galleries, and promotional banners. Can auto-advance or be user-controlled.\n\n---\n\n## ASCII Wireframe\n\n### Standard Carousel\n\n```\n┌────────────────────────────────────┐\n│        Featured Products           │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │                              │  │\n│  │     Product Image Here       │  │\n│  │                              │  │\n│  │     Wireless Headphones      │  │\n│  │         $199.99              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│            ● ● ○ ○ ○               │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Carousel with Peeking\n\n```\n┌────────────────────────────────────┐\n│           New Arrivals             │\n├────────────────────────────────────┤\n│                                    │\n│  [──┼────────────────────┼──]      │\n│     │                    │         │\n│     │  Current Product   │         │\n│     │                    │         │\n│     │   Summer Dress     │         │\n│     └────────────────────┘         │\n│                                    │\n│            ○ ● ○ ○                 │\n└────────────────────────────────────┘\n```\n\n### Onboarding Carousel\n\n```\n┌────────────────────────────────────┐\n│                                    │\n│        Welcome to TaskFlow         │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │           [Icon]             │  │\n│  │                              │  │\n│  │    Organize your tasks       │  │\n│  │    with simple lists and     │  │\n│  │    smart reminders           │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│             ● ○ ○                  │\n│                                    │\n│   [ Skip ]           [ Next ]      │\n└────────────────────────────────────┘\n```\n\n### Auto-Advance Banner\n\n```\n┌────────────────────────────────────┐\n│  ┌──────────────────────────────┐  │\n│  │   SUMMER SALE - 50% OFF      │  │\n│  │     All clothing items       │  │\n│  └──────────────────────────────┘  │\n│            ● ○ ○ ○                 │\n│                                    │\n│    Latest Updates                  │\n│                                    │\n│    [  Article 1 title         ]    │\n│    [  Article 2 title         ]    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[carousel, slideshow, swipe, horizontal-scroll, page-indicators, onboarding, gallery, featured-content, auto-advance]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a 3-screen onboarding flow explaining app features when users first launch\"\n\n**AI selects this pattern because:**\n- User mentioned \"onboarding flow\" and \"3-screen\" (multi-page tutorial)\n- Sequential content with progression\n- Page indicators needed to show progress\n- Standard carousel navigation pattern\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│                                    │\n│       Welcome to FitTracker        │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │           [Icon]             │  │\n│  │                              │  │\n│  │    Track your workouts and   │  │\n│  │    reach your fitness goals  │  │\n│  │    with personalized plans   │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│             ● ○ ○                  │\n│                                    │\n│   [ Skip ]           [ Next ]      │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Carousel focuses user on one concept at a time, with clear progress. Each screen explains one feature. Skip button lets users bypass if they're familiar. Alternative: show all 3 screens in scrollable list, but carousel enforces sequential reading.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Page indicators** - Dots, dashes, numbered, or progress bar\n2. **Navigation controls** - Arrows, swipe-only, or auto-advance\n3. **Content type** - Images, text+image, video, or mixed\n4. **Slide count** - 2-5 recommended (more becomes tedious)\n5. **Transition style** - Snap, smooth scroll, or fade\n\n**App-specific adaptations:**\n- **Social app:** Story viewer, post image carousel, tutorial slides\n- **E-commerce:** Product image gallery, featured collections, promo banners\n- **SaaS dashboard:** Feature highlights, announcement carousel, tips/tutorials\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Onboarding: First launch experience\n- Content browsing: Within screen showing featured items\n- Detail view: Image gallery for single item\n\n**What comes before:**\n- App launch (for onboarding)\n- User navigates to featured section\n- User taps item to view full images\n- User accesses help/tutorial section\n\n**What comes after:**\n- Onboarding complete → main app screen\n- User swipes through all items → returns to browsing\n- User taps slide → detail page for that item\n- Auto-advance loops or stops at last slide\n\n**Complete flow example:**\nApp Launch → **Onboarding Carousel (3 slides)** → Tap \"Get Started\" → Main App Screen\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Users need to see all items at once (use grid)\n- Content is scannable/comparable (use list or grid)\n- More than 5-7 items (users won't swipe that much)\n- Information is sequential and long (use scrollable article)\n- Users need to jump to specific items (use tabbed view)\n\n**Use instead:**\n- `lists/horizontal-scroll-list` - For browsable content with visible items\n- `content/content-browser-grid` - When all items should be visible\n- `navigation/tab-bar-top` - For distinct sections users jump between\n- Scrollable page - For long-form sequential content\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Hidden content may be ignored (users don't always swipe)\n- No indication of what's next (unless peeking edges)\n- Can't skip to specific slide easily\n- Auto-advance can interrupt reading\n- Swiping many slides becomes tedious\n\n**Conversion optimization:**\n- Keep carousel to 3-5 slides maximum\n- Show edges of adjacent slides (peek) to hint at more content\n- Include skip button for onboarding carousels\n- Pause auto-advance on user interaction\n- Make page indicators tappable for direct navigation\n- Don't hide critical information in later slides\n\n**Accessibility notes:**\n- Announce current page and total count to screen readers\n- Support left/right arrow keys for keyboard navigation\n- Pause auto-advance when user focuses on carousel\n- Ensure page indicators are reachable by keyboard\n- Provide alternative navigation (next/previous buttons)\n- Don't rely on swipe gestures exclusively\n\n**Platform considerations:**\n- iOS: Swipe gesture is very familiar, use page control (dots)\n- Android: Similar pattern, Material uses different indicator style\n- Web: Requires touch gesture library or click/keyboard navigation\n- Consider reduced motion preference (disable auto-advance/transitions)\n\n**Performance notes:**\n- Lazy load images for slides not currently visible\n- Pre-load adjacent slides for smooth transitions\n- Optimize image sizes for mobile bandwidth\n- Consider autoplay impact on data usage\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/contact-picker": "# Contact Picker\n\n**ID:** `special/contact-picker`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides an interface for selecting one or multiple contacts from the user's contact list, with search, sections, and multi-select capabilities. Standard iOS pattern for sharing and communication features.\n\n**Use this pattern when user mentions:**\n- [contact-picker, select-contacts, choose-people]\n- [share-with, send-to, invite-users]\n- [address-book, phonebook, contacts]\n- [multi-select-people, choose-recipients]\n- [email-to, message-to, share-content]\n\n**Common contexts:**\n- Sharing content with specific people\n- Inviting users to events or groups\n- Selecting recipients for messages\n- Adding participants to conversations\n- Creating contact groups or lists\n- Referral/invite flows\n\n**UX Tradeoffs:**\n- **Pro:** Leverages existing contact data\n- **Pro:** Familiar iOS system picker pattern\n- **Pro:** Built-in search and organization\n- **Pro:** Handles large contact lists efficiently\n- **Con:** Requires contacts permission\n- **Con:** Contact data quality varies\n- **Con:** Privacy concerns for some users\n\n**Pairs well with:**\n- `forms/search-bar` - Search contacts quickly\n- `lists/list-with-sections` - Organized contact display\n- `special/bottom-sheet-modal` - Show picker as modal\n- `social/user-profile-card` - Display selected contacts\n- `messaging/chat-interface` - Send to selected contacts\n\n**Variants available:**\n- **Single Select:** Choose one contact (use for \"send to one person\")\n- **Multi-Select:** Choose multiple contacts (default for \"share, invite\")\n- **With Search:** Includes search bar (use for \"large contact lists\")\n- **Filtered:** Show subset of contacts (use for \"app users only, verified contacts\")\n\n---\n\n## Description\n\nAn interface for browsing and selecting contacts from the user's address book. Includes alphabetical sections, search functionality, and multi-select capability. Shows contact names, photos, and additional info like email or phone. Common for sharing content, inviting people, or selecting message recipients.\n\n---\n\n## ASCII Wireframe\n\n### Multi-Select Contact Picker\n\n```\n┌────────────────────────────────────┐\n│ [Cancel] Select Contacts  [Done]   │\n├────────────────────────────────────┤\n│  ┌──────────────────────────┐ [S]  │\n│  │ Search...                │      │\n│  └──────────────────────────┘      │\n│  Favorites                         │\n│                                    │\n│  [X] [@] John Appleseed            │\n│           john@apple.com           │\n│                                    │\n│  [ ] [@] Sarah Wilson              │\n│           sarah@email.com          │\n│                                    │\n│  Recent                            │\n│                                    │\n│  [X] [@] Mike Chen                 │\n│           mike.chen@work.com       │\n│                                    │\n│  All Contacts                      │\n│                                    │\n│  A                                 │\n│  [ ] [@] Alice Johnson             │\n└────────────────────────────────────┘\n```\n\n### Single Select Contact Picker\n\n```\n┌────────────────────────────────────┐\n│  [<] Choose Contact                │\n├────────────────────────────────────┤\n│  ┌──────────────────────────┐ [S]  │\n│  │ Search...                │      │\n│  └──────────────────────────┘      │\n│  A                                 │\n│  [@] Alice Johnson            [>]  │\n│       alice@domain.com             │\n│                                    │\n│  [@] Alex Smith               [>]  │\n│       alex@email.com               │\n│                                    │\n│  B                                 │\n│  [@] Bob Williams             [>]  │\n│       bob@company.com              │\n│                                    │\n│  [@] Betty Davis              [>]  │\n│       betty@example.org            │\n└────────────────────────────────────┘\n```\n\n### Filtered Contact Picker (App Users Only)\n\n```\n┌────────────────────────────────────┐\n│ [Cancel] Invite Friends    [Send]  │\n├────────────────────────────────────┤\n│  ┌──────────────────────────┐ [S]  │\n│  │ Search...                │      │\n│  └──────────────────────────┘      │\n│  On TaskFlow (3)                   │\n│                                    │\n│  [X] [@] Sarah Wilson              │\n│           @sarahw - Following      │\n│                                    │\n│  [ ] [@] Mike Chen                 │\n│           @mikechen - Friend       │\n│                                    │\n│  [ ] [@] Lisa Park                 │\n│           @lisapark - Suggested    │\n│                                    │\n│  Invite via SMS                    │\n│                                    │\n│  [ ] [@] John Doe                  │\n│           +1 (555) 123-4567        │\n└────────────────────────────────────┘\n```\n\n### Compact Contact Picker\n\n```\n┌────────────────────────────────────┐\n│  Share with...                     │\n│                                    │\n│  ┌──────────────────────────┐ [S]  │\n│  │ Search...                │      │\n│  └──────────────────────────┘      │\n│  [X] [@] John Appleseed            │\n│  [X] [@] Sarah Wilson              │\n│  [ ] [@] Mike Chen                 │\n│  [ ] [@] Lisa Park                 │\n│  [ ] [@] Alex Smith                │\n│                                    │\n│         [ Share with 2 ]           │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[contact-picker, contacts, address-book, multi-select, search, selection, sharing, invite, recipients, people-picker]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need to let users invite friends to join a shared shopping list by selecting from their contacts\"\n\n**AI selects this pattern because:**\n- User mentioned \"invite friends\" and \"selecting from contacts\"\n- Multi-select needed (share with multiple people)\n- Leverages existing contact data\n- Standard iOS sharing pattern\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│ [Cancel] Invite to List    [Send]  │\n├────────────────────────────────────┤\n│  ┌──────────────────────────┐ [S]  │\n│  │ Search...                │      │\n│  └──────────────────────────┘      │\n│  Using ShopList (4)                │\n│                                    │\n│  [X] [@] Sarah Wilson              │\n│           Already on this list     │\n│                                    │\n│  [ ] [@] Mike Chen                 │\n│           On ShopList              │\n│                                    │\n│  Invite via Email                  │\n│                                    │\n│  [ ] [@] John Doe                  │\n│           john@email.com           │\n│                                    │\n│  [ ] [@] Lisa Park                 │\n│           lisa.park@email.com      │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Contact picker lets users quickly find and invite known contacts. Shows who's already using the app vs. needs invite. Alternative: manual email entry, but contact picker is much faster and reduces typos.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Selection mode** - Single vs. multi-select checkboxes\n2. **Filtering** - Show all contacts vs. app users only\n3. **Contact info** - Name + email, name + phone, username, etc.\n4. **Sections** - Favorites, Recent, Alphabetical, Custom groups\n5. **Action buttons** - Done, Send, Invite, Share (context-specific)\n\n**App-specific adaptations:**\n- **Social app:** Show which contacts are app users, friend status, mutual friends\n- **E-commerce:** Filter to contacts with accounts, show gift recipient history\n- **SaaS dashboard:** Show team members, project collaborators, invite status\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Triggered by \"Share\", \"Invite\", or \"Send to\" action\n- Appears as modal or new screen\n- Returns to previous screen after selection\n\n**What comes before:**\n- User taps \"Share\" button on content\n- User starts creating group/event\n- User accesses \"Invite friends\" feature\n- User begins composing message\n\n**What comes after:**\n- Contacts selected → confirmation/preview screen\n- Contacts selected → send immediately → success message\n- Single contact selected → proceed to next step with contact data\n- Cancel → returns to previous screen\n\n**Complete flow example:**\nShopping List → Tap \"Invite\" → **Contact Picker (Multi-Select)** → Select 3 Contacts → Tap \"Send\" → Invitations Sent → Return to List\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Don't need real contacts (use user search instead)\n- Selecting from app users only (use in-app user list)\n- Privacy-sensitive context (let users type manually)\n- Contact permission is barrier (offer alternative entry)\n- Contact data is unreliable for your use case\n\n**Use instead:**\n- `forms/search-bar` with user search - For finding app users\n- `lists/list-with-search` - For selecting from predefined list\n- `forms/text-input-field` - For manual email/phone entry\n- Social graph picker - For selecting from friends/followers\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Requires contacts permission (some users decline)\n- Contact data quality varies (outdated info, duplicates)\n- Large contact lists can be overwhelming\n- Privacy concerns sharing contact data\n- Finding specific contact in long list\n\n**Conversion optimization:**\n- Explain why you need contacts permission clearly\n- Provide alternative manual entry option\n- Show app users first (more relevant)\n- Pre-select suggested/recent contacts\n- Clear search functionality\n- Show selected count and ability to review selections\n\n**Accessibility notes:**\n- Announce section headers to screen readers\n- Ensure checkboxes have proper labels\n- Support keyboard navigation between contacts\n- Provide text alternative to photo/avatar\n- Make search field easily discoverable\n- Announce selection state changes clearly\n\n**Platform considerations:**\n- iOS: Use native ContactUI picker when possible for trust\n- Android: Similar contact picker patterns available\n- Web: Browser contact picker API limited, may need manual entry\n- Consider using system picker vs. custom UI for familiarity\n\n**Privacy considerations:**\n- Request contacts permission only when needed\n- Explain what you'll do with contact data\n- Don't upload entire address book without consent\n- Respect user's contact privacy settings\n- Provide option to invite without contacts access\n- Clear about who sees shared contact info\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/content-browser-grid": "# Content Browser Grid\n\n**ID:** `special/content-browser-grid`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides a grid-based browsing interface for visual content like photos, videos, documents, and products with selection, sorting, and bulk actions. Optimized for scannable visual content.\n\n**Use this pattern when user mentions:**\n- [grid, grid-view, thumbnail-grid, photo-grid]\n- [browse-content, browse-media, browse-files]\n- [gallery, photo-browser, media-browser]\n- [multi-select, bulk-actions, select-multiple]\n- [visual-content, scannable-items]\n\n**Common contexts:**\n- Photo and video galleries\n- Document/file browsers\n- Product catalogs and listings\n- Media libraries and archives\n- Asset management interfaces\n- Content selection and organization\n\n**UX Tradeoffs:**\n- **Pro:** Highly scannable for visual content\n- **Pro:** Shows many items at once\n- **Pro:** Efficient use of screen space\n- **Pro:** Easy multi-select for bulk actions\n- **Con:** Limited detail per item\n- **Con:** Poor for text-heavy content\n- **Con:** Thumbnails may not convey enough info\n\n**Pairs well with:**\n- `content/media-gallery` - Tap grid item → full-screen view\n- `forms/search-bar` - Filter/search grid content\n- `lists/action-list` - Bulk actions on selected items\n- `special/bottom-sheet-modal` - Actions for selected items\n- `navigation/segmented-control` - Switch between grid/list view\n\n**Variants available:**\n- **2-Column Grid:** Large thumbnails, more detail (use for \"detailed view\")\n- **3-Column Grid:** Balanced size and density (default choice)\n- **4-Column Grid:** Maximum density, small thumbs (use for \"browse many items\")\n- **Mixed Grid:** Variable sizes for featured content (use for \"highlight important items\")\n\n---\n\n## Description\n\nA grid layout displaying content as thumbnails or cards in rows and columns. Optimized for visual content like photos, videos, products, or documents. Supports multi-selection, sorting, filtering, and bulk actions. Can switch between grid and list views. Common in photo libraries, file browsers, and e-commerce catalogs.\n\n---\n\n## ASCII Wireframe\n\n### 3-Column Grid (Standard)\n\n```\n┌────────────────────────────────────┐\n│  [<] Photos             [Select]   │\n├────────────────────────────────────┤\n│  ┌─────────────────────┐ [S]       │\n│  │ Search...           │           │\n│  └─────────────────────┘           │\n│  ┌──────┐ ┌──────┐ ┌──────┐        │\n│  │ IMG  │ │ IMG  │ │ IMG  │        │\n│  │      │ │      │ │      │        │\n│  └──────┘ └──────┘ └──────┘        │\n│  Photo1   Photo2   Photo3          │\n│                                    │\n│  ┌──────┐ ┌──────┐ ┌──────┐        │\n│  │ IMG  │ │ VID  │ │ IMG  │        │\n│  │      │ │  >   │ │      │        │\n│  └──────┘ └──────┘ └──────┘        │\n│  Photo4   Video1   Photo5          │\n│                                    │\n│  ┌──────┐ ┌──────┐ ┌──────┐        │\n│  │ IMG  │ │ IMG  │ │ DOC  │        │\n│  │      │ │      │ │      │        │\n│  └──────┘ └──────┘ └──────┘        │\n└────────────────────────────────────┘\n```\n\n### With Multi-Select\n\n```\n┌────────────────────────────────────┐\n│  [Cancel] 3 Selected       [Done]  │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────┐ ┌──────┐ ┌──────┐        │\n│  │X IMG │ │  IMG │ │X IMG │        │\n│  │      │ │      │ │      │        │\n│  └──────┘ └──────┘ └──────┘        │\n│                                    │\n│  ┌──────┐ ┌──────┐ ┌──────┐        │\n│  │  IMG │ │X VID │ │  IMG │        │\n│  │      │ │  >   │ │      │        │\n│  └──────┘ └──────┘ └──────┘        │\n│                                    │\n├────────────────────────────────────┤\n│  [Share]  [Delete]  [Move]         │\n└────────────────────────────────────┘\n```\n\n### 2-Column Grid (Detailed)\n\n```\n┌────────────────────────────────────┐\n│  [<] Documents       [Grid/List]   │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────┐ ┌──────────────┐ │\n│  │  [DOC]       │ │  [IMG]       │ │\n│  │ Proposal.pdf │ │ Design.png   │ │\n│  │   2.4 MB     │ │   1.8 MB     │ │\n│  │   Jan 12     │ │   Jan 11     │ │\n│  └──────────────┘ └──────────────┘ │\n│                                    │\n│  ┌──────────────┐ ┌──────────────┐ │\n│  │  [XLS]       │ │  [VID]       │ │\n│  │ Budget.xlsx  │ │  Demo.mp4    │ │\n│  │   856 KB     │ │   45 MB      │ │\n│  │   Jan 10     │ │   Jan 9      │ │\n│  └──────────────┘ └──────────────┘ │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### 4-Column Grid (Dense)\n\n```\n┌────────────────────────────────────┐\n│  [<] All Photos    [=] [Select]    │\n├────────────────────────────────────┤\n│  ┌────┐┌────┐┌────┐┌────┐          │\n│  │IMG ││IMG ││IMG ││VID │          │\n│  └────┘└────┘└────┘└────┘          │\n│                                    │\n│  ┌────┐┌────┐┌────┐┌────┐          │\n│  │IMG ││DOC ││IMG ││IMG │          │\n│  └────┘└────┘└────┘└────┘          │\n│                                    │\n│  ┌────┐┌────┐┌────┐┌────┐          │\n│  │IMG ││IMG ││VID ││IMG │          │\n│  └────┘└────┘└────┘└────┘          │\n│                                    │\n│  ┌────┐┌────┐┌────┐┌────┐          │\n│  │IMG ││IMG ││IMG ││DOC │          │\n│  └────┘└────┘└────┘└────┘          │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[grid, grid-view, thumbnail-grid, photo-grid, content-browser, gallery, multi-select, bulk-actions, visual-content, media-browser]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a photo gallery where users can browse their vacation photos and select multiple to share\"\n\n**AI selects this pattern because:**\n- User mentioned \"photo gallery\" and \"browse\" (visual content)\n- Multi-select needed for sharing multiple items\n- Grid layout optimal for photo thumbnails\n- Scannable overview of many photos\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│  [<] Vacation 2024     [Select]    │\n├────────────────────────────────────┤\n│  ┌─────────────┐ [S]     [=]       │\n│  │ Search...   │                   │\n│  └─────────────┘                   │\n│  ┌──────┐ ┌──────┐ ┌──────┐        │\n│  │      │ │      │ │      │        │\n│  │ IMG  │ │ IMG  │ │ IMG  │        │\n│  └──────┘ └──────┘ └──────┘        │\n│  Jun 15   Jun 15   Jun 16          │\n│                                    │\n│  ┌──────┐ ┌──────┐ ┌──────┐        │\n│  │      │ │ VID  │ │      │        │\n│  │ IMG  │ │  >   │ │ IMG  │        │\n│  └──────┘ └──────┘ └──────┘        │\n│  Jun 16   Jun 17   Jun 17          │\n│                                    │\n│           142 photos               │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Grid layout lets users scan many photos quickly to find the ones they want. Tap Select to enable multi-selection, then share. Alternative: list view shows more metadata but displays fewer photos. Grid is optimal for visual scanning.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Grid columns** - 2, 3, or 4 columns based on item size needs\n2. **Thumbnail content** - Image preview, icon, or placeholder\n3. **Item metadata** - Filename, date, size, type, or none\n4. **Selection mode** - Checkboxes, highlight border, or tap-and-hold\n5. **Toolbar actions** - Share, delete, move, download, edit\n\n**App-specific adaptations:**\n- **Social app:** Photo grid with like counts, user avatars, multi-select for stories\n- **E-commerce:** Product grid with prices, ratings, wishlist heart icons\n- **SaaS dashboard:** File browser with type icons, sizes, shared status indicators\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Main browsing interface for content collections\n- Appears after selecting album, folder, or category\n- Returns to grid after viewing individual item\n\n**What comes before:**\n- User selects album or collection to browse\n- User searches for content\n- User navigates from home to content section\n- User applies filter or sort\n\n**What comes after:**\n- Tap item → detail/full-screen view of item\n- Enter selection mode → select items → bulk action\n- Pull to refresh → reload grid with new content\n- Scroll to bottom → load more items\n\n**Complete flow example:**\nAlbums List → Tap \"Vacation 2024\" → **Grid Browser** → Tap Photo → Full Screen View → Swipe Between Photos\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Content is text-heavy (use list view)\n- Items need significant detail visible (use cards or list)\n- Content types are very different (use mixed layout)\n- Only a few items to display (waste of space)\n- Order/sequence is more important than scanning\n\n**Use instead:**\n- `lists/list-with-thumbnails` - For mixed content types with detail\n- `content/card-feed` - For heterogeneous content with context\n- `lists/list-with-sections` - When grouping/organization is key\n- Table view - For structured data with multiple columns\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Thumbnails may be too small to identify content\n- Limited space for metadata per item\n- Scrolling through hundreds of items becomes tedious\n- Selection mode not always discoverable\n- May not convey item status clearly\n\n**Conversion optimization:**\n- Use appropriate column count for content type\n- Show enough thumbnail detail to identify items\n- Implement infinite scroll or pagination clearly\n- Make selection mode obvious (dedicated button)\n- Preview selection count and available actions\n- Support pinch-to-zoom for grid density adjustment\n\n**Accessibility notes:**\n- Provide text labels for all thumbnails\n- Announce grid dimensions to screen readers\n- Support keyboard navigation (arrow keys)\n- Ensure sufficient touch target size (44pt minimum)\n- Provide alternative list view for screen reader users\n- Announce selection state changes clearly\n- Support voiceover gestures for navigation\n\n**Platform considerations:**\n- iOS: Photos app grid is familiar reference\n- Android: Material grid guidelines for sizing\n- Web: Responsive column count based on viewport\n- Consider device pixel density for thumbnail quality\n- Lazy load images for performance\n\n**Performance notes:**\n- Lazy load thumbnails as user scrolls\n- Use thumbnail-size images, not full resolution\n- Implement virtual scrolling for large collections\n- Cache thumbnails for smooth scrolling\n- Consider progressive image loading\n- Optimize grid re-layout on orientation change\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/context-menus": "# Context Menus\n\n**ID:** `special/context-menus`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides contextual action menus that appear on long-press or right-click, showing relevant actions for the selected item. iOS and modern web pattern for quick access to item-specific actions.\n\n**Use this pattern when user mentions:**\n- [context-menu, right-click, long-press]\n- [quick-actions, item-actions, contextual-actions]\n- [menu, popup-menu, action-menu]\n- [press-and-hold, secondary-actions]\n- [copy, share, delete, edit-actions]\n\n**Common contexts:**\n- Actions on list items (messages, emails, files)\n- Photo/media manipulation (share, delete, edit)\n- Text selection actions (copy, paste, lookup)\n- Link/URL actions (open, copy, share)\n- Document actions (rename, move, duplicate)\n- App shortcut menus (home screen long-press)\n\n**UX Tradeoffs:**\n- **Pro:** Keeps UI clean (no visible buttons)\n- **Pro:** Fast access to common actions\n- **Pro:** Familiar desktop and mobile pattern\n- **Pro:** Contextually relevant actions only\n- **Con:** Hidden until user discovers gesture\n- **Con:** Not discoverable for new users\n- **Con:** Requires precise touch/click target\n\n**Pairs well with:**\n- `lists/list-with-actions` - Alternative: swipe actions on lists\n- `special/bottom-sheet-modal` - Alternative for more complex actions\n- `lists/action-list` - Menu content structure\n- `content/media-gallery` - Actions on media items\n- `messaging/chat-interface` - Message-specific actions\n\n**Variants available:**\n- **Simple Menu:** 3-5 actions, no sections (use for \"basic actions\")\n- **Grouped Menu:** Sections with separators (default for \"many actions\")\n- **With Preview:** Shows content preview above menu (use for \"links, media, rich content\")\n- **Destructive Actions:** Red/warning color for dangerous actions (use for \"delete, remove\")\n\n---\n\n## Description\n\nA contextual menu that appears when user long-presses (mobile) or right-clicks (desktop) on an item. Shows relevant actions for that specific item, often with preview of the item above the menu. Common actions include copy, share, edit, delete. Can include sections and destructive action styling.\n\n---\n\n## ASCII Wireframe\n\n### Simple Context Menu\n\n```\n┌────────────────────────────────────┐\n│                                    │\n│    [DOC] Document.pdf              │\n│                                    │\n│         ┌─────────────┐            │\n│         │ Open        │            │\n│         │ Share       │            │\n│         │ Rename      │            │\n│         │ ─────────── │            │\n│         │ Delete      │            │\n│         └─────────────┘            │\n│                                    │\n│    Other items in list...          │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Grouped Context Menu\n\n```\n┌────────────────────────────────────┐\n│                                    │\n│    [IMG] Photo.jpg                 │\n│                                    │\n│         ┌─────────────┐            │\n│         │ Copy        │            │\n│         │ Share       │            │\n│         │ ─────────── │            │\n│         │ Edit        │            │\n│         │ Duplicate   │            │\n│         │ ─────────── │            │\n│         │ Delete      │            │\n│         └─────────────┘            │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### With Content Preview\n\n```\n┌────────────────────────────────────┐\n│         ┌──────────────────┐       │\n│         │ ┌──────────────┐ │       │\n│         │ │  [Preview]   │ │       │\n│         │ │  Image or    │ │       │\n│         │ │ Link Content │ │       │\n│         │ └──────────────┘ │       │\n│         │                  │       │\n│         │   example.com    │       │\n│         │ Page Title Here  │       │\n│         └──────────────────┘       │\n│         ┌─────────────┐            │\n│         │ Open        │            │\n│         │ Open in Tab │            │\n│         │ Copy Link   │            │\n│         │ Share       │            │\n│         └─────────────┘            │\n└────────────────────────────────────┘\n```\n\n### Message Context Menu\n\n```\n┌────────────────────────────────────┐\n│                                    │\n│    Sarah Wilson                    │\n│    Hey, are we still meeting       │\n│    tomorrow at 3pm?                │\n│                                    │\n│         ┌─────────────┐            │\n│         │ Reply       │            │\n│         │ Copy        │            │\n│         │ Forward     │            │\n│         │ ─────────── │            │\n│         │ Pin         │            │\n│         │ Mute        │            │\n│         │ ─────────── │            │\n│         │ Delete      │            │\n│         └─────────────┘            │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[context-menu, right-click, long-press, popup-menu, contextual-actions, quick-actions, item-actions, gesture-menu]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need users to be able to share, edit, or delete photos by long-pressing on them\"\n\n**AI selects this pattern because:**\n- User mentioned \"long-pressing\" (context menu trigger)\n- Multiple actions needed (share, edit, delete)\n- Actions are item-specific (per photo)\n- Standard iOS pattern for media actions\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│                                    │\n│  ┌──────┐ ┌──────┐ ┌──────┐        │\n│  │      │ │      │ │      │        │\n│  │ IMG  │ │ IMG  │ │ IMG  │        │\n│  └──────┘ └──────┘ └──────┘        │\n│                                    │\n│       [Long-press reveals menu]    │\n│                                    │\n│       ┌─────────────┐              │\n│       │ Share       │              │\n│       │ ─────────── │              │\n│       │ Edit        │              │\n│       │ Favorite    │              │\n│       │ ─────────── │              │\n│       │ Delete      │              │\n│       └─────────────┘              │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Context menu keeps photo grid clean (no visible buttons on each photo). Long-press is discoverable through haptic feedback. Alternative: visible action buttons on each photo, but clutters grid. Context menu is standard iOS Photos pattern.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Action list** - 3-8 actions typical, ordered by frequency of use\n2. **Sections** - Group related actions with dividers\n3. **Destructive styling** - Red text/icon for delete/remove actions\n4. **Icons** - Optional icons before action labels\n5. **Preview content** - Show item preview above menu\n\n**App-specific adaptations:**\n- **Social app:** Message actions (reply, react, forward, pin, delete)\n- **E-commerce:** Product actions (add to cart, wishlist, share, compare)\n- **SaaS dashboard:** File actions (open, rename, move, download, delete)\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Appears as overlay on long-press or right-click\n- Triggered from list items, grid items, or content\n- Dismisses after action or tap outside\n\n**What comes before:**\n- User browses content in list or grid\n- User identifies item they want to act on\n- User long-presses or right-clicks item\n\n**What comes after:**\n- User taps action → menu dismisses → action executes\n- User taps outside → menu dismisses → no action\n- Destructive action → confirmation alert → execute or cancel\n- User taps cancel → menu dismisses\n\n**Complete flow example:**\nPhoto Grid → Long-press Photo → **Context Menu** → Tap \"Delete\" → Confirm Alert → Photo Deleted → Return to Grid\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Actions need to be very discoverable (use visible buttons)\n- Only 1-2 actions available (use swipe or inline buttons)\n- Users unlikely to discover long-press gesture\n- Touch targets are too small/crowded\n- Actions change frequently (inconsistent experience)\n\n**Use instead:**\n- `lists/list-with-actions` - For swipeable list actions\n- `special/bottom-sheet-modal` - For more complex action choices\n- Inline action buttons - When discoverability is critical\n- Toolbar actions - For actions affecting selection/view\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Hidden until user discovers gesture\n- Long-press duration must be calibrated (too short = accidental)\n- Menu can obscure content\n- May conflict with scrolling gestures\n- Positioning near screen edges can be awkward\n\n**Conversion optimization:**\n- Order actions by frequency of use (most common at top)\n- Use haptic feedback to confirm long-press detection\n- Show preview of item being acted upon\n- Make destructive actions visually distinct (red)\n- Dismiss menu on tap-outside for easy cancellation\n- Consider showing hint on first use (\"Tip: Long-press for actions\")\n\n**Accessibility notes:**\n- Provide alternative button access for actions\n- Announce menu appearance to screen readers\n- Ensure menu items are keyboard navigable\n- Support VoiceOver custom actions as alternative\n- Make menu items large enough for easy tapping\n- Provide clear labels for each action\n\n**Platform considerations:**\n- iOS: Long-press with haptic feedback is standard\n- Android: Long-press familiar, Material has similar pattern\n- Web: Right-click for desktop, long-press for touch\n- Consider platform-specific menu styling\n- Respect system accessibility settings (reduce motion, larger text)\n\n**Gesture considerations:**\n- Long-press duration: ~500ms typical\n- Provide haptic feedback when menu appears\n- Don't interfere with scroll/pan gestures\n- Consider 3D Touch/Haptic Touch on supporting devices\n- Menu should appear near finger/cursor but not obscured by it\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/continuity-features": "# Continuity Features\n\n**ID:** `special/continuity-features`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides cross-device workflow patterns for Apple ecosystem apps, including Handoff, Universal Clipboard, AirDrop, and device connectivity features. Shows how work can seamlessly continue across iPhone, iPad, Mac, and Apple Watch.\n\n**Use this pattern when user mentions:**\n- [continuity, handoff, cross-device, multi-device]\n- [universal-clipboard, copy-paste-devices]\n- [airdrop, device-sync, cloud-sync]\n- [start-on-device-continue-on-device]\n- [apple-ecosystem, icloud-sync]\n\n**Common contexts:**\n- Apps designed for Apple ecosystem (iPhone + Mac + iPad)\n- Document/content apps with cross-device workflows\n- Productivity apps where users switch devices\n- Communication apps (calls, messages across devices)\n- Creative apps (start on iPad, finish on Mac)\n- Settings/configuration for device connectivity\n\n**UX Tradeoffs:**\n- **Pro:** Seamless workflow across devices\n- **Pro:** Leverages existing Apple infrastructure\n- **Pro:** Familiar to Apple users\n- **Pro:** Reduces friction in device switching\n- **Con:** Apple ecosystem only (locks out other platforms)\n- **Con:** Requires users own multiple Apple devices\n- **Con:** Complexity of cross-device state management\n- **Con:** Privacy/security considerations\n\n**Pairs well with:**\n- `settings/settings-list` - Configure continuity features\n- `feedback/banner-notification` - \"Continue on Mac\" notifications\n- `navigation/bottom-tabs` - Consistent navigation across devices\n- Cloud sync patterns - Keep data in sync across devices\n- `special/context-menus` - \"Open on Mac\" menu options\n\n**Variants available:**\n- **Handoff Only:** Simple task continuation (use for \"single activity across devices\")\n- **Full Continuity:** All features enabled (default for \"Apple ecosystem apps\")\n- **Selective Features:** Pick specific continuity capabilities (use for \"limited cross-device needs\")\n- **Status Display:** Show connected devices and sync state (use for \"troubleshooting, status\")\n\n---\n\n## Description\n\nA collection of Apple ecosystem features enabling seamless workflows across iPhone, iPad, Mac, and Apple Watch. Includes Handoff (continue activity on another device), Universal Clipboard (copy/paste across devices), AirDrop (file sharing), and device connectivity status. Requires iCloud account and proximity/same network for devices.\n\n---\n\n## ASCII Wireframe\n\n### Handoff Notification\n\n```\n┌────────────────────────────────────┐\n│  [App content on iPhone]           │\n│                                    │\n│  Reading article...                │\n│  \"10 Tips for Productivity\"        │\n│                                    │\n│  [Continues on other devices...]   │\n│                                    │\n├────────────────────────────────────┤\n│  [Phone] → [Mac]                   │\n│  Continue on Mac                   │\n│  Safari - apple.com                │\n│  [  Open on MacBook Pro  ]         │\n└────────────────────────────────────┘\n```\n\n### Universal Clipboard Indicator\n\n```\n┌────────────────────────────────────┐\n│  [Editing document on Mac]         │\n│                                    │\n│  [Document content...]             │\n│                                    │\n├────────────────────────────────────┤\n│  [Clipboard] from iPad             │\n│  Image copied 2 min ago            │\n│  Ready to paste                    │\n│                                    │\n│  [  Paste  ]        [ Dismiss ]    │\n└────────────────────────────────────┘\n```\n\n### Device Connectivity Status\n\n```\n┌────────────────────────────────────┐\n│ [<] Continuity            [Edit]   │\n├────────────────────────────────────┤\n│                                    │\n│ Connected Devices (3)              │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [Laptop] MacBook Pro         │   │\n│ │ [x] Handoff and Clipboard    │   │\n│ │ Last active: Just now        │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [Tablet] iPad Pro            │   │\n│ │ [x] All features active      │   │\n│ │ Last sync: 1 min ago         │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [Watch] Apple Watch          │   │\n│ │ [x] Auto Unlock and Activity │   │\n│ │ Connected                    │   │\n│ └──────────────────────────────┘   │\n└────────────────────────────────────┘\n```\n\n### Continuity Settings\n\n```\n┌────────────────────────────────────┐\n│ [<] Settings                       │\n├────────────────────────────────────┤\n│                                    │\n│ Continuity Features                │\n│                                    │\n│ ☑ Allow Handoff                    │\n│   Start tasks on one device,       │\n│   finish on another                │\n│                                    │\n│ ☑ Universal Clipboard              │\n│   Copy on one device, paste        │\n│   on another                       │\n│                                    │\n│ ☑ AirDrop                          │\n│   Share files between devices      │\n│                                    │\n│ ☑ Continuity Camera                │\n│   Use iPhone as webcam for Mac     │\n│                                    │\n│ ☐ Auto AirPlay to Mac              │\n│   Stream content automatically     │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[continuity, handoff, universal-clipboard, airdrop, cross-device, multi-device, apple-ecosystem, device-sync, icloud]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I want users to start reading an article on iPhone and seamlessly continue on their Mac\"\n\n**AI selects this pattern because:**\n- User mentioned \"start on iPhone and continue on Mac\" (classic Handoff use case)\n- Cross-device workflow needed\n- Apple ecosystem app\n- Seamless transition desired\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│  [Article on iPhone]               │\n│                                    │\n│  \"The Future of Design\"            │\n│  by Sarah Wilson                   │\n│                                    │\n│  [Reading progress: 40%]           │\n│                                    │\n├────────────────────────────────────┤\n│  [Laptop] Continue on Mac          │\n│  NewsReader - Article              │\n│  [  Open on MacBook  ]             │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Handoff lets users pick up exactly where they left off on different device. Requires iCloud account and devices on same network. Position is synced automatically. Alternative: manual bookmark sync, but Handoff is instant and seamless. Only works in Apple ecosystem.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Activity type** - Document, webpage, media playback, form in progress\n2. **Sync data** - Reading position, form state, playback time, clipboard content\n3. **Device indicators** - Show which devices are available/connected\n4. **Notifications** - How prominently to show \"Continue on X\" options\n5. **Settings** - Which continuity features to enable/configure\n\n**App-specific adaptations:**\n- **Social app:** Draft posts, unsent messages sync across devices\n- **E-commerce:** Shopping cart, browsing history continue on other devices\n- **SaaS dashboard:** Open project on Mac, continue editing on iPad\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Background system feature, surfaces when relevant\n- Notification/banner when activity can continue elsewhere\n- Settings screen for configuration\n- Device list in app settings\n\n**What comes before:**\n- User starts activity on one device (reading, editing, browsing)\n- User's other devices are nearby and signed in to same iCloud account\n- App supports Handoff for this activity type\n\n**What comes after:**\n- User sees notification on other device\n- User taps \"Continue on X\" → opens app → resumes activity\n- User copies content → pastes on other device (Universal Clipboard)\n- User shares file via AirDrop → recipient receives instantly\n\n**Complete flow example:**\niPhone: Start Email Draft → Switch to Mac → **Handoff Notification** → Tap \"Continue\" → Mac Opens Mail with Draft → Complete & Send\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App targets non-Apple platforms (Android, Windows, web-only)\n- Users unlikely to own multiple Apple devices\n- Activity doesn't benefit from cross-device continuation\n- State sync is too complex or large to transfer\n- Privacy concerns with device-to-device data transfer\n\n**Use instead:**\n- Cloud sync with manual device selection - For cross-platform apps\n- \"Save and continue later\" - For single-device workflows\n- QR code transfer - For occasional cross-device needs\n- Email to self - Simple alternative for occasional transfers\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Requires iCloud account and sign-in\n- Devices must be near each other or on same network\n- User must own multiple Apple devices\n- Battery drain from constant device discovery\n- Confusion if notifications appear unexpectedly\n- Privacy concerns about proximity-based features\n\n**Conversion optimization:**\n- Make continuity optional, not required\n- Clearly explain which data syncs across devices\n- Show device list so users know what's connected\n- Provide manual sync as fallback\n- Respect user's continuity settings preferences\n- Don't spam with constant \"Continue on X\" notifications\n\n**Accessibility notes:**\n- Announce Handoff notifications clearly\n- Make \"Continue on X\" buttons keyboard accessible\n- Provide alternative manual sync methods\n- Ensure device names are read clearly by screen readers\n- Support VoiceOver on all connected devices\n- Respect reduced motion settings for transitions\n\n**Platform considerations:**\n- iOS/iPadOS/macOS only (Apple ecosystem exclusive)\n- Requires iOS 8+ / macOS Yosemite+ (very broad compatibility)\n- Works with Apple Watch for certain features\n- Requires Bluetooth and WiFi enabled\n- Respects user's iCloud and Handoff settings\n- Different features available on different OS versions\n\n**Privacy/security notes:**\n- Uses end-to-end encryption for transferred data\n- Only works between user's own signed-in devices\n- Requires same iCloud account\n- User controls which features are enabled\n- Clipboard content is temporary and local\n- Handoff activities timeout after period of inactivity\n\n**Implementation notes:**\n- Use NSUserActivity for Handoff implementation\n- Register supported activity types in Info.plist\n- Minimal data in activity (use iCloud for heavy data)\n- Handle state restoration gracefully\n- Test with multiple device types (iPhone, iPad, Mac)\n- Consider battery impact of continuous advertising\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/data-table-advanced": "# Data Table Advanced\n\n**ID:** `special/data-table-advanced`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides a full-featured data table with sorting, filtering, pagination, multi-select, and bulk actions. Designed for displaying and managing large datasets in business/productivity apps.\n\n**Use this pattern when user mentions:**\n- [data-table, spreadsheet, grid, table]\n- [sortable, filterable, searchable-table]\n- [bulk-actions, multi-select-rows]\n- [pagination, large-dataset, many-rows]\n- [admin-panel, dashboard-table, enterprise]\n\n**Common contexts:**\n- Admin dashboards managing users, orders, or records\n- Analytics and reporting interfaces\n- CRM and business management tools\n- Database query results\n- Log viewers and audit trails\n- Inventory or catalog management\n\n**UX Tradeoffs:**\n- **Pro:** Displays large amounts of structured data efficiently\n- **Pro:** Sortable and filterable for data exploration\n- **Pro:** Bulk actions save time for power users\n- **Pro:** Familiar spreadsheet-like interface\n- **Con:** Complex UI with many interactive elements\n- **Con:** Difficult on small mobile screens\n- **Con:** Learning curve for all features\n- **Con:** Can feel overwhelming for simple data\n\n**Pairs well with:**\n- `forms/search-bar` - Filter table data by search\n- `forms/filter-controls` - Advanced filtering UI\n- `lists/action-list` - Bulk actions menu\n- `special/empty-states-collection` - When table is empty\n- Detail view pattern - Tap row to see full details\n\n**Variants available:**\n- **Simple Table:** Basic rows/columns, no interactions (use for \"display only, read-only\")\n- **Sortable Table:** Click headers to sort (use for \"basic organization\")\n- **Full-Featured:** All features enabled (default for \"enterprise, power users\")\n- **Mobile-Optimized:** Condensed columns, swipe actions (use for \"mobile-first, responsive\")\n\n---\n\n## Description\n\nA comprehensive data table with enterprise features: sortable columns, filterable data, multi-row selection, bulk actions, pagination, and export. Designed for managing large datasets in business applications. Supports keyboard navigation and accessibility. Common in admin panels, dashboards, and data-heavy applications.\n\n---\n\n## ASCII Wireframe\n\n### Full-Featured Data Table\n\n```\n┌────────────────────────────────────┐\n│ [Export] [Filter]  [........]  O   │\n├────────────────────────────────────┤\n│ ☐  Name        Status    Actions   │\n│ ├──────────────┼─────────┼────────┤│\n│ ☐  John Smith  Active       [...]  │\n│ ☐  Jane Doe    Active       [...]  │\n│ ☐  Bob Lee     Pending      [...]  │\n│ ☐  Alice Chen  Inactive     [...]  │\n│ ☐  Mike Davis  Active       [...]  │\n│                                    │\n│ Showing 1-5 of 127                 │\n│ [<] [1] [2] [3] ... [26] [>]       │\n├────────────────────────────────────┤\n│ 0 selected                         │\n└────────────────────────────────────┘\n```\n\n### With Sorting Indicators\n\n```\n┌────────────────────────────────────┐\n│ Users                   [+ Add]    │\n├────────────────────────────────────┤\n│ ☐  Name ▼      Email       Role    │\n│ ├──────────────┼───────────┼──────┤│\n│ ☐  Alice Chen  alice@..    Admin   │\n│ ☐  Bob Lee     bob@..      User    │ \n│ ☐  Jane Doe    jane@..     User    │\n│ ☐  John Smith  john@..     Admin   │\n│ ☐  Mike Davis  mike@..     User    │\n│                                    │\n│ Sorted by Name (A-Z)               │\n│ Page 1 of 26  [<] [>]              │\n└────────────────────────────────────┘\n```\n\n### With Active Selection\n\n```\n┌────────────────────────────────────┐\n│ ☑  Name        Status    Actions   │\n│ ├──────────────┼─────────┼────────┤│\n│ ☑  John Smith  Active       [...]  │\n│ ☑  Jane Doe    Active       [...]  │\n│ ☐  Bob Lee     Pending      [...]  │\n│ ☑  Alice Chen  Inactive     [...]  │\n│ ☐  Mike Davis  Active       [...]  │\n│                                    │\n├────────────────────────────────────┤\n│ 3 selected                         │\n│ [Delete] [Export] [Change Status]  │\n└────────────────────────────────────┘\n```\n\n### Mobile-Optimized Table\n\n```\n┌────────────────────────────────────┐\n│ Users              [Filter] [Menu] │\n├────────────────────────────────────┤\n│                                    │\n│ John Smith                     [>] │\n│ john@email.com · Admin             │\n│ Status: Active                     │\n│ ────────────────────────────────   │\n│ Jane Doe                       [>] │\n│ jane@email.com · User              │\n│ Status: Active                     │\n│ ────────────────────────────────   │\n│ Bob Lee                        [>] │\n│ bob@email.com · User               │\n│ Status: Pending                    │\n│                                    │\n│ Page 1 of 26  [<] [>]              │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[data-table, table, grid, sortable, filterable, pagination, bulk-actions, multi-select, enterprise, spreadsheet, admin]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need an admin panel to manage hundreds of users with ability to sort, filter, and bulk delete\"\n\n**AI selects this pattern because:**\n- User mentioned \"manage hundreds\" (large dataset)\n- \"sort, filter\" (table features needed)\n- \"bulk delete\" (multi-select and bulk actions)\n- Admin panel context\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│ User Management      [+ Add User]  │\n├────────────────────────────────────┤\n│ [........] O  [Filter ▼] [Export]  │\n│                                    │\n│ ☐  Name ▼      Email       Status  │\n│ ├──────────────┼───────────┼──────┤│\n│ ☐  Alice Chen  alice@..    Active  │\n│ ☐  Bob Lee     bob@..      Active  │\n│ ☐  Jane Doe    jane@..     Banned  │\n│ ☐  John Smith  john@..     Active  │\n│                                    │\n│ Showing 1-4 of 347                 │\n│ [<] [1] [2] [3] ... [87] [>]       │\n├────────────────────────────────────┤\n│ 0 selected  [Select All]           │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Full data table provides sorting by any column, filtering, and bulk operations essential for admin panel. Pagination handles large datasets. Alternative: simple list with search, but lacks power user features. Table is standard for enterprise admin tools.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Columns** - Name, type, format, and number of columns\n2. **Sorting** - Which columns are sortable, default sort order\n3. **Filters** - Quick filters, advanced filter UI, saved filters\n4. **Actions** - Bulk actions (delete, export, change status)\n5. **Pagination** - Page size (10, 25, 50, 100), infinite scroll alternative\n\n**App-specific adaptations:**\n- **Social app:** Posts table with author, date, engagement metrics, moderation actions\n- **E-commerce:** Orders table with customer, items, status, total, fulfillment\n- **SaaS dashboard:** Projects table with owner, deadline, progress, team members\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Main view in admin/management sections\n- Results display after search/filter\n- Dashboard showing key data\n\n**What comes before:**\n- User navigates to management section\n- User searches or filters data\n- User selects date range or category\n\n**What comes after:**\n- Click row → detail view/edit screen\n- Select multiple → bulk action → confirmation\n- Click column header → re-sort table\n- Change page → load next set of results\n\n**Complete flow example:**\nAdmin Dashboard → Users Tab → **Data Table** → Sort by Date → Select 5 Users → Bulk Delete → Confirm → Table Updates\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Small dataset (< 20 items) where simple list suffices\n- Mobile-only app (tables are difficult on small screens)\n- Data doesn't fit tabular structure\n- Users don't need sorting/filtering/bulk actions\n- Overly complex reduces usability\n\n**Use instead:**\n- `lists/list-with-sections` - For smaller, organized datasets\n- `content/card-feed` - For heterogeneous content\n- Simple table - When advanced features aren't needed\n- Charts/graphs - When visualization is more important than raw data\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Overwhelming number of controls and options\n- Difficult to use on mobile devices\n- Horizontal scrolling for wide tables\n- Loading performance with large datasets\n- Confusion about which actions apply to what\n\n**Conversion optimization:**\n- Start with simpler default view, progressive disclosure of features\n- Show helpful empty states before data loads\n- Preserve sort/filter state in URL for bookmarking\n- Smart defaults for sort and page size\n- Clear indication of what's selected and available actions\n- Keyboard shortcuts for power users\n\n**Accessibility notes:**\n- Use semantic HTML table elements\n- Provide row and column headers for screen readers\n- Support keyboard navigation (arrow keys, tab)\n- Announce sort changes and filter results count\n- Make checkboxes large enough (44pt target)\n- Ensure sufficient color contrast for status indicators\n- Support sticky headers for long tables\n\n**Platform considerations:**\n- Desktop: Full table works well\n- Tablet: May need horizontal scroll or fewer columns\n- Mobile: Switch to card/list view or horizontal scroll\n- Consider responsive breakpoints for column visibility\n- Progressive web app: virtual scrolling for performance\n\n**Performance considerations:**\n- Virtual scrolling for 1000+ rows\n- Debounce search/filter inputs\n- Server-side sorting and pagination for very large datasets\n- Optimize re-render on sort/filter changes\n- Show loading states during data fetches\n- Cache sorted/filtered results\n\n**Best practices:**\n- Default sort should be logical (date, name, relevance)\n- Page size options: 10, 25, 50, 100\n- Persist user preferences (sort, columns, page size)\n- Export functionality for data portability\n- Bulk select all with \"Select all 1000+ items\" option\n- Clear visual feedback for hover, active, selected states\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/document-browser": "# Document Browser\n\n**ID:** `special/document-browser`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides a file/document browsing interface with folders, file types, metadata, search, and organization features. Similar to iOS Files app or desktop file managers.\n\n**Use this pattern when user mentions:**\n- [files, documents, file-browser, file-manager]\n- [folders, directory, file-system]\n- [browse-files, organize-documents]\n- [file-picker, document-picker]\n- [cloud-storage, file-storage, document-management]\n\n**Common contexts:**\n- Document management and productivity apps\n- Cloud storage apps (Dropbox, Google Drive style)\n- File organizer and manager apps\n- Apps with document import/export\n- Note-taking apps with file attachments\n- Project management with file organization\n\n**UX Tradeoffs:**\n- **Pro:** Familiar file system metaphor\n- **Pro:** Hierarchical organization (folders/files)\n- **Pro:** Shows file metadata (size, date, type)\n- **Pro:** Supports different view modes (list, grid)\n- **Con:** Can become cluttered with many files\n- **Con:** Folder navigation adds taps/clicks\n- **Con:** Requires users understand file organization\n\n**Pairs well with:**\n- `forms/search-bar` - Search files and folders\n- `special/content-browser-grid` - Grid view alternative\n- `lists/list-with-sections` - Organize by file type or date\n- `special/context-menus` - File actions (rename, delete, move)\n- Document preview - Quick Look style preview\n\n**Variants available:**\n- **List View:** Detailed file info in list (default choice)\n- **Grid View:** Icon/thumbnail grid (use for \"visual browsing, photos\")\n- **Recent Files:** Chronological recent access (use for \"quick access, workflow\")\n- **Hierarchical:** Full folder tree navigation (use for \"complex organization\")\n\n---\n\n## Description\n\nA file and folder browsing interface showing documents with icons, names, sizes, dates, and hierarchical folder organization. Supports list and grid views, search, sorting, and file actions. Common in document management, cloud storage, and productivity apps. Provides familiar file system navigation patterns.\n\n---\n\n## ASCII Wireframe\n\n### List View with Folders\n\n```\n┌────────────────────────────────────┐\n│ [<] Documents            [Grid] [+]│\n├────────────────────────────────────┤\n│ [.....................]         O  │\n│                                    │\n│ Folders                            │\n│                                    │\n│ * Work Projects               [>]  │\n│    15 items · Updated today        │\n│                                    │\n│ [*] Personal                   [>] │\n│    8 items · Updated yesterday     │\n│                                    │\n│ Files                              │\n│                                    │\n│ [Doc] Report.pdf               [...│\n│    2.3 MB · 2 days ago             │\n│                                    │\n│ [XLS] Budget.xlsx              [...│\n│    1.1 MB · 1 week ago             │\n│                                    │\n│ [Img] Design.png               [...│\n│    4.2 MB · 2 weeks ago            │\n└────────────────────────────────────┘\n```\n\n### Grid View\n\n```\n┌────────────────────────────────────┐\n│ [<] Work Projects      [List]   [≡]│\n├────────────────────────────────────┤\n│                                    │\n│ ┌────────┐ ┌────────┐ ┌────────┐   │\n│ │ [Doc]  │ │ [XLS]  │ │ [Img]  │   │\n│ │Report  │ │Budget  │ │Design  │   │\n│ │.pdf    │ │.xlsx   │ │.png    │   │\n│ └────────┘ └────────┘ └────────┘   │\n│  2.3 MB     1.1 MB     4.2 MB      │\n│                                    │\n│ ┌────────┐ ┌────────┐ ┌────────┐   │\n│ │ [TXT]  │ │ [MP3]  │ │ [MP4]  │   │\n│ │Notes   │ │Audio   │ │Video   │   │\n│ │.txt    │ │.mp3    │ │.mp4    │   │\n│ └────────┘ └────────┘ └────────┘   │\n│  45 KB      8.2 MB     125 MB      │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Recent Files View\n\n```\n┌────────────────────────────────────┐\n│ [<] Recent                  [Menu] │\n├────────────────────────────────────┤\n│                                    │\n│ Today                              │\n│                                    │\n│ [Doc] Report.pdf               [...│\n│    Opened 2 hours ago              │\n│                                    │\n│ [XLS] Budget.xlsx              [...│\n│    Edited 5 hours ago              │\n│                                    │\n│ Yesterday                          │\n│                                    │\n│ [TXT] Meeting Notes.txt        [...│\n│    Created yesterday               │\n│                                    │\n│ This Week                          │\n│                                    │\n│ [Img] Design Mockup.png        [...│\n│    Modified 3 days ago             │\n│                                    │\n│ [MP4] Presentation.mp4         [...│\n│    Viewed 5 days ago               │\n└────────────────────────────────────┘\n```\n\n### With File Actions\n\n```\n┌────────────────────────────────────┐\n│ [<] Documents             [Select] │\n├────────────────────────────────────┤\n│                                    │\n│ [Doc] Report.pdf                   │\n│    2.3 MB · 2 days ago             │\n│       ┌─────────────┐              │\n│       │ Open        │              │\n│       │ Share       │              │\n│       │ Rename      │              │\n│       │ Move to...  │              │\n│       │ ─────────── │              │\n│       │ Delete      │              │\n│       └─────────────┘              │\n│                                    │\n│ [XLS] Budget.xlsx              [...│\n│    1.1 MB · 1 week ago             │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[document-browser, file-browser, file-manager, files, folders, documents, cloud-storage, file-system, file-picker]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need users to browse and organize their project files in folders with ability to search and preview\"\n\n**AI selects this pattern because:**\n- User mentioned \"browse\" and \"organize\" files\n- Folder organization needed\n- Search capability required\n- File management context\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│ [<] My Projects          [Grid] [+]│\n├────────────────────────────────────┤\n│ [.....................]         [?]│\n│                                    │\n│ Active Projects                    │\n│                                    │\n│ [*] Website Redesign           [>] │\n│    23 files · Updated 2 hours ago  │\n│                                    │\n│ [*] Mobile App                 [>] │\n│    18 files · Updated today        │\n│                                    │\n│ Archived Projects                  │\n│                                    │\n│ [*] 2024 Campaign              [>] │\n│    45 files · Completed            │\n│                                    │\n│ Recent Files                       │\n│                                    │\n│ [Img] Homepage-v3.png          [...│\n│    5.2 MB · 30 min ago             │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Document browser provides familiar folder organization with file metadata. Search helps find files quickly. Tap file for preview or actions. Alternative: flat list with tags, but folders are more familiar to users. Grid view available for visual browsing.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **View modes** - List, grid, or both with toggle\n2. **File metadata** - Size, date, type, tags, sharing status\n3. **Sorting** - By name, date, size, type\n4. **File actions** - Open, share, rename, move, delete, download\n5. **Organization** - Folders, tags, smart folders, favorites\n\n**App-specific adaptations:**\n- **Social app:** Shared media, group files, download status\n- **E-commerce:** Product images, invoices, receipts, order attachments\n- **SaaS dashboard:** Project files, team documents, shared resources, version history\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Main browsing interface for files\n- File picker when attaching/importing\n- Library/archive section of app\n\n**What comes before:**\n- User taps \"Files\" or \"Documents\" tab\n- User selects \"Attach file\" or \"Import\"\n- User searches for specific file\n- User navigates from folder breadcrumb\n\n**What comes after:**\n- Tap file → preview or open in viewer\n- Tap folder → navigate into folder contents\n- Long-press file → context menu with actions\n- Select multiple → bulk actions (move, delete, share)\n\n**Complete flow example:**\nHome → Documents Tab → **Document Browser** → Tap \"Work Projects\" Folder → Tap \"Report.pdf\" → Preview Opens\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App doesn't have file/document concept\n- Users only access 1-2 files (use direct access)\n- Complex folder hierarchies confuse users\n- Files are secondary to other content\n- Mobile-only app where file metaphor feels unnatural\n\n**Use instead:**\n- `content/media-gallery` - For photos/videos only\n- `lists/list-with-sections` - For simpler content organization\n- Recent/favorites list - When file system isn't needed\n- Direct links to files - For minimal file access\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Deep folder hierarchies require many taps\n- File organization requires user discipline\n- Search may be needed for findability\n- Preview/download can be slow for large files\n- Syncing state can be confusing (offline, syncing, cloud-only)\n\n**Conversion optimization:**\n- Default to recent files for quick access\n- Smart folders or saved searches for common queries\n- Breadcrumb navigation for easy backtracking\n- File previews without opening full viewer\n- Offline indicators and download options\n- Quick actions (star, pin) for important files\n\n**Accessibility notes:**\n- Provide text labels for all file type icons\n- Announce folder navigation changes\n- Support keyboard navigation (arrow keys, enter)\n- Make tap targets large enough (44pt minimum)\n- Provide alternative to long-press for actions\n- Read file metadata clearly to screen readers\n\n**Platform considerations:**\n- iOS: Use system document picker when possible for familiarity\n- Android: Similar file browser patterns available\n- Web: Desktop file manager conventions apply\n- Consider platform-specific file type associations\n- Respect system sharing capabilities\n\n**Sync and storage notes:**\n- Clear indication of cloud vs. local files\n- Offline availability indicators\n- Sync status (uploading, downloading, error)\n- Storage usage and available space\n- Handle conflicts (same file edited offline on multiple devices)\n- Background download/upload with progress\n\n**Performance notes:**\n- Lazy load folder contents (don't load all subfolders)\n- Thumbnail generation and caching\n- Paginate or virtualize for large directories\n- Consider file size limits for preview/download\n- Optimize file metadata queries\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/drag-drop-interface": "# Drag and Drop Interface\n\n**ID:** `special/drag-drop-interface`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides drag-and-drop interactions for reordering lists, moving items between containers, and file uploads. Supports touch (long-press drag) and mouse (click-drag) interactions.\n\n**Use this pattern when user mentions:**\n- [drag-drop, drag-and-drop, reorder, rearrange]\n- [move-items, organize, sort-manually]\n- [file-upload, drop-zone, upload-area]\n- [priority-list, custom-order, manual-sorting]\n- [kanban, columns, move-between-lists]\n\n**Common contexts:**\n- Reorderable lists (tasks, priorities, playlists)\n- Kanban boards (move cards between columns)\n- File upload interfaces (drag files to upload)\n- Dashboard customization (rearrange widgets)\n- Photo/media organization (arrange albums)\n- Form builders (arrange form fields)\n\n**UX Tradeoffs:**\n- **Pro:** Direct manipulation feels natural\n- **Pro:** Fast for reorganizing multiple items\n- **Pro:** Visual feedback during drag\n- **Pro:** Familiar desktop and mobile pattern\n- **Con:** Requires precise touch/mouse control\n- **Con:** May conflict with scroll gestures\n- **Con:** Accessibility challenges (need alternatives)\n- **Con:** Not discoverable without hints\n\n**Pairs well with:**\n- `lists/list-with-actions` - Combine drag with swipe actions\n- `forms/file-upload` - Drag-drop for file selection\n- Kanban/board patterns - Move cards between columns\n- `special/context-menus` - Alternative to dragging for actions\n- Edit mode - Enable/disable dragging\n\n**Variants available:**\n- **Simple Reorder:** Single list reordering (use for \"priority list, playlist\")\n- **Multi-Container:** Drag between lists/columns (use for \"kanban, categories\")\n- **File Drop Zone:** Drag files to upload (use for \"file upload, attachments\")\n- **Grid Rearrange:** Drag items in 2D grid (use for \"dashboard, photo arrange\")\n\n---\n\n## Description\n\nDrag-and-drop interactions for reordering lists, moving items between containers, and uploading files. On mobile uses long-press to initiate drag. Shows visual feedback (dragged item, drop indicators, target highlighting). Includes alternative methods for accessibility. Common in task managers, kanban boards, and file upload interfaces.\n\n---\n\n## ASCII Wireframe\n\n### Reorderable List\n\n```\n┌────────────────────────────────────┐\n│ [<] Priority Tasks        [Edit]   │\n├────────────────────────────────────┤\n│ Long-press to reorder              │\n│                                    │\n│ ≡  1. Fix login bug                │\n│    High priority                   │\n│                                    │\n│ ≡  2. Update homepage              │\n│    Medium priority                 │\n│                                    │\n│ ≡  3. Write documentation          │\n│    Low priority                    │\n│                                    │\n│ ≡  4. Code review                  │\n│    Medium priority                 │\n│                                    │\n│ [  + Add Task  ]                   │\n└────────────────────────────────────┘\n```\n\n### During Drag (Active State)\n\n```\n┌────────────────────────────────────┐\n│ [<] Priority Tasks      [Cancel]   │\n├────────────────────────────────────┤\n│                                    │\n│ ≡  1. Fix login bug                │\n│    High priority                   │\n│ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ Drop Here ┄┄┄┄┄┄┄  │\n│ ╔══════════════════════════════╗   │\n│ ║ 3. Write documentation       ║   │\n│ ║    Low priority              ║   │\n│ ╚══════════════════════════════╝   │\n│ ≡  2. Update homepage              │\n│    Medium priority                 │\n│                                    │\n│ ≡  4. Code review                  │\n│    Medium priority                 │\n└────────────────────────────────────┘\n```\n\n### File Drop Zone\n\n```\n┌────────────────────────────────────┐\n│ Upload Files                       │\n├────────────────────────────────────┤\n│                                    │\n│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐    │\n│                                    │\n│ │      [*]                    │    │\n│                                    │\n│ │  Drag files here or tap to  │    │\n│      browse                        │\n│                                    │\n│ │  Supports PDF, PNG, JPG     │    │\n│     Max 10MB per file              │\n│ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘    │\n│                                    │\n│ Uploaded Files:                    │\n│ ✓ Report.pdf (2.3 MB)          [X] │\n│ ✓ Design.png (1.8 MB)          [X] │\n└────────────────────────────────────┘\n```\n\n### Kanban/Multi-Container\n\n```\n┌────────────────────────────────────┐\n│ To Do       In Progress      Done  │\n├────────────┬────────────┬──────────┤\n│            │            │          │\n│ □ Task 1   │ □ Task 4   │ ✓ Task 7 │\n│            │   50% done │          │\n│ □ Task 2   │            │ ✓ Task 8 │\n│            │ □ Task 5   │          │\n│ □ Task 3   │   25% done │          │\n│            │            │          │\n│ + Add      │ + Add      │          │\n│            │            │          │\n└────────────┴────────────┴──────────┘\n```\n\n---\n\n## Tags\n\n[drag-drop, reorder, rearrange, file-upload, drop-zone, kanban, sortable, manual-sort, direct-manipulation]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need users to manually prioritize their task list by dragging tasks into the order they prefer\"\n\n**AI selects this pattern because:**\n- User mentioned \"manually prioritize\" and \"dragging\" (explicit drag-drop request)\n- Custom ordering needed (not alphabetical/date-based)\n- Task list context\n- User control over sequence\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│ [<] My Tasks               [Edit]  │\n├────────────────────────────────────┤\n│ Tap Edit to reorder                │\n│                                    │\n│ ≡  Buy groceries                   │\n│    Today                           │\n│                                    │\n│ ≡  Finish project proposal         │\n│    Due tomorrow                    │\n│                                    │\n│ ≡  Call dentist                    │\n│    This week                       │\n│                                    │\n│ ≡  Plan vacation                   │\n│    No due date                     │\n│                                    │\n│ [  + New Task  ]                   │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Drag-to-reorder gives users direct control over task priority. Long-press and drag on mobile, click-drag on desktop. Alternative: up/down arrow buttons, but dragging is faster for big changes. Requires Edit mode to prevent accidental reordering.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Drag handle** - Visible handle (≡) vs. drag anywhere on item\n2. **Visual feedback** - Dragged item style, drop indicators, target highlighting\n3. **Constraints** - Single list, multiple containers, grid layout\n4. **Activation** - Always draggable vs. edit mode required\n5. **Alternative methods** - Up/down buttons, context menu \"Move to...\"\n\n**App-specific adaptations:**\n- **Social app:** Reorder photo albums, story highlights, friend lists\n- **E-commerce:** Arrange product photos, customize homepage sections\n- **SaaS dashboard:** Arrange dashboard widgets, reorder project lists, kanban boards\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Edit mode for customizable lists\n- Always active for file upload zones\n- Kanban/board main interaction\n\n**What comes before:**\n- User taps \"Edit\" or \"Reorder\" button\n- User enters customization mode\n- User navigates to upload screen\n- Board/kanban screen loads\n\n**What comes after:**\n- User completes drag → item moves → order saves\n- User drops file → upload begins → progress shown\n- User taps \"Done\" → exit edit mode → order persists\n- User cancels → order reverts to previous state\n\n**Complete flow example:**\nTask List → Tap \"Edit\" → **Long-Press Task 3** → **Drag to Top** → Release → Tap \"Done\" → Order Saved\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Simple sort options suffice (alphabetical, date, etc.)\n- List items are too small for precise dragging\n- Accessibility is critical (screen reader users struggle)\n- Touch conflicts with scrolling\n- Order changes are rare (too much interaction cost)\n\n**Use instead:**\n- Sort dropdown - For standard sorting options\n- Up/down arrows - For accessible reordering\n- Number input - For exact position entry\n- Context menu \"Move to top/bottom\" - For occasional moves\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Requires precise touch/mouse control\n- May accidentally trigger when scrolling\n- Hard to use with one hand on mobile\n- Screen reader users can't use drag-drop\n- Drop target may not be obvious\n\n**Conversion optimization:**\n- Show hint on first use (\"Long-press to reorder\")\n- Visual drag handle (≡) makes draggability obvious\n- Clear drop indicators (dashed lines, spacing)\n- Haptic feedback on lift and drop (mobile)\n- Undo option after reordering\n- Auto-save order (no manual \"Save\" needed)\n\n**Accessibility notes:**\n- **Critical:** Provide alternative keyboard navigation\n- Up/down arrow keys to move items (keyboard)\n- \"Move Up\" / \"Move Down\" buttons visible in edit mode\n- Context menu with \"Move to position X\" options\n- Announce position changes to screen readers\n- Skip drag-drop for VoiceOver/TalkBack users, offer alternatives\n\n**Platform considerations:**\n- iOS: Long-press to lift, drag while pressed, release to drop\n- Android: Similar long-press pattern\n- Desktop: Click-hold-drag-release or native drag events\n- Touch conflicts with scroll - requires careful gesture detection\n- Provide visual feedback across all platforms\n\n**Implementation notes:**\n- Detect long-press (500-700ms) before initiating drag\n- Haptic feedback on lift and drop\n- Shadow/elevation on dragged item\n- Animate other items moving to make space\n- Cancel drag on scroll or gesture change\n- Save order immediately or on \"Done\" tap\n- Consider optimistic UI updates for responsiveness\n\n**Best practices:**\n- Edit mode prevents accidental reordering\n- Drag handle (≡) is clear affordance\n- Show drop target indicators\n- Animate reorder for clarity\n- Provide keyboard alternatives\n- Auto-save order changes\n- Allow undo recent reorder\n- Test with actual touch devices (not just mouse)\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/empty-states-collection": "# Empty States Collection\n\n**ID:** `special/empty-states-collection`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides a collection of empty state patterns showing helpful guidance when no content is available, encouraging users to take action to populate the interface.\n\n**Use this pattern when user mentions:**\n- \"empty state\", \"no content\", \"blank slate\"\n- \"zero state\", \"first-time experience\", \"onboarding\"\n- \"no results\", \"no data\", \"nothing to show\"\n- \"guide users\", \"encourage action\", \"first use\"\n- \"empty list\", \"empty inbox\", \"no items\"\n\n**Common contexts:**\n- First-time app use before user adds content\n- Search or filter results with no matches\n- Cleared or deleted all items from a list\n- Content hasn't loaded or synced yet\n- User hasn't enabled required permissions\n\n**UX Tradeoffs:**\n- **Pro:** Guides users on what to do next\n- **Pro:** Reduces confusion about empty screens\n- **Pro:** Opportunity to explain value proposition\n- **Con:** Takes up space that could show placeholder content\n- **Con:** May feel empty if not well-designed\n- **Con:** Overuse can make app feel barren\n\n**Pairs well with:**\n- `lists/list-with-search` - Empty search results state\n- `content/media-gallery` - No photos uploaded yet\n- `messaging/chat-interface` - No messages in conversation\n- `forms/button-styles` - Call-to-action buttons in empty states\n- `onboarding/welcome` - First-time user guidance\n\n**Variants available:**\n- **Minimal:** Icon + simple message (use for \"clear, obvious actions\")\n- **Standard:** Icon + message + CTA button (default choice)\n- **Comprehensive:** Icon + title + description + multiple CTAs (use for \"onboarding, complex scenarios\")\n\n---\n\n## Description\n\nA collection of empty state patterns for common scenarios: no messages, no search results, no photos, no favorites, and no notifications. Each includes an icon, helpful message, and call-to-action button to guide users toward populating the interface.\n\n---\n\n## ASCII Wireframe\n\n### No Messages\n\n```\n┌────────────────────────────────────┐\n│                                    │\n│              [ ]                   │\n│                                    │\n│         No Messages Yet            │\n│      Start a conversation!         │\n│                                    │\n│         [ New Message ]            │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### No Search Results\n\n```\n┌────────────────────────────────────┐\n│                                    │\n│              (?)                   │\n│                                    │\n│        No Results Found            │\n│     Try adjusting your search      │\n│                                    │\n│        [ Clear Filters ]           │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### No Photos\n\n```\n┌────────────────────────────────────┐\n│                                    │\n│              [o]                   │\n│                                    │\n│            No Photos               │\n│     Add photos to see them here    │\n│                                    │\n│         [ Take Photo ]             │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### No Favorites\n\n```\n┌────────────────────────────────────┐\n│                                    │\n│              <3                    │\n│                                    │\n│        No Favorites Yet            │\n│    Tap the heart icon to save      │\n│          your favorites            │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### No Notifications\n\n```\n┌────────────────────────────────────┐\n│                                    │\n│              (!)                   │\n│                                    │\n│         All Caught Up!             │\n│   You have no new notifications    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nspecial, empty-states-collection, ios18, accessibility\n\n---\n\n## Usage Examples\n\n**Reference in prompts:**\n- \"Use the Empty States Collection pattern\"\n- \"Adapt the Empty States Collection for [your use case]\"\n- \"Combine Empty States Collection with [other pattern]\"\n\n**Customization tips:**\n- Adjust labels for your domain\n- Add/remove fields as needed\n- Maintain 38-character width\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/error-states-collection": "# Error States Collection\n\n**ID:** `special/error-states-collection`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:** Provides a collection of error state patterns showing clear, actionable error messages with recovery options when something goes wrong in the application.\n\n**Use this pattern when user mentions:**\n- \"error state\", \"error handling\", \"error message\"\n- \"network error\", \"connection failed\", \"offline\"\n- \"404\", \"not found\", \"missing content\"\n- \"server error\", \"something went wrong\"\n- \"permission denied\", \"access required\", \"sign in required\"\n- \"loading failed\", \"couldn't load\", \"failed to fetch\"\n\n**Common contexts:**\n- Network connectivity issues or timeouts\n- Server errors or API failures\n- Content not found or deleted\n- Permission or authentication required\n- Failed data loading or sync errors\n- Invalid input or validation errors\n\n**UX Tradeoffs:**\n- **Pro:** Clear communication about what went wrong\n- **Pro:** Provides recovery actions to users\n- **Pro:** Reduces frustration with helpful guidance\n- **Con:** Can feel negative if overused\n- **Con:** May expose technical details users don't understand\n- **Con:** Interrupts user flow\n\n**Pairs well with:**\n- `special/empty-states-collection` - Similar pattern for no content\n- `feedback/toast-snackbar` - Less intrusive error notifications\n- `forms/input-validation` - Inline error messages\n- `authentication/login` - Permission errors lead to login\n- `feedback/loading-states` - Error after loading attempt\n\n**Variants available:**\n- **Minimal:** Icon + error message only (use for \"minor errors\")\n- **Standard:** Icon + message + retry button (default choice)\n- **Comprehensive:** Icon + title + description + multiple actions (use for \"critical errors, complex recovery\")\n\n---\n\n## Description\n\nA collection of error state patterns for common failure scenarios: network errors, server errors, content not found, permission required, and loading failures. Each includes an icon, clear error message, and action button to help users recover.\n\n---\n\n## ASCII Wireframe\n\n### Network Error\n\n```\n┌────────────────────────────────────┐\n│           /!\\                      │\n│     Connection Problem             │\n│                                    │\n│   Check your internet connection   │\n│         and try again.             │\n│                                    │\n│         [ Try Again ]              │\n└────────────────────────────────────┘\n```\n\n### Server Error\n\n```\n┌────────────────────────────────────┐\n│           /!\\                      │\n│     Something Went Wrong           │\n│                                    │\n│   We're working to fix this.       │\n│    Please try again in a moment.   │\n│                                    │\n│           [ Retry ]                │\n└────────────────────────────────────┘\n```\n\n### Not Found\n\n```\n┌────────────────────────────────────┐\n│           (?)                      │\n│      Content Not Found             │\n│                                    │\n│   The content you're looking for   │\n│       isn't available.             │\n│                                    │\n│          [ Go Back ]               │\n└────────────────────────────────────┘\n```\n\n### Permission Required\n\n```\n┌────────────────────────────────────┐\n│           [#]                      │\n│      Sign In Required              │\n│                                    │\n│      Please sign in to access      │\n│         this content.              │\n│                                    │\n│          [ Sign In ]               │\n└────────────────────────────────────┘\n```\n\n### Loading Failed\n\n```\n┌────────────────────────────────────┐\n│           [_]                      │\n│    Couldn't Load Content           │\n│                                    │\n│   There was a problem loading      │\n│     this page. Please try again.   │\n│                                    │\n│          [ Reload ]                │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nerror-states, error-handling, network-error, server-error, not-found, permission, loading-failed, recovery-actions\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need to show an error when the network connection fails while loading data\"\n\n**AI selects this pattern because:**\n- User mentioned \"error\" and \"network connection fails\"\n- Need to communicate failure clearly\n- Should provide retry action for recovery\n- Standard error state pattern\n\n**AI generates:**\nNetwork Error variant with connection message and \"Try Again\" button\n\n**AI explains tradeoff:**\n- \"Error state clearly explains the problem and offers recovery action. User can retry immediately. Alternative: silent failure with refresh button, but explicit error is clearer.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Error icon** - Match severity (warning, error, info)\n2. **Error message** - Specific to error type and user context\n3. **Action button** - Retry, Go Back, Sign In, Contact Support\n4. **Additional context** - Error codes, support links, help text\n\n**App-specific adaptations:**\n- **Social app:** \"Can't load posts\", \"Connection lost\", \"Try refreshing\"\n- **E-commerce:** \"Payment failed\", \"Cart unavailable\", \"Stock not found\"\n- **SaaS dashboard:** \"Data sync failed\", \"Export error\", \"Permission denied\"\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Appears when operation fails\n- Replaces expected content with error state\n- Returns to normal state after recovery action\n\n**What comes before:**\n- User attempts to load content\n- Network request times out\n- Server returns error response\n- User accesses restricted content without permission\n\n**What comes after:**\n- User taps retry → attempt action again\n- User taps go back → return to previous screen\n- User taps sign in → navigate to authentication\n- Error persists → escalate to support\n\n**Complete flow example:**\nLoad Data → Network Timeout → **Error State (Network Error)** → Tap \"Try Again\" → Successful Load\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Error is minor and can be handled inline\n- Better to fail silently with fallback content\n- Error is expected and user-triggered (use validation)\n- Error is informational only (use toast notification)\n\n**Use instead:**\n- `forms/input-validation` - For form field errors\n- `feedback/toast-snackbar` - For non-critical notifications\n- `special/empty-states-collection` - When no error but no content\n- Inline error messages - For contextual errors\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Vague error messages frustrate users\n- No recovery action leaves users stuck\n- Too technical error details confuse users\n- Error states without context feel abrupt\n\n**Conversion optimization:**\n- Use clear, non-technical language\n- Always provide actionable recovery option\n- Explain what happened and why\n- Offer alternative paths when possible\n- Consider adding support/help link for persistent errors\n- Log errors for developer investigation\n\n**Accessibility notes:**\n- Announce error to screen readers immediately\n- Use appropriate ARIA roles for error regions\n- Ensure error icons have text alternatives\n- High contrast for error text and icons\n- Clear focus management when error appears\n- Support dismissing error with keyboard\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/focus-modes": "# Focus Modes Configuration\n\n**ID:** `special/focus-modes`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides Do Not Disturb and focus mode configurations that filter notifications and limit app access based on context (work, sleep, driving, custom).\n\n**Use this pattern when user mentions:**\n- focus, focus-mode, do-not-disturb, DND\n- concentration, work-mode, quiet-mode\n- notification-filtering, silence-notifications\n- bedtime, sleep-mode, driving-mode\n- context-based-settings, activity-modes\n\n**UX Tradeoffs:**\n- **Pro:** Reduces distractions during focused activities\n- **Pro:** Context-aware (auto-enable based on time/location/activity)\n- **Pro:** Familiar iOS/Android pattern\n- **Con:** Requires setup and configuration\n- **Con:** Can cause missed important notifications\n- **Con:** Learning curve for multiple modes\n\n**Variants available:**\n- **Simple Toggle:** Basic DND on/off (use for \"simple, quick silence\")\n- **Scheduled Modes:** Time-based activation (use for \"routine, work hours, bedtime\")\n- **Smart Modes:** Auto-activation with filters (use for \"advanced, personalized, context-aware\")\n\n**Pairs well with:**\n- `settings/notification-settings` - Configure which notifications are allowed\n- `settings/preferences-advanced` - Advanced focus settings\n- `special/status-indicators` - Show active focus mode\n- Lock screen widgets - Quick focus mode toggle\n\n**Related patterns:**\n- Instead of this, consider `settings/notification-settings` if user only needs basic notification controls\n\n---\n\n## Description\n\niOS-style Focus Modes that filter notifications and limit app access based on user context (Work, Sleep, Driving, Personal, etc.). Supports scheduled activation, location triggers, and per-mode customization of allowed contacts and apps. Shows active mode status and provides quick toggle access.\n\n---\n\n## ASCII Wireframe\n\n### Focus Modes List\n\n```\n┌────────────────────────────────────┐\n│ [<] Settings      Focus       [+]  │\n├────────────────────────────────────┤\n│                                    │\n│ Active Focus                       │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [*] Work                [ON] │   │\n│ │ Filtering notifications      │   │\n│ │ Until 6:00 PM today          │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Your Focus Modes                   │\n│                                    │\n│ > [*] Do Not Disturb               │\n│   Silence all notifications        │\n│                                    │\n│ > [*] Work                         │\n│   Only work contacts and apps      │\n│   Schedule: Mon-Fri 9AM-6PM        │\n│                                    │\n│ > [*] Sleep                        │\n│   Bedtime silence                  │\n│   Schedule: 10PM-7AM daily         │\n│                                    │\n│ > [*] Fitness                      │\n│   During workouts only             │\n│                                    │\n│ > [*] Driving                      │\n│   Auto-reply to messages           │\n│   Activates: When driving          │\n│                                    │\n│ > [*] Gaming                       │\n│   Block all but games              │\n│                                    │\n│ Focus Filters                      │\n│                                    │\n│ [[x]] Share across devices         │\n│ [[x]] Show on Lock Screen          │\n│ [[x]] Dim Lock Screen              │\n│ [[ ]] Hide notification badges     │\n│                                    │\n│ [─── Configure Allowed Apps ───]   │\n│                                    │\n├────────────────────────────────────┤\n│ [Options] [Schedule] [Automation]  │\n└────────────────────────────────────┘\n```\n\n### Configure Focus Mode\n\n```\n┌────────────────────────────────────┐\n│ [<] Work Focus            [Done]   │\n├────────────────────────────────────┤\n│                                    │\n│ Allowed Notifications              │\n│                                    │\n│ People                             │\n│ > Contacts (3 selected)            │\n│   Only work team members           │\n│                                    │\n│ Apps                               │\n│ > Apps (5 selected)                │\n│   Email, Calendar, Slack...        │\n│                                    │\n│ Schedule                           │\n│                                    │\n│ [[x]] Time                         │\n│       Mon-Fri, 9:00 AM - 6:00 PM   │\n│                                    │\n│ [[ ]] Location                     │\n│       At Office                    │\n│                                    │\n│ Smart Activation                   │\n│                                    │\n│ [[ ]] When opening work apps       │\n│ [[ ]] When connected to work Wi-Fi │\n│                                    │\n│ Options                            │\n│                                    │\n│ [[x]] Dim Lock Screen              │\n│ [[x]] Show on Lock Screen          │\n│ [[ ]] Hide notification badges     │\n│                                    │\n│ Lock Screen & Home Screen          │\n│ > Customize...                     │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Quick Toggle (Control Center)\n\n```\n┌────────────────────────────────────┐\n│ Control Center                     │\n├────────────────────────────────────┤\n│                                    │\n│ [WiFi] [BT]  [Airplane] [Data]     │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [MOON] Do Not Disturb        │   │\n│ │                              │   │\n│ │ Tap to enable                │   │\n│ │ Long press for options       │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ [Brightness ──────[====]──────]    │\n│ [Volume ──────────[==]────────]    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[focus-modes, do-not-disturb, DND, notifications, work-mode, sleep-mode, driving-mode, concentration, context-aware, scheduled-silence]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I want users to silence notifications during work hours and only see urgent work messages\"\n\n**AI selects this pattern because:**\n- User mentioned \"silence notifications\" (focus/DND need)\n- \"during work hours\" (scheduled activation)\n- \"only see urgent work messages\" (filtered notifications)\n- Context-based requirement\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│ [<] Focus Modes             [+]    │\n├────────────────────────────────────┤\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [*] Work Focus          [ON] │   │\n│ │ Filtering notifications      │   │\n│ │ Until 5:00 PM                │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ > [*] Work Focus                   │\n│   Work contacts and apps only      │\n│   Schedule: Mon-Fri 9AM-5PM        │\n│   > Configure allowed contacts     │\n│                                    │\n│ > [*] Do Not Disturb               │\n│   Silence everything               │\n│                                    │\n│ > [*] Personal Time                │\n│   Family and friends only          │\n│   Schedule: Evenings and weekends  │\n│                                    │\n│ [[x]] Share across devices         │\n│ [[x]] Auto-reply when active       │\n│                                    │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Focus Mode filters notifications based on time and allowed contacts. Scheduled activation means it turns on automatically during work hours. Users can customize which contacts/apps break through. Alternative: manual DND toggle, but scheduled mode is automatic. Risk: might miss important personal messages during work.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Mode types** - Work, Sleep, Driving, Fitness, or custom named modes\n2. **Scheduling** - Time-based, location-based, or app-triggered activation\n3. **Filters** - Which people/apps are allowed to notify\n4. **Visual indicators** - Lock screen customization, status bar icon\n5. **Auto-reply** - Custom messages sent when mode is active\n\n**App-specific adaptations:**\n- **Social app:** \"Social Detox\" mode that hides social feeds but allows DMs from close friends\n- **E-commerce:** \"Shopping Focus\" that only shows order updates and delivery notifications\n- **SaaS dashboard:** \"Deep Work\" mode that hides all notifications except system alerts and urgent mentions\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Settings menu for configuration\n- Control Center for quick toggle\n- Lock screen widget for fast access\n- Auto-activates based on triggers\n\n**What comes before:**\n- User goes to Settings > Focus\n- User opens Control Center and taps Focus icon\n- Scheduled time arrives (e.g., 9 AM work start)\n- User arrives at location (e.g., office)\n\n**What comes after:**\n- Mode activates → notifications filtered\n- Lock screen shows focus status\n- Auto-reply sent to filtered contacts\n- User manually disables or schedule expires\n\n**Complete flow example:**\nSettings → Focus → Create Work Mode → Set Schedule (9-5) → Select Allowed Apps → Save → Next Day 9 AM → **Work Mode Auto-Activates** → Notifications Filtered\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App doesn't have notification system\n- Users need to see all notifications immediately (emergency, monitoring apps)\n- Filtering logic is too complex for users to configure\n- Simple \"mute all\" toggle is sufficient\n- App is not used in different contexts\n\n**Use instead:**\n- `settings/notification-settings` - For simpler notification on/off controls\n- Simple DND toggle - When basic silence is enough\n- Notification channels - For Android-style per-category control\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Initial setup requires selecting contacts and apps\n- Users might miss important notifications\n- Confusion about which mode is active\n- Schedules may conflict with unexpected events\n- Complexity of multiple modes\n\n**Conversion optimization:**\n- Provide smart defaults (pre-configured Work and Sleep modes)\n- Suggest modes based on calendar or usage patterns\n- One-tap enable from Control Center\n- Visual indicator when mode is active\n- Easy override for urgent situations\n- Quick access to \"Allow this person\" during active mode\n\n**Accessibility notes:**\n- Screen readers announce when focus mode activates\n- Large tap targets for mode toggles\n- Clear labels for each mode and its settings\n- Keyboard navigation through settings\n- High contrast for active/inactive state\n- Audio/haptic feedback when mode changes\n\n**Platform considerations:**\n- iOS 15+: Full Focus Modes with extensive customization\n- Android: Do Not Disturb with similar capabilities\n- Desktop: Focus Assist (Windows) or Do Not Disturb (macOS)\n- Cross-platform sync requires account and cloud service\n- Respect platform notification permissions\n\n**Privacy/security notes:**\n- Allowed contacts list is sensitive data\n- Auto-replies reveal user's schedule/location\n- Sync across devices requires secure cloud storage\n- Make mode settings private (not shared with apps)\n- Consider \"stealth\" mode that doesn't send auto-replies\n\n**Implementation notes:**\n- Use platform notification filtering APIs\n- Store mode configurations securely\n- Handle time zone changes for scheduled modes\n- Test location-based triggers for battery impact\n- Provide clear visual feedback when mode is active\n- Allow emergency contacts to always break through\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/live-activities": "# Live Activities & Dynamic Island\n\n**ID:** `special/live-activities`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides real-time, glanceable updates on lock screen and Dynamic Island for ongoing activities like rides, deliveries, timers, and media playback.\n\n**Use this pattern when user mentions:**\n- live-activity, live-activities, dynamic-island\n- lock-screen-widget, real-time-updates, glanceable\n- ongoing-activity, in-progress, status-widget\n- ride-tracking, delivery-tracking, timer, now-playing\n- persistent-notification, always-on-display\n\n**UX Tradeoffs:**\n- **Pro:** Glanceable updates without opening app\n- **Pro:** Always visible on lock screen\n- **Pro:** Interactive controls in compact space\n- **Con:** iOS 16+ only (limited platform support)\n- **Con:** Requires ongoing activity to justify\n- **Con:** Battery drain from constant updates\n\n**Variants available:**\n- **Minimal:** Basic status text (use for \"simple timer, minimal info\")\n- **Standard:** Status with progress bar (use for \"delivery, ride, download\")\n- **Rich Interactive:** Buttons and detailed info (use for \"media player, active controls\")\n\n**Pairs well with:**\n- `special/widgets-gallery` - Static widgets complement live activities\n- `feedback/progress-indicators` - Show progress within activity\n- Push notifications - Update live activity from server\n- `media/audio-player` - Now playing controls\n\n**Related patterns:**\n- Instead of this, consider `special/widgets-gallery` if updates aren't real-time\n- Consider push notifications if activity doesn't need constant visibility\n\n---\n\n## Description\n\niOS Live Activities show real-time, glanceable information on the lock screen and in the Dynamic Island for ongoing activities (rides, deliveries, sports scores, timers, media playback). Updates automatically without user interaction. Supports compact and expanded states with interactive buttons. Available iOS 16.1+ and requires ActivityKit.\n\n---\n\n## ASCII Wireframe\n\n### Lock Screen Live Activity\n\n```\n┌────────────────────────────────────┐\n│ [Lock Screen]         12:34 PM     │\n│                                    │\n│ Wed, January 14                    │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [@] Ride Arriving            │   │\n│ │ Driver: Sarah                │   │\n│ │ Toyota Camry - XYZ 789       │   │\n│ │ 2 min away                   │   │\n│ │ ████████░░ 80%               │   │\n│ │                              │   │\n│ │ [Call Driver]  [Cancel Ride] │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ No Older Notifications             │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Dynamic Island - Minimal State\n\n```\n┌────────────────────────────────────┐\n│         [*] [*]            12:34   │\n│ [<] Home                           │\n├────────────────────────────────────┤\n│         Timer Running              │\n│                                    │\n│  (The [*][*] represents the        │\n│   minimal Dynamic Island showing   │\n│   just an icon/indicator)          │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Dynamic Island - Compact State\n\n```\n┌────────────────────────────────────┐\n│    [*][~][ 3:42 ][*]       12:34   │\n│ [<] Now Playing                    │\n├────────────────────────────────────┤\n│         Music Controls             │\n│                                    │\n│  (Dynamic Island shows album art   │\n│   [~], song title, and time)       │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Dynamic Island - Expanded State\n\n```\n┌────────────────────────────────────┐\n│  ┌──────────────────────────────┐  │\n│  │  [*] Pizza Delivery          │  │\n│  │  From: Joe's Pizza           │  │\n│  │  ETA: 5 minutes              │  │\n│  │                              │  │\n│  │  [Track Order]  [Call Shop]  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│ [<] Home                           │\n├────────────────────────────────────┤\n│                                    │\n│  (User long-pressed Dynamic Island │\n│   to expand and see full details)  │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Multiple Activities\n\n```\n┌────────────────────────────────────┐\n│    [*][Timer][*] [*][Call][*]      │\n│                                    │\n│  (Two activities shown: Timer on   │\n│   left side, active call on right) │\n│                                    │\n│ Tap either to expand details       │\n│ Long press for full controls       │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Live Activity Types\n\n```\n┌────────────────────────────────────┐\n│ Live Activities Demo               │\n├────────────────────────────────────┤\n│                                    │\n│ Ride Sharing:                      │\n│ ┌──────────────────────────────┐   │\n│ │ [@] Driver arriving          │   │\n│ │ Sarah - Toyota Camry         │   │\n│ │ 2 min away - ████████░░ 80%  │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Delivery Tracking:                 │\n│ ┌──────────────────────────────┐   │\n│ │ [*] Order en route           │   │\n│ │ Pizza from Joe's             │   │\n│ │ ETA: 15 min                  │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Timer:                             │\n│ ┌──────────────────────────────┐   │\n│ │ [CLOCK] 5:30 remaining       │   │\n│ │ ████████░░░░░░░░ 45%         │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Sports Score:                      │\n│ ┌──────────────────────────────┐   │\n│ │ Lakers 98 - Warriors 102     │   │\n│ │ Q4 - 3:42 remaining          │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ [Start Demo Activity]              │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[live-activities, dynamic-island, lock-screen, real-time, ios16, widgets, glanceable, ongoing-activity, status-updates, interactive-widget]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I want users to track their food delivery in real-time from the lock screen without opening the app\"\n\n**AI selects this pattern because:**\n- User mentioned \"real-time\" and \"lock screen\" (Live Activity use case)\n- \"without opening the app\" (glanceable requirement)\n- Delivery tracking (ongoing activity with updates)\n- Monitoring active status\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│ [Lock Screen]         3:45 PM      │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [*] Your order is on the way │   │\n│ │                              │   │\n│ │ From: Burger Palace          │   │\n│ │ Driver: Mike                 │   │\n│ │                              │   │\n│ │ ETA: 8 minutes               │   │\n│ │ ██████████░░░░ 70%           │   │\n│ │                              │   │\n│ │ [Track Map]   [Contact]      │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ No Other Notifications             │\n│                                    │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Live Activity shows real-time delivery progress on lock screen. Updates automatically as driver moves. User can track without unlocking phone. Alternative: push notifications, but those are transient. Live Activity stays visible until delivery completes. Requires iOS 16.1+ and ActivityKit integration. Battery cost for constant updates.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Activity type** - Ride, delivery, timer, workout, media, sports score\n2. **Update frequency** - Real-time location, periodic status, event-driven\n3. **Interactive buttons** - Call, cancel, pause, track, view details\n4. **Progress indicators** - Time remaining, distance, percentage\n5. **Visual style** - Compact vs. expanded layouts, branding\n\n**App-specific adaptations:**\n- **Social app:** Live stream viewer count, ongoing voice chat participants, story posting progress\n- **E-commerce:** Order fulfillment stages, package delivery tracking, flash sale countdown\n- **SaaS dashboard:** Build/deploy progress, system status monitor, meeting timer with participants\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Starts when ongoing activity begins\n- Visible on lock screen and Dynamic Island\n- Updates in real-time without user input\n- Ends when activity completes\n\n**What comes before:**\n- User starts an activity (orders food, calls ride, starts timer)\n- App creates Live Activity via ActivityKit\n- System displays activity on lock screen\n- Dynamic Island shows compact version\n\n**What comes after:**\n- Activity updates automatically (location, status, time)\n- User can tap to open full app\n- User can interact with buttons (call, cancel, etc.)\n- Activity ends → disappears from lock screen\n\n**Complete flow example:**\nOrder Food → Payment → **Live Activity Starts** → Lock Screen Shows Delivery Progress → Updates Every 30sec → Delivered → Activity Ends\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Activity is not ongoing or real-time (use static widget instead)\n- Platform is not iOS 16.1+ (not available)\n- Updates are infrequent (hourly or less - use notifications)\n- Activity completes in < 30 seconds (too brief)\n- No meaningful status to show between start and finish\n\n**Use instead:**\n- `special/widgets-gallery` - For static, periodic information\n- Push notifications - For one-time alerts\n- Badge counter - For count of pending items\n- In-app status screen - For detailed non-glanceable tracking\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Only works on iOS 16.1+ (excludes older devices)\n- Limited screen space in compact mode\n- Can't show too much detail in minimal state\n- Battery drain from frequent updates\n- Users must keep activity running to see updates\n\n**Conversion optimization:**\n- Use for high-value activities users want to monitor\n- Provide interactive buttons for quick actions\n- Update frequently enough to feel live (but not wasteful)\n- Clear visual hierarchy in compact space\n- Graceful degradation on older iOS (fallback to notifications)\n- Auto-end activity when no longer relevant\n\n**Accessibility notes:**\n- VoiceOver reads activity updates when screen wakes\n- Interactive buttons must have clear labels\n- Progress indicators should announce percentage\n- Support Dynamic Type for text scaling\n- Ensure sufficient color contrast\n- Haptic feedback when activity state changes\n\n**Platform considerations:**\n- iOS 16.1+ only (iPhone 14 Pro for Dynamic Island)\n- iPad shows Live Activities in Lock Screen\n- Apple Watch can mirror select Live Activities\n- Not available on Android (platform-exclusive feature)\n- Requires WidgetKit and ActivityKit frameworks\n- Push-to-update via ActivityKit push notifications\n\n**Battery and performance:**\n- Update only when meaningful change occurs\n- Batch updates when possible\n- Use efficient background processing\n- End activity promptly when completed\n- Consider user's Low Power Mode\n- Test battery impact of update frequency\n\n**Implementation notes:**\n- Use ActivityKit to start/update/end activities\n- Define ActivityAttributes for your activity type\n- Implement ActivityConfiguration widget\n- Support both lock screen and Dynamic Island layouts\n- Handle activity updates via push or local updates\n- Set stale date for when activity becomes irrelevant\n- Test on devices with and without Dynamic Island\n\n**Best practices:**\n- Start activity only for meaningful ongoing events\n- Update when status actually changes (not on fixed timer)\n- Provide 1-2 quick action buttons\n- Show estimated time remaining when possible\n- Use progress bars for visual clarity\n- End activity automatically when complete\n- Handle background updates efficiently\n- Respect user's notification preferences\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/live-activity-widget": "# Live Activity Widget\n\n**ID:** `special/live-activity-widget`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays real-time progress and status updates on iOS lock screen and Dynamic Island for ongoing activities like deliveries, workouts, sports games, or ride-sharing.\n\n**Use this pattern when user mentions:**\n- \"live activity\", \"live updates\", \"lock screen widget\"\n- \"real-time status\", \"ongoing activity\", \"progress tracking\"\n- \"delivery tracking\", \"order status\", \"ride tracking\"\n- \"workout progress\", \"timer\", \"game score\"\n- \"dynamic island\", \"iOS lock screen\", \"always-on display\"\n- \"users need to see status without opening app\"\n\n**Common contexts:**\n- Delivery and food ordering apps\n- Ride-sharing and navigation apps\n- Fitness and workout tracking\n- Sports score tracking\n- Timer and countdown apps\n- Music and audio playback\n\n**UX Tradeoffs:**\n- **Pro:** Instant status visibility without opening app\n- **Pro:** Reduces app launches for status checks\n- **Pro:** Native iOS integration feels premium\n- **Con:** iOS-only feature (no Android equivalent)\n- **Con:** Limited interaction capabilities\n- **Con:** Requires WidgetKit implementation\n\n**Pairs well with:**\n- `navigation/tab-bar-interface` - Main app navigation\n- `special/widgets-gallery` - Home screen widgets\n- `notifications/push-notification` - Alert users to status changes\n- `special/loading-states` - Progress indicators\n- `dashboard/metrics-dashboard` - Detailed activity view\n\n**Variants available:**\n- **Minimal:** Simple status text and icon (use for \"basic tracking\" or \"simple timer\")\n- **Standard:** Status, progress bar, time remaining (use for most tracking scenarios)\n- **Comprehensive:** Multiple metrics, action buttons, rich visuals (use for \"detailed tracking\" or \"interactive widget\")\n\n**Related patterns:**\n- Instead of this, consider `special/widgets-gallery` if updates don't need to be real-time\n- Instead of this, consider `notifications/push-notification` if just alerting users to changes\n- Combine with `special/offline-mode` for graceful degradation when network unavailable\n\n---\n\n## Description\n\niOS Live Activity widget that displays on lock screen and Dynamic Island, providing real-time updates for ongoing activities. Shows status, progress, and key metrics without requiring users to open the app. Use for time-sensitive activities where users need frequent status checks.\n\n---\n\n## ASCII Wireframe\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ Lock Screen Live Activity          │\n├────────────────────────────────────┤\n│                                    │\n│  [o] Workout Timer                 │\n│                                    │\n│      25:30 remaining               │\n│                                    │\n│      Running • Cardio              │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Standard Variant\n\n```\n┌────────────────────────────────────┐\n│ Lock Screen Live Activity          │\n├────────────────────────────────────┤\n│                                    │\n│  [PIZZA] Order Status              │\n│                                    │\n│  Preparing your order...           │\n│                                    │\n│  [████████░░░░░░░░] 50%            │\n│                                    │\n│  Estimated: 15 min                 │\n│                                    │\n│  Luigi's Pizza • Order #4821       │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│ Lock Screen + Dynamic Island       │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [i] Dynamic Island           │  │\n│  │  [BIKE] 2.4 mi • 8:42        │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [CAR] Ride to Downtown            │\n│                                    │\n│  Alex is arriving now              │\n│                                    │\n│  [████████████████░░] 90%          │\n│                                    │\n│  ┌─────────────┐  ┌─────────────┐  │\n│  │ 2 min away  │  │ Toyota •543 │  │\n│  └─────────────┘  └─────────────┘  │\n│                                    │\n│  [  Message  ] [  Cancel Ride  ]   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nlive-activity, lock-screen, dynamic-island, real-time, ios, widgets, status-tracking, progress, ongoing-activity, live-updates\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I'm building a food delivery app and want users to track their order status from the lock screen\"\n\n**AI selects this pattern because:**\n- User mentioned \"track order status\" (ongoing activity)\n- Lock screen mention indicates Live Activity need\n- Food delivery is perfect Live Activity use case\n- Real-time updates enhance user experience\n\n**AI generates:**\nStandard variant with order status, progress bar, estimated time, restaurant name, and order number. Shows delivery progress without opening app.\n\n**AI explains tradeoff:**\n- \"Live Activity keeps users informed without opening app (reduces anxiety, fewer status checks). Progress bar shows clear visual feedback. iOS-only limitation means Android users won't have this feature. Limited interaction (can't modify order from widget).\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Status text** - Adapt to domain: \"Arriving in 3 min\", \"Round 2 of 3\", \"2.4 miles completed\"\n2. **Progress indicator** - Progress bar, timer, distance, score, percentage based on activity type\n3. **Action buttons** - Cancel, pause, message, navigate based on what users need\n4. **Metrics display** - Time, distance, score, count depending on activity being tracked\n\n**App-specific adaptations:**\n- **Food delivery:** Order status, progress bar, ETA, driver location\n- **Ride-sharing:** Driver arrival time, car details, trip progress, contact driver\n- **Fitness:** Workout type, elapsed time, heart rate, calories, distance\n- **Sports scores:** Team names, current score, game time, period/quarter\n- **Music player:** Song title, artist, playback progress, play/pause controls\n- **Timer/Countdown:** Remaining time, activity name, pause/stop controls\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Launched when user starts tracked activity\n- Visible on lock screen without opening app\n- Remains active until activity completes\n- Updates in real-time as status changes\n\n**What comes before:**\n- User initiates activity in main app\n- Starts workout, places order, requests ride\n- App creates Live Activity session\n\n**What comes after:**\n- Activity completes, Live Activity dismisses\n- User taps widget to open app for details\n- `navigation/home-screen` - Return to main app\n- `dashboard/metrics-dashboard` - View detailed activity history\n\n**Complete flow example:**\nPlace order in app → **Live Activity starts** → Real-time updates on lock screen → Order delivered → Activity dismisses → Return to app\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App needs to support Android (Live Activities iOS-only)\n- Activity doesn't have real-time updates\n- Status updates are infrequent (hourly or daily)\n- Activity completes in under 30 seconds\n- Target users on iOS 15 or earlier (requires iOS 16.1+)\n\n**Use instead:**\n- `special/widgets-gallery` - For static or infrequent updates\n- `notifications/push-notification` - For one-time alerts\n- In-app status page - For detailed tracking without widget\n- Home screen widget - For glanceable but not live data\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Users must enable Live Activities in settings\n- Limited screen space requires prioritizing key info\n- Can't show complex interactions or forms\n- Battery drain if updates too frequent\n- Must handle network failures gracefully\n\n**Conversion optimization:**\n- Show most critical info first (status, time)\n- Use progress indicators for clarity\n- Provide quick actions users actually need\n- Clear, concise text (screen space limited)\n- Update frequency balances freshness vs battery\n- Graceful fallback when activity ends\n\n**Accessibility notes:**\n- All text must be screen reader compatible\n- Icons need descriptive labels\n- Sufficient contrast for outdoor visibility\n- Action buttons need clear touch targets\n- Support Dynamic Type for text sizing\n- Announce significant status changes\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/loading-states": "# Loading States Gallery\n\n**ID:** `special/loading-states`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nCommunicates system processing status to users through visual indicators like spinners, progress bars, and skeleton screens, reducing perceived wait time and preventing user uncertainty during async operations.\n\n**Use this pattern when user mentions:**\n- \"loading\", \"loading state\", \"spinner\", \"progress\"\n- \"waiting\", \"processing\", \"fetching data\"\n- \"skeleton screen\", \"placeholder content\"\n- \"users need feedback while loading\"\n- \"async operations\", \"network requests\"\n- \"reduce perceived wait time\", \"loading UX\"\n\n**Common contexts:**\n- Initial app launch and data loading\n- Infinite scroll and pagination\n- Form submissions and save operations\n- File uploads and downloads\n- Search and filtering operations\n- Any network-dependent operation\n\n**UX Tradeoffs:**\n- **Pro:** Reduces user anxiety during waits\n- **Pro:** Prevents double-submissions\n- **Pro:** Sets expectations for wait duration\n- **Con:** Can slow perceived performance if shown too quickly\n- **Con:** May frustrate users if loading takes too long\n- **Con:** Skeleton screens require design maintenance\n\n**Pairs well with:**\n- `special/empty-states-collection` - When no data after load\n- `special/error-states-collection` - When loading fails\n- `special/offline-mode` - When network unavailable\n- `feed/infinite-scroll-feed` - Progressive loading\n- `forms/multi-step-form` - Step-by-step progress\n\n**Variants available:**\n- **Minimal:** Simple spinner only (use for \"quick operations\" or \"minimal UI\")\n- **Standard:** Spinner with message or progress bar (use for most loading scenarios)\n- **Comprehensive:** Skeleton screens, progress %, time estimates (use for \"complex loading\" or \"large data sets\")\n\n**Related patterns:**\n- Instead of this, consider instant UI updates with optimistic rendering for perceived speed\n- Instead of this, consider `special/empty-states-collection` if data genuinely empty (not loading)\n- Combine with caching strategies to minimize loading frequency\n\n---\n\n## Description\n\nCollection of loading state patterns including spinners, progress bars, and skeleton screens. Provides visual feedback during async operations to keep users informed and reduce abandonment. Choose variant based on operation duration and data complexity.\n\n---\n\n## ASCII Wireframe\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│            Loading...              │\n│                                    │\n│              ░░░░                  │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Standard Variant\n\n```\n┌────────────────────────────────────┐\n│         Loading Content            │\n├────────────────────────────────────┤\n│                                    │\n│              ░░░░                  │\n│         Loading posts...           │\n│                                    │\n│  [████████████░░░░░░] 65%          │\n│                                    │\n│         Please wait...             │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant (Skeleton Screen)\n\n```\n┌────────────────────────────────────┐\n│  < Feed                     [+]    │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ ░░░░  ░░░░░░░░░░░░░░░░       │  │\n│  │       ░░░░░░░░               │  │\n│  │                              │  │\n│  │ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒   │  │\n│  │ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒            │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ ░░░░  ░░░░░░░░░░░░░░░░       │  │\n│  │       ░░░░░░░░               │  │\n│  │                              │  │\n│  │ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒   │  │\n│  │ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒            │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ ░░░░  ░░░░░░░░░░░░░░░░       │  │\n│  │       ░░░░░░░░               │  │\n│  │                              │  │\n│  │ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒   │  │\n│  └──────────────────────────────┘  │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nloading, spinner, progress-bar, skeleton-screen, async, waiting, processing, feedback, loading-states, ux-feedback\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Users browse a social feed that loads posts from the server. I need to show something while posts are loading\"\n\n**AI selects this pattern because:**\n- User mentioned \"loads posts from server\" (async operation)\n- Need to \"show something while loading\" (explicit need)\n- Social feed context benefits from skeleton screens\n- Users expect visual feedback during loading\n\n**AI generates:**\nComprehensive variant with skeleton screens showing placeholder cards matching the feed layout. Each skeleton card has avatar, username, and content placeholders with shimmer effect.\n\n**AI explains tradeoff:**\n- \"Skeleton screens reduce perceived wait time by showing content structure immediately. Users see layout forming rather than blank screen. Requires maintaining skeleton UI matching actual content structure. For very fast loads (<200ms), skip loading state to avoid flicker.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Spinner style** - System default, custom branded spinner, or icon animation\n2. **Progress indication** - Determinate (%) vs indeterminate (spinner) based on operation predictability\n3. **Loading message** - Generic \"Loading...\" vs specific \"Fetching your photos...\"\n4. **Skeleton structure** - Match actual content layout for seamless transition\n\n**App-specific adaptations:**\n- **Social feed:** Skeleton cards with avatar, username, content placeholders\n- **E-commerce:** Product grid skeletons with image, title, price placeholders\n- **Dashboard:** Chart and metric card skeletons\n- **Chat app:** Message bubble skeletons\n- **Image gallery:** Thumbnail grid with image placeholders\n- **Form submission:** Button spinner with \"Saving...\" text\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Shown immediately when async operation starts\n- Displayed between user action and content display\n- Appears during navigation to data-heavy screens\n- Shown during refresh/reload operations\n\n**What comes before:**\n- User taps button, submits form, or navigates\n- Pull-to-refresh gesture initiated\n- App launch or tab switch\n\n**What comes after:**\n- `feed/card-feed` - Content successfully loaded\n- `special/error-states-collection` - Loading failed\n- `special/empty-states-collection` - No data returned\n- Same screen with data rendered\n\n**Complete flow example:**\nUser opens app → **Loading spinner** → Data loaded → `feed/card-feed` displays content\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Operation completes in under 200ms (causes flicker)\n- Data is cached and available instantly\n- Page/component not visible to user\n- Loading would block critical user actions unnecessarily\n\n**Use instead:**\n- Optimistic UI - Show result immediately, rollback if fails\n- Progressive enhancement - Show cached data, refresh in background\n- `special/empty-states-collection` - If genuinely no data (not loading)\n- Instant transitions - For pre-loaded data\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Loading states that appear too briefly cause flicker\n- Long loads without progress indication frustrate users\n- Missing error states trap users in endless loading\n- Skeleton screens that don't match content confuse users\n- Loading blocks user from accessing other app areas\n\n**Conversion optimization:**\n- Delay showing spinner for 200-300ms (avoid flicker on fast loads)\n- Show determinate progress for operations over 3 seconds\n- Provide time estimates for very long operations\n- Allow navigation away from loading content\n- Cache data to reduce future loading\n- Use skeleton screens for content-heavy layouts\n\n**Accessibility notes:**\n- Announce loading state to screen readers\n- Provide text alternative for visual spinners\n- Don't trap keyboard focus during loading\n- Announce completion or errors\n- Ensure sufficient color contrast for spinners\n- Avoid animations that could trigger vestibular disorders\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/map_view_001": "# Map View with Location Search\n\n**ID:** `special/map_view_001`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nInteractive map interface for discovering nearby places, viewing locations, getting directions, and exploring geographic data. Combines map visualization with search and location-based services.\n\n**Use this pattern when user mentions:**\n- \"map\", \"map view\", \"interactive map\"\n- \"find nearby\", \"discover places\", \"location search\"\n- \"directions\", \"navigation\", \"get directions\"\n- \"show on map\", \"explore area\", \"nearby locations\"\n- \"users need to find places\", \"location-based\"\n- \"geolocation\", \"POI search\", \"place discovery\"\n\n**Common contexts:**\n- Food and restaurant discovery apps\n- Travel and tourism apps\n- Real estate and property search\n- Delivery and logistics apps\n- Social location sharing\n- Event and venue discovery\n\n**UX Tradeoffs:**\n- **Pro:** Intuitive spatial understanding of locations\n- **Pro:** Easy distance comparison at a glance\n- **Pro:** Rich interaction (pan, zoom, pin tap)\n- **Con:** Requires location permissions\n- **Con:** Data-heavy (map tiles, markers)\n- **Con:** Can be overwhelming with too many pins\n\n**Pairs well with:**\n- `special/search-results-interface` - Search locations\n- `cards/detail-card` - Place information cards\n- `navigation/tab-bar-interface` - Map as main tab\n- `special/permission-requests` - Location permissions\n- `feed/card-list` - List view alternative\n- `special/bottom-sheet-modal` - Place details overlay\n\n**Variants available:**\n- **Minimal:** Basic map with user location (use for \"simple map\" or \"just show location\")\n- **Standard:** Map with search, markers, basic controls (use for most location features)\n- **Comprehensive:** Full search, filters, directions, nearby places, layers (use for \"full location experience\")\n\n**Related patterns:**\n- Instead of this, consider `feed/card-list` if spatial relationships not important\n- Instead of this, consider simple address display if map not interactive\n- Combine with `special/bottom-sheet-modal` for non-blocking place details\n\n---\n\n## Description\n\nInteractive map interface showing geographic locations with search, markers, and place discovery. Users can pan, zoom, tap markers for details, search locations, and get directions. Use for location-centric features where spatial relationships matter.\n\n---\n\n## ASCII Wireframe\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ < Map View              [Search]   │\n├────────────────────────────────────┤\n│                                    │\n│  ████████████████████████████████  │\n│  ████░░░░░░░░░░░░░░░░░░░░░░████    │\n│  ██░░░░░░░░░░░░░░░░░░░░░░░░░░██    │\n│  ██░░░░░░░░░(•)░░░░░░░░░░░░░░██    │\n│  ██░░░░░░░░░░░░░░░░░░░░░░░░░░██    │\n│  ██░░░░░░░░░░░░░░░░░░░░░░░░░░██    │\n│  ████░░░░░░░░░░░░░░░░░░░░░░████    │\n│  ████████████████████████████████  │\n│                                    │\n│  Current Location                  │\n│  123 Main St, San Francisco        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Standard Variant\n\n```\n┌────────────────────────────────────┐\n│  Find Nearby Places        [List]  │\n├────────────────────────────────────┤\n│  ┌──────────────────────────────┐  │\n│  │ [?] Search restaurants...    │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ████████████████████████████████  │\n│  ████░░░░░░░░░░░░░░░░░░░░░░████    │\n│  ██░░░░░[!]░░░░░░░░[!]░░░░░░██     │\n│  ██░░░░░░░░░(•)░░░░░░░░░░░░░██     │\n│  ██░░░[!]░░░░░░░░░░[!]░░░░░░██     │\n│  ████░░░░░░░░░░░░░░░░░░░░░░████    │\n│  ████████████████████████████████  │\n│                                    │\n│  [!] 8 places nearby               │\n│                                    │\n│  [(+)] [(-)] [(o)]                 │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│ < Find Nearby              [List]  │\n├────────────────────────────────────┤\n│  ┌──────────────────────────────┐  │\n│  │ [?] Coffee shops, parks...   │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ████████████████████████████████  │\n│  ████░░░░░░░░░░░░░░░░░░░░░░████    │\n│  ██░░[!]░░░░░░░░░░░░[!]░░░░░██     │\n│  ██░░░░░░░░(•)░░░░░░░░░░░░░░██     │\n│  ██░░░[!]░░░░░░░[!]░░░░[!]░░██     │\n│  ████░░░░░░░░░░░░░░░░░░░░░░████    │\n│  ████████████████████████████████  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [*] Blue Bottle Coffee       │  │\n│  │ ****★ 4.5 • 0.3 mi • $$$     │  │\n│  │ [Get Directions] [Call]      │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [(+)] [(-)] [(o)] [Layers]        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nmap, location, search, nearby, directions, geolocation, places, navigation, markers, interactive-map, POI\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Build a coffee shop finder where users can see nearby cafes on a map and get directions\"\n\n**AI selects this pattern because:**\n- User mentioned \"see on a map\" (explicit map request)\n- \"Nearby cafes\" indicates location-based search\n- \"Get directions\" requires map navigation\n- Perfect use case for spatial discovery\n\n**AI generates:**\nComprehensive variant with map showing cafe markers, search bar for filtering, tappable markers revealing cafe cards with ratings/distance, and \"Get Directions\" button for navigation.\n\n**AI explains tradeoff:**\n- \"Map view helps users understand spatial relationships (which cafe is closest to current route). Visual discovery easier than list. Requires location permission. Data-heavy feature. Provide list view toggle for users who prefer scanning.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Map markers** - Icons representing different place types (restaurants, shops, events)\n2. **Search scope** - Restaurants, real estate, events, users, etc.\n3. **Place cards** - Show rating, distance, price, hours, photos\n4. **Map controls** - Zoom, layers, current location, compass\n\n**App-specific adaptations:**\n- **Restaurant finder:** Food icons, rating stars, cuisine filters\n- **Real estate:** Property markers, price labels, boundary overlays\n- **Travel app:** Hotel pins, attraction icons, tourist routes\n- **Social app:** Friend location markers, check-in pins\n- **Delivery:** Driver location, delivery zones, route paths\n- **Events:** Event markers, venue boundaries, ticket availability\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Main discovery interface (often primary tab)\n- Alternative view to list layout\n- Search results visualization\n- Location picker for forms\n\n**What comes before:**\n- `navigation/tab-bar-interface` - User taps \"Map\" tab\n- `special/search-results-interface` - \"View on map\" button\n- `special/permission-requests` - Location permission granted\n\n**What comes after:**\n- `cards/detail-card` - User taps marker for details\n- `special/bottom-sheet-modal` - Place info overlay\n- External navigation app - \"Get Directions\" tapped\n- `feed/card-list` - User switches to list view\n\n**Complete flow example:**\nApp launch → `special/permission-requests` → **Map View** → Tap marker → `special/bottom-sheet-modal` with place details → Get Directions\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Spatial relationships not important to user\n- Location permissions problematic for privacy\n- Limited/expensive data concerns\n- Locations outside single geographic area\n- Users primarily search by attributes (not proximity)\n\n**Use instead:**\n- `feed/card-list` - When list view sufficient\n- Simple address text - For single static location\n- `special/search-results-interface` - Attribute-based search\n- Embedded static map - Show single location without interaction\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Location permission denial blocks core feature\n- Slow map tile loading frustrates users\n- Too many markers create visual clutter\n- Small tap targets on markers difficult on mobile\n- Users lose context when map heavily zoomed\n\n**Conversion optimization:**\n- Request location permission with clear value prop\n- Cache map tiles for faster loading\n- Cluster markers when zoomed out\n- Large tap targets (44x44pt minimum)\n- Show user location immediately\n- Provide list/map toggle for preference\n- Default zoom level shows meaningful area\n- Quick access to directions/details\n\n**Accessibility notes:**\n- Provide list view alternative for screen readers\n- Describe marker purposes in labels\n- Keyboard navigation for map controls\n- Avoid relying solely on color for markers\n- Text labels for all interactive elements\n- Announce location changes to assistive tech\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/navigation-drawer": "# Navigation Drawer\n\n**ID:** `special/navigation-drawer`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nSide panel navigation that slides in from the edge, providing access to primary navigation links, user profile, and secondary app sections. Common in Android apps and complex web applications with many sections.\n\n**Use this pattern when user mentions:**\n- \"navigation drawer\", \"side menu\", \"hamburger menu\"\n- \"slide-out menu\", \"sidebar navigation\"\n- \"drawer menu\", \"nav drawer\"\n- \"users need access to many sections\"\n- \"secondary navigation\", \"app sections menu\"\n- \"Android navigation pattern\"\n\n**Common contexts:**\n- Apps with 6+ primary sections\n- Complex multi-section applications\n- News and content apps\n- Productivity and workspace apps\n- Admin dashboards and tools\n- Cross-platform apps (Android primary)\n\n**UX Tradeoffs:**\n- **Pro:** Preserves screen space (hidden when not needed)\n- **Pro:** Accommodates many navigation items\n- **Pro:** Can include profile info and settings\n- **Con:** Less discoverable than tab bar\n- **Con:** Requires extra tap to access\n- **Con:** iOS users less familiar with pattern\n\n**Pairs well with:**\n- `navigation/tab-bar-interface` - Combine for hybrid navigation\n- `cards/profile-card` - User profile in drawer header\n- `navigation/home-screen` - Main content area\n- `settings/settings-screen` - Settings accessible from drawer\n- `authentication/login` - Sign out option in drawer\n\n**Variants available:**\n- **Minimal:** Simple link list only (use for \"basic navigation\" or \"simple menu\")\n- **Standard:** Links with icons, profile header (use for most apps)\n- **Comprehensive:** Sections, profile, settings, search, notifications (use for \"complex apps\" or \"power users\")\n\n**Related patterns:**\n- Instead of this, consider `navigation/tab-bar-interface` for 3-5 primary sections on mobile\n- Instead of this, consider `special/context-menus` for contextual actions\n- Combine with `navigation/tab-bar-interface` for two-tier navigation\n\n---\n\n## Description\n\nSlide-out side panel providing primary navigation, user profile access, and app section links. Panel slides in from left edge (typically) overlaying or pushing main content. Use for apps with many sections or when preserving screen space is critical.\n\n---\n\n## ASCII Wireframe\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│┌──────────────┐                    │\n││              │  Main Content      │\n││ [Home]       │                    │\n││              │  (Drawer open)     │\n││ [Profile]    │                    │\n││              │                    │\n││ [Settings]   │                    │\n││              │                    │\n││ [Help]       │                    │\n││              │                    │\n││ [Logout]     │                    │\n││              │                    │\n│└──────────────┘                    │\n└────────────────────────────────────┘\n```\n\n### Standard Variant\n\n```\n┌────────────────────────────────────┐\n│┌────────────────┐                  │\n││ ┌────────────┐ │  Main Content    │\n││ │ [@] Alex K │ │                  │\n││ │ alex@co.io │ │  Tap outside to  │\n││ └────────────┘ │  close drawer    │\n││                │                  │\n││ [#] Dashboard  │                  │\n││                │                  │\n││ [$] Reports    │                  │\n││                │                  │\n││ [*] Projects   │                  │\n││                │                  │\n││ [?] Help       │                  │\n││                │                  │\n││ [ ] Sign Out   │                  │\n│└────────────────┘                  │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│┌──────────────────┐                │\n││  ┌────────────┐  │  Main Content  │\n││  │ [@] Alex   │  │                │\n││  │ Pro Plan   │  │  [≡] Close     │\n││  └────────────┘  │                │\n││                  │                │\n││  ┌────────────┐  │                │\n││  │ [?] Search │  │                │\n││  └────────────┘  │                │\n││                  │                │\n││  WORKSPACE       │                │\n││  [#] Dashboard   │                │\n││  [$] Analytics   │                │\n││  [*] Projects    │                │\n││                  │                │\n││  ACCOUNT         │                │\n││  [@] Profile     │                │\n││  [+] Settings    │                │\n││  [?] Help        │                │\n││                  │                │\n││  [ ] Sign Out    │                │\n│└──────────────────┘                │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nnavigation-drawer, side-menu, hamburger-menu, sidebar, drawer, navigation, slide-out, primary-nav, app-menu\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I'm building a news app with many sections like World, Sports, Tech, Business, and users should access these from a side menu\"\n\n**AI selects this pattern because:**\n- User mentioned \"many sections\" (6+ navigation items)\n- \"Side menu\" explicitly suggests navigation drawer\n- News apps commonly use drawer pattern\n- Preserves screen space for content\n\n**AI generates:**\nStandard variant with drawer header showing app logo, navigation links for each news section (World, Sports, Tech, Business, etc.), and footer with Settings and About links.\n\n**AI explains tradeoff:**\n- \"Navigation drawer saves screen space for article content. Users can quickly switch between news sections. Drawer is less discoverable than tab bar (users must know to tap hamburger icon). Consider adding most popular sections to a bottom tab bar for faster access.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Drawer header** - User profile, app logo, account switcher, or banner\n2. **Navigation items** - Sections, features, tools based on app structure\n3. **Section grouping** - Categorize items (Workspace, Account, Admin)\n4. **Footer actions** - Settings, help, sign out, version info\n\n**App-specific adaptations:**\n- **News app:** Topic sections, saved articles, notifications, settings\n- **E-commerce:** Categories, orders, wishlist, account, support\n- **Productivity:** Workspaces, projects, teams, settings, help\n- **Social app:** Feed, messages, notifications, profile, settings\n- **Dashboard:** Data views, reports, admin, account, help\n- **Banking:** Accounts, transfers, payments, statements, support\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Accessible from any screen via hamburger icon\n- Primary navigation method for app\n- Often combined with top navigation bar\n- Persistent across app sessions\n\n**What comes before:**\n- User taps hamburger menu icon (≡)\n- Swipe from left edge gesture\n- Any screen in app\n\n**What comes after:**\n- Selected section's main screen\n- `navigation/home-screen` - Dashboard\n- `settings/settings-screen` - Settings\n- `authentication/login` - Sign out flow\n\n**Complete flow example:**\nUser on any screen → Tap hamburger icon → **Navigation Drawer opens** → Tap \"Reports\" → `dashboard/analytics-dashboard`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App has only 3-5 primary sections (use tab bar)\n- iOS-exclusive app (less familiar pattern)\n- Users need constant access to all sections\n- Navigation is primary user task\n- Target audience less tech-savvy\n\n**Use instead:**\n- `navigation/tab-bar-interface` - For 3-5 sections on mobile\n- Top navigation bar - For web apps with few sections\n- `special/context-menus` - For contextual actions\n- Visible sidebar - For desktop apps with space\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Hidden navigation reduces discoverability\n- Requires extra tap to access any section\n- Hamburger icon meaning not universal\n- Drawer can obscure important content\n- Gesture conflicts with system swipes\n\n**Conversion optimization:**\n- Include profile/account in header for quick access\n- Group related items with clear section headers\n- Highlight current active section\n- Make drawer dismissible (tap outside, swipe, back)\n- Consider hybrid approach (drawer + bottom tabs)\n- Show notification badges on relevant items\n- Quick access to search and settings\n\n**Accessibility notes:**\n- Clear label for hamburger menu button\n- Keyboard accessible drawer toggle\n- Focus management when opening/closing\n- Screen reader announces drawer state\n- All links keyboard navigable\n- Sufficient touch targets (44x44pt minimum)\n- Announce active section to assistive tech\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/offline-mode": "# Offline Mode Interface\n\n**ID:** `special/offline-mode`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nGracefully handles network unavailability by displaying cached content, explaining limitations, and providing clear feedback about offline status. Reduces frustration when connectivity lost.\n\n**Use this pattern when user mentions:**\n- \"offline\", \"offline mode\", \"no connection\"\n- \"no internet\", \"network unavailable\"\n- \"cached content\", \"work offline\"\n- \"users lose connectivity\", \"poor network\"\n- \"airplane mode\", \"download for offline\"\n- \"sync when reconnected\"\n\n**Common contexts:**\n- Reading apps (news, articles, books)\n- Music and video streaming apps\n- Note-taking and productivity apps\n- Travel and navigation apps\n- Email and messaging apps\n- Any app with downloadable content\n\n**UX Tradeoffs:**\n- **Pro:** App remains functional without network\n- **Pro:** Reduces user frustration during outages\n- **Pro:** Users can work anywhere (planes, subways)\n- **Con:** Requires caching strategy and storage\n- **Con:** Data may become stale\n- **Con:** Some features unavailable offline\n\n**Pairs well with:**\n- `special/empty-states-collection` - No cached content\n- `special/loading-states` - Syncing when reconnected\n- `special/error-states-collection` - Network errors\n- `feed/card-list` - Display cached articles\n- `notifications/push-notification` - Sync complete alerts\n\n**Variants available:**\n- **Minimal:** Simple \"No connection\" banner (use for \"basic offline\" or \"online-only apps\")\n- **Standard:** Offline indicator with cached content access (use for most apps)\n- **Comprehensive:** Full offline mode with downloads management, sync queue, offline actions (use for \"offline-first apps\")\n\n**Related patterns:**\n- Instead of this, consider `special/error-states-collection` if just showing error without offline functionality\n- Instead of this, consider blocking access if offline mode not feasible\n- Combine with download management for user-controlled offline content\n\n---\n\n## Description\n\nInterface state for when network connectivity is unavailable, displaying cached content and clearly communicating offline status. Shows what's accessible offline and what requires connection. Use for apps where users may lose connectivity or intentionally work offline.\n\n---\n\n## ASCII Wireframe\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ [!] No Internet Connection         │\n├────────────────────────────────────┤\n│                                    │\n│  You're currently offline          │\n│                                    │\n│  Some features may be unavailable  │\n│                                    │\n│  [ Try Again ]                     │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Standard Variant\n\n```\n┌────────────────────────────────────┐\n│ [!] Offline Mode                   │\n├────────────────────────────────────┤\n│                                    │\n│  No internet connection            │\n│  Viewing cached content            │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ Article: \"Design Tips\"       │  │\n│  │ Saved 2 hours ago            │  │\n│  │ [View Offline]               │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ Playlist: \"Favorites\"        │  │\n│  │ 25 songs downloaded          │  │\n│  │ [Play Offline]               │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [ Retry Connection ]              │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│ [!] Offline • Last sync: 2h ago    │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ Working offline              │  │\n│  │ 3 actions queued for sync    │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  CACHED CONTENT (48)               │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [*] Breaking News            │  │\n│  │ 12 articles • 3h ago         │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [o] Music Library            │  │\n│  │ 150 songs • 2.4 GB           │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  QUEUED ACTIONS                    │\n│  • Draft email saved               │\n│  • Note \"Meeting\" edited           │\n│  • Photo marked favorite           │\n│                                    │\n│  [Manage Downloads] [ Retry ]      │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\noffline, no-connection, cached-content, sync, network-unavailable, offline-mode, airplane-mode, offline-first\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Build a news reading app where users can read articles even without internet on planes or subways\"\n\n**AI selects this pattern because:**\n- User mentioned \"without internet\" (explicit offline need)\n- \"Planes or subways\" common offline scenarios\n- News articles perfect for caching\n- Reading doesn't require real-time data\n\n**AI generates:**\nStandard variant with offline indicator banner, list of cached articles with timestamps, \"Download for offline\" option on articles, and auto-sync message when connection restored.\n\n**AI explains tradeoff:**\n- \"Offline mode lets users read anywhere (planes, subways, poor reception areas). Articles cached automatically when viewed. Syncs new content when reconnected. Requires storage space. Some features like comments/sharing unavailable offline. Show clear indicators for what works offline.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Offline indicator** - Banner, icon, or full-screen message based on severity\n2. **Cached content display** - Show what's available offline with timestamps\n3. **Sync queue** - Display pending actions to execute when online\n4. **Download management** - Let users control what's cached\n\n**App-specific adaptations:**\n- **News/Reading:** Cached articles, auto-download on WiFi, reading progress syncs\n- **Music/Video:** Downloaded playlists, quality settings, storage management\n- **Productivity:** Offline editing, sync queue, conflict resolution\n- **Email:** Cached messages, draft queue, send when online\n- **Navigation:** Downloaded maps, offline routing, bookmarked places\n- **Social:** Cached feed, queue posts/likes, sync when reconnected\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Activated automatically when network lost\n- Banner appears at top of current screen\n- Persists across app until connection restored\n- May block certain features/sections\n\n**What comes before:**\n- User loses network connection\n- App detects network unavailable\n- Switches from online to offline mode\n\n**What comes after:**\n- User reconnects to network\n- App syncs queued actions\n- `special/loading-states` - Syncing indicator\n- Returns to normal online mode\n- May show sync complete notification\n\n**Complete flow example:**\nUser reading article → Network drops → **Offline mode activates** → User continues reading cached content → Network restored → `special/loading-states` → Synced → Normal mode\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App entirely depends on real-time data (stock trading)\n- Content can't be meaningfully cached\n- Offline functionality would mislead users\n- Security requires always-online verification\n- Caching data poses privacy/storage concerns\n\n**Use instead:**\n- `special/error-states-collection` - Block with error if offline not supported\n- Graceful degradation - Disable features, don't hide app\n- Full block - For apps that must be online only\n- Simple retry button - If offline brief and rare\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Users don't know what works offline\n- Stale cached data misleads users\n- Sync conflicts when reconnected\n- Storage fills with cached content\n- Queued actions fail when finally online\n- Users forget they're offline\n\n**Conversion optimization:**\n- Clear offline indicator always visible\n- Mark cached vs. unavailable content distinctly\n- Show cache timestamps to indicate freshness\n- Auto-download on WiFi for better offline experience\n- Queue user actions, execute when online\n- Notify users when back online\n- Let users manage storage/downloads\n- Gracefully handle sync conflicts\n\n**Accessibility notes:**\n- Announce offline status to screen readers\n- Visual and textual offline indicators\n- Clearly mark what's unavailable\n- Don't trap users in broken flows\n- Provide retry mechanisms\n- Explain why features disabled\n- Maintain navigation even offline\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/page-indicator-stepper": "# Page Indicator and Stepper\n\n**ID:** `special/page-indicator-stepper`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nVisual progress indicator showing current position in multi-step process or multi-page flow. Helps users understand where they are, how many steps remain, and navigate between steps.\n\n**Use this pattern when user mentions:**\n- \"stepper\", \"step indicator\", \"progress steps\"\n- \"multi-step\", \"wizard\", \"step-by-step\"\n- \"users need to see progress\", \"how many steps\"\n- \"onboarding flow\", \"checkout process\"\n- \"page indicator\", \"pagination dots\"\n- \"track progress through steps\"\n\n**Common contexts:**\n- Multi-step forms and wizards\n- Onboarding and setup flows\n- Checkout and payment processes\n- Tutorial and walkthrough screens\n- Image galleries and carousels\n- Multi-page registration flows\n\n**UX Tradeoffs:**\n- **Pro:** Clear progress visualization reduces abandonment\n- **Pro:** Users know how much effort remains\n- **Pro:** Can navigate to previous steps easily\n- **Con:** Discourages users if too many steps\n- **Con:** May intimidate with complex processes\n- **Con:** Requires careful step naming/numbering\n\n**Pairs well with:**\n- `forms/multi-step-form` - Form wizard navigation\n- `onboarding/tutorial-slides` - Onboarding progress\n- `ecommerce/checkout-flow` - Purchase steps\n- `carousel/image-carousel` - Gallery pagination\n- `authentication/signup-screen` - Registration steps\n\n**Variants available:**\n- **Minimal:** Simple dots or numbers (use for \"simple pagination\" or \"image carousel\")\n- **Standard:** Numbered steps with labels (use for most multi-step processes)\n- **Comprehensive:** Labeled steps with descriptions, branching paths, validation states (use for \"complex wizards\")\n\n**Related patterns:**\n- Instead of this, consider `special/loading-states` for progress bars (time-based vs. step-based)\n- Instead of this, consider single-page form if steps can be combined\n- Combine with `forms/form-validation` to show step completion status\n\n---\n\n## Description\n\nProgress indicator displaying current position in multi-step flow with visual markers for completed, current, and upcoming steps. Shows step labels and allows navigation. Use for processes with 3+ distinct sequential steps.\n\n---\n\n## ASCII Wireframe\n\n### Minimal Variant (Dots)\n\n```\n┌────────────────────────────────────┐\n│         Welcome Tour               │\n├────────────────────────────────────┤\n│                                    │\n│         ● ● ○ ○ ○                  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │                              │  │\n│  │   Content for step 2         │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [  Back  ]        [  Next  ]      │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Standard Variant\n\n```\n┌────────────────────────────────────┐\n│          Step 2 of 4               │\n├────────────────────────────────────┤\n│                                    │\n│  ● ──── ● ──── ○ ──── ○            │\n│  Info  Account  Pay   Done         │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ Account Information          │  │\n│  │                              │  │\n│  │ [@] Email                    │  │\n│  │ [___________________]        │  │\n│  │                              │  │\n│  │ [#] Password                 │  │\n│  │ [___________________]        │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [  Back  ]        [  Next  ]      │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│    Complete Your Profile           │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [✓] 1. Basic Info            │  │\n│  ├──────────────────────────────┤  │\n│  │ [•] 2. Account Setup         │  │\n│  │     Email and password       │  │\n│  ├──────────────────────────────┤  │\n│  │ [ ] 3. Preferences           │  │\n│  │     Notifications & privacy  │  │\n│  ├──────────────────────────────┤  │\n│  │ [ ] 4. Payment               │  │\n│  │     Billing information      │  │\n│  ├──────────────────────────────┤  │\n│  │ [ ] 5. Review                │  │\n│  │     Confirm and submit       │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Step 2 of 5 • 40% complete        │\n│                                    │\n│  [  Back  ]        [  Next  ]      │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nstepper, progress-indicator, wizard, multi-step, pagination, dots, steps, progress, navigation, page-indicator\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Create a 4-step checkout process: cart review, shipping info, payment, and confirmation. Users should see their progress.\"\n\n**AI selects this pattern because:**\n- User mentioned \"4-step process\" (multi-step flow)\n- \"See their progress\" explicitly requests indicator\n- Checkout is classic stepper use case\n- Helps reduce cart abandonment\n\n**AI generates:**\nStandard variant with horizontal stepper showing 4 labeled steps (Cart, Shipping, Payment, Done). Completed steps marked with checkmarks, current step highlighted, future steps grayed out. Back/Next navigation buttons.\n\n**AI explains tradeoff:**\n- \"Step indicator reduces checkout abandonment by showing progress and setting expectations (only 2 more steps!). Users can navigate back to fix errors. Seeing 4 steps upfront might discourage some users. Consider hiding step count until user commits (adds item to cart).\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Step markers** - Dots, numbers, icons, checkmarks for completed steps\n2. **Step labels** - Short names or longer descriptions\n3. **Progress visualization** - Lines, bars, or percentage complete\n4. **Navigation** - Allow jumping to previous steps or lock until current complete\n\n**App-specific adaptations:**\n- **E-commerce checkout:** Cart → Shipping → Payment → Confirmation\n- **User onboarding:** Welcome → Account → Preferences → Tutorial → Done\n- **Form wizard:** Personal Info → Address → Employment → Review → Submit\n- **Booking flow:** Destination → Dates → Guests → Extras → Payment → Confirm\n- **Profile setup:** Photo → Bio → Interests → Privacy → Complete\n- **Image carousel:** Dot pagination for photo galleries\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Top or bottom of screen during multi-step flow\n- Persistent across all steps in process\n- Updates automatically as user progresses\n- May allow clicking to jump between steps\n\n**What comes before:**\n- User initiates multi-step process\n- Lands on step 1 of flow\n- Stepper shows all steps overview\n\n**What comes after:**\n- User completes all steps\n- Confirmation or success screen\n- Return to main app flow\n- May offer to revisit/edit steps\n\n**Complete flow example:**\nStart checkout → **Step 1: Cart** → Next → **Step 2: Shipping** → Next → **Step 3: Payment** → Next → **Step 4: Confirmation** → Done\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Process has only 1-2 steps (unnecessary overhead)\n- Steps vary based on user choices (dynamic flow)\n- Order doesn't matter (not truly sequential)\n- Users need to complete non-linearly\n- Mobile space too constrained for labels\n\n**Use instead:**\n- `special/loading-states` - For time-based progress (not steps)\n- Single page - Combine steps if not truly separate\n- Tabs - If sections independent, not sequential\n- Simple progress bar - If step count unknown\n- Breadcrumbs - For hierarchical navigation (not linear)\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Too many steps discourage completion\n- Locked steps frustrate users who want to jump ahead\n- Unclear step labels confuse users\n- Can't go back to fix errors\n- Progress bar moves slowly (feels like long process)\n- Current step not clearly highlighted\n\n**Conversion optimization:**\n- Keep steps to 3-5 when possible\n- Show percentage complete for motivation\n- Allow editing previous steps\n- Auto-advance when step complete\n- Save progress (don't lose data on abandon)\n- Clear visual hierarchy (completed vs. current vs. upcoming)\n- Show time estimate (\"2 min remaining\")\n- Celebrate progress milestones\n\n**Accessibility notes:**\n- Announce current step to screen readers\n- Keyboard navigation between steps\n- Clear focus indicators\n- Describe step completion status\n- Don't rely solely on color\n- Label all interactive step markers\n- Announce progress updates\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/permission-requests": "# Permission Requests\n\n**ID:** `special/permission-requests`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nRequests user authorization for app capabilities (camera, location, notifications, etc.) with clear explanation of why permissions needed. Critical for privacy-conscious features and platform compliance.\n\n**Use this pattern when user mentions:**\n- \"permissions\", \"request permission\", \"ask for access\"\n- \"camera access\", \"location access\", \"notifications\"\n- \"users need to grant permission\", \"permission dialog\"\n- \"privacy\", \"authorization\", \"allow access\"\n- \"microphone\", \"photo library\", \"contacts\"\n- \"users need to enable features\"\n\n**Common contexts:**\n- Camera and photo features\n- Location-based services\n- Push notifications setup\n- Contacts and social features\n- Microphone and audio recording\n- Health and fitness data access\n\n**UX Tradeoffs:**\n- **Pro:** Required for privacy-sensitive features\n- **Pro:** Builds user trust with transparency\n- **Pro:** Users control their data\n- **Con:** Creates friction in onboarding\n- **Con:** Users may deny, breaking features\n- **Con:** Can't re-prompt easily if denied\n\n**Pairs well with:**\n- `onboarding/welcome` - Permission requests during setup\n- `special/system-permissions` - Settings to change later\n- `onboarding/tutorial-slides` - Explain why needed before asking\n- `special/error-states-collection` - Handle permission denial\n- `navigation/home-screen` - Navigate after granting\n\n**Variants available:**\n- **Minimal:** Single permission with basic explanation (use for \"simple request\")\n- **Standard:** Permission with clear benefits, defer option (use for most cases)\n- **Comprehensive:** Multiple permissions, detailed explanations, examples (use for \"complex setup\" or \"multiple permissions\")\n\n**Related patterns:**\n- Instead of this, consider progressive disclosure (ask when feature used, not upfront)\n- Instead of this, consider graceful degradation if permission optional\n- Combine with tutorial explaining benefit before system prompt\n\n---\n\n## Description\n\nInterface requesting user permission for system capabilities like camera, location, or notifications. Explains why permission needed and benefits to user. Use for any feature requiring iOS/Android system permissions.\n\n---\n\n## ASCII Wireframe\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│       Enable Notifications         │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │                              │  │\n│  │        [BELL ICON]           │  │\n│  │                              │  │\n│  │  Get notified about new      │  │\n│  │  messages and updates        │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [  Not Now  ]    [  Enable  ]     │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Standard Variant\n\n```\n┌────────────────────────────────────┐\n│      Location Access               │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │       [LOCATION ICON]        │  │\n│  │                              │  │\n│  │  Find nearby restaurants     │  │\n│  │  and get directions          │  │\n│  │                              │  │\n│  │  We'll ask for your location │  │\n│  │  only when using the map     │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Why we need this:                 │\n│  • Show nearby places              │\n│  • Provide accurate directions     │\n│  • Save your favorite spots        │\n│                                    │\n│  [  Maybe Later  ]  [  Continue  ] │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│     App Permissions Setup          │\n├────────────────────────────────────┤\n│                                    │\n│  To get the most from FitnessApp:  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [o] Camera Access            │  │\n│  │ Scan workout QR codes and    │  │\n│  │ take progress photos         │  │\n│  │                              │  │\n│  │ [ Grant Access ]             │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [!] Location Services        │  │\n│  │ Track runs and find nearby   │  │\n│  │ gyms                         │  │\n│  │                              │  │\n│  │ ○ While Using  ● Always      │  │\n│  │ [ Grant Access ]             │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [*] Push Notifications       │  │\n│  │ Workout reminders and        │  │\n│  │ progress updates             │  │\n│  │                              │  │\n│  │ [ Grant Access ]             │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [  Skip  ]       [  Continue  ]   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\npermissions, authorization, access-request, camera, location, notifications, privacy, system-permissions, user-consent\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Build a food delivery app that needs location to show nearby restaurants and notifications for order updates\"\n\n**AI selects this pattern because:**\n- User mentioned \"needs location\" (system permission)\n- \"Notifications for order updates\" (another permission)\n- Food delivery requires these permissions to function\n- Must request before using features\n\n**AI generates:**\nStandard variant requesting location permission first with explanation \"Find nearby restaurants and get delivery estimates.\" Then notification permission with \"Get real-time order updates and delivery notifications.\" Each shows clear benefit.\n\n**AI explains tradeoff:**\n- \"Location and notification permissions essential for core features. Request at contextual moments (location when first browsing restaurants, notifications after first order placed) rather than all upfront. Clear benefits increase approval rates. If denied, app still works but with limited functionality.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Permission type** - Camera, location, notifications, contacts, photos, microphone, health data\n2. **Timing** - Upfront during onboarding vs. just-in-time when feature needed\n3. **Explanation** - Feature-focused benefits vs. generic access request\n4. **Options** - Always/While Using/Never for location, granular permissions\n\n**App-specific adaptations:**\n- **Social app:** Contacts (find friends), camera (post photos), notifications (messages)\n- **Navigation:** Location (always for background tracking), notifications (traffic alerts)\n- **Health app:** Health data, notifications (reminders), camera (progress photos)\n- **Messaging:** Notifications (new messages), microphone (voice messages), contacts\n- **Camera app:** Camera, photo library, location (geotagging)\n- **Dating app:** Location (nearby matches), notifications, photo library\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- During onboarding flow after welcome\n- Just-in-time when user tries to use feature\n- Settings screen for re-enabling denied permissions\n- First-run experience for new installs\n\n**What comes before:**\n- `onboarding/welcome` - Welcome and value prop\n- `onboarding/tutorial-slides` - Explain features first\n- User taps feature requiring permission\n\n**What comes after:**\n- System permission dialog (iOS/Android)\n- Feature enabled if granted\n- `special/error-states-collection` - If denied, explain impact\n- `navigation/home-screen` - Continue to main app\n- Next permission request if multiple needed\n\n**Complete flow example:**\n`onboarding/welcome` → Explain value → **Permission request screen** → System dialog → Permission granted → `navigation/home-screen`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Feature works fine without permission (make it optional)\n- Can use alternative that doesn't require permission\n- Asking too early (user doesn't understand value yet)\n- Requesting multiple permissions simultaneously without context\n- Permission only for minor nice-to-have feature\n\n**Use instead:**\n- Just-in-time requests - Ask when feature first used\n- Graceful degradation - Work without permission when possible\n- Alternative features - Offer non-permission requiring options\n- Skip entirely - If permission not actually necessary\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Requesting too many permissions upfront overwhelms users\n- Generic explanations don't convey value\n- Users who deny can't easily re-enable\n- System dialogs can't be customized\n- One chance to request (re-prompting limited)\n- Users forget why they denied\n\n**Conversion optimization:**\n- Request contextually when feature first used (not upfront)\n- Show clear, specific benefits (not just \"works better\")\n- Use custom pre-permission screen before system dialog\n- Defer optional permissions until genuinely needed\n- Explain what breaks if denied\n- Provide easy path to settings if denied\n- Only request truly necessary permissions\n- Use progressive disclosure for multiple permissions\n\n**Accessibility notes:**\n- Clear, simple language explaining benefits\n- Visual icons complement text\n- Sufficient button tap targets\n- Screen reader support for all text\n- Don't rely on color alone for states\n- Announce system dialog to assistive tech\n- Provide alternative flows if denied\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/search-results-interface": "# Search Results Interface\n\n**ID:** `special/search-results-interface`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays search results with filtering, sorting, and pagination capabilities. Helps users find specific content within large datasets through keywords, categories, and refinement options.\n\n**Use this pattern when user mentions:**\n- \"search results\", \"search interface\", \"search page\"\n- \"filter results\", \"sort results\", \"refine search\"\n- \"users need to find content\", \"search functionality\"\n- \"product search\", \"content discovery\"\n- \"search and filter\", \"advanced search\"\n- \"result count\", \"pagination\"\n\n**Common contexts:**\n- E-commerce product search\n- Content libraries and databases\n- Document and file search\n- User and profile search\n- Job board and listing search\n- News and article search\n\n**UX Tradeoffs:**\n- **Pro:** Powerful discovery for large content sets\n- **Pro:** Filters help users narrow results quickly\n- **Pro:** Sorting provides different browsing strategies\n- **Con:** Can overwhelm with too many options\n- **Con:** Empty results frustrate users\n- **Con:** Complex filters create decision paralysis\n\n**Pairs well with:**\n- `forms/search-bar` - Initial search input\n- `feed/card-list` - Display search results\n- `special/empty-states-collection` - No results found\n- `special/loading-states` - Loading search results\n- `cards/product-card` - E-commerce result items\n- `navigation/tab-bar-interface` - Search as main tab\n\n**Variants available:**\n- **Minimal:** Simple results list with count (use for \"basic search\" or \"simple content\")\n- **Standard:** Results with filters, sort, count (use for most search scenarios)\n- **Comprehensive:** Advanced filters, faceted search, saved searches, result previews (use for \"e-commerce\" or \"complex datasets\")\n\n**Related patterns:**\n- Instead of this, consider browse/category navigation if users don't know what to search\n- Instead of this, consider autocomplete/suggestions for guided search\n- Combine with `special/empty-states-collection` for zero-results handling\n\n---\n\n## Description\n\nSearch results page displaying matching items with filtering, sorting, and pagination controls. Shows result count, allows refinement through filters, and offers different sort orders. Use for any search functionality beyond simple autocomplete.\n\n---\n\n## ASCII Wireframe\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ Search: \"design tools\"        [X]  │\n├────────────────────────────────────┤\n│                                    │\n│  147 results                       │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ Figma Design Tool            │  │\n│  │ Collaborative design         │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ Adobe XD                     │  │\n│  │ UI/UX design platform        │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ Sketch App                   │  │\n│  │ Vector design tool           │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│         [Load More]                │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Standard Variant\n\n```\n┌────────────────────────────────────┐\n│ [?] iphone 15           [Search]   │\n├────────────────────────────────────┤\n│                                    │\n│  [Filters ▼] [Sort: Price ▼]       │\n│                                    │\n│  1,247 results                     │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ iPhone 15 Pro         $999   │  │\n│  │ ****★ 4.5 • 256GB            │  │\n│  │ Latest flagship phone        │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ iPhone 15             $799   │  │\n│  │ ****★ 4.7 • 128GB            │  │\n│  │ Great all-rounder            │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ iPhone 15 Plus        $899   │  │\n│  │ ****★ 4.6 • 256GB            │  │\n│  │ Larger display model         │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Page 1 of 42  [<] [>]             │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│ [?] Search products...    [X]      │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ FILTERS                      │  │\n│  │ [ ] In Stock (247)           │  │\n│  │ [ ] Free Shipping (89)       │  │\n│  │                              │  │\n│  │ Price Range                  │  │\n│  │ [$0]─────[○]────[$1000]      │  │\n│  │                              │  │\n│  │ Brand                        │  │\n│  │ [ ] Apple (42)               │  │\n│  │ [ ] Samsung (38)             │  │\n│  │ [ ] Google (12)              │  │\n│  │                              │  │\n│  │ [Clear All] [Apply]          │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Sort: [Relevance ▼]               │\n│  View: [Grid] •List•               │\n│                                    │\n│  1,247 results for \"smartphones\"   │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [IMG] iPhone 15 Pro   $999   │  │\n│  │ ****★ 4.5 (2.1k reviews)     │  │\n│  │ 256GB • 5 colors • In Stock  │  │\n│  │ [Add to Cart] [Compare]      │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  << Prev  Page 1 of 42  Next >>    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nsearch-results, search, filtering, sorting, pagination, discovery, find, query-results, faceted-search\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Build an e-commerce search where users can search for products, filter by price and brand, and sort by relevance or price\"\n\n**AI selects this pattern because:**\n- User mentioned \"search for products\" (search functionality)\n- \"Filter by price and brand\" (filtering capability)\n- \"Sort by relevance or price\" (sorting options)\n- E-commerce perfect use case for robust search\n\n**AI generates:**\nComprehensive variant with search bar, filter panel (price slider, brand checkboxes, stock status), sort dropdown (Relevance, Price Low-High, Price High-Low, Rating), and paginated product results with images, prices, ratings.\n\n**AI explains tradeoff:**\n- \"Robust search helps users find products quickly. Filters reduce cognitive load (show only what matches needs). Too many filter options can overwhelm. Start with most impactful filters (price, category, availability). Add advanced filters based on user behavior data.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Filter types** - Price range, categories, attributes, ratings, availability\n2. **Sort options** - Relevance, price, popularity, newest, rating\n3. **Result display** - Grid, list, or detailed cards based on content type\n4. **Pagination** - Load more, infinite scroll, or traditional page numbers\n\n**App-specific adaptations:**\n- **E-commerce:** Price, brand, size, color, rating, shipping filters\n- **Job board:** Location, salary, experience, remote/hybrid, job type\n- **Real estate:** Price, bedrooms, location, property type, amenities\n- **Content library:** Date, author, category, length, format\n- **User search:** Location, interests, age range, online status\n- **Travel:** Dates, price, rating, amenities, location, cancellation policy\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- After user submits search query\n- Main discovery interface for searchable content\n- Refinement step after initial browse\n- Alternative to category/browse navigation\n\n**What comes before:**\n- `forms/search-bar` - User enters search query\n- `navigation/home-screen` - User taps search\n- Empty search page - User submits query\n\n**What comes after:**\n- `cards/product-card` - User taps result for details\n- `special/empty-states-collection` - No results found\n- Refined search - User applies filters\n- Cart or action - User selects result\n\n**Complete flow example:**\n`forms/search-bar` → User types \"laptops\" → **Search Results** → Apply filters → Refined results → Tap result → `cards/product-card`\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Content set small enough to browse entirely\n- Search rarely used (analytics show low usage)\n- Category navigation more intuitive for users\n- Search queries too varied to return good results\n- Content better discovered through recommendation\n\n**Use instead:**\n- Category browse - For structured, browseable content\n- Autocomplete only - For simple, quick searches\n- `feed/card-list` - Browse all content if set is small\n- Recommendation feed - For discovery without search intent\n- Filtering without search - Just filters, no query input\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Zero results dead-end users\n- Too many filters create decision paralysis\n- Unclear what filters do before applying\n- Filter combinations return no results\n- Slow search performance frustrates users\n- Pagination breaks flow vs. infinite scroll\n\n**Conversion optimization:**\n- Show result count for each filter option\n- Disable filter combinations that return zero results\n- Provide search suggestions when zero results\n- Auto-apply filters (no \"Apply\" button needed)\n- Save filter state when navigating away\n- Show \"Recently viewed\" if available\n- Highlight matching search terms in results\n- Offer \"Save search\" for returning users\n- Smart defaults for sort order\n\n**Accessibility notes:**\n- Announce result count to screen readers\n- Keyboard navigation through results\n- Clear focus indicators\n- Filter controls properly labeled\n- Screen reader announces filter changes\n- Sufficient contrast for result cards\n- Don't rely on color for filter states\n- Announce pagination changes\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/share-sheet": "# Share Sheet\n\n**ID:** `special/share-sheet`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nNative iOS/Android sharing interface allowing users to send content to other apps, people, or services. Provides quick access to messaging, social media, file saving, and system actions.\n\n**Use this pattern when user mentions:**\n- \"share\", \"share content\", \"share sheet\"\n- \"send to\", \"export\", \"share with friends\"\n- \"users need to share content\", \"sharing feature\"\n- \"social sharing\", \"send via message/email\"\n- \"save to files\", \"share options\"\n- \"native share\", \"system share dialog\"\n\n**Common contexts:**\n- Social media apps (share posts)\n- Content apps (share articles, videos)\n- E-commerce (share products)\n- Productivity apps (share documents)\n- Photo and media apps\n- Any shareable content\n\n**UX Tradeoffs:**\n- **Pro:** Familiar system pattern users know\n- **Pro:** Automatically includes installed apps\n- **Pro:** Respects user's sharing preferences\n- **Con:** Limited customization of UI\n- **Con:** Platform-specific (iOS/Android different)\n- **Con:** No control over share destination\n\n**Pairs well with:**\n- `cards/detail-card` - Share from content details\n- `feed/card-feed` - Share feed items\n- `special/context-menus` - Share as menu action\n- `navigation/tab-bar-interface` - Share button in toolbar\n- `special/bottom-sheet-modal` - Custom share options\n\n**Variants available:**\n- **Minimal:** Basic share with text/link only (use for \"simple sharing\")\n- **Standard:** Share with preview, apps, and actions (use for most cases)\n- **Comprehensive:** Rich preview, recent contacts, suggested apps, custom actions (use for \"rich content sharing\")\n\n**Related patterns:**\n- Instead of this, consider custom share modal if need branded experience\n- Instead of this, consider direct social media buttons if targeting specific platforms\n- Combine with deep linking for better shared content experience\n\n---\n\n## Description\n\nSystem share sheet presenting sharing options including messaging apps, social media, file saving, and actions. Shows content preview and adapts to installed apps. Use for any shareable content to leverage native platform sharing.\n\n---\n\n## ASCII Wireframe\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ Share                         [X]  │\n├────────────────────────────────────┤\n│                                    │\n│  Check out this article!           │\n│  https://example.com/article       │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [@]    [*]    [=]    [f]     │  │\n│  │ Mail   Msg    Copy   Files   │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [         Cancel         ]        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Standard Variant\n\n```\n┌────────────────────────────────────┐\n│  Share Article                [X]  │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [IMG] \"Top Design Tips\"      │  │\n│  │ Learn essential UX patterns  │  │\n│  │ example.com                  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  SEND TO                           │\n│  ┌──────────────────────────────┐  │\n│  │ (@) (@) (@) (@) (@)          │  │\n│  │ Alex Sam Kim Lee Tom         │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  APPS                              │\n│  ┌──────────────────────────────┐  │\n│  │ [@] [*] [T] [f] [S]          │  │\n│  │ Mail Msg Tweet FB  Slack     │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ACTIONS                           │\n│  • Copy Link                       │\n│  • Save to Reading List            │\n│  • Add to Favorites                │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│  Share Product                [X]  │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [PRODUCT IMAGE]              │  │\n│  │ iPhone 15 Pro - $999         │  │\n│  │ Natural Titanium • 256GB     │  │\n│  │ ****★ 4.5 (2.1k reviews)     │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  SHARE WITH                        │\n│  ┌──────────────────────────────┐  │\n│  │ (@) (@) (@) (@) [+]          │  │\n│  │ Mom Dad  Sis Bro  More       │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  SUGGESTED APPS                    │\n│  ┌──────────────────────────────┐  │\n│  │ [*] [@] [T] [W] [S]          │  │\n│  │ Msg Mail X   WA  Slk         │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  MORE APPS                         │\n│  • [f] Facebook                    │\n│  • [L] LinkedIn                    │\n│  • [R] Reddit                      │\n│                                    │\n│  ACTIONS                           │\n│  • Copy Link                       │\n│  • Save to Wishlist                │\n│  • Share via QR Code               │\n│  • Print Product Details           │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nshare, share-sheet, sharing, social-sharing, export, send, native-share, system-share, distribution\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Let users share products with friends via messaging apps or social media\"\n\n**AI selects this pattern because:**\n- User mentioned \"share products\" (shareable content)\n- \"With friends via messaging apps\" (social sharing)\n- Classic use case for system share sheet\n- Leverages user's installed apps\n\n**AI generates:**\nStandard variant triggered by share button on product page. Shows product preview (image, title, price), recently contacted friends, installed messaging/social apps (Messages, WhatsApp, Facebook), and actions like \"Copy Link\" and \"Save to Wishlist\".\n\n**AI explains tradeoff:**\n- \"Native share sheet familiar to users (no learning curve). Automatically includes all user's messaging and social apps. Product preview encourages sharing (visual + details). Can't customize UI or track shares through third-party apps. Consider adding custom sharing incentives (share to get discount) if tracking important.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Shared content** - Link, image, text, file, location, or combination\n2. **Preview card** - Rich preview with title, description, image, metadata\n3. **Suggested contacts** - Recent or frequent contacts for quick sharing\n4. **Custom actions** - App-specific actions beyond system defaults\n\n**App-specific adaptations:**\n- **E-commerce:** Product image, title, price, link, \"Add to Wishlist\" action\n- **Social media:** Post content, image, profile link, \"Copy Link\" action\n- **News app:** Article headline, excerpt, image, \"Save for Later\" action\n- **Photo app:** Image file, location data, \"Save to Files\", \"Print\"\n- **Restaurant app:** Restaurant details, location, hours, \"Get Directions\"\n- **Fitness app:** Workout stats, achievement image, \"Challenge Friend\"\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Accessible via share button on content\n- Often in navigation bar or context menu\n- Available on detail/view screens\n- Sometimes in bulk selection mode\n\n**What comes before:**\n- User viewing shareable content\n- User taps share icon/button\n- `cards/detail-card` - Content details page\n- `feed/card-feed` - Feed item\n\n**What comes after:**\n- User selects sharing destination\n- Content shared to selected app/contact\n- Share sheet dismisses\n- May show confirmation toast\n- Return to previous screen\n\n**Complete flow example:**\nUser views product → Taps share button → **Share Sheet appears** → Selects \"Messages\" → Chooses contact → Message app opens with product link → User sends → Returns to product page\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Need to track sharing analytics\n- Want branded sharing experience\n- Platform doesn't support (web needs custom)\n- Sharing limited to specific platforms only\n- Need to add fields before sharing\n\n**Use instead:**\n- Custom share modal - For branded experience or custom options\n- Direct social buttons - If targeting specific platforms\n- `forms/basic-form` - If collecting info before sharing\n- Email/message directly - For single-destination sharing\n- Deep link generator - For tracking shared links\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Users may not recognize share icon\n- Too many sharing options overwhelm some users\n- Can't control quality of shared previews\n- Shared links may not work outside app\n- No feedback on successful shares to third parties\n\n**Conversion optimization:**\n- Use recognizable share icon (iOS/Android standard)\n- Include share button in obvious locations\n- Provide rich link previews (Open Graph, Twitter Cards)\n- Incentivize sharing (rewards, discounts, unlocks)\n- Recent contacts surface frequently-shared-with people\n- Custom actions for app-specific features\n- Show confirmation after successful share\n\n**Accessibility notes:**\n- Clear label for share button (\"Share product\")\n- All sharing options keyboard accessible\n- Screen reader announces share options\n- Icons have text labels\n- Sufficient touch targets for all options\n- Announces when share sheet opens/closes\n- Support system text sizing\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/shopping-cart": "# Shopping Cart\n\n**ID:** `special/shopping-cart`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nE-commerce cart displaying selected items with quantity controls, pricing summary, and checkout action. Allows users to review, modify, and purchase items before completing transaction.\n\n**Use this pattern when user mentions:**\n- \"shopping cart\", \"cart\", \"basket\"\n- \"checkout\", \"purchase items\", \"buy\"\n- \"e-commerce cart\", \"order review\"\n- \"users need to see selected items\"\n- \"modify quantities\", \"remove items\"\n- \"cart summary\", \"total price\"\n\n**Common contexts:**\n- E-commerce and retail apps\n- Marketplace and shopping platforms\n- Food delivery and restaurant apps\n- Booking and reservation systems\n- Subscription and plan selection\n- Any transactional purchase flow\n\n**UX Tradeoffs:**\n- **Pro:** Clear review before purchase reduces errors\n- **Pro:** Easy quantity modification and item removal\n- **Pro:** Running total sets price expectations\n- **Con:** Additional step creates checkout friction\n- **Con:** Cart abandonment risk if too complex\n- **Con:** Mobile screen space constraints\n\n**Pairs well with:**\n- `ecommerce/product-card` - Add items to cart\n- `ecommerce/checkout-flow` - Purchase process\n- `special/page-indicator-stepper` - Multi-step checkout\n- `forms/payment-form` - Complete purchase\n- `special/empty-states-collection` - Empty cart state\n\n**Variants available:**\n- **Minimal:** Item list with total only (use for \"simple cart\" or \"quick checkout\")\n- **Standard:** Items, quantities, subtotal, tax, shipping (use for most e-commerce)\n- **Comprehensive:** Full pricing breakdown, promo codes, saved items, recommendations (use for \"full-featured cart\")\n\n**Related patterns:**\n- Instead of this, consider one-click purchase if single-item transactions\n- Instead of this, consider streamlined checkout for subscription/service selection\n- Combine with saved cart functionality for later purchase\n\n---\n\n## Description\n\nShopping cart interface listing selected items with thumbnails, quantities, prices, and checkout summary. Allows modification before purchase with clear pricing breakdown. Use for any multi-item purchase or booking flow.\n\n---\n\n## ASCII Wireframe\n\n### Minimal Variant\n\n```\n┌────────────────────────────────────┐\n│ Cart (3)                      [X]  │\n├────────────────────────────────────┤\n│                                    │\n│  • Wireless Headphones      $299   │\n│    Qty: 1                   [X]    │\n│                                    │\n│  • Phone Case               $29    │\n│    Qty: 2                   [X]    │\n│                                    │\n│  • USB Cable                $19    │\n│    Qty: 1                   [X]    │\n│                                    │\n│  ──────────────────────────────    │\n│  Total:                     $376   │\n│                                    │\n│  [       Checkout       ]          │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Standard Variant\n\n```\n┌────────────────────────────────────┐\n│ Shopping Cart (3 items)       [X]  │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [IMG] iPhone 15 Pro          │  │\n│  │ 256GB • Natural Titanium     │  │\n│  │ [-] 1 [+]  [X]       $999    │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [IMG] AirPods Pro            │  │\n│  │ 2nd Gen with USB-C           │  │\n│  │ [-] 1 [+]  [X]       $249    │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ SUMMARY                      │  │\n│  │ Subtotal:            $1,248  │  │\n│  │ Shipping:               FREE │  │\n│  │ Tax:                   $112  │  │\n│  │ ────────────────────────     │  │\n│  │ Total:               $1,360  │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  [     Proceed to Checkout     ]   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Comprehensive Variant\n\n```\n┌────────────────────────────────────┐\n│ Cart (3)          [Save] [Share]   │\n├────────────────────────────────────┤\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [?] Promo code or gift card  │  │\n│  │ [___________________] [Apply]│  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [IMG] iPhone 15 Pro          │  │\n│  │ 256GB • Natural Titanium     │  │\n│  │ In Stock • Ships today       │  │\n│  │ [-] 1 [+] [♥] [X]    $999    │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ [IMG] MagSafe Charger        │  │\n│  │ 15W Wireless Charging        │  │\n│  │ In Stock                     │  │\n│  │ [-] 2 [+] [♥] [X]     $78    │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  FREQUENTLY BOUGHT TOGETHER        │\n│  + Case $49  [Add to Cart]         │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │ ORDER SUMMARY                │  │\n│  │ Items (3):           $1,155  │  │\n│  │ Promo (SAVE10): -$115        │  │\n│  │ Shipping:               FREE │  │\n│  │ Est. Tax:              $93   │  │\n│  │ ────────────────────────     │  │\n│  │ Total:               $1,133  │  │\n│  │                              │  │\n│  │ [♥] Save for Later           │  │\n│  └──────────────────────────────┘  │\n│                                    │\n│  Delivers to: 123 Main St [Edit]   │\n│  Est. delivery: Dec 15-18          │\n│                                    │\n│  [  Continue Shopping  ] [Checkout]│\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nshopping-cart, cart, basket, checkout, e-commerce, purchase, order-review, cart-summary, transaction\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"Build an electronics store app where users can add multiple items to cart, adjust quantities, and see total before checkout\"\n\n**AI selects this pattern because:**\n- User mentioned \"add multiple items to cart\" (cart functionality)\n- \"Adjust quantities\" (modification capability)\n- \"See total before checkout\" (price summary needed)\n- E-commerce standard pattern\n\n**AI generates:**\nStandard variant with product thumbnails, names, quantities with +/- buttons, remove option, subtotal per item, and summary section showing subtotal, shipping, tax, and grand total. \"Proceed to Checkout\" button prominent.\n\n**AI explains tradeoff:**\n- \"Cart lets users review all items and total cost before committing (reduces buyer's remorse). Easy quantity adjustment prevents re-browsing if need more. Additional step adds friction but necessary for multi-item orders. Include 'Continue Shopping' link to reduce abandonment. Show shipping threshold (Free shipping over $50!) to increase order value.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Item details** - Thumbnail, title, options/variants, availability, price\n2. **Quantity controls** - +/- buttons, dropdown, direct input\n3. **Pricing breakdown** - Subtotal, shipping, tax, discounts, total\n4. **Actions** - Save for later, wishlist, remove, share cart\n\n**App-specific adaptations:**\n- **Retail:** Product options, size/color, stock status, recommendations\n- **Food delivery:** Special instructions, substitutions, delivery time estimate\n- **Booking/Travel:** Date selection, guest count, room/seat preferences\n- **Subscriptions:** Plan details, billing cycle, add-ons\n- **Digital goods:** License type, download options, instant access\n- **Marketplace:** Multiple sellers, combined/separate shipping\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Between product selection and checkout\n- Accessible via cart icon with item count badge\n- Review step before payment\n- Often skipped for single-item quick purchases\n\n**What comes before:**\n- `ecommerce/product-card` - User adds items\n- Product detail page - Add to cart\n- Search/browse - Multiple item selection\n- Saved cart - Resume previous session\n\n**What comes after:**\n- `special/page-indicator-stepper` - Checkout steps\n- `forms/payment-form` - Payment information\n- `ecommerce/checkout-flow` - Complete purchase\n- Order confirmation screen\n- `special/empty-states-collection` - Cart emptied\n\n**Complete flow example:**\nBrowse products → Add to cart → **View Cart** → Adjust quantities → Proceed to Checkout → `ecommerce/checkout-flow` → Order complete\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Single-item purchases only (direct checkout)\n- Subscription with single plan selection\n- Free content/downloads (no transaction)\n- One-click purchase model (Amazon style)\n- Service booking with single selection\n\n**Use instead:**\n- Direct checkout - For single-item transactions\n- Plan comparison - For subscription selection\n- Wishlist - For saving without purchasing\n- Quick buy button - For repeat/simple purchases\n- Summary modal - For simpler review step\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Hidden shipping costs surprise at checkout\n- Complex quantity adjustment on mobile\n- Unclear how to apply promo codes\n- Slow cart updates frustrate users\n- Items go out of stock during checkout\n- No cart persistence loses selections\n\n**Conversion optimization:**\n- Show cart item count badge on icon\n- Persist cart across sessions\n- Display shipping threshold (\"$25 to free shipping!\")\n- Prominent promo code field\n- Related product recommendations\n- Save for later option\n- Exit intent popup for abandoning users\n- Guest checkout option\n- Trust signals (secure checkout badges)\n- Clear delivery date estimates\n\n**Accessibility notes:**\n- Screen reader announces item count\n- Quantity buttons clearly labeled\n- Price updates announced\n- Keyboard navigation for all controls\n- Sufficient button tap targets\n- High contrast for pricing\n- Error messages for out-of-stock items\n- Clear focus indicators\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/system-permissions": "# System Permissions Settings\n\n**ID:** `special/system-permissions`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides settings interface for managing system-level permissions (camera, location, microphone, photos, contacts, notifications) that apps request from the operating system.\n\n**Use this pattern when user mentions:**\n- permissions, system-permissions, privacy-settings\n- camera-access, location-access, microphone-access\n- photo-library, contacts-access, notifications\n- permission-requests, access-control, privacy\n- allow, deny, permission-status, authorization\n\n**UX Tradeoffs:**\n- **Pro:** Centralized permission management\n- **Pro:** Clear visual status (allowed/denied)\n- **Pro:** User control over app capabilities\n- **Con:** Requires explaining why each permission is needed\n- **Con:** Denials can break core app features\n- **Con:** Permission fatigue (users auto-deny)\n\n**Variants available:**\n- **Simple List:** Basic permission toggles (use for \"minimal permissions, simple app\")\n- **Grouped Categories:** Organized by type (use for \"many permissions, complex app\")\n- **Progressive:** Request only when needed (use for \"better UX, contextual\")\n\n**Pairs well with:**\n- `settings/privacy-settings` - App-level privacy controls\n- `special/permission-requests` - Initial permission request dialogs\n- `feedback/error-empty-states` - When permission is denied\n- Onboarding - Explain permissions upfront\n\n**Related patterns:**\n- Instead of this, consider `settings/privacy-settings` for app-specific privacy (not system permissions)\n- Consider inline permission requests if only 1-2 permissions needed\n\n---\n\n## Description\n\nA settings screen showing all system permissions the app has requested, with current status (allowed, denied, limited) and ability to change. Common permissions include: Location, Camera, Microphone, Photos, Contacts, Calendar, Notifications, Background Refresh. Links to system settings where permissions are actually controlled. Explains what each permission is used for.\n\n---\n\n## ASCII Wireframe\n\n### Permissions Settings List\n\n```\n┌────────────────────────────────────┐\n│ [<] Privacy & Security             │\n├────────────────────────────────────┤\n│                                    │\n│ Location Services                  │\n│                                    │\n│ Location Services            [ON]  │\n│ While using the app                │\n│                                    │\n│ [!] Current Location           [>] │\n│     Cupertino, CA                  │\n│                                    │\n│ Camera & Microphone                │\n│                                    │\n│ Camera Access                [ON]  │\n│ Scan QR codes and take photos      │\n│                                    │\n│ Microphone Access           [OFF]  │\n│ Required for voice messages        │\n│ > Tap to enable in Settings        │\n│                                    │\n│ Photos & Media                     │\n│                                    │\n│ Photo Library Access         [ON]  │\n│ Selected photos only               │\n│ > Manage selected photos           │\n│                                    │\n│ Communications                     │\n│                                    │\n│ Contacts Access             [OFF]  │\n│ Find friends using contacts        │\n│ > Enable in Settings               │\n│                                    │\n│ Notifications                [ON]  │\n│ Alerts, badges, and sounds         │\n│ > Notification preferences         │\n│                                    │\n│ Background App Refresh       [ON]  │\n│ Update content in background       │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Permission Request Flow\n\n```\n┌────────────────────────────────────┐\n│ Camera Permission Needed           │\n├────────────────────────────────────┤\n│                                    │\n│ [CAMERA ICON]                      │\n│                                    │\n│ Enable Camera Access               │\n│                                    │\n│ We need camera access to:          │\n│ • Scan QR codes for quick login    │\n│ • Take profile photos              │\n│ • Share images with friends        │\n│                                    │\n│ Your photos are never uploaded     │\n│ without your permission.           │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [─────── Allow ────────]     │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [────── Not Now ──────]      │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Limited Permission (Photos)\n\n```\n┌────────────────────────────────────┐\n│ [<] Photo Access                   │\n├────────────────────────────────────┤\n│                                    │\n│ Current Access: Limited            │\n│                                    │\n│ You've selected 12 photos          │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [IMG] [IMG] [IMG] [IMG]      │   │\n│ │ [IMG] [IMG] [IMG] [IMG]      │   │\n│ │ [IMG] [IMG] [IMG] [IMG]      │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ [──── Select More Photos ────]     │\n│                                    │\n│ [── Change to Allow All Photos ─]  │\n│                                    │\n│ Access Level:                      │\n│ ( ) None                           │\n│ (x) Selected Photos (Current)      │\n│ ( ) All Photos                     │\n│                                    │\n│ Learn more about photo access      │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Denied Permission with Fix\n\n```\n┌────────────────────────────────────┐\n│ Location Services Disabled         │\n├────────────────────────────────────┤\n│                                    │\n│ [!] Location Access Denied         │\n│                                    │\n│ To use location features:          │\n│                                    │\n│ 1. Open Settings app               │\n│ 2. Tap Privacy & Security          │\n│ 3. Tap Location Services           │\n│ 4. Find \"YourApp\" in the list      │\n│ 5. Select \"While Using App\"        │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [─── Open Settings ───]      │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [──── Maybe Later ────]      │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Why we need location:              │\n│ • Show nearby restaurants          │\n│ • Accurate delivery estimates      │\n│ • Local recommendations            │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[permissions, system-permissions, privacy, access-control, camera, location, microphone, photos, contacts, notifications, authorization, settings]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need users to grant camera and photo access so they can upload profile pictures and scan QR codes\"\n\n**AI selects this pattern because:**\n- User mentioned \"grant camera and photo access\" (system permissions)\n- Multiple permission types (camera, photos)\n- Need to explain why permissions are required\n- Settings management context\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│ [<] App Permissions                │\n├────────────────────────────────────┤\n│                                    │\n│ Camera Access               [OFF]  │\n│ Scan QR codes and take photos      │\n│ > Enable in Settings               │\n│                                    │\n│ Photo Library Access        [OFF]  │\n│ Upload profile and cover photos    │\n│ > Enable in Settings               │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ [!] These permissions are    │   │\n│ │     needed for core features │   │\n│ │                              │   │\n│ │ Camera: QR code login,       │   │\n│ │ document scanning            │   │\n│ │                              │   │\n│ │ Photos: Profile pictures,    │   │\n│ │ shared images                │   │\n│ │                              │   │\n│ │ [─── Grant Access ───]       │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"System permissions settings show status and let users manage access. Camera for QR scanning and photos, Photo Library for profile pics. iOS requires users enable in Settings app after first denial. Alternative: request inline when needed, but centralized view shows all permissions. Best to explain why each permission matters before requesting.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Permission types** - Which system permissions your app needs\n2. **Explanations** - Why each permission is required (specific use cases)\n3. **Status display** - Allowed, denied, limited, not determined\n4. **Fix instructions** - How to enable in system Settings\n5. **Visual hierarchy** - Critical vs. optional permissions\n\n**App-specific adaptations:**\n- **Social app:** Contacts (find friends), Camera (posts/stories), Microphone (voice messages), Photos (share images)\n- **E-commerce:** Location (nearby stores), Camera (AR try-on, barcode scan), Notifications (order updates), Photos (product reviews)\n- **SaaS dashboard:** Notifications (alerts), Background refresh (sync data), Contacts (team invites), Calendar (meeting integration)\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Settings screen for managing permissions\n- Onboarding flow explaining permissions\n- Feature-blocking screen when permission needed\n- Privacy/Security settings section\n\n**What comes before:**\n- App first launch (permission requests appear)\n- User taps \"Settings\" or \"Privacy\"\n- Feature requires permission (e.g., tap camera button)\n- User denies permission initially\n\n**What comes after:**\n- User enables permission → return to feature\n- User taps \"Open Settings\" → iOS Settings app opens\n- Permission granted → app gains capability\n- User skips → feature remains disabled\n\n**Complete flow example:**\nOnboarding → Explain Permissions → Request Camera → **User Denies** → Settings > Permissions → Status Shows \"Denied\" → Tap \"Open Settings\" → Enable → Return to App\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App doesn't require any system permissions\n- Only one permission needed (use inline request)\n- Permissions are optional and rarely used\n- Too complex for users to understand\n- Native permission prompts are sufficient\n\n**Use instead:**\n- Inline permission requests - When requesting 1-2 permissions contextually\n- `settings/privacy-settings` - For app-level privacy controls (not system)\n- Onboarding explanation - To set expectations before requesting\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Users often deny permissions without reading\n- Re-enabling requires navigating to system Settings\n- Permission fatigue (too many requests)\n- Unclear why permission is needed\n- Features break when permissions denied\n\n**Conversion optimization:**\n- Explain why before requesting (in-app primer screen)\n- Request permissions contextually (when user tries to use feature)\n- Show value first, ask permission second\n- Provide clear instructions to re-enable\n- Graceful degradation when denied\n- Mark critical vs. optional permissions\n\n**Accessibility notes:**\n- Screen readers announce permission status clearly\n- Large tap targets for toggles and buttons\n- Clear labels for each permission type\n- Keyboard navigation through list\n- High contrast for allowed/denied states\n- Explain what permission enables (not just name)\n\n**Platform considerations:**\n- iOS: Permissions managed in Settings app (can't toggle in-app)\n- Android: Can toggle most permissions in-app\n- iOS 14+: Photo Library \"Limited Access\" option\n- iOS 13+: Location \"Allow Once\" option\n- Respect user's choices (don't spam re-requests)\n- Handle permission status changes (user revokes in Settings)\n\n**Privacy/security notes:**\n- Explain exact use case for each permission\n- Never request more than you need\n- Respect user denials (don't nag)\n- Provide privacy policy link\n- Handle permission revocation gracefully\n- Disclose any data collection clearly\n\n**Implementation notes:**\n- Check permission status before use: `AVCaptureDevice.authorizationStatus`\n- Request permission: `requestAccess(for:)` or `requestAuthorization`\n- Handle all states: notDetermined, authorized, denied, restricted\n- Open Settings: `UIApplication.openSettingsURLString`\n- Listen for app becoming active (user may have changed in Settings)\n- Provide fallback when permission denied\n\n**Best practices:**\n- Request permissions just-in-time (when user needs feature)\n- Explain why before the system dialog appears\n- Provide specific use cases (not vague \"improve experience\")\n- Make optional permissions clearly optional\n- Don't gate core features behind optional permissions\n- Update UI when permission status changes\n- Test app with all permissions denied\n- Respect \"Ask App Not to Track\" (iOS 14.5+)\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/tab-bar-interface": "# Tab Bar Interface\n\n**ID:** `special/tab-bar-interface`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides bottom tab navigation bar for switching between top-level app sections, the primary navigation pattern for iOS and Android mobile apps.\n\n**Use this pattern when user mentions:**\n- tab-bar, bottom-tabs, navigation-tabs, tabs\n- bottom-navigation, main-navigation, app-navigation\n- section-switching, primary-navigation\n- 3-5-tabs, main-sections, app-sections\n- iOS-tabs, Android-bottom-nav\n\n**UX Tradeoffs:**\n- **Pro:** Always visible, easy thumb access\n- **Pro:** Shows all main sections at once\n- **Pro:** Standard mobile pattern (familiar)\n- **Con:** Limited to 3-5 tabs (space constraints)\n- **Con:** Takes up screen real estate\n- **Con:** Not suitable for deep hierarchies\n\n**Variants available:**\n- **3-Tab Minimal:** Essential sections only (use for \"simple app, focused\")\n- **5-Tab Standard:** Full main navigation (use for \"feature-rich, multiple sections\")\n- **With Badges:** Show notification counts (use for \"updates, unread-counts\")\n\n**Pairs well with:**\n- `navigation/nav-bar-header` - Top navigation bar with title\n- `navigation/home-screen` - Landing page for tab content\n- Badge indicators - Show unread/new items\n- Modal overlays - Temporary full-screen content\n\n**Related patterns:**\n- Instead of this, consider `navigation/hamburger-menu` for 6+ sections\n- Consider `navigation/nav-bar-header` for drill-down navigation within tabs\n\n---\n\n## Description\n\nBottom tab bar navigation with 3-5 tabs representing main app sections. Each tab has an icon, label, and optional badge counter. Tapping a tab switches the main content area. Active tab is highlighted. Standard on iOS and Android for primary navigation. Tabs remain visible while scrolling content. Common sections: Home, Search, Create, Activity, Profile.\n\n---\n\n## ASCII Wireframe\n\n### Standard 5-Tab Navigation\n\n```\n┌────────────────────────────────────┐\n│              Home                  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │                              │  │\n│  │      Main Content Area       │  │\n│  │                              │  │\n│  │   (Selected tab's content    │  │\n│  │    displayed here)           │  │\n│  │                              │  │\n│  │      Scrollable Area         │  │\n│  │                              │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n├────────────────────────────────────┤\n│ [H]   [?]   [+]   [@]   [*]        │\n│ Home Search Add Activity Profile   │\n└────────────────────────────────────┘\n```\n\n### 3-Tab Minimal (Selected)\n\n```\n┌────────────────────────────────────┐\n│              Browse                │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │                              │  │\n│  │      Browse Content          │  │\n│  │                              │  │\n│  │   • Featured Items           │  │\n│  │   • Categories               │  │\n│  │   • Popular Now              │  │\n│  │                              │  │\n│  │                              │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n├────────────────────────────────────┤\n│    [#]         [<3]        [@]     │\n│   Browse      Saved      Profile   │\n│   ─────                            │\n└────────────────────────────────────┘\n```\n\n### With Badge Indicators\n\n```\n┌────────────────────────────────────┐\n│            Messages                │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │                              │  │\n│  │      Message List            │  │\n│  │                              │  │\n│  │  [@] John Smith              │  │\n│  │      Hey, how are you?       │  │\n│  │                              │  │\n│  │  [@] Sarah Wilson            │  │\n│  │      See you tomorrow!       │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n├────────────────────────────────────┤\n│ [H]    [?]  3  [+]  12 [@]   [*]   │\n│ Home  Search  Add  Inbox  Settings │\n│                   ────             │\n└────────────────────────────────────┘\n```\n\n### 4-Tab with Center Action\n\n```\n┌────────────────────────────────────┐\n│              Discover              │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │                              │  │\n│  │      Content Feed            │  │\n│  │                              │  │\n│  │   [Image placeholder]        │  │\n│  │   Title goes here            │  │\n│  │                              │  │\n│  │   [Image placeholder]        │  │\n│  │   Another item               │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n├────────────────────────────────────┤\n│  [H]         [  +  ]         [@]   │\n│ Home       Create Post      Profile│\n└────────────────────────────────────┘\n```\n\n### Dark Mode Variant\n\n```\n┌────────────────────────────────────┐\n│░░░░░░░░░░ Activity ░░░░░░░░░░░░░░░ │\n│░                                  ░│\n│░ ┌──────────────────────────────┐ ░│\n│░ │░                            ░│ ░│\n│░ │░   Recent Activity          ░│ ░│\n│░ │░                            ░│ ░│\n│░ │░ [@] liked your photo       ░│ ░│\n│░ │░ [@] commented on your post ░│ ░│\n│░ │░ [@] started following you  ░│ ░│\n│░ │░                            ░│ ░│\n│░ └──────────────────────────────┘ ░│\n│░                                  ░│\n├────────────────────────────────────┤\n│░[H]   [?]   [+]   [@]   [*]       ░│\n│░Home Search Add Activity Profile  ░│\n│░              ────                ░│\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[tab-bar, bottom-tabs, navigation, mobile-navigation, primary-navigation, tabs, bottom-nav, app-navigation, section-switching]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need main navigation for a social app with home feed, search, post creation, notifications, and profile\"\n\n**AI selects this pattern because:**\n- User mentioned \"main navigation\" (primary navigation need)\n- Listed 5 distinct sections (perfect for tab bar)\n- Social app context (standard tab bar use case)\n- Mobile app implied\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│              Feed                  │\n│                                    │\n│  ┌──────────────────────────────┐  │\n│  │                              │  │\n│  │      Social Feed             │  │\n│  │                              │  │\n│  │  [@] John posted a photo     │  │\n│  │  [Image]                     │  │\n│  │  <3 42  Comment 12           │  │\n│  │                              │  │\n│  │  [@] Sarah shared a link     │  │\n│  │  [Link preview]              │  │\n│  │                              │  │\n│  └──────────────────────────────┘  │\n│                                    │\n├────────────────────────────────────┤\n│ [H] 5 [?]   [+]  12[@]   [*]       │\n│ Feed Search Post Alerts  Profile   │\n│ ────                               │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Tab bar provides always-visible navigation to 5 main sections. Feed selected by default. Badges show unread alerts (12) and new feed items (5). Thumb-friendly bottom position. Alternative: hamburger menu, but tab bar is faster for frequent switching. Limitation: only 5 tabs max before crowding.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Number of tabs** - 3 (minimal), 4 (balanced), 5 (full)\n2. **Tab icons** - SF Symbols (iOS), Material Icons (Android), custom\n3. **Tab labels** - Always shown, hide on scroll, icon-only\n4. **Badge counters** - Notification counts, unread items\n5. **Center action** - Prominent create/add button (Instagram-style)\n\n**App-specific adaptations:**\n- **Social app:** Feed, Explore, Post, Activity, Profile with badge counters\n- **E-commerce:** Shop, Categories, Cart, Wishlist, Account with cart badge\n- **SaaS dashboard:** Dashboard, Projects, Tasks, Team, Settings with task count\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Primary navigation, always visible\n- Persistent across all main sections\n- Bottom of screen for thumb access\n- Present from app launch\n\n**What comes before:**\n- App launch/splash screen\n- Login/onboarding (if required)\n- Permission requests (if needed)\n\n**What comes after:**\n- Tap tab → content area updates to that section\n- Tap same tab twice → scroll to top (iOS convention)\n- Deep navigation within tab (push new screens)\n- Modal overlays (temporarily hide tab bar)\n\n**Complete flow example:**\nApp Launch → Onboarding → **Tab Bar Appears** → Tap Search Tab → Search Interface → Tap Profile Tab → Profile View\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- More than 5 main sections (too crowded)\n- Desktop/web app (tabs work better at top)\n- Single-purpose app (no sections to switch between)\n- Content needs full screen (games, video players)\n- Hierarchical navigation is primary (use nav stack instead)\n\n**Use instead:**\n- `navigation/hamburger-menu` - For 6+ sections or rare switching\n- `navigation/nav-bar-header` - For top-level title and back button\n- Side navigation - For desktop/tablet layouts\n- Gesture navigation - For full-screen immersive apps\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Limited to 5 tabs (hard to fit more)\n- Takes up 50-60pt of screen height\n- Can be hidden by keyboard on input screens\n- Badge numbers can overwhelm (999+)\n- Users might miss tab bar initially\n\n**Conversion optimization:**\n- Use clear, recognizable icons\n- Keep labels short (1 word ideal)\n- Active tab should be obviously highlighted\n- Badge counts draw attention to new content\n- First-time users benefit from brief tooltip/hint\n- Consistent tab order (never move tabs around)\n\n**Accessibility notes:**\n- Minimum 44pt tap target height\n- VoiceOver reads icon, label, and badge count\n- Support Dynamic Type for labels\n- Sufficient color contrast for selected/unselected states\n- Haptic feedback on tab change\n- Keyboard navigation support (tab key)\n\n**Platform considerations:**\n- iOS: Thin icons, small labels, subtle highlighting\n- Android: Material Design, larger icons, ripple effect\n- Safe Area insets for iPhone notch and home indicator\n- Respect system appearance (light/dark mode)\n- Hide on keyboard appearance (optional)\n- Translucent background with blur (iOS style)\n\n**Performance notes:**\n- Each tab's view should be retained (not recreated)\n- Lazy load tab content until first tap\n- Preload adjacent tabs for smooth switching\n- Animate tab transitions smoothly\n- Badge count updates should be instant\n\n**Best practices:**\n- 3-5 tabs is optimal (never more than 5)\n- Left-to-right priority (most important on left)\n- Home/main tab on far left (standard convention)\n- Profile/settings on far right (standard convention)\n- Center tab can be special action (create, scan, etc.)\n- Use system icons when possible (familiar)\n- Selected tab has filled icon, unselected is outline\n- Badge counts update in real-time\n- Double-tap active tab scrolls to top (iOS)\n- Don't hide tab bar except for full-screen content\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/tutorial-overlay": "# Tutorial Overlay\n\n**ID:** `special/tutorial-overlay`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides feature discovery overlays that guide new users through app functionality using tooltips, coach marks, and multi-step tours with spotlights on specific UI elements.\n\n**Use this pattern when user mentions:**\n- tutorial, tutorial-overlay, onboarding-tour\n- tooltips, coach-marks, feature-discovery\n- walkthrough, guided-tour, first-time-user\n- highlights, spotlights, callouts, pointers\n- app-tour, feature-hints, user-education\n\n**UX Tradeoffs:**\n- **Pro:** Educates users on features they might miss\n- **Pro:** Contextual learning (show, don't tell)\n- **Pro:** Progressive disclosure of complex features\n- **Con:** Interrupts user flow\n- **Con:** Users often skip without reading\n- **Con:** Can feel patronizing to experienced users\n\n**Variants available:**\n- **Simple Tooltip:** Single hint on one element (use for \"quick tip, single feature\")\n- **Multi-Step Tour:** Sequential walkthrough (use for \"onboarding, complex app\")\n- **Interactive Tutorial:** Hands-on practice (use for \"skill-building, education\")\n\n**Pairs well with:**\n- `onboarding/welcome-screens` - First-time app introduction\n- `feedback/empty-states-collection` - Suggest features when no content\n- `special/context-menus` - Highlight menu options\n- Modal overlays - Dim background to focus attention\n\n**Related patterns:**\n- Instead of this, consider `onboarding/welcome-screens` for pre-use explanation\n- Consider inline hints/placeholders for simpler guidance\n\n---\n\n## Description\n\nAn overlay that highlights specific UI elements with callouts and explanations, guiding new users through app features. Uses semi-transparent backdrop to dim other content and spotlight the focused element. Supports single tooltips or multi-step sequential tours with progress indicators. Can be interactive (tap element to proceed) or passive (tap anywhere to dismiss). Common in first-launch onboarding.\n\n---\n\n## ASCII Wireframe\n\n### Single Tooltip Highlight\n\n```\n┌────────────────────────────────────┐\n│ [<] Dashboard            [H]       │\n├────────────────────────────────────┤\n│ ╭─────────────────────────────╮    │\n│ ╷ Tap here to access your     ╷    │\n│ ╷ home feed anytime           ╷    │\n│ ╰────────────▼────────────────╯    │\n│          ┌──────┐                  │\n│          │ [H]  │ ← HIGHLIGHTED    │\n│          └──────┘                  │\n│                                    │\n│ Today's Goals      85% Complete    │\n│ ~ 7,245 steps    ████░░░░ 10K      │\n│ . 6 glasses      ██████░░ 8        │\n│                                    │\n│ [Got it!]                          │\n└────────────────────────────────────┘\n```\n\n### Multi-Step Tour\n\n```\n┌────────────────────────────────────┐\n│ [~] Welcome Tour                   │\n├────────────────────────────────────┤\n│                                    │\n│ ╭──────────────────────────────╮   │\n│ ╷ Welcome to FitTracker!       ╷   │\n│ ╷ Let's show you around...     ╷   │\n│ ╰──────────────────────────────╯   │\n│          ▼                         │\n│ ┌──────────────────────────────┐   │\n│ │ [$] Dashboard        [H]     │   │\n│ │ ──────────────────────────── │   │\n│ │ Today's Goals  85% Complete  │   │\n│ │ ~ 7,245 steps  ████░░░░ 10K  │   │\n│ │ . 6 glasses    ██████░░ 8    │   │\n│ │ . 45 min       ████░░░░ 60   │   │\n│ │                              │   │\n│ │ ┌──────────┐ ┌──────────┐    │   │\n│ │ │ [!] Run  │ │ [*] Log  │    │   │\n│ │ └──────────┘ └──────────┘    │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ╭──────────────────────────────╮   │\n│ ╷ Tap the Home icon to access  ╷   │\n│ ╷ your dashboard anytime       ╷   │\n│ ╰──────────────────────────────╯   │\n│                                    │\n│ (i) Step 1 of 4                    │\n│                                    │\n│ [Skip Tour]          [Next]        │\n│                                    │\n│ ●○○○                               │\n└────────────────────────────────────┘\n```\n\n### Interactive Tutorial\n\n```\n┌────────────────────────────────────┐\n│ Tutorial: Add Your First Task      │\n├────────────────────────────────────┤\n│                                    │\n│ ╭──────────────────────────────╮   │\n│ ╷ Now tap the + button to      ╷   │\n│ ╷ create your first task       ╷   │\n│ ╰────────────▼─────────────────╯   │\n│          ┌──────┐                  │\n│          │  +   │ ← TAP HERE       │\n│          └──────┘                  │\n│                                    │\n│ My Tasks                           │\n│                                    │\n│ [Empty state illustration]         │\n│                                    │\n│ No tasks yet!                      │\n│ Create your first task above       │\n│                                    │\n│                                    │\n│                                    │\n│ (Waiting for user to tap +)        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Spotlight with Dimmed Background\n\n```\n┌────────────────────────────────────┐\n│░[<]░Dashboard░░░░░░░░░░░░░░░[H]░░░░│\n├────────────────────────────────────┤\n│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │\n│░╭──────────────────────────────╮░░ │\n│░╷ Swipe left on any task to   ╷░░  │\n│░╷ reveal quick actions        ╷░░  │\n│░╰──────────────▼──────────────╯░░  │\n│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │\n│░┌──────────────────────────────┐ ░ │\n│ │ □ Buy groceries          [>] │ ← │\n│ │   Due today                  │   │\n│░└──────────────────────────────┘ ░ │\n│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │\n│░□ Call dentist              [>]░░░ │\n│░  Due tomorrow                 ░░░ │\n│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │\n│░                               ░░░ │\n│░[Skip]              [Next]     ░░░ │\n│░                               ░░░ │\n│░●●○○                           ░░░ │\n└────────────────────────────────────┘\n```\n\n### Completion Screen\n\n```\n┌────────────────────────────────────┐\n│        Tutorial Complete!          │\n├────────────────────────────────────┤\n│                                    │\n│         [CHECKMARK ICON]           │\n│                                    │\n│      You're all set!               │\n│                                    │\n│ You've learned how to:             │\n│ • Navigate the app                 │\n│ • Create and manage tasks          │\n│ • Use quick actions                │\n│ • Customize your dashboard         │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Need help? Visit our Help    │   │\n│ │ Center anytime from Settings │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ [[x]] Don't show this again        │\n│                                    │\n│ [────── Get Started ──────]        │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[tutorial, tutorial-overlay, onboarding, tooltips, coach-marks, feature-discovery, walkthrough, guided-tour, user-education, spotlight, callouts]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I want to show first-time users how to use the main features with a step-by-step guided tour\"\n\n**AI selects this pattern because:**\n- User mentioned \"first-time users\" (onboarding context)\n- \"step-by-step guided tour\" (multi-step tutorial)\n- Feature education needed\n- Show how to use (not just explain)\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│ [~] App Tour                       │\n├────────────────────────────────────┤\n│                                    │\n│ ╭──────────────────────────────╮   │\n│ ╷ This is your main dashboard  ╷   │\n│ ╷ See your stats at a glance   ╷   │\n│ ╰──────────▼───────────────────╯   │\n│ ┌──────────────────────────────┐   │\n│ │ Dashboard                    │   │\n│ │                              │   │\n│ │ Today's Activity             │   │\n│ │ 8,432 steps                  │   │\n│ │ ████████░░ 84%               │   │\n│ │                              │   │\n│ │ [Start Workout] [View Stats] │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ (i) Step 1 of 5                    │\n│                                    │\n│ [Skip]                   [Next]    │\n│ ●○○○○                              │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Tutorial overlay guides users through features step-by-step. Dimmed background focuses attention on highlighted element. Progress dots show 5 total steps. Alternative: static onboarding screens, but overlay shows features in context. Users can skip if experienced. Risk: many users skip without learning.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Tour length** - Single tip (1 step), Quick tour (3-5 steps), Full tour (6-10 steps)\n2. **Highlight style** - Spotlight circle, rectangular outline, dimmed background\n3. **Callout position** - Above, below, or beside highlighted element\n4. **Progression** - Auto-advance, tap-to-advance, interactive (complete action)\n5. **Dismissal** - Skip button, tap outside, complete tour, \"Don't show again\"\n\n**App-specific adaptations:**\n- **Social app:** Highlight compose button, profile sections, discovery features, privacy settings\n- **E-commerce:** Product search, cart, wishlist, checkout flow, order tracking\n- **SaaS dashboard:** Project creation, team invites, data import, report generation, integrations\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- First app launch after signup\n- After major feature update\n- When user enters complex new section\n- Triggered manually from help menu\n\n**What comes before:**\n- User completes signup/login\n- Welcome screen (optional)\n- Permission requests (if needed)\n- User navigates to new feature area\n\n**What comes after:**\n- Tutorial completes → user proceeds to use app normally\n- User skips → tutorial dismissed\n- Tutorial can be re-triggered from settings/help\n- \"Don't show again\" prevents future displays\n\n**Complete flow example:**\nSignup → Welcome Screen → **Tutorial Overlay (Step 1)** → Tap \"Next\" → **Step 2** → Tap \"Next\" → **Step 3** → \"Get Started\" → Main App\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- App is self-explanatory (simple, standard patterns)\n- Features are discoverable without guidance\n- Users are experienced with similar apps\n- Tutorial would interrupt critical first action\n- Too many features to cover (overwhelming)\n\n**Use instead:**\n- `onboarding/welcome-screens` - For pre-use conceptual explanation\n- Inline hints/placeholders - For simple guidance\n- `feedback/empty-states-collection` - For contextual feature suggestions\n- Help documentation - For comprehensive reference\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Users skip without reading (tutorial fatigue)\n- Interrupts user's desired flow\n- Too long/comprehensive feels overwhelming\n- Hard to remember multi-step sequences\n- Can feel patronizing to advanced users\n\n**Conversion optimization:**\n- Keep tours short (3-5 steps maximum ideal)\n- Show only critical features\n- Allow skip with easy access to replay later\n- Trigger contextually (not immediately on launch)\n- Use interactive tutorials (do, not just read)\n- \"Don't show again\" checkbox for user control\n- Track completion rates to optimize content\n\n**Accessibility notes:**\n- VoiceOver reads callout text and highlighted element\n- Support keyboard navigation (tab through steps)\n- High contrast for callout text\n- Large tap targets for Next/Skip buttons\n- Dismiss with escape key or swipe gesture\n- Ensure spotlight is visually distinct from dimmed areas\n\n**Platform considerations:**\n- iOS: Clean, minimal design with blur effects\n- Android: Material Design with ripple effects\n- Respect system dark/light mode\n- Handle different screen sizes gracefully\n- Work around notches and safe areas\n- Adjust for keyboard appearance\n\n**Timing and triggers:**\n- First launch: Basic features only\n- Feature update: Highlight new capabilities\n- Contextual: When user enters new section\n- Manual: Always available in help/settings\n- Don't repeat on every launch (store completion state)\n- Consider A/B testing tutorial presence vs. absence\n\n**Best practices:**\n- Tutorial should teach, not overwhelm\n- Spotlight real UI elements (not screenshots)\n- Progression indicator (step 2 of 5)\n- Clear Next/Skip buttons\n- Interactive where possible (tap this, swipe that)\n- Completion screen with summary\n- Option to replay from settings\n- Track analytics: completion rate, skip points\n- Test with real users (watch where they struggle)\n- Update tutorial when UI changes\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "special/widgets-gallery": "# Home Screen Widgets Gallery\n\n**ID:** `special/widgets-gallery`\n**Category:** special\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nProvides collection of home screen and lock screen widget examples in multiple sizes (small 2x2, medium 4x2, large 4x4) for glanceable information without opening the app.\n\n**Use this pattern when user mentions:**\n- widgets, home-screen-widgets, lock-screen-widgets\n- widget-gallery, widget-examples, widget-sizes\n- glanceable, at-a-glance, quick-info\n- small-widget, medium-widget, large-widget\n- iOS-widgets, Android-widgets, widget-kit\n\n**UX Tradeoffs:**\n- **Pro:** Glanceable info without opening app\n- **Pro:** Customizable for user's home screen\n- **Pro:** Always visible (persistent presence)\n- **Con:** Limited to static/periodic updates\n- **Con:** Restricted screen real estate\n- **Con:** No interactive elements (iOS widgets)\n\n**Variants available:**\n- **Small Widgets (2x2):** Minimal info, single metric (use for \"simple data, quick glance\")\n- **Medium Widgets (4x2):** Balanced info, multiple items (use for \"lists, summaries\")\n- **Large Widgets (4x4):** Rich info, detailed data (use for \"dashboards, calendars\")\n\n**Pairs well with:**\n- `special/live-activities` - Real-time updates (live activities complement static widgets)\n- `dashboards/metric-dashboard` - Similar glanceable data presentation\n- Deep linking - Tap widget to open specific app section\n- `special/lock-screen-widgets` - Lock screen companion widgets\n\n**Related patterns:**\n- Instead of this, consider `special/live-activities` for real-time ongoing updates\n- Consider notifications for time-sensitive information\n\n---\n\n## Description\n\nA collection of iOS/Android home screen widget examples in different sizes (small 2x2, medium 4x2, large 4x4). Widgets provide glanceable information without opening the app: weather, calendar events, stock prices, fitness stats, quick actions. Updated periodically or on schedule. Tapping widget opens app to relevant section. Supports light/dark mode, Dynamic Type, and customization.\n\n---\n\n## ASCII Wireframe\n\n### Small Widgets (2x2)\n\n```\n┌────────────────────────────────────┐\n│ Small Widgets (2x2)                │\n├────────────────────────────────────┤\n│                                    │\n│ ┌──────────┐  ┌──────────┐         │\n│ │ Weather  │  │ Stocks   │         │\n│ │   72°F   │  │ AAPL ^   │         │\n│ │    [O]   │  │ $178.23  │         │\n│ │ H:75 L:58│  │ +2.3%    │         │\n│ └──────────┘  └──────────┘         │\n│                                    │\n│ ┌──────────┐  ┌──────────┐         │\n│ │ Steps    │  │ Battery  │         │\n│ │ 8,432    │  │   74%    │         │\n│ │ ████░░░  │  │ ████░░░░ │         │\n│ │ 10K goal │  │ 5h left  │         │\n│ └──────────┘  └──────────┘         │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Medium Widgets (4x2)\n\n```\n┌────────────────────────────────────┐\n│ Medium Widgets (4x2)               │\n├────────────────────────────────────┤\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Calendar - Today             │   │\n│ │ 3 events                     │   │\n│ │                              │   │\n│ │ 9:00  Team Standup           │   │\n│ │ 14:00 Design Review          │   │\n│ │ 16:30 Client Call            │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Music - Now Playing          │   │\n│ │ \"Flowers\" - Miley Cyrus      │   │\n│ │                              │   │\n│ │ [<]      [||]        [>]     │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Tasks - Today                │   │\n│ │ 4 of 7 completed             │   │\n│ │                              │   │\n│ │ [x] Morning standup          │   │\n│ │ [x] Review pull request      │   │\n│ │ [ ] Finish report            │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Large Widgets (4x4)\n\n```\n┌────────────────────────────────────┐\n│ Large Widgets (4x4)                │\n├────────────────────────────────────┤\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Photos - Memories            │   │\n│ │                              │   │\n│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐  │   │\n│ │ │[o] │ │[o] │ │[o] │ │[o] │  │   │\n│ │ └────┘ └────┘ └────┘ └────┘  │   │\n│ │                              │   │\n│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐  │   │\n│ │ │[o] │ │[o] │ │[o] │ │[o] │  │   │\n│ │ └────┘ └────┘ └────┘ └────┘  │   │\n│ │                              │   │\n│ │ Summer Vacation 2023         │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Fitness Dashboard            │   │\n│ │                              │   │\n│ │ Steps:  8,432 / 10,000       │   │\n│ │ ██████████░░░░ 84%           │   │\n│ │                              │   │\n│ │ Calories: 1,847 / 2,000      │   │\n│ │ █████████░░░░░ 92%           │   │\n│ │                              │   │\n│ │ Active: 42 min / 60 min      │   │\n│ │ ███████░░░░░░░ 70%           │   │\n│ │                              │   │\n│ │ [Start Workout]              │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Widget Stacks\n\n```\n┌────────────────────────────────────┐\n│ Smart Widget Stack                 │\n├────────────────────────────────────┤\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Smart Stack  · · ○           │   │\n│ │ Rotates based on your usage  │   │\n│ │                              │   │\n│ │ Currently showing:           │   │\n│ │ Weather                      │   │\n│ │   72°F                       │   │\n│ │   Partly Cloudy              │   │\n│ │                              │   │\n│ │ (Swipe up for next widget)   │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Stack contains:                    │\n│ • Weather (current)                │\n│ • Calendar                         │\n│ • Reminders                        │\n│ • News                             │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Lock Screen Widgets (iOS 16+)\n\n```\n┌────────────────────────────────────┐\n│ Lock Screen Widgets                │\n├────────────────────────────────────┤\n│                                    │\n│          3:42                      │\n│      Wednesday, Jan 14             │\n│                                    │\n│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐    │\n│ │ 72° │ │ Cal │ │[BAT]│ │ 8K  │    │\n│ │ [o] │ │  3  │ │ 74% │ │Steps│    │\n│ └─────┘ └─────┘ └─────┘ └─────┘    │\n│                                    │\n│ ┌──────────────────────────────┐   │\n│ │ Next: Team Standup @ 9:00AM  │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ No Notifications                   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n### Widget Configuration\n\n```\n┌────────────────────────────────────┐\n│ Add Widget                         │\n├────────────────────────────────────┤\n│                                    │\n│ [<] Fitness App Widgets            │\n│                                    │\n│ Small                              │\n│ ┌──────────┐  ┌──────────┐         │\n│ │ Steps    │  │ Calories │         │\n│ │ 8,432    │  │ 1,847    │         │\n│ │ ████░░░  │  │ █████░░░ │         │\n│ └──────────┘  └──────────┘         │\n│                                    │\n│ Medium                             │\n│ ┌──────────────────────────────┐   │\n│ │ Activity Summary             │   │\n│ │ Steps, Calories, Active Time │   │\n│ │ ██████ ██████ ██████         │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ Large                              │\n│ ┌──────────────────────────────┐   │\n│ │ Full Dashboard               │   │\n│ │ All metrics + quick actions  │   │\n│ │ [View Details]               │   │\n│ └──────────────────────────────┘   │\n│                                    │\n│ [Add Widget]                       │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\n[widgets, home-screen, lock-screen, glanceable, iOS-widgets, Android-widgets, widget-kit, small-widget, medium-widget, large-widget, quick-info]\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I want users to see their daily step count and progress without opening the app\"\n\n**AI selects this pattern because:**\n- User mentioned \"without opening the app\" (widget use case)\n- Step count is glanceable data (perfect for widget)\n- Daily information (updated periodically)\n- Quick access desired\n\n**AI generates:**\n```\n┌────────────────────────────────────┐\n│ Fitness Widget Options             │\n├────────────────────────────────────┤\n│                                    │\n│ Small Widget (2x2):                │\n│ ┌──────────┐                       │\n│ │ Steps    │                       │\n│ │ 8,432    │                       │\n│ │ ████████░│                       │\n│ │ 10K goal │                       │\n│ └──────────┘                       │\n│                                    │\n│ Medium Widget (4x2):               │\n│ ┌──────────────────────────────┐   │\n│ │ Daily Progress               │   │\n│ │                              │   │\n│ │ Steps:    8,432 / 10,000     │   │\n│ │ Calories: 1,847 / 2,000      │   │\n│ │ Active:   42 min / 60 min    │   │\n│ └──────────────────────────────┘   │\n│                                    │\n└────────────────────────────────────┘\n```\n\n**AI explains tradeoff:**\n- \"Home screen widget shows step count at-a-glance. Small widget for minimal space, medium for more detail. Updates every 15 minutes. Tap to open full app. Alternative: notification, but widget is always visible. Limitation: can't be truly real-time like Live Activity, but fine for daily metrics.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Widget sizes** - Small (2x2), Medium (4x2), Large (4x4), Extra Large (4x6, iPad)\n2. **Data displayed** - Metrics, lists, images, quick actions\n3. **Update frequency** - Every 15min, hourly, daily, or on-demand\n4. **Visual style** - Light/dark mode, colors, fonts, layout\n5. **Deep link targets** - Which app screen opens on tap\n\n**App-specific adaptations:**\n- **Social app:** Friend activity feed, unread messages count, trending posts, story previews\n- **E-commerce:** Order status, package tracking, daily deals, cart summary\n- **SaaS dashboard:** Project status, task count, team activity, key metrics, system health\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- User's home screen or lock screen\n- Widget Gallery in iOS/Android settings\n- Long-press home screen to add widget\n- Always visible alongside app icons\n\n**What comes before:**\n- User long-presses home screen\n- User taps \"Add Widget\" or \"+\"\n- User selects app from widget gallery\n- User chooses widget size and style\n\n**What comes after:**\n- Widget appears on home screen\n- Widget updates on schedule\n- User taps widget → app opens to relevant section\n- User can edit or remove widget\n\n**Complete flow example:**\nLong-Press Home Screen → Add Widget → Select \"Fitness App\" → Choose Medium Widget → **Widget Added** → Updates Every 15min → Tap Widget → App Opens to Dashboard\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Data requires real-time updates (use Live Activities instead)\n- Interactive controls needed (widgets are tap-to-open only on iOS)\n- Privacy concerns (widget visible to anyone seeing screen)\n- Data changes too frequently to be useful at-a-glance\n- App has no glanceable information\n\n**Use instead:**\n- `special/live-activities` - For real-time ongoing activities\n- Notifications - For timely alerts\n- App icon badge - For simple count display\n- Lock screen complications - For minimal Apple Watch-style display\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Limited update frequency (battery preservation)\n- No interactive elements on iOS widgets\n- Small screen space constrains information\n- Users might not discover widget exists\n- Widget can become stale if app closed\n\n**Conversion optimization:**\n- Promote widget during onboarding\n- Show widget examples in app\n- Provide multiple size options for different needs\n- Deep link to most relevant app section\n- Smart defaults (show most useful data)\n- Update as frequently as allowed\n- Handle empty/error states gracefully\n\n**Accessibility notes:**\n- VoiceOver reads widget content\n- Support Dynamic Type (text scaling)\n- High contrast for readability\n- Widgets should work without color alone\n- Tap target should be entire widget\n- Provide text alternatives for icons/images\n\n**Platform considerations:**\n- iOS 14+: WidgetKit framework, no interactive elements\n- Android: Widgets can have buttons and interactive elements\n- iPadOS: Supports larger widget sizes\n- Different update schedules per platform\n- Respect Low Power Mode (reduce updates)\n- Handle background fetch limits\n\n**Update strategies:**\n- Timeline provider (precompute future states)\n- Background refresh (fetch new data periodically)\n- Push notification trigger (update immediately)\n- On-demand reload (when app is opened)\n- Smart update frequency (more when user active)\n- Cache data for offline display\n\n**Best practices:**\n- Provide small, medium, and large variants\n- Show most important info in smallest size\n- Use placeholder content while loading\n- Handle empty states gracefully\n- Deep link to logical app section on tap\n- Respect user's light/dark mode preference\n- Update only when data actually changes\n- Test all sizes and device orientations\n- Support widget families (grouped widgets)\n- Document widget purposes in app\n\n---\n\n**Part of AsciiKit Pattern Library**\n",
+    "states/loading_screen": "# Loading Progress Screen\n\n**ID:** `states/loading_screen`\n**Category:** states\n\n---\n\n## AI Selection Metadata\n\n**Purpose:**\nDisplays loading state with progress indicator, informational messaging, and cancel option. Keeps users informed while content loads and provides feedback that the app is working.\n\n**Use this pattern when user mentions:**\n- \"loading state\", \"loading screen\", \"progress indicator\"\n- \"waiting state\", \"fetch in progress\", \"content loading\"\n- \"progress bar\", \"loading spinner\"\n- \"loading message\", \"did you know tips while waiting\"\n- \"cancel loading\", \"abort operation\"\n\n**Common contexts:**\n- Apps fetching data from servers\n- Apps loading large files or content\n- First-time app launch with initialization\n- Refresh or sync operations\n- Media apps loading images/videos\n\n**UX Tradeoffs:**\n- **Pro:** Reassures users that app is responsive and working\n- **Pro:** Progress bar shows estimated time remaining\n- **Pro:** Tips/messaging reduces perceived wait time\n- **Pro:** Cancel option gives user control\n- **Con:** Cannot fully hide loading if truly slow\n- **Con:** Inaccurate progress estimates frustrate users\n- **Con:** Long waits still feel slow regardless of feedback\n\n**Pairs well with:**\n- `states/error_state` - When loading fails\n- `modals/alert` - Timeout warnings\n- `states/empty_state` - After loading with no results\n\n**Variants available:**\n- **Minimal:** Just spinner and message (use for fast loads)\n- **Standard:** Spinner, progress bar, message, tips, cancel\n- **Comprehensive:** Progress bar, detailed messaging, tips carousel\n\n---\n\n## Description\n\nLoading state screen showing indeterminate progress with tips messaging. Displays animated spinner, progress percentage, helpful tips to reduce perceived wait time, and cancel button for user control. Best for operations taking 2+ seconds.\n\n---\n\n## ASCII Wireframe\n\n```\n┌────────────────────────────────────┐\n│ [←] Loading                        │\n├────────────────────────────────────┤\n│                                    │\n│                                    │\n│                                    │\n│                                    │\n│          ...Loading...             │\n│                                    │\n│       Fetching your content...     │\n│                                    │\n│  ━━━━━━━━━━━━━━━━━━━░░░░░░░░░      │\n│  67% complete                      │\n│                                    │\n│                                    │\n│ ┌────────────────────────────────┐ │\n│ │ (i) Did you know?              │ │\n│ │ You can swipe down to refresh  │ │\n│ │ and get the latest updates.    │ │\n│ └────────────────────────────────┘ │\n│                                    │\n│                                    │\n│             [Cancel]               │\n│                                    │\n│                                    │\n│                                    │\n│                                    │\n└────────────────────────────────────┘\n```\n\n---\n\n## Tags\n\nloading, progress, spinner, waiting, blocking-state, user-feedback, responsive-feedback, cancellable\n\n---\n\n## Usage Examples\n\n**When user describes this goal:**\n> \"I need a loading screen while my app fetches data that takes 3-5 seconds\"\n\n**AI selects this pattern because:**\n- User mentioned \"loading screen\" (keyword match)\n- Operation takes 3-5 seconds (warrants progress feedback)\n- Standard variant with progress bar fits data-fetching scenario\n\n**AI generates:**\nStandard variant adapted for data fetching with specific percentage updates\n\n**AI explains tradeoff:**\n- \"Loading screens reassure users the app is working during wait times. Progress bars show estimated completion. Tips reduce perceived wait. Trade-off: Users still experience the latency, but feedback makes it feel faster than silence.\"\n\n---\n\n## Customization Points\n\n**Commonly adapted elements:**\n1. **Progress indicator** - Spinner vs. progress bar vs. animated dots\n2. **Messaging** - Specific action being performed (Loading..., Fetching..., Syncing...)\n3. **Tips content** - Context-relevant tips or marketing messages\n4. **Cancel button** - Include/hide based on whether operation is cancellable\n\n**App-specific adaptations:**\n- **Data apps:** \"Fetching your data...\" with sync progress\n- **Media apps:** \"Loading image...\" or \"Buffering video...\"\n- **Social apps:** \"Finding new posts...\" with discovery tips\n- **E-commerce:** \"Checking inventory...\" or \"Processing payment...\"\n\n---\n\n## Common Flow Integrations\n\n**Typical flow position:**\n- Modal or full-screen overlay during async operations\n- Not a persistent UI element\n- Appears and disappears programmatically\n\n**What comes before:**\n- User action triggers data fetch (button tap, page load, pull-to-refresh)\n- App initiates background operation\n\n**What comes after:**\n- `states/empty_state` - If fetch returns no results\n- `content/main-feed` or other content - If successful\n- `states/error_state` - If fetch fails with timeout/network error\n\n**Complete flow example:**\nUser action → **Loading Screen** → Success (show content) OR Failure (error state) OR Empty (empty state)\n\n---\n\n## When NOT to Use\n\n**Avoid this pattern if:**\n- Operation completes in <500ms (no visible loading needed)\n- Loading is not blocking user from continuing\n- You need non-blocking progress (use toast notification instead)\n\n**Use instead:**\n- `notifications/toast` - For non-blocking background operations\n- Skeleton screens - To show content shape while loading\n- Inline spinners - For non-blocking component-level loading\n\n---\n\n## UX Considerations\n\n**Friction points:**\n- Long waits feel even longer without feedback\n- Inaccurate progress bars decrease trust\n- No cancel option traps users (feels broken)\n- Generic \"Loading...\" messages don't explain what's happening\n- Spammy tips distract from task\n\n**Conversion optimization:**\n- Always show cancel button for network operations\n- Use specific action labels (Fetching... vs. Loading...)\n- Keep tips relevant and rotate them if multiple waits possible\n- Show percentage for deterministic progress (file uploads)\n- Keep animated spinner visible to confirm app responsiveness\n\n**Accessibility notes:**\n- Screen readers should announce progress percentage\n- Spinner animation respects \"reduce motion\" settings\n- Cancel button must have accessible label\n- Progress bar has aria-live region for updates\n- High contrast for progress indicator\n\n---\n\n**Part of AsciiKit Pattern Library**\n"
+  },
+  "version": "2.0.0",
+  "built_at": 1769848918263,
+  "total_patterns": 82,
+  "categories": [
+    "authentication",
+    "communication",
+    "dashboards",
+    "forms",
+    "media",
+    "navigation",
+    "onboarding",
+    "productivity",
+    "settings",
+    "shopping",
+    "social",
+    "special",
+    "states"
+  ]
+}