본문으로 건너뛰기
cccskills
무료GitHub에 공개

viral-generator-builder

Design and build name generators, personality quizzes, avatars, and similar interactive tools. Plan simple inputs, result logic, and visually clear result cards that people can share through social buttons or screenshots.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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.

설치 방법 보기

이럴 때 유용합니다

  • Building name and text generators
  • Designing personality quizzes and scoring rules
  • Creating result cards for sharing on social media
  • Simplifying input forms for interactive tools

포함된 파일(1)

  • SKILL.md5.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

## 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

## 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`

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Create interactive 3D scenes for websites, including product views and scroll-driven animations. Covers choosing Three.js, React Three Fiber, or Spline, preparing lightweight models, showing loading progress, and adapting experiences for mobile devices.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Building an interactive 3D product configurator
  • Adding 3D scenes to a portfolio
  • Animating models and cameras as visitors scroll
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Plan A/B tests that compare page or product changes, with clear hypotheses, sample sizes, success metrics, and traffic allocation. Get a structured test plan and guidance for interpreting results and deciding what to try next.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Comparing signup button copy
  • Planning a pricing page experiment
  • Estimating sample size and test duration
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Prepare an academic CV for faculty, postdoctoral, or research applications. Organize publications, grants, teaching, and research experience, with section order and formatting adapted to the role and academic field.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Preparing a CV for faculty applications
  • Updating a CV for postdoctoral applications
  • Organizing publications and research funding
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Audit and improve web accessibility using WCAG 2.1 guidelines. Covers image descriptions, color contrast, keyboard controls, forms, and screen reader support, with code examples and automated and manual checks to guide fixes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing accessibility before a website launch
  • Improving keyboard navigation
  • Fixing form labels and error announcements
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Audit websites for accessibility barriers and improve image descriptions, color contrast, forms, keyboard navigation, and screen reader support. Provides code examples and automated and manual testing guidance for work toward WCAG 2.1 AA or AAA accessibility standards.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing a website for accessibility issues
  • Fixing form labels and error announcements
  • Checking keyboard navigation and dialog focus
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Design autonomous agents for Claude Code plugins, including when they should run, what tools they may use, and how they should respond. Provides configuration templates, prompt guidance, and validation steps for creating agent files.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Create a code review agent
  • Refine examples that trigger an agent
  • Limit the tools an agent can use
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

davila7의 스킬 모두 보기

이 스킬의 문제 신고