bobo-ai-cli 1.0.1

package/knowledge/skills/free-tool-strategy.md

@@ -0,0 +1,636 @@
+---
+id: "free-tool-strategy"
+title: "Free Tool Strategy (Engineering as Marketing)"
+category: "marketing"
+tags: ["initial assessment", "core principles", "tool types", "ideation framework", "seo considerations", "lead capture strategy", "build vs. buy vs. embed", "mvp scope", "promotion strategy", "measurement"]
+triggers: []
+dependencies: []
+source: "E:/Bobo's Coding cache/.claude/skills/free-tool-strategy"
+---
+
+---
+name: free-tool-strategy
+description: When the user wants to plan, evaluate, or build a free tool for marketing purposes — lead generation, SEO value, or brand awareness. Also use when the user mentions "engineering as marketing," "free tool," "marketing tool," "calculator," "generator," "interactive tool," "lead gen tool," "build a tool for leads," or "free resource." This skill bridges engineering and marketing — useful for founders and technical marketers.
+---
+
+# Free Tool Strategy (Engineering as Marketing)
+
+You are an expert in engineering-as-marketing strategy. Your goal is to help plan and evaluate free tools that generate leads, attract organic traffic, and build brand awareness.
+
+## Initial Assessment
+
+Before designing a tool strategy, understand:
+
+1. **Business Context**
+   - What's the core product/service?
+   - Who is the target audience?
+   - What problems do they have?
+
+2. **Goals**
+   - Lead generation primary goal?
+   - SEO/traffic acquisition?
+   - Brand awareness?
+   - Product education?
+
+3. **Resources**
+   - Technical capacity to build?
+   - Ongoing maintenance bandwidth?
+   - Budget for promotion?
+
+---
+
+## Core Principles
+
+### 1. Solve a Real Problem
+
+- Tool must provide genuine value
+- Solves a problem your audience actually has
+- Useful even without your main product
+
+### 2. Adjacent to Core Product
+
+- Related to what you sell
+- Natural path from tool to product
+- Educates on problem you solve
+
+### 3. Simple and Focused
+
+- Does one thing well
+- Low friction to use
+- Immediate value
+
+### 4. Worth the Investment
+
+- Lead value × expected leads > build cost + maintenance
+- Consider SEO value
+- Consider brand halo effect
+
+---
+
+## Tool Types
+
+### Calculators
+
+**Best for**: Decisions involving numbers, comparisons, estimates
+
+**Examples**:
+
+- ROI calculator
+- Savings calculator
+- Cost comparison tool
+- Salary calculator
+- Tax estimator
+
+**Why they work**:
+
+- Personalized output
+- High perceived value
+- Share-worthy results
+- Clear problem → solution
+
+### Generators
+
+**Best for**: Creating something useful quickly
+
+**Examples**:
+
+- Policy generator
+- Template generator
+- Name/tagline generator
+- Email subject line generator
+- Resume builder
+
+**Why they work**:
+
+- Tangible output
+- Saves time
+- Easily shared
+- Repeat usage
+
+### Analyzers/Auditors
+
+**Best for**: Evaluating existing work or assets
+
+**Examples**:
+
+- Website grader
+- SEO analyzer
+- Email subject tester
+- Headline analyzer
+- Security checker
+
+**Why they work**:
+
+- Curiosity-driven
+- Personalized insights
+- Creates awareness of problems
+- Natural lead to solution
+
+### Testers/Validators
+
+**Best for**: Checking if something works
+
+**Examples**:
+
+- Meta tag preview
+- Email rendering test
+- Accessibility checker
+- Mobile-friendly test
+- Speed test
+
+**Why they work**:
+
+- Immediate utility
+- Bookmark-worthy
+- Repeat usage
+- Professional necessity
+
+### Libraries/Resources
+
+**Best for**: Reference material
+
+**Examples**:
+
+- Icon library
+- Template library
+- Code snippet library
+- Example gallery
+- Directory
+
+**Why they work**:
+
+- High SEO value
+- Ongoing traffic
+- Establishes authority
+- Linkable asset
+
+### Interactive Educational
+
+**Best for**: Learning/understanding
+
+**Examples**:
+
+- Interactive tutorials
+- Code playgrounds
+- Visual explainers
+- Quizzes/assessments
+- Simulators
+
+**Why they work**:
+
+- Engages deeply
+- Demonstrates expertise
+- Shareable
+- Memory-creating
+
+---
+
+## Ideation Framework
+
+### Start with Pain Points
+
+1. **What problems does your audience Google?**
+   - Search query research
+   - Common questions
+   - "How to" searches
+
+2. **What manual processes are tedious?**
+   - Tasks done in spreadsheets
+   - Repetitive calculations
+   - Copy-paste workflows
+
+3. **What do they need before buying your product?**
+   - Assessments of current state
+   - Planning/scoping
+   - Comparisons
+
+4. **What information do they wish they had?**
+   - Data they can't easily access
+   - Personalized insights
+   - Industry benchmarks
+
+### Validate the Idea
+
+**Search demand:**
+
+- Is there search volume for this problem?
+- What keywords would rank?
+- How competitive?
+
+**Uniqueness:**
+
+- What exists already?
+- How can you be 10x better or different?
+- What's your unique angle?
+
+**Lead quality:**
+
+- Does this problem-audience match buyers?
+- Will users be your target customers?
+- Is there a natural path to your product?
+
+**Build feasibility:**
+
+- How complex to build?
+- Can you scope an MVP?
+- Ongoing maintenance burden?
+
+---
+
+## SEO Considerations
+
+### Keyword Strategy
+
+**Tool landing page:**
+
+- "[thing] calculator"
+- "[thing] generator"
+- "free [tool type]"
+- "[industry] [tool type]"
+
+**Supporting content:**
+
+- "How to [use case]"
+- "What is [concept tool helps with]"
+- Blog posts that link to tool
+
+### Link Building
+
+Free tools attract links because:
+
+- Genuinely useful (people reference them)
+- Unique (can't link to just any page)
+- Shareable (social amplification)
+
+**Outreach opportunities:**
+
+- Roundup posts ("best free tools for X")
+- Resource pages
+- Industry publications
+- Blogs writing about the problem
+
+### Technical SEO
+
+- Fast load time critical
+- Mobile-friendly essential
+- Crawlable content (not just JS app)
+- Proper meta tags
+- Schema markup if applicable
+
+---
+
+## Lead Capture Strategy
+
+### When to Gate
+
+**Fully gated (email required to use):**
+
+- High-value, unique tools
+- Personalized reports
+- Risk: Lower usage
+
+**Partially gated (email for full results):**
+
+- Show preview, gate details
+- Better balance
+- Most common pattern
+
+**Ungated with optional capture:**
+
+- Tool is free to use
+- Email to save/share results
+- Highest usage, lower capture
+
+**Ungated entirely:**
+
+- Pure SEO/brand play
+- No direct leads
+- Maximum reach
+
+### Lead Capture Best Practices
+
+- Value exchange clear: "Get your full report"
+- Minimal friction: Email only
+- Show preview of what they'll get
+- Optional: Segment by asking one qualifying question
+
+### Post-Capture
+
+- Immediate email with results/link
+- Nurture sequence relevant to tool topic
+- Clear path to main product
+- Don't spam—provide value
+
+---
+
+## Build vs. Buy vs. Embed
+
+### Build Custom
+
+**When:**
+
+- Unique concept, nothing exists
+- Core to brand/product
+- High strategic value
+- Have development capacity
+
+**Consider:**
+
+- Development time
+- Ongoing maintenance
+- Hosting costs
+- Bug fixes
+
+### Use No-Code Tools
+
+**Options:**
+
+- Outgrow, Involve.me (calculators/quizzes)
+- Typeform, Tally (forms/quizzes)
+- Notion, Coda (databases)
+- Bubble, Webflow (apps)
+
+**When:**
+
+- Speed to market
+- Limited dev resources
+- Testing concept viability
+
+### Embed Existing
+
+**When:**
+
+- Something good already exists
+- White-label options available
+- Not core differentiator
+
+**Consider:**
+
+- Branding limitations
+- Dependency on third party
+- Cost vs. build
+
+---
+
+## MVP Scope
+
+### Minimum Viable Tool
+
+1. **Core functionality only**
+   - Does the one thing
+   - No bells and whistles
+   - Works reliably
+
+2. **Essential UX**
+   - Clear input
+   - Obvious output
+   - Mobile works
+
+3. **Basic lead capture**
+   - Email collection works
+   - Leads go somewhere useful
+   - Follow-up exists
+
+### What to Skip Initially
+
+- Account creation
+- Saving results
+- Advanced features
+- Perfect design
+- Every edge case
+
+### Iterate Based on Use
+
+- Track where users drop off
+- See what questions they have
+- Add features that get requested
+- Improve based on data
+
+---
+
+## Promotion Strategy
+
+### Launch
+
+**Owned channels:**
+
+- Email list announcement
+- Blog post / landing page
+- Social media
+- Product hunt (if applicable)
+
+**Outreach:**
+
+- Relevant newsletters
+- Industry publications
+- Bloggers in space
+- Social influencers
+
+### Ongoing
+
+**SEO:**
+
+- Target tool-related keywords
+- Supporting content
+- Link building
+
+**Social:**
+
+- Share interesting results (anonymized)
+- Use case examples
+- Tips for using the tool
+
+**Product integration:**
+
+- Mention in sales process
+- Link from related product features
+- Include in email sequences
+
+---
+
+## Measurement
+
+### Metrics to Track
+
+**Acquisition:**
+
+- Traffic to tool
+- Traffic sources
+- Keyword rankings
+- Backlinks acquired
+
+**Engagement:**
+
+- Tool usage/completions
+- Time spent
+- Return visitors
+- Shares
+
+**Conversion:**
+
+- Email captures
+- Lead quality score
+- MQLs generated
+- Pipeline influenced
+- Customers attributed
+
+### Attribution
+
+- UTM parameters for paid promotion
+- Separate landing page for organic
+- Track lead source through funnel
+- Survey new customers
+
+---
+
+## Evaluation Framework
+
+### Tool Idea Scorecard
+
+Rate each factor 1-5:
+
+| Factor                        | Score  |
+| ----------------------------- | ------ |
+| Search demand exists          | \_\_\_ |
+| Audience match to buyers      | \_\_\_ |
+| Uniqueness vs. existing tools | \_\_\_ |
+| Natural path to product       | \_\_\_ |
+| Build feasibility             | \_\_\_ |
+| Maintenance burden (inverse)  | \_\_\_ |
+| Link-building potential       | \_\_\_ |
+| Share-worthiness              | \_\_\_ |
+
+**25+**: Strong candidate
+**15-24**: Promising, needs refinement
+**<15**: Reconsider or scope differently
+
+### ROI Projection
+
+```
+Estimated monthly leads: [X]
+Lead-to-customer rate: [Y%]
+Average customer value: [$Z]
+
+Monthly value: X × Y% × $Z = $___
+
+Build cost: $___
+Monthly maintenance: $___
+
+Payback period: Build cost / (Monthly value - Monthly maintenance)
+```
+
+---
+
+## Output Format
+
+### Tool Strategy Document
+
+```
+# Free Tool Strategy: [Tool Name]
+
+## Concept
+[What it does in one paragraph]
+
+## Target Audience
+[Who uses it, what problem it solves]
+
+## Lead Generation Fit
+[How this connects to your product/sales]
+
+## SEO Opportunity
+- Target keywords: [list]
+- Search volume: [estimate]
+- Competition: [assessment]
+
+## Build Approach
+- Custom / No-code / Embed
+- MVP scope: [core features]
+- Estimated effort: [time/cost]
+
+## Lead Capture Strategy
+- Gating approach: [Full/Partial/Ungated]
+- Capture mechanism: [description]
+- Follow-up sequence: [outline]
+
+## Success Metrics
+- [Metric 1]: [Target]
+- [Metric 2]: [Target]
+
+## Promotion Plan
+- Launch: [channels]
+- Ongoing: [strategy]
+
+## Timeline
+- Phase 1: [scope] - [timeframe]
+- Phase 2: [scope] - [timeframe]
+```
+
+### Implementation Spec
+
+If moving forward with build
+
+### Promotion Plan
+
+Detailed launch and ongoing strategy
+
+---
+
+## Example Tool Concepts by Business Type
+
+### SaaS Product
+
+- Product ROI calculator
+- Competitor comparison tool
+- Readiness assessment quiz
+- Template library for use case
+
+### Agency/Services
+
+- Industry benchmark tool
+- Project scoping calculator
+- Portfolio review tool
+- Cost estimator
+
+### E-commerce
+
+- Product finder quiz
+- Comparison tool
+- Size/fit calculator
+- Savings calculator
+
+### Developer Tools
+
+- Code snippet library
+- Testing/preview tool
+- Documentation generator
+- Interactive tutorials
+
+### Finance
+
+- Financial calculators
+- Investment comparison
+- Budget planner
+- Tax estimator
+
+---
+
+## Questions to Ask
+
+If you need more context:
+
+1. What's your core product/service?
+2. What problems does your audience commonly face?
+3. What existing tools do they use for workarounds?
+4. How do you currently generate leads?
+5. What technical resources are available?
+6. What's the timeline and budget?
+
+---
+
+## Related Skills
+
+- **page-cro**: For optimizing the tool's landing page
+- **seo-audit**: For SEO-optimizing the tool
+- **analytics-tracking**: For measuring tool usage
+- **email-sequence**: For nurturing leads from the tool
+- **programmatic-seo**: For building tool-based pages at scale

package/knowledge/skills/frontend-design-offical.md

@@ -0,0 +1,55 @@
+---
+id: "frontend-design-offical"
+title: "Frontend Design Offical"
+category: "design"
+tags: ["design thinking"]
+triggers: []
+dependencies: []
+source: "E:/Bobo's Coding cache/.claude/skills/frontend-design-offical"
+---
+
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
+license: Complete terms in LICENSE.txt
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

package/knowledge/skills/frontend-design.md

@@ -0,0 +1,41 @@
+---
+id: "frontend-design"
+title: "Frontend Design Plugin"
+category: "design"
+tags: ["frontend design plugin", "what it does", "usage", "learn more", "authors"]
+triggers: []
+dependencies: []
+source: "E:/Bobo's Coding cache/.claude/skills/frontend-design"
+---
+
+# Frontend Design Plugin
+
+Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics.
+
+## What It Does
+
+Claude automatically uses this skill for frontend work. Creates production-ready code with:
+
+- Bold aesthetic choices
+- Distinctive typography and color palettes
+- High-impact animations and visual details
+- Context-aware implementation
+
+## Usage
+
+```
+"Create a dashboard for a music streaming app"
+"Build a landing page for an AI security startup"
+"Design a settings panel with dark mode"
+```
+
+Claude will choose a clear aesthetic direction and implement production code with meticulous attention to detail.
+
+## Learn More
+
+See the [Frontend Aesthetics Cookbook](https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb) for detailed guidance on prompting for high-quality frontend design.
+
+## Authors
+
+Prithvi Rajasekaran (prithvi@anthropic.com)
+Alexander Bricken (alexander@anthropic.com)