novahiz 0.1.0

package/bundled-skills/analytics/references/gtm-implementation.md

@@ -0,0 +1,390 @@
+# Google Tag Manager Implementation Reference
+
+Detailed guide for implementing tracking via Google Tag Manager.
+
+## Contents
+- Container Structure (tags, triggers, variables)
+- Naming Conventions
+- Data Layer Patterns
+- Common Tag Configurations (GA4 configuration tag, GA4 event tag, Facebook pixel)
+- Preview and Debug
+- Workspaces and Versioning
+- Consent Management
+- Advanced Patterns (tag sequencing, exception handling, custom JavaScript variables)
+
+## Container Structure
+
+### Tags
+
+Tags are code snippets that execute when triggered.
+
+**Common tag types:**
+- GA4 Configuration (base setup)
+- GA4 Event (custom events)
+- Google Ads Conversion
+- Facebook Pixel
+- LinkedIn Insight Tag
+- Custom HTML (for other pixels)
+
+### Triggers
+
+Triggers define when tags fire.
+
+**Built-in triggers:**
+- Page View: All Pages, DOM Ready, Window Loaded
+- Click: All Elements, Just Links
+- Form Submission
+- Scroll Depth
+- Timer
+- Element Visibility
+
+**Custom triggers:**
+- Custom Event (from dataLayer)
+- Trigger Groups (multiple conditions)
+
+### Variables
+
+Variables capture dynamic values.
+
+**Built-in (enable as needed):**
+- Click Text, Click URL, Click ID, Click Classes
+- Page Path, Page URL, Page Hostname
+- Referrer
+- Form Element, Form ID
+
+**User-defined:**
+- Data Layer variables
+- JavaScript variables
+- Lookup tables
+- RegEx tables
+- Constants
+
+---
+
+## Naming Conventions
+
+### Recommended Format
+
+```
+[Type] - [Description] - [Detail]
+
+Tags:
+GA4 - Event - Signup Completed
+GA4 - Config - Base Configuration
+FB - Pixel - Page View
+HTML - LiveChat Widget
+
+Triggers:
+Click - CTA Button
+Submit - Contact Form
+View - Pricing Page
+Custom - signup_completed
+
+Variables:
+DL - user_id
+JS - Current Timestamp
+LT - Campaign Source Map
+```
+
+---
+
+## Data Layer Patterns
+
+### Basic Structure
+
+```javascript
+// Initialize (in <head> before GTM)
+window.dataLayer = window.dataLayer || [];
+
+// Push event
+dataLayer.push({
+  'event': 'event_name',
+  'property1': 'value1',
+  'property2': 'value2'
+});
+```
+
+### Page Load Data
+
+```javascript
+// Set on page load (before GTM container)
+window.dataLayer = window.dataLayer || [];
+dataLayer.push({
+  'pageType': 'product',
+  'contentGroup': 'products',
+  'user': {
+    'loggedIn': true,
+    'userId': '12345',
+    'userType': 'premium'
+  }
+});
+```
+
+### Form Submission
+
+```javascript
+document.querySelector('#contact-form').addEventListener('submit', function() {
+  dataLayer.push({
+    'event': 'form_submitted',
+    'formName': 'contact',
+    'formLocation': 'footer'
+  });
+});
+```
+
+### Button Click
+
+```javascript
+document.querySelector('.cta-button').addEventListener('click', function() {
+  dataLayer.push({
+    'event': 'cta_clicked',
+    'ctaText': this.innerText,
+    'ctaLocation': 'hero'
+  });
+});
+```
+
+### E-commerce Events
+
+```javascript
+// Product view
+dataLayer.push({ ecommerce: null }); // Clear previous
+dataLayer.push({
+  'event': 'view_item',
+  'ecommerce': {
+    'items': [{
+      'item_id': 'SKU123',
+      'item_name': 'Product Name',
+      'price': 99.99,
+      'item_category': 'Category',
+      'quantity': 1
+    }]
+  }
+});
+
+// Add to cart
+dataLayer.push({ ecommerce: null });
+dataLayer.push({
+  'event': 'add_to_cart',
+  'ecommerce': {
+    'items': [{
+      'item_id': 'SKU123',
+      'item_name': 'Product Name',
+      'price': 99.99,
+      'quantity': 1
+    }]
+  }
+});
+
+// Purchase
+dataLayer.push({ ecommerce: null });
+dataLayer.push({
+  'event': 'purchase',
+  'ecommerce': {
+    'transaction_id': 'T12345',
+    'value': 99.99,
+    'currency': 'USD',
+    'tax': 5.00,
+    'shipping': 10.00,
+    'items': [{
+      'item_id': 'SKU123',
+      'item_name': 'Product Name',
+      'price': 99.99,
+      'quantity': 1
+    }]
+  }
+});
+```
+
+---
+
+## Common Tag Configurations
+
+### GA4 Configuration Tag
+
+**Tag Type:** Google Analytics: GA4 Configuration
+
+**Settings:**
+- Measurement ID: G-XXXXXXXX
+- Send page view: Checked (for pageviews)
+- User Properties: Add any user-level dimensions
+
+**Trigger:** All Pages
+
+### GA4 Event Tag
+
+**Tag Type:** Google Analytics: GA4 Event
+
+**Settings:**
+- Configuration Tag: Select your config tag
+- Event Name: {{DL - event_name}} or hardcode
+- Event Parameters: Add parameters from dataLayer
+
+**Trigger:** Custom Event with event name match
+
+### Facebook Pixel - Base
+
+**Tag Type:** Custom HTML
+
+```html
+<script>
+  !function(f,b,e,v,n,t,s)
+  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+  n.queue=[];t=b.createElement(e);t.async=!0;
+  t.src=v;s=b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t,s)}(window, document,'script',
+  'https://connect.facebook.net/en_US/fbevents.js');
+  fbq('init', 'YOUR_PIXEL_ID');
+  fbq('track', 'PageView');
+</script>
+```
+
+**Trigger:** All Pages
+
+### Facebook Pixel - Event
+
+**Tag Type:** Custom HTML
+
+```html
+<script>
+  fbq('track', 'Lead', {
+    content_name: '{{DL - form_name}}'
+  });
+</script>
+```
+
+**Trigger:** Custom Event - form_submitted
+
+---
+
+## Preview and Debug
+
+### Preview Mode
+
+1. Click "Preview" in GTM
+2. Enter site URL
+3. GTM debug panel opens at bottom
+
+**What to check:**
+- Tags fired on this event
+- Tags not fired (and why)
+- Variables and their values
+- Data layer contents
+
+### Debug Tips
+
+**Tag not firing:**
+- Check trigger conditions
+- Verify data layer push
+- Check tag sequencing
+
+**Wrong variable value:**
+- Check data layer structure
+- Verify variable path (nested objects)
+- Check timing (data may not exist yet)
+
+**Multiple firings:**
+- Check trigger uniqueness
+- Look for duplicate tags
+- Check tag firing options
+
+---
+
+## Workspaces and Versioning
+
+### Workspaces
+
+Use workspaces for team collaboration:
+- Default workspace for production
+- Separate workspaces for large changes
+- Merge when ready
+
+### Version Management
+
+**Best practices:**
+- Name every version descriptively
+- Add notes explaining changes
+- Review changes before publish
+- Keep production version noted
+
+**Version notes example:**
+```
+v15: Added purchase conversion tracking
+- New tag: GA4 - Event - Purchase
+- New trigger: Custom Event - purchase
+- New variables: DL - transaction_id, DL - value
+- Tested: Chrome, Safari, Mobile
+```
+
+---
+
+## Consent Management
+
+### Consent Mode Integration
+
+```javascript
+// Default state (before consent)
+gtag('consent', 'default', {
+  'analytics_storage': 'denied',
+  'ad_storage': 'denied'
+});
+
+// Update on consent
+function grantConsent() {
+  gtag('consent', 'update', {
+    'analytics_storage': 'granted',
+    'ad_storage': 'granted'
+  });
+}
+```
+
+### GTM Consent Overview
+
+1. Enable Consent Overview in Admin
+2. Configure consent for each tag
+3. Tags respect consent state automatically
+
+---
+
+## Advanced Patterns
+
+### Tag Sequencing
+
+**Setup tags to fire in order:**
+Tag Configuration > Advanced Settings > Tag Sequencing
+
+**Use cases:**
+- Config tag before event tags
+- Pixel initialization before tracking
+- Cleanup after conversion
+
+### Exception Handling
+
+**Trigger exceptions** - Prevent tag from firing:
+- Exclude certain pages
+- Exclude internal traffic
+- Exclude during testing
+
+### Custom JavaScript Variables
+
+```javascript
+// Get URL parameter
+function() {
+  var params = new URLSearchParams(window.location.search);
+  return params.get('campaign') || '(not set)';
+}
+
+// Get cookie value
+function() {
+  var match = document.cookie.match('(^|;) ?user_id=([^;]*)(;|$)');
+  return match ? match[2] : null;
+}
+
+// Get data from page
+function() {
+  var el = document.querySelector('.product-price');
+  return el ? parseFloat(el.textContent.replace('$', '')) : 0;
+}
+```

