codymaster 5.2.0 → 7.0.0

package/skills/cm-google-form/templates/toast.css

@@ -1,152 +0,0 @@
-/* ============================================
-   FORM TOAST NOTIFICATION
-   ============================================ 
-   
-   Copy this into your main CSS file.
-   
-   Dependencies: none
-   CSS Variables used (override if needed):
-   - --space-2 through --space-8
-   - --radius-lg, --radius-full
-   - --text-sm
-   - --transition-fast
-   - --white
-   
-   If your project doesn't use CSS variables, 
-   replace them with fixed values:
-   - --space-2: 8px, --space-3: 12px, --space-4: 16px, --space-5: 20px
-   - --radius-lg: 12px, --radius-full: 9999px
-   - --text-sm: 14px
-   - --transition-fast: 150ms ease
-*/
-
-.form-toast-container {
-    position: fixed;
-    bottom: 100px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 10000;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    width: calc(100% - 32px);
-    max-width: 440px;
-    pointer-events: none;
-}
-
-.form-toast {
-    pointer-events: auto;
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    padding: 16px 20px;
-    border-radius: 12px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
-    animation: toastSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    opacity: 0;
-    transform: translateY(20px);
-    font-size: 14px;
-    line-height: 1.5;
-}
-
-.form-toast.hiding {
-    animation: toastSlideDown 0.25s ease-in forwards;
-}
-
-/* Variants */
-.form-toast--success {
-    background: #ECFDF5;
-    border: 1px solid #A7F3D0;
-    color: #065F46;
-}
-
-.form-toast--error {
-    background: #FEF2F2;
-    border: 1px solid #FECACA;
-    color: #991B1B;
-}
-
-.form-toast--retrying {
-    background: #FFFBEB;
-    border: 1px solid #FDE68A;
-    color: #92400E;
-}
-
-/* Elements */
-.form-toast-icon {
-    font-size: 20px;
-    flex-shrink: 0;
-    line-height: 1;
-    margin-top: 1px;
-}
-
-.form-toast-body {
-    flex: 1;
-    min-width: 0;
-}
-
-.form-toast-title {
-    font-weight: 700;
-    margin-bottom: 2px;
-}
-
-.form-toast-msg {
-    opacity: 0.85;
-}
-
-.form-toast-close {
-    flex-shrink: 0;
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 18px;
-    line-height: 1;
-    opacity: 0.5;
-    padding: 4px;
-    color: inherit;
-    transition: opacity 150ms ease;
-}
-
-.form-toast-close:hover {
-    opacity: 1;
-}
-
-/* Fallback contact button (Zalo, Messenger, etc.) */
-.form-toast-zalo {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    margin-top: 8px;
-    padding: 8px 16px;
-    background: #0068FF;
-    color: #fff !important;
-    border-radius: 9999px;
-    font-size: 14px;
-    font-weight: 600;
-    text-decoration: none;
-    transition: background 150ms ease, transform 150ms ease;
-}
-
-.form-toast-zalo:hover {
-    background: #0054cc;
-    transform: translateY(-1px);
-}
-
-/* Animations */
-@keyframes toastSlideUp {
-    from { opacity: 0; transform: translateY(20px); }
-    to   { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes toastSlideDown {
-    from { opacity: 1; transform: translateY(0); }
-    to   { opacity: 0; transform: translateY(20px); }
-}
-
-/* Mobile: push toast above sticky CTAs */
-@media (max-width: 768px) {
-    .form-toast-container {
-        bottom: 80px;
-        width: calc(100% - 24px);
-    }
-}

package/skills/cm-growth-hacking/SKILL.md

@@ -1,282 +0,0 @@
----
-name: cm-growth-hacking
-description: "Bottom-sheet and popup growth system: booking CTAs, calendars, lead capture, surveys, re-engagement, with CRO tracking hooks. Zero-deps; works static or dynamic sites. Works with cm-booking-calendar, cm-ads-tracker, cm-google-form, cm-readit, cm-ux-master."
-allowed-tools: Read, Write, Edit, Glob, Grep, Browser
-version: 1.0
-priority: HIGH
-skills:
-  - cm-booking-calendar
-  - cm-ads-tracker
-  - cm-google-form
-  - cm-readit
-  - cm-ux-master
----
-
-# CM Growth Hacking
-
-> **Bottom Sheet + Calendar + Trigger + Tracking = Growth Hacking Engine.**
-> Đa ngành, đa mục đích, zero dependencies.
-> 1 skill = mọi growth hacking pattern bạn cần.
-
----
-
-## 🎯 When to Use
-
-| Trigger | Action |
-|---------|--------|
-| User says "bottom sheet", "popup" | Activate — start Phase 1 |
-| User says "đặt lịch popup", "booking bottom sheet" | Activate — focus booking sheet |
-| User says "lead capture", "exit intent" | Activate — focus lead capture |
-| User says "nhắc lịch", "google calendar", "apple calendar" | Activate — focus calendar CTA |
-| User says "flash sale popup", "countdown" | Activate — focus promo sheet |
-| User says "survey", "đánh giá", "feedback" | Activate — focus survey sheet |
-| User says "tăng conversion", "giảm bounce" | Activate — explain + build |
-
----
-
-## 📖 Selective Reading Rule (MANDATORY)
-
-| File | Status | When to Read |
-|------|--------|--------------|
-| [bottom-sheet-engine.md](bottom-sheet-engine.md) | 🔴 REQUIRED | Any bottom sheet implementation |
-| [trigger-system.md](trigger-system.md) | 🔴 REQUIRED | Setting up when/how sheets appear |
-| [calendar-integration.md](calendar-integration.md) | ⚪ Optional | When sheet includes calendar CTA |
-| [tracking-events.md](tracking-events.md) | ⚪ Optional | When tracking engagement events |
-
-> 🔴 **Always read `bottom-sheet-engine.md` + `trigger-system.md` first.**
-
----
-
-## 🧭 Quick Decision Tree
-
-```
-"I need an engagement popup"
-│
-├─ Booking / Appointment
-│  └─ bottom-sheet-engine + calendar-integration + cm-booking-calendar
-│     └─ Form → Sheet: cm-google-form
-│     └─ Post-submit: Calendar CTA (GCal + ICS)
-│
-├─ Lead Capture / Exit Intent
-│  └─ bottom-sheet-engine + trigger-system (exit-intent)
-│     └─ Form → Sheet: cm-google-form
-│     └─ Tracking: cro_lead_capture
-│
-├─ Flash Sale / Promo
-│  └─ bottom-sheet-engine + trigger-system (timer)
-│     └─ Countdown timer + CTA
-│     └─ Optional: Calendar deadline
-│
-├─ Survey / Feedback
-│  └─ bottom-sheet-engine + trigger-system (post-interaction)
-│     └─ Star rating or NPS
-│     └─ Form → Sheet: cm-google-form
-│
-├─ Event / Webinar Registration
-│  └─ bottom-sheet-engine + calendar-integration
-│     └─ Register → Add to Calendar
-│     └─ Tracking: cro_event_register
-│
-├─ Re-engagement (Return Visitor)
-│  └─ bottom-sheet-engine + trigger-system (return-visitor)
-│     └─ "Welcome back" + personalized CTA
-│
-└─ Chat / Contact CTA
-   └─ bottom-sheet-engine + trigger-system (scroll)
-      └─ Zalo / Messenger / Hotline buttons
-```
-
----
-
-## 📋 6-Phase Workflow
-
-```
-Phase 1: DISCOVER → Scan site, detect industry, identify existing popups/forms
-Phase 2: SOCRATIC GATE → Ask strategic questions (max 5)
-Phase 3: CONFIGURE → Select engagement pattern + customize
-Phase 4: BUILD → Generate bottom sheet + triggers + calendar + tracking
-Phase 5: INTEGRATE → Wire to site + link skills
-Phase 6: VERIFY → Test all interactions + tracking events
-```
-
-> 🔴 **Rule:** NEVER skip Phase 1 & 2. Always scan first, ask second.
-
----
-
-## Phase 1: DISCOVER
-
-Scan the website to understand:
-
-```bash
-# Find existing popups/modals/sheets
-grep -ri "modal\|popup\|bottom-sheet\|overlay\|dialog" --include="*.html" --include="*.astro" --include="*.css" .
-
-# Find existing forms
-grep -ri "data-form-type\|onsubmit\|<form" --include="*.html" --include="*.astro" .
-
-# Find existing calendar code
-grep -ri "VCALENDAR\|google.com/calendar\|\.ics\|VEVENT" --include="*.js" --include="*.html" .
-
-# Find existing tracking
-grep -ri "dataLayer\|fbq\|ttq\|gtag" --include="*.js" --include="*.html" .
-```
-
-**Output:** Discovery Report with detected industry, existing UI, and recommended pattern.
-
----
-
-## Phase 2: SOCRATIC GATE
-
-> 🔴 **MANDATORY.** Ask ALL in ONE message. Max 5 questions.
-
-1. **Mục tiêu chính** — Bạn muốn popup/bottom sheet để làm gì? (đặt lịch / thu lead / khuyến mãi / survey / khác)
-2. **Trigger** — Khi nào hiện? (ngay khi vào trang / scroll X% / sau X giây / khi sắp thoát / click nút)
-3. **Nội dung** — Trong popup cần gì? (form / calendar CTA / countdown / rating / nút chat)
-4. **Calendar** — Có cần thêm Google Calendar / Apple Calendar không? Nhắc trước bao lâu?
-5. **Tracking** — Đang chạy ads platform nào? (Facebook / TikTok / Google / không)
-
----
-
-## Phase 3: CONFIGURE
-
-Based on answers, select from `references/engagement-patterns.md` and build config:
-
-```javascript
-const ENGAGEMENT_CONFIG = {
-  type: 'booking',           // booking | lead | promo | survey | event | chat | reengagement
-  trigger: {
-    type: 'scroll',          // scroll | time | exit | click | return | interaction
-    value: 0.3,              // scroll % or ms or selector
-    delay: 0,                // additional delay after trigger
-  },
-  sheet: {
-    size: 'standard',        // compact | standard | full
-    title: 'Đặt Lịch Khám',
-    icon: '📅',
-    dismissible: true,
-    swipeToDismiss: true,
-  },
-  calendar: {
-    enabled: true,
-    providers: ['gcal', 'ics'],  // gcal | ics | outlook
-    reminderMinutes: [1440, 120], // 1 day + 2 hours before
-    location: 'Google Maps URL',
-  },
-  tracking: {
-    events: ['cro_sheet_shown', 'cro_booking_submit', 'cro_calendar_add'],
-    conversionValue: 500000,
-    currency: 'VND',
-  },
-  session: {
-    dismissKey: 'eng_booking_dismissed',
-    storage: 'sessionStorage',   // sessionStorage | localStorage
-    maxShowPerSession: 1,
-  }
-};
-```
-
----
-
-## Phase 4: BUILD
-
-Read and use templates from `templates/` directory:
-
-| Template | Purpose |
-|----------|---------|
-| `templates/bottom-sheet.css` | Universal responsive bottom sheet CSS |
-| `templates/bottom-sheet.js` | `BottomSheetEngine` class — create, show, hide, swipe, stack |
-| `templates/calendar-cta.js` | Calendar button generators (GCal + ICS + device detection) |
-| `templates/trigger-manager.js` | `TriggerManager` class — scroll, time, exit, click triggers |
-| `templates/tracking-events.js` | DataLayer push helpers for engagement events |
-
----
-
-## Phase 5: INTEGRATE
-
-### Wire to Existing Skills
-
-```
-cm-growth-hacking (this skill)
-│
-├── UI Layer ──────────── templates/bottom-sheet.css + .js
-│
-├── Form Submit ───────── @skills/cm-google-form
-│   └── submitToGoogleSheet() → success callback → show calendar CTA
-│
-├── Calendar Logic ────── @skills/cm-booking-calendar
-│   └── calendar-engine.js (scheduling)
-│   └── calendar-export.js (ICS + GCal deep link)
-│   └── reminder-config.js (VALARM + industry patterns)
-│
-├── CRO Tracking ──────── @skills/cm-ads-tracker
-│   └── dataLayer.push() → GTM → FB/TikTok/Google
-│
-└── Design Principles ─── @skills/cm-ux-master
-    └── Color, typography, animation standards
-```
-
----
-
-## Phase 6: VERIFY
-
-| # | Test Case | Expected |
-|---|-----------|----------|
-| 1 | Bottom sheet opens | Slides up with animation |
-| 2 | Swipe down to dismiss | Sheet closes + state saved |
-| 3 | Trigger fires correctly | Sheet appears at configured trigger |
-| 4 | Form submit (if applicable) | Toast success → Calendar CTA appears |
-| 5 | Google Calendar click | New tab with pre-filled event |
-| 6 | ICS download click | .ics file downloads |
-| 7 | .ics on iOS | Opens Apple Calendar with reminders |
-| 8 | Tracking events fire | dataLayer shows correct events |
-| 9 | Session dismiss works | Sheet doesn't reappear after dismiss |
-| 10 | Mobile responsive | Sheet adapts to viewport |
-| 11 | Accessibility | aria-labels, focus trap, Escape key |
-| 12 | No conflict with existing UI | Doesn't break page layout |
-
----
-
-## ❌ Anti-Patterns
-
-| ❌ Don't | ✅ Do |
-|----------|------|
-| Hardcode content in sheet | Use config object |
-| Show popup immediately on page load | Use trigger system with delay |
-| No dismiss option | Always allow close + swipe |
-| Forget mobile safe-area | Pad for notched devices |
-| Skip tracking | Track every interaction |
-| One-size-fits-all sheet | Use compact/standard/full variants |
-| Autoplay anything | Require user interaction |
-| Show on every page visit | Respect session/localStorage dismiss |
-| Build calendar logic from scratch | Inherit from `cm-booking-calendar` |
-| Build tracking from scratch | Inherit from `cm-ads-tracker` |
-
----
-
-## 📑 Templates
-
-| File | Purpose |
-|------|---------|
-| `templates/bottom-sheet.css` | Universal bottom sheet CSS (3 sizes) |
-| `templates/bottom-sheet.js` | BottomSheetEngine class |
-| `templates/calendar-cta.js` | Calendar CTA buttons + auto device route |
-| `templates/trigger-manager.js` | TriggerManager class |
-| `templates/tracking-events.js` | Engagement tracking helpers |
-
-## 📚 References
-
-| File | Purpose |
-|------|---------|
-| `references/engagement-patterns.md` | 10+ engagement patterns by industry |
-
----
-
-## 🔗 Related Skills
-
-| Need | Skill |
-|------|-------|
-| Calendar scheduling + export | `@[skills/cm-booking-calendar]` |
-| Form → Google Sheet | `@[skills/cm-google-form]` |
-| Full CRO tracking setup | `@[skills/cm-ads-tracker]` |
-| Audio engagement | `@[skills/cm-readit]` |
-| UI/UX design principles | `@[skills/cm-ux-master]` |

package/skills/cm-growth-hacking/bottom-sheet-engine.md

@@ -1,261 +0,0 @@
-# Bottom Sheet Engine
-
-> Core module cho mọi engagement UI. Modular, responsive, accessible.
-> Một engine — nhiều content types.
-
----
-
-## 🏗️ Architecture
-
-```
-BottomSheetEngine
-├── create(config)      → Build DOM + attach events
-├── show()              → Slide up animation
-├── hide()              → Slide down + cleanup
-├── destroy()           → Remove from DOM entirely
-├── setContent(html)    → Swap inner content dynamically
-├── setSize(size)       → Switch compact/standard/full
-└── onDismiss(callback) → Hook for tracking/state
-```
-
-### 3 Size Variants
-
-| Size | Height | Use Case |
-|------|--------|----------|
-| `compact` | ~120px | Simple CTA, chat buttons, promo banner |
-| `standard` | ~320px | Booking form, lead capture, calendar CTA |
-| `full` | ~80vh | Survey, multi-step form, detailed content |
-
-### DOM Structure
-
-```html
-<!-- Backdrop (optional, for full-size sheets) -->
-<div class="eng-backdrop" data-sheet-id="booking"></div>
-
-<!-- Bottom Sheet -->
-<div class="eng-sheet eng-sheet--standard" data-sheet-id="booking" role="dialog" aria-modal="true" aria-label="Đặt Lịch Khám">
-  <!-- Drag handle -->
-  <div class="eng-sheet__handle" aria-hidden="true">
-    <div class="eng-sheet__handle-bar"></div>
-  </div>
-  
-  <!-- Close button -->
-  <button class="eng-sheet__close" aria-label="Đóng">✕</button>
-  
-  <!-- Content area (swappable) -->
-  <div class="eng-sheet__content">
-    <!-- Dynamic content injected here -->
-  </div>
-</div>
-```
-
----
-
-## 🎨 Styling Principles
-
-### Must-Have CSS Features
-
-| Feature | Why |
-|---------|-----|
-| `position: fixed; bottom: 0` | Anchored to viewport bottom |
-| `transform: translateY(100%)` → `translateY(0)` | Smooth slide-up animation |
-| `backdrop-filter: blur(24px)` | Glassmorphism, premium feel |
-| `border-radius: 20px 20px 0 0` | iOS-style rounded top corners |
-| `padding-bottom: env(safe-area-inset-bottom)` | Safe area for notched devices |
-| `z-index: 1100` | Above nav bars but below modals |
-| Drag handle pseudo-element | Visual signal "this is draggable" |
-
-### Animation Timing
-
-```css
-/* Open: slightly bouncy, feels natural */
-transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
-
-/* Close: quick, decisive */
-transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
-```
-
-### Responsive Rules
-
-| Viewport | Behavior |
-|----------|----------|
-| Mobile (< 768px) | Full-width, touch-optimized, swipe dismiss |
-| Tablet (768-1024px) | Max-width 480px, centered |
-| Desktop (> 1024px) | Max-width 480px, right-aligned or centered |
-
----
-
-## 👆 Touch Interactions
-
-### Swipe-to-Dismiss
-
-```
-touchstart → record startY
-touchmove → calculate deltaY
-  if deltaY > 0 → sheet follows finger (translateY)
-  if deltaY > threshold (80px) → dismiss
-touchend → snap back or dismiss based on velocity
-```
-
-**Key Rules:**
-- Only allow downward swipe (deltaY > 0)
-- Apply `will-change: transform` during drag for perf
-- Use velocity calculation: fast swipe = dismiss even if < 80px
-- Add `touch-action: none` on the drag handle only
-
-### Focus Trap (Accessibility)
-
-```
-When sheet opens:
-1. Save currently focused element
-2. Move focus to sheet
-3. Trap Tab/Shift+Tab within sheet
-4. On close: restore focus to saved element
-```
-
----
-
-## 📦 Content Type Patterns
-
-### 1. Booking Form Content
-
-```html
-<div class="eng-sheet__content">
-  <div class="eng-content-booking">
-    <h3 class="eng-content__title">📅 Đặt Lịch Khám</h3>
-    <form data-form-type="booking" onsubmit="window.submitToGoogleSheet(event)">
-      <input type="hidden" name="url" value="">
-      <input type="text" name="name" placeholder="Họ tên" required>
-      <input type="tel" name="phone" placeholder="Số điện thoại" required>
-      <div class="eng-date-chips" id="dateChips"><!-- JS generated --></div>
-      <div class="eng-time-slots" id="timeSlots"><!-- JS generated --></div>
-      <select name="service"><!-- Industry-specific options --></select>
-      <textarea name="note" placeholder="Ghi chú (tùy chọn)"></textarea>
-      <button type="submit" class="eng-btn eng-btn--primary">Xác Nhận Đặt Lịch</button>
-    </form>
-  </div>
-</div>
-```
-
-### 2. Calendar CTA Content (Post-Submit)
-
-```html
-<div class="eng-content-calendar">
-  <div class="eng-content__icon">✅</div>
-  <h3 class="eng-content__title">Đặt lịch thành công!</h3>
-  <p class="eng-content__subtitle">Thêm vào lịch để không quên nhé</p>
-  <div class="eng-calendar-buttons">
-    <button onclick="addToGoogleCal()" class="eng-btn eng-btn--gcal">
-      <img src="gcal-icon.svg" alt="" width="20"> Google Calendar
-    </button>
-    <button onclick="downloadICS()" class="eng-btn eng-btn--ics">
-      📥 Apple Calendar / Khác
-    </button>
-  </div>
-  <p class="eng-content__benefit">💡 Lịch sẽ tự nhắc bạn — hoàn toàn miễn phí</p>
-</div>
-```
-
-### 3. Lead Capture Content
-
-```html
-<div class="eng-content-lead">
-  <div class="eng-content__icon">🎁</div>
-  <h3 class="eng-content__title">Nhận tài liệu miễn phí</h3>
-  <p class="eng-content__subtitle">Để lại SĐT, chúng tôi gửi ngay</p>
-  <form data-form-type="lead" onsubmit="window.submitToGoogleSheet(event)">
-    <input type="hidden" name="url" value="">
-    <input type="tel" name="phone" placeholder="Số điện thoại" required>
-    <button type="submit" class="eng-btn eng-btn--primary">Gửi Cho Tôi</button>
-  </form>
-</div>
-```
-
-### 4. Flash Sale Content
-
-```html
-<div class="eng-content-promo">
-  <div class="eng-content__icon">🔥</div>
-  <h3 class="eng-content__title">Ưu đãi đặc biệt!</h3>
-  <div class="eng-countdown" id="countdown">
-    <span class="eng-countdown__unit"><span id="hours">00</span>h</span>
-    <span class="eng-countdown__unit"><span id="minutes">00</span>m</span>
-    <span class="eng-countdown__unit"><span id="seconds">00</span>s</span>
-  </div>
-  <p class="eng-content__subtitle">Giảm 30% khi đặt lịch hôm nay</p>
-  <a href="#booking" class="eng-btn eng-btn--primary">Đặt Ngay →</a>
-  <button class="eng-btn eng-btn--outline" onclick="addDeadlineToCalendar()">
-    📅 Nhắc tôi trước khi hết hạn
-  </button>
-</div>
-```
-
-### 5. Survey / Feedback Content
-
-```html
-<div class="eng-content-survey">
-  <h3 class="eng-content__title">⭐ Đánh giá trải nghiệm</h3>
-  <div class="eng-rating" id="starRating">
-    <button data-rating="1" aria-label="1 sao">⭐</button>
-    <button data-rating="2" aria-label="2 sao">⭐</button>
-    <button data-rating="3" aria-label="3 sao">⭐</button>
-    <button data-rating="4" aria-label="4 sao">⭐</button>
-    <button data-rating="5" aria-label="5 sao">⭐</button>
-  </div>
-  <textarea name="feedback" placeholder="Chia sẻ thêm (tùy chọn)"></textarea>
-  <button class="eng-btn eng-btn--primary" onclick="submitSurvey()">Gửi Đánh Giá</button>
-</div>
-```
-
-### 6. Chat / Contact CTA
-
-```html
-<div class="eng-content-chat">
-  <p class="eng-content__title">💬 Cần tư vấn?</p>
-  <div class="eng-chat-buttons">
-    <a href="https://zalo.me/PHONE" class="eng-btn eng-btn--zalo">Zalo</a>
-    <a href="tel:PHONE" class="eng-btn eng-btn--phone">📞 Gọi ngay</a>
-    <a href="https://m.me/PAGE" class="eng-btn eng-btn--messenger">Messenger</a>
-  </div>
-</div>
-```
-
----
-
-## 🔄 Multi-Step Flow
-
-For complex interactions (e.g., booking → success → calendar CTA):
-
-```javascript
-// Step 1: Show booking form
-sheet.setContent(bookingFormHTML);
-sheet.show();
-
-// Step 2: On form success → swap to calendar CTA
-onFormSuccess(() => {
-  sheet.setContent(calendarCTAHTML);
-  // Track transition
-  trackEngagement('cro_booking_submit', { service: formData.service });
-});
-
-// Step 3: On calendar add → show thank you + close
-onCalendarAdd(() => {
-  trackEngagement('cro_calendar_add', { type: 'gcal' });
-  sheet.hide();
-  showToast('success', 'Đã thêm vào lịch! 🎉');
-});
-```
-
----
-
-## ❌ Anti-Patterns
-
-| ❌ Don't | ✅ Do |
-|----------|------|
-| Nest sheets inside sheets | One sheet at a time, swap content |
-| Hardcode content | Use setContent() for flexibility |
-| Forget backdrop for full sheets | Add backdrop + blur for full-size |
-| Skip keyboard navigation | Trap Tab key, close on Escape |
-| Ignore safe-area-inset | Always pad for notched phones |
-| Use `overflow: hidden` on body | Use `overscroll-behavior: contain` on sheet |
-| Animate with JS | Use CSS transitions + `requestAnimationFrame` |