infocard

What this skill does

# Infocard Generator

**Quick Start:** Analyze content (density × structure × mood) → Auto-sense tone for color palette → Pick a layout skeleton → Embed HTML directly in Markdown with `<style scoped>`.

## Critical Rules

### Rule 1: Direct HTML Embedding
**IMPORTANT**: Write info cards as direct HTML in Markdown. **NEVER** use code blocks (` ```html `). The HTML should be embedded directly in the document without any fencing.

### Rule 2: No Empty Lines in HTML Structure
**CRITICAL**: Do NOT add any empty lines within the HTML info card structure. Keep the entire HTML block continuous to prevent parsing errors.

### Rule 3: Content Analysis Before Layout
**REQUIRED**: Analyze content along three dimensions before designing:

**Density** (determines breathing rhythm):

| Density | Content Volume | Visual Treatment |
|---------|---------------|-----------------|
| Low | ≤ 50 words core | "Big-character" composition. One oversized element dominates. Generous whitespace. |
| Medium | 50–200 words | Hero + supporting panels. 2–3 main blocks with clear hierarchy. |
| High | 200+ words | Asymmetric multi-column grids. Primary/secondary/supporting blocks. Never equal-weight tiles. |

**Structure** (determines layout geometry):

| Structure | Signal | Layout Pattern |
|-----------|--------|---------------|
| Single point | One core concept | One anchor element dominates, rest recedes |
| Contrast | A vs B, old vs new | Split panel, two poles |
| Hierarchy | Layers build on each other | Stacked modules, pyramid |
| Flow | Sequential steps | Vertical cascade, numbered items |
| Radial | Core + derivatives | Hub with surrounding panels |
| Parallel | Multiple equal concepts | Asymmetric grid (never equal columns) |

**Mood** (determines color temperature):

| Mood | Visual Feel |
|------|------------|
| Reflective | More whitespace, serif-heavy, lower contrast |
| Sharp | Strong contrast, bold type, vivid accent |
| Warm | Earth tones, rounded feel, gentle rhythm |
| Technical | Monospace accents, grid-like density |

### Rule 4: Tone Sensing
**REQUIRED**: Auto-select color palette based on content topic. Scan content keywords and match the closest tone:

| Content Tone | Background | Accent | Trigger Keywords |
|---|---|---|---|
| Philosophical | `#FAF8F4` | `#7C6853` | cognition, thinking, meaning, philosophy, essence |
| Technical | `#F5F7FA` | `#3D5A80` | architecture, algorithm, system, API, code |
| Literary | `#FBF9F1` | `#6B4E3D` | story, narrative, writing, poetry, character |
| Scientific | `#F4F8F6` | `#2D6A4F` | experiment, data, research, paper, discovery |
| Business | `#F4F3F0` | `#2D6A4F` | market, strategy, growth, finance, investment |
| Creative | `#F6F3F2` | `#B8432F` | design, art, aesthetics, inspiration, creation |
| Default | `#FAFAF8` | `#4A4A4A` | When no clear match — prefer default over wrong match |

When a style template is explicitly chosen, its colors take precedence over tone sensing. Use tone sensing as the default when no style is specified.

### Rule 5: Title Protection
If the user provides a title explicitly, use it as-is for the main headline. Put editorial interpretation into subtitle, summary, or side modules. Do not silently rewrite the user's title.

### Rule 6: Typography Hierarchy
Maintain a clear type scale and use it consistently:
- Hero title: `32px–48px`, weight 700–900, tight letter-spacing (`-0.02em`)
- Subtitle / summary: `16px–20px`, weight 400–500
- Body text: `14px–16px`, weight 400, line-height `1.6–1.7`
- Meta / tags / captions: `11px–13px`, weight 500–700, uppercase with letter-spacing
- Body text color: never pure black — use `#1a1a1a`, `#333`, or `#4a4a4a`

### Rule 7: Visual Weight Distribution
At least one module should feel visually heavier than the others. Avoid making every panel use the exact same treatment. Differentiate through scale, background tone, typographic weight, or accent rules.

### Rule 8: Taste Rules (Anti-AI Checklist)
Before finalizing any card, check against these common AI-generated visual patterns:

**Layout:**
- **No centered hero** — Do not default-center titles. Prefer left-aligned or asymmetric
- **No equal-width tiles** — Three equal columns side by side is the #1 AI signature. Use `2fr 1fr`, asymmetric grids, or staggered layouts
- **No uniform panels** — At least one panel must differ in scale, weight, or treatment

**Typography:**
- **No pure black** `#000000` — Use off-black (`#1a1a1a`, `#2d2a26`) or warm/cool dark
- **No oversized-only hierarchy** — Build hierarchy with weight and color, not just font-size scaling

**Color:**
- **Max 1 accent color**, saturation < 80%
- **No neon gradients** — No purple-blue AI glow, no gradient-filled headlines
- **Consistent temperature** — Do not mix warm gray and cool gray in one card

**Content:**
- **No filler data** — Avoid `99.99%`, `50%`, `1234567`. Use organic numbers (`47.2%`, `3.8M`)
- **No AI phrasing** — Avoid "empower", "seamless", "unleash", "next-generation"

**Spacing:**
- Padding and margins must be mathematically precise, no awkward gaps
- Adjacent elements must be visually aligned

## Style Examples

Choose a visual family first, then pick the specific template inside that family. This keeps the library broad without forcing a flat 29-style scan every time.

### Style Families

#### Warm Editorial and Storytelling

Use when the card should feel reflective, human, narrative, or culturally textured.

| Style | File | Suitable For |
|---|---|---|
| **Editorial Warm** | [styles/editorial-warm.md](styles/editorial-warm.md) | Knowledge summaries, book notes, essays, analytical reports |
| **Customer Spotlight** | [styles/customer-spotlight.md](styles/customer-spotlight.md) | Customer stories, case studies, success recaps, brand narratives, adoption stories |
| **Sunset Warm** | [styles/sunset-warm.md](styles/sunset-warm.md) | Community recaps, event notes, lifestyle summaries, positive storytelling |
| **Midcentury** | [styles/midcentury.md](styles/midcentury.md) | Brand stories, retro-modern campaigns, culture notes, design narratives |

#### Soft Lifestyle and Teaching

Use when the card should feel calm, approachable, and low-pressure.

| Style | File | Suitable For |
|---|---|---|
| **Soft Neutral** | [styles/soft-neutral.md](styles/soft-neutral.md) | Lifestyle content, wellness, education, gentle branding, creative workshops |
| **Slate Chalk** | [styles/slate-chalk.md](styles/slate-chalk.md) | Teaching content, lessons, concept explanations, workshop notes |
| **Education Studio** | [styles/education-studio.md](styles/education-studio.md) | Teaching notes, course modules, learning summaries, workshop guides |

#### Paper, Research, and Governance

Use when the card should read like a memo, report, brief, or evidence summary.

| Style | File | Suitable For |
|---|---|---|
| **Paper Minimal** | [styles/paper-minimal.md](styles/paper-minimal.md) | Product notes, task summaries, meeting notes, clean documentation |
| **Lab Journal** | [styles/lab-journal.md](styles/lab-journal.md) | Research summaries, scientific explanations, medical content, academic papers |
| **Academic Paper** | [styles/academic-paper.md](styles/academic-paper.md) | Research abstracts, paper summaries, literature reviews, evidence-heavy explanations |
| **Policy Paper** | [styles/policy-paper.md](styles/policy-paper.md) | Governance notes, policy explainers, legal-adjacent summaries, internal rules |
| **Navy Formal** | [styles/navy-formal.md](styles/navy-formal.md) | Investor decks, executive briefs, quarterly reports, corporate proposals |
| **Japanese Minimal** | [styles/japanese-minimal.md](styles/japanese-minimal.md) | Brand narratives, cultural notes, quiet product essays, reflective announcements |
| **Clinical Brief** | [styles/clinical-brief.md](styles/clinical-brief.md) | Healthcare summaries, medical notes, patient education, clinical snapshots |

#### Business, Finance, and Trust

Use when the card should look operational, executive