package/bundled-skills/android-emulator/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: android-emulator
+description: Verify and debug native, React Native, Expo, or Flutter apps on an Android Emulator with agent-device. Use when an agent needs to launch an app, inspect its live UI, tap, type, scroll, validate a code change, collect failure evidence, or reproduce a workflow on an Android virtual device.
+---
+
+# Android Emulator
+
+Require the `agent-device` CLI to be installed separately before driving an emulator:
+
+```bash
+npm install -g agent-device@latest
+```
+
+Treat installation and upgrades as user-owned setup steps. Do not run that command autonomously or substitute a mutable `npx -y agent-device@latest` invocation.
+
+For a normal app-driving task, start immediately. Do not probe first with `--help`, `--version`, `devices`, `appstate`, `snapshot`, or `screenshot`. Target Android explicitly when opening an app or package id:
+
+```bash
+agent-device open <app-or-package-id> --platform android --foreground
+```
+
+Follow the initial interactive snapshot and corrective error hints. If the shell reports that `agent-device` is unavailable, stop and ask the user to install it or expose their existing installation on `PATH`.
+
+Only when the task is specialized or a command shape is unclear, read the relevant version-matched help topic:
+
+```bash
+agent-device help validate        # engineering validation and build freshness
+agent-device help debugging       # screenshots, logs, traces, video, and failures
+agent-device help react-native    # React Native and Expo runtime guidance
+agent-device help react-devtools  # component tree, props/state/hooks, and renders
+agent-device help scripting       # durable replay and CI workflows
+```

