Skip to content
Content
Skill

/design-quote-card

Generate a pull-quote / insight card — TWO pixel-exact HTML canvases in one file: 1080×1080 (square, default) AND 1080×1920 (story variant). Text-dominant, Fraunces-led, no chrome. The quote IS the artifact. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html.

Boost this skill
@slogsdonslogsdon@slogsdon
From plugin
skills-design
319 skills
Install
$ npx -y skills add slogsdon/skills-design --skill design-quote-card --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/design-quote-card

Context preview

The summary Claude sees to decide when to auto-load this skill.

Generate a pull-quote / insight card — TWO pixel-exact HTML canvases in one file: 1080×1080 (square, default) AND 1080×1920 (story variant). Text-dominant, Fraunces-led, no chrome. The quote IS the artifact. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html.

SKILL.md

design-quote-card.SKILL.md
name: design-quote-card
description: |
  Generate a pull-quote / insight card — TWO pixel-exact HTML canvases in one file: 1080×1080 (square, default) AND 1080×1920 (story variant). Text-dominant, Fraunces-led, no chrome. The quote IS the artifact. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "quote card for X", "pull quote", "insight card", "/quote-card".

Skill: quote-card

Produces a single self-contained HTML file containing TWO pixel-exact canvases:

1. **Square** (1080×1080) — Instagram feed / LinkedIn / generic social 2. **Story** (1080×1920) — Instagram Story / Reel cover / vertical share

Both render the same quote at proportional scale for their format. Screenshot each separately for the appropriate platform.

This is the artifact format most prone to AI-default tells: large opening quotation mark glyph (❝), centered alignment as default, color-gradient backgrounds behind text. **All three are explicitly banned in this skill.** The quote IS the artifact — typography carries everything.

When to use

  • User wants to share a single insight, claim, or pull-quote as a standalone card
  • A `DESIGN.md` exists for the brand

Inputs

  • **Required:** brand slug, the quote text (1 sentence, sentence-case ending in period per brand voice; max ~25 words)
  • **Optional:** attribution (e.g. "Shane Logsdon, 2026" — usually omitted if the brand IS the speaker)
  • **Optional:** source — link to the longer piece the quote is from
  • **Optional:** type-accent — one word in the quote to set in `--color-accent`

Output

`./design/<brand-slug>/artifacts/quote-card-YYYY-MM-DD-<slug>.html`

Steps

1. Verify brand exists

test -f ./design/<brand-slug>/tokens.css

2. Gather the brief

Ask in one message:

1. Quote text — 1 sentence, sentence-case ending in period (max ~25 words; push back if longer)
2. Optional attribution — name + date, OR omit if the brand IS the speaker
3. Optional source — URL to the longer piece this quote is from
4. Optional type-accent word — one word from the quote to set in the brand's accent color (used as a SUBJECT marker, not generic emphasis)

If the user provides 26+ words, push back: "Quote cards work at 25 words or fewer. Cut the support — keep the claim. What's the line that lands?" Don't proceed until they agree.

3. Pick variation — ARCHITECTURE FIRST

Pick ONE archetype — quote cards reward severe restraint:

  • `type-only` — the quote at MAX scale, asymmetric anchor (top-left or bottom-right), no chrome. Strongest for short claims.
  • `inverse-text` — full canvas dark inversion (canonical v2 feature treatment). The quote in cream on ink. Reads with conviction.
  • `pattern-led` — repeating text fragments as background; the quote breaks through as the punctum. Risky — only use if the quote concept invites the device.
  • `inverted-text` — quote carved out of a body-text wall (the body is the negative, quote is the positive). Editorial-architectural.

Then pick:

  • **Layout**: `top-anchored | bottom-anchored | off-grid | center-anchored` (center-anchored only if the quote is a single short line — center as default is the AI tell to avoid)
  • **Color usage**: `monochrome | single-accent | inverted` (inversion often strongest for quotes)

**Cross-artifact rule:** if a recent quote card for this brand used the same archetype, vary it. Two quote cards in a row with the same treatment dilutes both.

4. Generate the HTML

Template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand> — Quote card — <topic></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=<families>&display=swap">
<style>
/* Embed tokens.css verbatim */
<contents of tokens.css>

html, body { margin: 0; padding: 0; background: #2a2a2a; min-height: 100vh; font-family: var(--type-display-family); }
body { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 32px 0; }

.canvas-label { font-family: var(--type-mono-family); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); align-self: center; }

/* Square canvas — 1080×1080 */
.canvas-square {
  width: 1080px;
  height: 1080px;
  background: var(--color-surface);   /* or --color-ink for inversion */
  color: var(--color-ink);
  position: relative; overflow: hidden;
  padding: 96px;
  box-sizing: border-box;
  display: grid;
  /* Justify per layout choice — NOT centered by default */
  align-items: end;          /* bottom-anchored default; switch per variation */
}

/* The quote — Fraunces serif at scale */
.quote {
  font-family: var(--type-display-family);
  font-weight: 400;
  font-size: clamp(56px, 7.5vw, 88px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--color-ink);
  /* NO opening/closing quote glyph — typography is the quote, not the marks */
}
.quote .accent { color: var(--color-accent); }

/* Optional attribution — small, asymmetric, NOT centered */
.attribution {
  align-self: end;
  margin-top: 32px;
  font-family: var(--type-mono-family);
  font-size: 14px; letter-spacing: 0.06em;
  color: var(--color-ink-3);
}
.attribution::before { content: '— '; color: var(--color-ink-3); }

/* Story canvas — 1080×1920 */
.canvas-story {
  width: 1080px;
  height: 1920px;
  background: var(--color-surface);
  color: var(--color-ink);
  position: relative; overflow: hidden;
  padding: 270px 96px 240px;     /* IG Story chrome — top + bottom safe zones */
  box-sizing: border-box;
  display: grid;
  align-items: end;
}
.canvas-story .quote {
  font-size: clamp(72px, 8vw, 104px);
  line-height: 1.06;
}

/* Inverted variant — applies to either canvas */
.canvas--inverted {
  background: var(--color-ink);
  color: var(--color-surface);
}
.canvas--inverted .quote { color: var(--color-surface
Read more
Read it on GitHub ↗
Ships withskills-design

Brand-agnostic design system and artifact generators for Claude Code, plus a figure-worth audit and PDF and HTML-to-PNG export utilities. 19 skills total. Install via the slogsdon-claude-code-config marketplace.

Get the whole plugin
Stats
JavaScriptHTMLCSSGitHubAnthropic
3
Stars
0
Forks
Maintained
Maintenance
HTML
Language
MIT
License
1mo ago
Last commit
4mo ago
Created

Repo: slogsdon/skills-design

In this plugin
19 skills
See everything inside

Other skills on skills-design.

See all 19 skills in skills-design