Tilted Quote Card

What it did in run 1

1. tilted-quote-card
2. ls -la && cat brief.md
3. find . -type f | grep -v node_modules | head -50; cat .claude/skills/tilted-quote-card/reference/index.html .claude/skills/tilted-quote-card/reference/style.css .claude/skills/tilted-quote-card/reference/script.js
4. cat > quote-card.css <<'EOF' :root{--bg:#E8F3F1;--surface:#FFFFFF;--ink:#10282A;--muted:#41585A;--line:#CBE2DE;--accent:#0F766E;--on-accent:#FFFFFF;--em:#0F766E;--card-2:#FFC9A8;--card-3:#A8E6CF;--font:'Figtree',system-ui,sans-serif} *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased} h2,p,figure,blockquote{margin:0} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px} [hidden]{display:none!important} .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .wrap{width:min(100% - 40px,1180px);margin-inline:auto} .tc-sec{padding-block:clamp(64px,9vw,120px)} .tc-in{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:center} .tc-words h2{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance} .tc-words h2 em{font-style:italic;color:var(--em)} .tc-words .sub{color:var(--muted);font-size:1.1rem;max-width:34ch;margin-top:.8rem} .tc-ctrls{display:flex;align-items:center;gap:1rem;margin-top:2rem} .ctrl{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid currentColor;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s} .ctrl:hover{background:var(--ink);color:var(--bg)} .ctrl svg{width:20px;height:20px} .tc-count{font-weight:700;min-width:4.5em;text-align:center} .tc-stack{position:relative;padding:24px 34px 40px 10px;outline-offset:8px;border-radius:24px} .tc-back{position:absolute;inset:24px 34px 40px 10px;border-radius:24px} .b1{background:var(--card-2);transform:rotate(4deg) translate(18px,12px)} .b2{background:var(--card-3);transform:rotate(-7deg) translate(-6px,22px)} .tc-card{position:relative;background:var(--surface);border-radius:24px;padding:clamp(1.6rem,4vw,2.6rem);box-shadow:0 40px 60px -36px rgba(16,40,42,.55);transform:rotate(-2.5deg);display:flex;flex-direction:column;gap:1.4rem;min-height:340px} .tc-card.in{animation:tcin .45s ease} @keyframes tcin{from{opacity:0;transform:rotate(-8deg) translateX(40px)}} .tc-mark{font-size:5rem;line-height:.6;color:var(--accent);font-weight:800;height:.5em} .tc-card blockquote{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:500;line-height:1.45} .who{display:flex;align-items:center;gap:.8rem;margin-top:auto} .who b{display:block;font-weight:700;line-height:1.3} .who .role{display:block;color:var(--muted);font-size:.95rem;line-height:1.35} .face{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;flex:none;background:var(--accent);color:var(--on-accent);font-weight:800} @media (max-width:900px){.tc-in{grid-template-columns:1fr}.tc-stack{margin-inline:10px;padding:16px 24px 30px 18px}.tc-back{inset:16px 24px 30px 18px}.b1{transform:rotate(2.5deg) translate(8px,10px)}.b2{transform:rotate(-3.5deg) translate(-2px,16px)}.tc-card{transform:rotate(-1.5deg)}} @media (max-width:560px){.b1{transform:rotate(1.5deg) translate(6px,8px)}.b2{transform:rotate(-2deg) translate(0,12px)}.tc-card{transform:rotate(-1deg)}.tc-card{min-height:280px}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}} EOF cat > quote-card.js <<'EOF' // Previous/next through the stacked quotes; arrow keys work when the stack has focus. const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); const cards = [...document.querySelectorAll('.tc-card')]; let at = 0; const n = document.querySelector('[data-tc-n]'); const show = (d) => { cards[at].hidden = true; at = (at + d + cards.length) % cards.length; const c = cards[at]; c.hidden = false; n.textContent = at + 1; if (!reduceMotion.matches) { c.classList.remove('in'); void c.offsetWidth; c.classList.add('in'); } }; document.querySelectorAll('[data-tc]').forEach((b) => b.addEventListener('click', () => show(Number(b.dataset.tc)))); document.querySelector('.tc-stack').addEventListener('keydown', (e) => { if (e.key === 'ArrowRight') { show(1); e.preventDefault(); } if (e.key === 'ArrowLeft') { show(-1); e.preventDefault(); } }); EOF python3 - <<'EOF' q=[("Tax season used to take me a week. Now it takes an afternoon.","Joanna Price","Freelance photographer","JP"), ("I finally know what I can spend.","Malik Johnson","Plumber","MJ"), ("Invoices get paid faster with the reminders.","Rosa Lindgren","Weaver","RL")] cards="".join(f'<figure class="tc-card"{" hidden" if i else ""}><span class="tc-mark" aria-hidden="true">“</span><blockquote><p>{t}</p></blockquote><figcaption class="who"><span class="face" aria-hidden="true">{ini}</span><span><b>{nm}</b><span class="role">{r}</span></span></figcaption></figure>' for i,(t,nm,r,ini) in enumerate(q)) arrow=lambda p:f'<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="{p}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>' html=f'''<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Ledgerly pricing</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=Figtree:wght@400;500;700;800&display=swap"> <link rel="stylesheet" href="quote-card.css"> </head> <body> <main id="main"> <!-- Existing pricing content goes here. --> <section class="tc-sec" aria-labelledby="stories-h"><div class="wrap tc-in"><div class="tc-words"><h2 id="stories-h">Loved by people who <em>run their own show</em></h2><p class="sub">What Ledgerly customers say.</p><div class="tc-ctrls"><button class="ctrl" type="button" data-tc="-1">{arrow("M15 5l-7 7 7 7")}<span class="sr-only">Previous quote</span></button><p class="tc-count" aria-live="polite"><span data-tc-n>1</span> of 3</p><button class="ctrl" type="button" data-tc="1">{arrow("M9 5l7 7-7 7")}<span class="sr-only">Next quote</span></button></div></div><div class="tc-stack" tabindex="0" aria-label="Quotes, use the arrow keys to change"><div class="tc-back b1" aria-hidden="true"></div><div class="tc-back b2" aria-hidden="true"></div>{cards}</div></div></section> </main> <script src="quote-card.js" defer></script> </body> </html> ''' open("pricing.html","w").write(html) EOF node .claude/skills/tilted-quote-card/scripts/check.mjs pricing.html --out check 2>&1 | tail -30
5. ls
6. ./quote-card.css
7. ./quote-card.js
8. ./pricing.html
9. node .claude/skills/tilted-quote-card/scripts/check.mjs pricing.html --out check 2>&1 | tail -30
10. ./check/1440.png
11. ./check/390.png
12. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 1 min 5 s · $0.22 of API use