codymaster 4.1.0

package/skills/cm-ux-master/SKILL.md

@@ -0,0 +1,114 @@
+---
+name: cm-ux-master
+description: "Ultimate UI/UX design intelligence with Harvester (AI-powered visual extraction), 48 UX Laws, 37 Design Tests, UX Heuristics (Nielsen + Krug), Figma & Google Stitch integration, MCP server for Claude/Cursor, Component Generator, and BM25 search across 16 domains. One command = Complete design system. 10x productivity boost. All features are free and included. No paid tiers."
+---
+
+# CM UX Master — Ultimate Design Intelligence
+
+**AI-powered design system platform:** Harvester extraction, MCP integration (Stitch + Pencil.dev), 48 UX Laws, 37 Design Tests, 1032+ design rules across 16 domains.
+
+## System Persona
+
+You are **"The MasterDesign Agent"** — Elite Principal Product Designer and Frontend Architect. You design complex, functional UIs for Web Apps, Mobile Apps, and SaaS Dashboards. **Form follows function.** No excessive glassmorphism, no useless infinite animations.
+
+## Core Directives (MANDATORY)
+
+### 1. Mobile & Touch (Fitts's Law)
+- ALL touch targets ≥ 44×44px. Primary actions in **Thumb Zone** (bottom 1/3).
+- Use sticky bottom bars, bottom-sheet modals, swipe actions for lists.
+
+### 2. Decision Architecture (Hick's Law)
+- Use **Progressive Disclosure**. Limit primary CTAs to 1-2 per view.
+- Hide advanced settings behind accordions or `...` menus.
+
+### 3. Data Density (Miller's Law)
+- Chunk information into groups of 5-9. Use whitespace and subtle separators.
+
+### 4. Perceived Performance (Doherty Threshold)
+- All UI lifecycle states: Skeleton Loader, Empty State, Error State, Interactive states (`hover:`, `active:`, `disabled:`, `focus-visible:`).
+
+### 5. Accessibility (A11y + Poka-Yoke)
+- WCAG 2.1 AA contrast. `focus-visible:ring-2` on all interactive elements.
+- Destructive actions visually distinct + separated from safe actions.
+- Semantic HTML + ARIA attributes.
+
+### 6. i18n & Multi-Locale
+- Design with longest string in mind (Thai ~30-40% longer than English).
+- Use `min-width` not fixed `width`. Verify font supports all target scripts.
+- Locale-aware formatting: `toLocaleDateString(userLocale)`, never hardcode locale.
+
+## How to Use
+
+### Step 1: Analyze Requirements
+Extract: product type, style keywords, industry, stack.
+
+### Step 2: Generate Design System (REQUIRED)
+```bash
+python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+```
+Searches 5 domains in parallel, applies UX Laws + Design Tests, returns complete design system.
+
+### Step 3: Query UX Laws
+```bash
+python3 scripts/search.py "mobile app fitts" --domain ux-laws -n 5
+```
+48 UX Laws mapped across 12 product types.
+
+### Step 4: Query Design Tests
+```bash
+python3 scripts/search.py "landing page hero" --domain design-tests -n 5
+```
+37 Design Tests with pass/fail criteria.
+
+### Step 5: Supplement with Domain Searches
+| Need | Domain | Example |
+|------|--------|---------|
+| Style options | `style` | `"glassmorphism dark"` |
+| Charts | `chart` | `"real-time dashboard"` |
+| UX practices | `ux` | `"animation accessibility"` |
+| Fonts | `typography` | `"elegant luxury"` |
+| UX Laws | `ux-laws` | `"hick's law landing"` |
+| Design Tests | `design-tests` | `"mobile app navigation"` |
+
+### Step 6: Stack Guidelines
+Available: `html-tailwind`, `react`, `nextjs`, `astro`, `vue`, `nuxtjs`, `nuxt-ui`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`, `angular`, `htmx`, `electron`, `tauri`
+
+### Step 7: Extract Design System
+> Harvester extraction has been moved to **`cm-design-system`**. Delegate extraction tasks there.
+
+## DESIGN.md Standard
+
+Output `DESIGN.md` as Absolute Source of Truth. Must include: Overview, Colors, Typography, Spacing, Components, Do's/Don'ts, and hidden JSON tokens wrapped in `<!-- STITCH_TOKENS_START -->` / `<!-- STITCH_TOKENS_END -->`.
+
+## Execution Output Format (MANDATORY)
+
+### 🧠 UX Reasoning (2-3 bullets: which UX Laws applied and why)
+### 💻 Production Code (with inline `<!-- UX: Law Name -->` comments)
+### ✅ Validation Checklist (confirm Core Directives compliance)
+
+## Common UI Rules
+
+**Icons:** Use SVG (Heroicons, Lucide), never emojis. Consistent sizing (24x24).
+**Interaction:** `cursor-pointer` on all clickables. Smooth transitions (150-300ms). `focus-visible` for keyboard nav.
+**Light/Dark:** Light mode text ≥ 4.5:1 contrast. Glass elements visible in both modes.
+**Layout:** Floating navbar with spacing. Content padding accounts for fixed elements. Consistent max-width.
+
+## Krug's Laws + Nielsen's 10 Heuristics
+
+**Krug:** (1) Don't make me think. (2) Clicks are fine if each is obvious. (3) Get rid of half the words, then half again.
+**Nielsen:** Visibility of status, Match real world, User control (undo > confirm dialogs), Consistency, Error prevention, Recognition > recall, Flexibility, Minimalist design, Help with errors, Documentation.
+**Severity:** 0=ignore, 1=cosmetic, 2=minor, 3=major, 4=catastrophic (fix immediately).
+
+## Pre-Delivery Checklist
+
+- [ ] Touch targets ≥ 44px, primary action in thumb zone
+- [ ] Max 1-2 CTAs per view, progressive disclosure
+- [ ] Data chunked in groups of 5-9
+- [ ] Skeleton + Empty + Error states, all interactive states coded
+- [ ] WCAG AA contrast, focus-visible rings, semantic HTML
+- [ ] i18n: min-width containers, locale-aware formatting, font supports all scripts
+- [ ] Inline `<!-- UX: Law Name -->` comments in code
+- [ ] No emojis as icons, consistent icon set, correct brand logos
+- [ ] Hover states don't cause layout shift
+- [ ] Responsive at 375px, 768px, 1024px, 1440px
+- [ ] `prefers-reduced-motion` respected

package/skills/cro-methodology/SKILL.md

@@ -0,0 +1,98 @@
+---
+name: cro-methodology
+description: 'Audit websites and landing pages for conversion issues and design evidence-based A/B tests. Use when the user mentions "landing page isn''t converting", "conversion rate", "A/B test", "why visitors leave", or "objection handling". Covers funnel mapping, persuasion assets, and objection/counter-objection frameworks. For overall marketing strategy, see one-page-marketing. For usability issues, see ux-heuristics.'
+license: MIT
+metadata:
+  author: wondelai
+  version: "1.1.1"
+---
+
+# CRO Methodology
+
+Evidence-based conversion optimization using the CRE Methodology. Extraordinary improvements come from understanding WHY visitors don't convert, not copying competitors.
+
+**Core Principle:** Don't guess — discover. Research why visitors leave, then systematically eliminate those reasons with evidence and proof.
+
+**Scoring — Goal: 10/10.** Rate landing pages/funnels 0-10 on adherence to these principles.
+
+## The 6 CRO Frameworks
+
+### 1. The CRO Process (9 Steps)
+
+Define success metrics → Map funnel (find "blocked arteries") → Research visitors (who, what blocks, what stops) → Market intelligence → ICE prioritize → Bold experiment design → Run with statistical rigor (95% confidence) → Scale wins across channels.
+
+**Key:** Research BEFORE changing anything. Prioritize with ICE scoring (Impact × Confidence × Ease).
+
+### 2. Customer Research & Objections
+
+**Sources:** Exit surveys, chat logs, support tickets, sales calls (primary). Reviews, social media, competitors (secondary).
+
+**The "Big 5" universal objections:** Trust, Price, Fit, Timing, Effort.
+
+**Methods:** "What's preventing you from [action] today?" (exit survey). "What almost stopped you from buying?" (post-purchase). Use exact customer language in copy.
+
+### 3. Persuasion Assets
+
+Audit 5 categories: Credentials & Authority, Social Proof, Risk Reversal, Data & Specificity, Process & Methodology.
+
+**Proof hierarchy** (strongest → weakest): Specific results with context → Named testimonials with photos → Case studies → Statistics → Logos/badges → Generic testimonials.
+
+**Structure:** Claim → Proof → Reinforcement. Place proof at friction points, not hidden in FAQs. Specific numbers > round numbers.
+
+### 4. O/CO Framework (Objection/Counter-Objection)
+
+Map every objection to evidence-backed counter-objections. Place at point of friction.
+
+| Objection | Counter-Objection Approach |
+|-----------|--------------------------|
+| Trust ("Why believe you?") | Testimonials, media logos, awards, guarantee |
+| Price ("Worth the money?") | ROI calculator, cost comparison, payment plans |
+| Fit ("Work for MY situation?") | Case studies from similar customers, free trial |
+| Timing ("Why now?") | Cost of delay, genuine limited offers |
+| Effort ("How hard?") | "Done for you", "Setup in 5 min", step-by-step |
+
+**Implicit objections:** Address without stating (CO Only). Bad: "Worried you're lazy?" Good: "Let the audio do the work."
+
+### 5. Hypothesis Design
+
+Format: "If we [change X], then [metric Y] will improve because [reason from research]."
+
+ICE scoring: Impact (1-10), Confidence (1-10), Ease (1-10). Average = priority score.
+
+**Make BOLD changes, not "meek tweaks."** Worth testing: complete redesign, new value prop, different offer. Not worth: button color, font size.
+
+### 6. A/B Testing Methodology
+
+- Calculate sample size BEFORE starting
+- Run ≥1 full business cycle (1-2 weeks, weekdays + weekends)
+- Never peek and stop early
+- 95% confidence minimum
+- Practical significance matters (0.1% lift may not be worth it)
+- Failed tests that teach > winning tests you don't understand
+
+## Quick Diagnostic
+
+| Question | If No → Action |
+|----------|---------------|
+| ONE clear action per page? | Define single goal, remove competing CTAs |
+| Researched WHY visitors leave? | Run exit surveys, analyze support tickets |
+| O/CO table exists? | Build from research, place at friction points |
+| Value prop clear in 5 seconds? | 5-second test, rewrite with customer language |
+| Persuasion assets visible? | Audit, acquire missing ones, display prominently |
+| Full funnel mapped? | Map traffic volumes, identify blocked arteries |
+
+## Quick-Start Checklist
+
+1. What is the ONE action visitors should take?
+2. Who are the visitors? Buying journey stage?
+3. Top 3-5 objections? (Research, don't guess)
+4. What proof addresses each?
+5. Value proposition clear in 5 seconds?
+6. UX blockers? (speed, mobile, forms)
+7. Missing/hidden persuasion assets?
+
+## Reference Files
+
+- [OBJECTIONS.md](references/OBJECTIONS.md), [COPYWRITING.md](references/COPYWRITING.md), [PERSUASION.md](references/PERSUASION.md), [RESEARCH.md](references/RESEARCH.md), [testing-methodology.md](references/testing-methodology.md), [funnel-analysis.md](references/funnel-analysis.md)
+
+Based on the CRE Methodology by Dr. Karl Blanks and Ben Jesson (*Making Websites Win*).

package/skills/cro-methodology/references/COPYWRITING.md

@@ -0,0 +1,178 @@
+# Persuasive Copywriting for CRO
+
+Evidence-based copywriting principles. Write as much as it takes to communicate your entire sales message—but not one word more.
+
+## Headlines
+
+The headline's job: Get visitors to read the next line.
+
+### Headline Formulas That Work
+
+**Problem-agitate-solve**:
+"Tired of [problem]? [Solution] lets you [benefit]."
+
+**Specificity wins**:
+Bad: "Improve your conversion rate"
+Good: "How we increased conversions by 363%"
+
+**News angle**:
+"[X] facts about [topic] you were never told"
+
+**How-to**:
+"How to [achieve result] without [common pain]"
+
+**Question**:
+"What's stopping your website from converting?"
+
+### Headline Testing Priority
+
+1. Value proposition clarity
+2. Specific numbers/results
+3. Audience targeting
+4. Urgency/timeliness
+5. Emotional hook
+
+## Body Copy Principles
+
+### Length
+Write as much as it takes to:
+- Communicate the complete sales message
+- Address all major objections
+- Provide sufficient proof
+
+Long copy works when visitors are:
+- Unfamiliar with product category
+- Making a high-commitment decision
+- Comparing alternatives
+
+Short copy works when:
+- Brand is well-known
+- Product is simple/commoditized
+- Visitors are already convinced
+
+### Structure
+
+**Lead with benefits, not features**
+Feature: "256GB storage"
+Benefit: "Never delete another photo"
+
+**Use specific numbers**
+Weak: "Thousands of customers"
+Strong: "47,832 businesses trust us"
+
+**Write for scanners**
+- Subheadings that tell the story alone
+- Bold key phrases
+- Bullet points for multiple items
+- Short paragraphs (2-4 sentences)
+
+### Voice
+
+**Clarity over cleverness**
+No reader is too sophisticated for simple sentences.
+
+**Active voice**
+Bad: "Your conversion rate will be improved"
+Good: "We'll improve your conversion rate"
+
+**"You" focus**
+Count "you" vs. "we" in your copy. Visitors care about themselves.
+
+**Circle adjectives and adverbs**
+Replace vague modifiers with specific facts:
+Bad: "incredibly fast delivery"
+Good: "delivery in 2 hours or less"
+
+## Proof Elements
+
+### Hierarchy of proof (strongest to weakest)
+
+1. **Specific results with context**
+   "Increased revenue by $2.4M in 6 months"
+
+2. **Named testimonials with photos**
+   Real people, real companies, specific outcomes
+
+3. **Case studies**
+   Problem → Solution → Results format
+
+4. **Statistics and data**
+   Industry benchmarks, research findings
+
+5. **Logos and badges**
+   Client logos, media mentions, certifications
+
+6. **Generic testimonials**
+   Unnamed quotes (weakest form)
+
+### Testimonial Best Practices
+
+**Include specifics**:
+Bad: "Great product!"
+Good: "Increased our conversion rate from 2.1% to 4.7% in 3 weeks"
+
+**Address objections**:
+Choose testimonials that counter specific fears
+
+**Match the audience**:
+B2B visitors want testimonials from similar companies/roles
+
+**Use photos**:
+Real photos > stock photos > no photos
+
+## Calls-to-Action
+
+### CTA Copy
+
+**Benefit-oriented**:
+Bad: "Submit"
+Good: "Get my free report"
+
+**Reduce perceived commitment**:
+"Start free trial" vs. "Sign up"
+"See pricing" vs. "Buy now"
+
+**Match button to promise**:
+If page promises "10 ways to improve X", CTA should be:
+"Show me the 10 ways" not "Learn more"
+
+### CTA Placement
+
+- Above the fold (for aware visitors)
+- After each major section
+- At moment of peak interest
+- Sticky/floating for long pages
+
+### CTA Testing Ideas
+
+1. Benefit vs. action language
+2. Commitment level (free vs. buy)
+3. Urgency elements
+4. Size and color (test AFTER copy)
+5. Number of CTAs per page
+
+## Common Copywriting Mistakes
+
+1. **Features without benefits**
+   Always answer "So what?"
+
+2. **Vague claims**
+   "Best in class" → "Rated #1 by [source]"
+
+3. **Talking about yourself**
+   Reframe everything around the visitor
+
+4. **Burying the lead**
+   Put most important information first
+
+5. **Assuming knowledge**
+   Explain industry jargon
+
+6. **Missing objections**
+   Address hesitations head-on
+
+7. **Weak proof**
+   Generic testimonials, no specifics
+
+8. **Unclear next step**
+   Always make the action obvious

package/skills/cro-methodology/references/OBJECTIONS.md

@@ -0,0 +1,135 @@
+# Objection/Counter-Objection (O/CO) Framework
+
+The core CRE technique for increasing conversions. Don't guess objections—research them. Then systematically counter each one.
+
+## The O/CO Table
+
+Create a two-column table:
+
+| Objection | Counter-Objection |
+|-----------|-------------------|
+| "It's too expensive" | ROI calculator, payment plans, comparison with alternatives |
+| "I don't trust this company" | Testimonials, awards, media mentions, guarantees |
+| "It won't work for my situation" | Case studies from similar customers, free trial |
+
+## How to Discover Objections
+
+### Primary Sources (Direct from visitors)
+
+**Exit surveys** (Qualaroo, Hotjar, etc.)
+- "What's preventing you from signing up today?"
+- "What questions do you still have?"
+- "What would make this decision easier?"
+
+**Live chat logs**
+- Search for patterns in "but", "however", "worried about"
+- Note recurring hesitations
+
+**Support tickets**
+- Pre-purchase questions reveal objections
+- "Canned responses" are goldmines of tested counter-objections
+
+**Sales call recordings**
+- What objections do salespeople hear repeatedly?
+- What counter-arguments work?
+
+**"Refer a friend" messages**
+- How do customers describe you to friends?
+- What do they emphasize? What do they downplay?
+
+### Secondary Sources
+
+**Reviews (yours and competitors')**
+- Negative reviews = unaddressed objections
+- Positive reviews = effective counter-objections
+
+**Social media mentions**
+- Reddit, Twitter threads about your category
+- Forums where your audience discusses alternatives
+
+**Competitor analysis**
+- What objections do competitors address?
+- What proof do they emphasize?
+
+## Types of Objections
+
+### Explicit objections
+Easy to address—visitors state them clearly:
+- "Too expensive"
+- "No free trial"
+- "Requires credit card"
+
+### Implicit objections
+Harder to identify—visitors won't admit them:
+- "I'm lazy and don't want to do the work"
+- "I'm not sure I'll follow through"
+- "This seems too good to be true"
+
+**Technique for implicit objections**: Use "CO Only" approach—address the objection without stating it.
+
+Bad: "Worried you're too lazy to learn a language?"
+Good: "Let the audio do the work for you."
+
+### The "Big 5" Universal Objections
+
+Most products face some version of:
+
+1. **Trust**: "Why should I believe you?"
+2. **Price**: "Is it worth the money?"
+3. **Fit**: "Will it work for MY situation?"
+4. **Timing**: "Why should I act now?"
+5. **Effort**: "How hard will this be?"
+
+## Counter-Objection Techniques
+
+### For Trust objections
+- Specific testimonials (with photos, names, results)
+- Media logos ("As seen in...")
+- Awards and certifications
+- Team credentials
+- Years in business, customers served
+- Money-back guarantee
+
+### For Price objections
+- ROI calculators
+- Cost comparison (vs. alternatives, vs. not solving problem)
+- Payment plans
+- Price anchoring (show higher-priced option first)
+- Emphasize value, not features
+
+### For Fit objections
+- Case studies from similar situations
+- Segmented landing pages
+- "Perfect for [specific audience]" messaging
+- FAQ addressing edge cases
+- Free trial or sample
+
+### For Timing objections
+- Limited-time offers (genuine scarcity only)
+- Cost of delay
+- Seasonal relevance
+- Urgency-building statistics
+
+### For Effort objections
+- "Done for you" framing
+- Step-by-step breakdown
+- Time estimates ("Set up in 5 minutes")
+- Onboarding support
+- "System" or "process" language
+
+## Placement Strategy
+
+Don't hide objections in FAQ. Address them:
+
+- **At point of friction**: Credit card objection → right below payment form
+- **In the flow**: As objections naturally arise during reading
+- **Above the fold**: For primary objections
+- **Multiple times**: Different formats (text, video, testimonial)
+
+## O/CO Audit Questions
+
+1. What are our visitors' top 5 objections?
+2. Which are we NOT addressing on the page?
+3. Which are we addressing weakly (no proof)?
+4. Are counter-objections placed where objections arise?
+5. What counter-objections do competitors use that we don't?

package/skills/cro-methodology/references/PERSUASION.md

@@ -0,0 +1,158 @@
+# Persuasion Assets & Psychological Triggers
+
+Your website should be a "proof magnet." Identify, acquire, and display persuasive assets.
+
+## Persuasion Assets Audit
+
+### Credentials & Authority
+- [ ] Industry awards
+- [ ] Certifications
+- [ ] Media mentions (logo bar)
+- [ ] Speaking engagements
+- [ ] Published books/research
+- [ ] Years in business
+- [ ] Number of customers/users
+- [ ] Team credentials/bios
+- [ ] Patents or proprietary technology
+
+### Social Proof
+- [ ] Customer testimonials (with photos, names, results)
+- [ ] Video testimonials
+- [ ] Case studies (problem → solution → results)
+- [ ] Client logos
+- [ ] User-generated content
+- [ ] Review aggregator scores (G2, Trustpilot, etc.)
+- [ ] Social media followers/engagement
+- [ ] Community size
+
+### Risk Reversal
+- [ ] Money-back guarantee
+- [ ] Free trial
+- [ ] Free samples/demos
+- [ ] Satisfaction guarantee
+- [ ] Performance guarantee
+- [ ] Easy cancellation
+- [ ] No credit card required
+
+### Data & Specificity
+- [ ] Specific results achieved
+- [ ] ROI calculations
+- [ ] Before/after comparisons
+- [ ] Time-to-value metrics
+- [ ] Industry benchmarks
+- [ ] Research/survey data
+
+### Process & Methodology
+- [ ] Named methodology/system
+- [ ] Step-by-step process visualization
+- [ ] Behind-the-scenes transparency
+- [ ] Quality control standards
+- [ ] Security/privacy certifications
+
+## Asset Acquisition Wishlist
+
+If you don't have an asset, plan to acquire it:
+
+| Missing Asset | How to Acquire | Priority |
+|---------------|----------------|----------|
+| Customer testimonials | Email recent buyers | High |
+| Case studies | Interview 3 success stories | High |
+| Industry awards | Apply to relevant awards | Medium |
+| Media mentions | PR outreach | Medium |
+
+## Psychological Triggers
+
+### Scarcity (Use Ethically)
+- Limited time offers (genuine deadlines)
+- Limited quantity
+- Exclusive access
+- Seasonal availability
+
+**Warning**: Fake scarcity destroys trust. Only use real limitations.
+
+### Social Proof
+- "Join 50,000+ marketers"
+- Real-time activity ("John from NYC just signed up")
+- Testimonials at decision points
+- Expert endorsements
+
+### Authority
+- Expert positioning
+- Media logos
+- Certifications visible
+- Specific credentials
+
+### Reciprocity
+- Free valuable content upfront
+- Free tools/calculators
+- Generous trial periods
+- Helpful support
+
+### Commitment/Consistency
+- Micro-commitments (email before credit card)
+- Progress indicators
+- "You're almost there" messaging
+- Previous choices displayed
+
+### Loss Aversion
+- Cost of inaction
+- "What you're missing"
+- Comparison with competitors' customers
+- Before/after contrast
+
+## The "Proof Sandwich"
+
+Structure for maximum persuasion:
+
+1. **Claim**: Make a bold, specific promise
+2. **Proof**: Immediately support with evidence
+3. **Reinforcement**: Add secondary proof
+
+Example:
+"We increase conversion rates by an average of 47%" (claim)
+"Here's how we did it for Company X..." (proof)
+"And here's what their CEO says about working with us..." (reinforcement)
+
+## Placement Principles
+
+### Above the fold
+- Main value proposition
+- Primary social proof (logo bar, rating)
+- Clear CTA
+
+### Throughout the page
+- Testimonials at objection points
+- Data supporting each claim
+- Visual proof (screenshots, photos)
+
+### Decision points
+- Guarantees near payment
+- Trust badges near forms
+- Testimonials near CTAs
+
+### Bottom of page
+- Comprehensive FAQ
+- Trust indicators
+- Alternative contact options
+
+## Asset Display Best Practices
+
+### Logo bars
+- 5-7 recognizable logos
+- Similar visual treatment
+- Relevant to target audience
+
+### Testimonials
+- Photo + Name + Company + Title
+- Specific results > vague praise
+- Match testimonial to objection
+
+### Statistics
+- Round numbers seem less credible
+- "47,832 customers" > "About 50,000"
+- Source your data
+
+### Guarantees
+- Make them prominent, not hidden
+- Explain what happens if claimed
+- Reduce perceived risk of claiming