package/bundled-skills/anti-AI-design/SKILL.md

@@ -0,0 +1,189 @@
+---
+name: anti-AI-design
+description: "Use when building any UI, landing page, dashboard, or frontend component to eliminate generic AI-generated design patterns. Detects and fixes visual tells that make sites look machine-made: purple gradients, sparkle icons, centered heroes, identical cards, fade-in-up animations. Apply BEFORE every UI deliverable."
+---
+
+# Anti-AI Design — Eliminate Machine-Made Tells
+
+Every UI deliverable MUST pass this checklist before shipping. These patterns are detected by users in ~50ms and destroy trust.
+
+---
+
+## BANNED ICONS & EMOJIS
+
+Never use these icons/emojis in feature sections, badges, or CTAs:
+
+| Banned | Why | Replace With |
+|--------|-----|-------------|
+| Sparkle (✨) | Signature #1 of v0/Lovable AI output | Contextual icon to the product, or NO icon |
+| Zap (⚡) for "fast" | Top 5 AI Lucide icon | Timer, or remove icon entirely |
+| Shield (🛡) for "secure" | Default AI icon for any "secure" word | Lock, or text-only description |
+| Rocket (🚀) in pill badges | AI pill badge pattern | Delete badge, or use plain text label |
+| Fire (🔥) in pill badges | Same as rocket | Same |
+| Check (✓) in tinted circles | shadcn Pricing example pattern | Simple check without circle, or bold text |
+| BarChart3 for "analytics" | Top 5 AI icons | Donut, TrendingUp, or no icon |
+| ArrowRight on all CTAs | Every AI button has an arrow | Remove arrow, or use distinct button style |
+| Emoji in section headings | Inconsistent rendering, ignores brand color | Inline SVG with currentColor, stroke 1.5-2px |
+| Terminal mockup with 3 macOS dots | Ultra-recognizable AI signature | Real product screenshot, or nothing |
+| DiceBear/Pravatar avatars | Generated = fake = zero trust | Real photos, or remove avatars |
+| 5 amber stars on testimonials | Always 5/5, always amber | Link to real source (G2, Capterra, App Store) |
+
+---
+
+## BANNED COLORS
+
+### Primary Color
+- NEVER use `#3B82F6` (blue-500) or `#6366F1` (indigo-500) as primary
+- Use: Emerald (#10b981), Deep Rose, Amber, Teal, or a REAL brand color
+- 60%+ of AI sites use blue-500 — it screams "nobody chose a brand color"
+
+### Gradients
+- NEVER use `from-purple-500 to-pink-500` (the strongest visual AI tell)
+- NEVER use triple gradients `from-blue-500 via-purple-500 to-pink-500`
+- NEVER use rainbow gradient text (3-stop rainbow on a word)
+- FIX: Single solid accent, or gradient with <60° hue spread using analogous colors
+- FIX: If gradient is essential — 2 stops max, analogous hues, modest saturation
+
+### Shadows
+- NEVER use purple-tinted shadows on cards
+- FIX: Neutral diffusion: `shadow-[0_20px_40px_-15px_rgba(0,0,0,0.08)]`
+- Color comes from the surface, not the shadow
+
+### Backgrounds
+- NEVER use pure `#fff` or `#000` — always add a tint
+- NEVER use `slate-50` (#F8FAFB) — the most common AI background hex
+- Use off-white with warmth: `#f5f0eb`, `#faf7f2`
+- Use dark with tint: `#0a0a0a`, `#1a1a1e`
+
+### Accent Budget
+- Pick 3 accent colors maximum
+- Each appears 3 times maximum on the page
+- Total accent moments: 9 maximum
+- More = slot machine = AI slop
+
+---
+
+## BANNED TYPOGRAPHY
+
+| Banned | Why | Fix |
+|--------|-----|-----|
+| Inter weight 700 for display headlines | Default of every AI tool | Inter weight 400-500 at larger size (size does the work) |
+| Inter alone, no pairing | Inter body = fine, Inter display = tell | Serif display (Fraunces, Playfair) + sans body |
+| `text-[90px]` arbitrary px values | Bypasses type scale | `clamp()` for fluid typography |
+| `tracking-wide uppercase` on eyebrow labels | The "here's thing" of AI pages | Sobre label, normal case, light weight |
+| `text-gray-600` everywhere | Tailwind default = no color system | Semantic token: `text-secondary`, `text-muted` |
+| System font stack as display | Last resort fallback | Geist, Satoshi, Cabinet Grotesque, IBM Plex |
+
+### Typography Rules
+- ONE display font + ONE body font — that's it
+- Display weight: 500 maximum — let size do the work
+- Body weight: 400 — readability
+- Line-height: 1.1 on headings, 1.65 on body — NOT 1.5 everywhere
+- Use `text-wrap: balance` on headlines
+
+---
+
+## BANNED LAYOUTS
+
+| Banned | Why | Fix |
+|--------|-----|-----|
+| `grid-cols-3 gap-6 rounded-2xl shadow-md` | 71% of AI sites have exactly this | Asymmetric: 2+1, bento, unequal mosaic |
+| Centered hero: H1 + p + 2 CTAs | Laziest AI hero composition | Left-aligned hero with editorial 7-5 or 8-4 grid |
+| `rounded-2xl` on EVERYTHING | No hierarchy = flat | `rounded-none` (editorial), `rounded-[2px]`, `rounded-sm` — vary by class |
+| `shadow-md` on all cards | Stripe-era Goldilocks shadow | `shadow-none`, `shadow-sm`, or 1px hairline border |
+| `transition-all duration-300 ease-in-out` | The AI animation on everything | Custom curves: `cubic-bezier(0.22,1,0.36,1)`, variable durations |
+| Identical vertical padding between sections | Metronome rhythm = template | Vary: 160px, 200px, 120px, 96px per section |
+| `max-w-7xl` everywhere | AI default value | Deliberate: 1080px, 1200px, 1440px |
+| Sticky nav with blur backdrop | Glassmorphism tell | Blur ONLY on overlays/modals, not every element |
+| `fade-in-up` on every section | Motion slop — decorative without reason | Functional animations that communicate state |
+| `opacity: 0, y: 20` then `opacity: 1, y: 0` | The AI scroll animation | No animation, or attention-guiding animation |
+
+### Layout Rules
+- At least 1 section must break the vertical rhythm (full-bleed, short, asymmetric)
+- At least 50% of sections must use asymmetric layouts
+- ONE "bold moment" per fold — not five competing visuals
+- ONE border radius on the page — pick a system, apply consistently
+- Section padding: 160px minimum (AI defaults use 64-96px)
+
+---
+
+## BANNED COPY PATTERNS
+
+| Banned | Why | Fix |
+|--------|-----|-----|
+| "Build the future of work" | Generic hero copy | Say WHAT the product does specifically |
+| "Scale without limits" | Same problem | Client language, not marketing language |
+| "Seamless", "Robust", "Cutting-edge" | Empty superlatives | Concrete numbers, client names, use cases |
+| "Empower", "Unlock", "Elevate" | AI default verbs | Specific action verbs |
+| Em-dash in every sentence | AI copywriting signature | Use ; or . or — but rarely |
+| "In today's fast-paced world" | Most cliché AI opening | Start with a fact, question, or direct statement |
+| "Get started", "Learn more", "Watch demo" | Generic CTAs | Context-specific CTAs |
+| Hedging: "May help you" | AI hedges to avoid being wrong | Assert: "This does X" |
+| 5-star testimonials without source | Zero trust | Link to verifiable source |
+| "Trusted by" with fake logos | Immediately fake | Real logos with permission, or nothing |
+| 3 pricing tiers: Starter/Pro/Enterprise | AI pricing pattern | Value-based pricing, not tier comparison |
+
+---
+
+## BANNED STRUCTURES
+
+| Banned | Why | Fix |
+|--------|-----|-----|
+| Navbar > Hero > Features > Testimonials > CTA > Footer | Template waterfall | Reorder, merge, break the sequence |
+| FAQ accordion with chevron | Universal AI pattern | FAQ in prose, or alternating Q&A layout |
+| Footer 4 columns: Product/Company/Resources/Legal | AI default footer | Minimal footer, or creative layout |
+| Glassmorphism on everything | Glass = AI tell 2021-2026 | Blur ONLY on overlays/modals |
+| `backdrop-filter: blur()` everywhere | Same | Same |
+
+---
+
+## BANNED CODE PATTERNS
+
+| Banned | Why | Fix |
+|--------|-----|-----|
+| shadcn/ui defaults unmodified | Default tokens = no design system | Modify radius, colors, spacing, typography |
+| Tailwind via CDN `<script>` | Non-production build signal | Normal CSS build (PostCSS, Tailwind CLI) |
+| `data-v0-*` attributes | v0 brand in DOM | Remove after generation |
+| "Made with Lovable" link | Lovable default footer | Disable in settings |
+| `console.log` in production | Draft-state leak | Remove before push |
+| `style=` inline attributes | Bypasses design system | Tailwind classes or CSS modules |
+| Lucide icons in nav + CTAs | AI default icon library | Phosphor duotone, Tabler filled, or custom SVG |
+
+---
+
+## SELF-CRITIQUE CHECKLIST
+
+Before shipping ANY UI, run this checklist:
+
+1. Gradient check: Is it the same as 100 other sites? Change at least 1 stop
+2. Cards check: Are the 3 cards identical? Make asymmetric
+3. Hero check: Is it centered with H1 + p + 2 buttons? Left-align
+4. Icon check: Is there a sparkle/rocket/fire? Delete or replace
+5. Copy check: Does it say something specific to THIS product? Rewrite
+6. Animation check: Do animations have a functional reason? Delete decorative ones
+7. Avatar check: Are avatars real? Real photos or remove
+8. Favicon check: Is it a globe/emoji? Custom favicon
+9. 404 check: Is it the default Next.js/Vercel? Custom 404 page
+10. Asymmetry check: Is there at least 1 asymmetric layout? Break the uniform grid
+11. Color check: Are there more than 3 accent colors? Reduce to 3 max
+12. Spacing check: Is every section the same padding? Vary the rhythm
+13. Shadow check: Are shadows purple-tinted? Switch to neutral rgba(0,0,0,0.08)
+14. Radius check: Is everything rounded-2xl? Mix rounded-none, rounded-sm, rounded-[2px]
+15. Font check: Is Inter weight 700 the display font? Switch to weight 500 or pair with serif
+
+---
+
+## POSITIVE CRAFT SIGNALS
+
+These patterns signal human craftsmanship and LOWER the AI score:
+
+- Custom selection colors (`::selection` styled)
+- Custom focus-visible states (not browser default)
+- Proper dark mode palette (tested, not adapted from light)
+- Semantic color tokens (not raw Tailwind values)
+- Editorial typography (mixed weights 300/500/700, display face with intent)
+- Real content density (600+ words on feature pages, not 80 words + 6 icons)
+- Numbers, dates, version strings — proof of craft
+- Negative space used aggressively — not everything needs a card
+- At most one border-radius on the page — pick a system
+- Reference images over adjectives — "Look at Linear's density" > "Make it premium"