@hienlh/ppm 0.9.81 → 0.9.82

package/.opencode/skills/free-tool-strategy/SKILL.md

@@ -1,580 +0,0 @@
----
-name: ckm: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.
-argument-hint: "[tool-idea or niche]"
-metadata:
-  author: claudekit
-  version: "1.0.0"
----
-
-# 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/.opencode/skills/frontend-design/SKILL.md

@@ -1,81 +0,0 @@
----
-name: ck:frontend-design
-description: Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.
-license: Complete terms in LICENSE.txt
-metadata:
-  author: claudekit
-  version: "1.0.0"
----
-
-Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.
-
-## Workflow Selection
-
-Choose workflow based on input type:
-
-| Input | Workflow | Reference |
-|-------|----------|-----------|
-| Screenshot | Replicate exactly | `./references/workflow-screenshot.md` |
-| Video | Replicate with animations | `./references/workflow-video.md` |
-| Screenshot/Video (describe only) | Document for devs | `./references/workflow-describe.md` |
-| 3D/WebGL request | Three.js immersive | `./references/workflow-3d.md` |
-| Quick task | Rapid implementation | `./references/workflow-quick.md` |
-| Complex/award-quality | Full immersive | `./references/workflow-immersive.md` |
-| From scratch | Design Thinking below | - |
-
-**All workflows**: Activate `ui-ux-pro-max` skill FIRST for design intelligence.
-
-## Screenshot/Video Replication (Quick Reference)
-
-1. **Analyze** with `ai-multimodal` skill - extract colors, fonts, spacing, effects
-2. **Plan** with `ui-ux-designer` subagent - create phased implementation
-3. **Implement** - match source precisely
-4. **Verify** - compare to original
-5. **Document** - update `./docs/design-guidelines.md` if approved
-
-See specific workflow files for detailed steps.
-
-## Design Thinking (From Scratch)
-
-Before coding, 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**: Execute with precision. Bold maximalism and refined minimalism both work - intentionality is key.
-
-## Aesthetics Guidelines
-
-- **Typography**: Avoid Arial/Inter; use distinctive, characterful fonts. Pair display + body fonts.
-- **Color**: Commit to cohesive palette. CSS variables. Dominant colors with sharp accents.
-- **Motion**: CSS-first, anime.js for complex (`./references/animejs.md`). Orchestrated page loads > scattered micro-interactions.
-- **Spatial**: Unexpected layouts. Asymmetry. Overlap. Negative space OR controlled density.
-- **Backgrounds**: Atmosphere over solid colors. Gradients, noise, patterns, shadows, grain.
-- **Assets**: Generate with `ai-multimodal`, process with `media-processing`
-
-## Asset & Analysis References
-
-| Task | Reference |
-|------|-----------|
-| Generate assets | `./references/asset-generation.md` |
-| Analyze quality | `./references/visual-analysis-overview.md` |
-| Extract guidelines | `./references/design-extraction-overview.md` |
-| Optimization | `./references/technical-overview.md` |
-| Animations | `./references/animejs.md` |
-
-Quick start: `./references/ai-multimodal-overview.md`
-
-## Anti-Patterns (AI Slop)
-
-NEVER use:
-- Overused fonts: Inter, Roboto, Arial, Space Grotesk
-- Cliched colors: purple gradients on white
-- Predictable layouts, cookie-cutter patterns
-
-DO:
-- Vary themes (light/dark), fonts, aesthetics per project
-- Match complexity to vision (maximalist = elaborate; minimalist = precise)
-- Make unexpected, context-specific choices
-
-Remember: Claude is capable of extraordinary creative work. Commit fully to distinctive visions.