feat(templates): add 100 new templates across 20 design DNAs#2
Merged
Conversation
Each DNA contributes 5 variants (different palette / layout / density / type pairing). Every template lives in templates/<id>/ with index.tsx + styles.css + meta.ts and conforms to the existing contract: <PageFrame> wrap, scoped CSS, --page-pad-top/bot vars, data-print-entry on entries, print-color-adjust on chromatic templates, no @page redeclaration. Each template owns its density-tight + density-roomy overrides in its own styles.css (scoped to its root class) so the toolbar's density selector works without further plumbing - the centralized stage.css block remains for emerald-twocol and minimal-mono only. DNAs: swiss, editorial, brutalist, terminal, newspaper, architect, banker, academic, magazine, display, saas, letterpress, dossier, specsheet, executive, traditional, mirror, manuscript, periodical, indexcard. Spec: docs/superpowers/specs/2026-05-02-100-templates-design.md Skill update: density-support guidance added to designing-templates SKILL.md Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mount each card's iframe only when the card is near the viewport (400px rootMargin) and unmount when it leaves. Without this, the gallery rendering 100+ cards saturates Chrome's per-host connection cap and surfaces as ERR_INSUFFICIENT_RESOURCES on the dev server, where each iframe pulls a separate set of unbundled module requests. Adds a quiet skeleton placeholder + a 360ms opacity/scale fade-in once the iframe loads so the appearance is intentional rather than a pop-in. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Inline transform on the iframe was clobbering the .tn-thumb iframe CSS rule that scales the 793px-wide template down to fit the card's aspect-[210/297] container. Result: cards showed only the top-left of the resume at native size. Animate opacity only and let the existing CSS scale stick. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Copy button on each TemplateCard yields a Claude Code prompt that drives the writing-resumes skill: 'create a new resume from the "<name>" template (id: <id>). fork it as a new variant and walk me through replacing the placeholder content with my real experience...'. Visual feedback flips the icon + label to a check + 'copied' for 1.4s. Search input above the grid filters across id / name / description / tags with a tiny AND-of-terms substring match, plus a 'N of M' counter and an empty state. No new dependencies — inline SVG icons, plain Tailwind input styled to match the existing toolbar/button vocabulary. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Main container goes max-w-3xl → max-w-7xl so the templates row can fit 4 A4 thumbnails side by side at xl. Header and your-resumes block stay readable inside an inner max-w-3xl wrapper. Templates section is sliced to first 4 with a 'browse all (N) →' link to /templates. Grid responds 1 → 2 (md) → 4 (xl). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace alphabetical slice(0,4) (which was 4 academic variants) with a curated set: swiss (minimal sans), emerald-twocol (two-col gradient), editorial-vogue (bold serif editorial), terminal (CLI mono). One per DNA, maximum aesthetic contrast. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds 100 new resume templates organized as 20 design DNAs × 5 variants each. Each template is a folder under
templates/<id>/withindex.tsx+styles.css+meta.ts, conforming to the existing<PageFrame>contract and adding density-aware CSS overrides scoped to its own root class.This is a single bundled PR for the full set per the project decision; the existing 3 templates (
_starter,emerald-twocol,minimal-mono) are untouched aside from a small prettier reflow onemerald-twocol/index.tsx.What's in here
docs/superpowers/specs/2026-05-02-100-templates-design.mddocuments the approach (20 DNAs × 5 variants) and the per-DNA breakdown..claude/skills/designing-templates/SKILL.mdnow requires templates to own their.density-tight/.density-roomyoverrides in their ownstyles.css, scoped to their root class. The centralizedstage.cssdensity block stays in place for the two pre-existing templates (no behavior change).Verification
pnpm typecheck— clean (102 templates registered: 100 new + 2 pre-existing).pnpm build— production build succeeds, 517 modules transformed in <1s.pnpm format— clean (modulo the pre-existingresumes/**glob in the format script that errors when no resumes exist; not introduced here)..density-tight+.density-roomyblocks scoped to their actual root class.Out of scope (queued separately)
/templatesrendering 100+ live iframes will overwhelm the browser. Needs pagination / virtualization / featured-set in a separate task. Flagged in the spec.Test plan
pnpm dev, then visit/templatesand click into ~10 random templates to verify each renders./preview/<id>, exercise the toolbar density (tight/regular/roomy) and padding sliders on a representative ~5 templates.dossier-stamped,magazine-cover,display-shout) prints withprint-color-adjust: exacttaking effect.🤖 Generated with Claude Code