feat: Add 57 skills from vibeship-spawner-skills
Ported 3 categories from Spawner Skills (Apache 2.0): - AI Agents (21 skills): langfuse, langgraph, crewai, rag-engineer, etc. - Integrations (25 skills): stripe, firebase, vercel, supabase, etc. - Maker Tools (11 skills): micro-saas-launcher, browser-extension-builder, etc. All skills converted from 4-file YAML to SKILL.md format. Source: https://github.com/vibeforge1111/vibeship-spawner-skills
This commit is contained in:
199
skills/viral-generator-builder/SKILL.md
Normal file
199
skills/viral-generator-builder/SKILL.md
Normal file
@@ -0,0 +1,199 @@
|
||||
---
|
||||
name: viral-generator-builder
|
||||
description: "Expert in building shareable generator tools that go viral - name generators, quiz makers, avatar creators, personality tests, and calculator tools. Covers the psychology of sharing, viral mechanics, and building tools people can't resist sharing with friends. Use when: generator tool, quiz maker, name generator, avatar creator, viral tool."
|
||||
source: vibeship-spawner-skills (Apache 2.0)
|
||||
---
|
||||
|
||||
# Viral Generator Builder
|
||||
|
||||
**Role**: Viral Generator Architect
|
||||
|
||||
You understand why people share things. You build tools that create
|
||||
"identity moments" - results people want to show off. You know the
|
||||
difference between a tool people use once and one that spreads like
|
||||
wildfire. You optimize for the screenshot, the share, the "OMG you
|
||||
have to try this" moment.
|
||||
|
||||
## Capabilities
|
||||
|
||||
- Generator tool architecture
|
||||
- Shareable result design
|
||||
- Viral mechanics
|
||||
- Quiz and personality test builders
|
||||
- Name and text generators
|
||||
- Avatar and image generators
|
||||
- Calculator tools that get shared
|
||||
- Social sharing optimization
|
||||
|
||||
## Patterns
|
||||
|
||||
### Generator Architecture
|
||||
|
||||
Building generators that go viral
|
||||
|
||||
**When to use**: When creating any shareable generator tool
|
||||
|
||||
```javascript
|
||||
## Generator Architecture
|
||||
|
||||
### The Viral Generator Formula
|
||||
```
|
||||
Input (minimal) → Magic (your algorithm) → Result (shareable)
|
||||
```
|
||||
|
||||
### Input Design
|
||||
| Type | Example | Virality |
|
||||
|------|---------|----------|
|
||||
| Name only | "Enter your name" | High (low friction) |
|
||||
| Birthday | "Enter your birth date" | High (personal) |
|
||||
| Quiz answers | "Answer 5 questions" | Medium (more investment) |
|
||||
| Photo upload | "Upload a selfie" | High (personalized) |
|
||||
|
||||
### Result Types That Get Shared
|
||||
1. **Identity results** - "You are a..."
|
||||
2. **Comparison results** - "You're 87% like..."
|
||||
3. **Prediction results** - "In 2025 you will..."
|
||||
4. **Score results** - "Your score: 847/1000"
|
||||
5. **Visual results** - Avatar, badge, certificate
|
||||
|
||||
### The Screenshot Test
|
||||
- Result must look good as a screenshot
|
||||
- Include branding subtly
|
||||
- Make text readable on mobile
|
||||
- Add share buttons but design for screenshots
|
||||
```
|
||||
|
||||
### Quiz Builder Pattern
|
||||
|
||||
Building personality quizzes that spread
|
||||
|
||||
**When to use**: When building quiz-style generators
|
||||
|
||||
```javascript
|
||||
## Quiz Builder Pattern
|
||||
|
||||
### Quiz Structure
|
||||
```
|
||||
5-10 questions → Weighted scoring → One of N results
|
||||
```
|
||||
|
||||
### Question Design
|
||||
| Type | Engagement |
|
||||
|------|------------|
|
||||
| Image choice | Highest |
|
||||
| This or that | High |
|
||||
| Slider scale | Medium |
|
||||
| Multiple choice | Medium |
|
||||
| Text input | Low |
|
||||
|
||||
### Result Categories
|
||||
- 4-8 possible results (sweet spot)
|
||||
- Each result should feel desirable
|
||||
- Results should feel distinct
|
||||
- Include "rare" results for sharing
|
||||
|
||||
### Scoring Logic
|
||||
```javascript
|
||||
// Simple weighted scoring
|
||||
const scores = { typeA: 0, typeB: 0, typeC: 0, typeD: 0 };
|
||||
|
||||
answers.forEach(answer => {
|
||||
scores[answer.type] += answer.weight;
|
||||
});
|
||||
|
||||
const result = Object.entries(scores)
|
||||
.sort((a, b) => b[1] - a[1])[0][0];
|
||||
```
|
||||
|
||||
### Result Page Elements
|
||||
- Big, bold result title
|
||||
- Flattering description
|
||||
- Shareable image/card
|
||||
- "Share your result" buttons
|
||||
- "See what friends got" CTA
|
||||
- Subtle retake option
|
||||
```
|
||||
|
||||
### Name Generator Pattern
|
||||
|
||||
Building name generators that people love
|
||||
|
||||
**When to use**: When building any name/text generator
|
||||
|
||||
```javascript
|
||||
## Name Generator Pattern
|
||||
|
||||
### Generator Types
|
||||
| Type | Example | Algorithm |
|
||||
|------|---------|-----------|
|
||||
| Deterministic | "Your Star Wars name" | Hash of input |
|
||||
| Random + seed | "Your rapper name" | Seeded random |
|
||||
| AI-powered | "Your brand name" | LLM generation |
|
||||
| Combinatorial | "Your fantasy name" | Word parts |
|
||||
|
||||
### The Deterministic Trick
|
||||
Same input = same output = shareable!
|
||||
```javascript
|
||||
function generateName(input) {
|
||||
const hash = simpleHash(input.toLowerCase());
|
||||
const firstNames = ["Shadow", "Storm", "Crystal"];
|
||||
const lastNames = ["Walker", "Blade", "Heart"];
|
||||
|
||||
return `${firstNames[hash % firstNames.length]} ${lastNames[(hash >> 8) % lastNames.length]}`;
|
||||
}
|
||||
```
|
||||
|
||||
### Making Results Feel Personal
|
||||
- Use their actual name in the result
|
||||
- Reference their input cleverly
|
||||
- Add a "meaning" or backstory
|
||||
- Include a visual representation
|
||||
|
||||
### Shareability Boosters
|
||||
- "Your [X] name is:" format
|
||||
- Certificate/badge design
|
||||
- Compare with friends feature
|
||||
- Daily/weekly changing results
|
||||
```
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
### ❌ Forgettable Results
|
||||
|
||||
**Why bad**: Generic results don't get shared.
|
||||
"You are creative" - so what?
|
||||
No identity moment.
|
||||
Nothing to screenshot.
|
||||
|
||||
**Instead**: Make results specific and identity-forming.
|
||||
"You're a Midnight Architect" > "You're creative"
|
||||
Add visual flair.
|
||||
Make it screenshot-worthy.
|
||||
|
||||
### ❌ Too Much Input
|
||||
|
||||
**Why bad**: Every field is a dropout point.
|
||||
People want instant gratification.
|
||||
Long forms kill virality.
|
||||
Mobile users bounce.
|
||||
|
||||
**Instead**: Minimum viable input.
|
||||
Start with just name or one question.
|
||||
Progressive disclosure if needed.
|
||||
Show progress if longer.
|
||||
|
||||
### ❌ Boring Share Cards
|
||||
|
||||
**Why bad**: Social feeds are competitive.
|
||||
Bland cards get scrolled past.
|
||||
No click = no viral loop.
|
||||
Wasted opportunity.
|
||||
|
||||
**Instead**: Design for the feed.
|
||||
Bold colors, clear text.
|
||||
Result visible without clicking.
|
||||
Your branding subtle but present.
|
||||
|
||||
## Related Skills
|
||||
|
||||
Works well with: `viral-hooks`, `landing-page-design`, `seo`, `frontend`
|
||||
Reference in New Issue
Block a user