Numbered Quote Slider

What it did in run 1

1. numbered-quote-slider
2. ls -la . photos && cat brief.md
3. cd ./.claude/skills/numbered-quote-slider && ls -R . | head -30; cat reference/index.html reference/style.css reference/script.js; node scripts/check.mjs --ready
4. ./photos/loft-conversion.jpg
5. ./photos/garden-room.jpg
6. ./photos/school-library.jpg
7. ./photos/cafe-interior.jpg
8. ./photos/housing-terrace.jpg
9. cd . && python3 - <<'EOF' q=[("They found us a third bedroom we didn't know we had.","Ruth and Ian Collins","Loft conversion, Walthamstow","loft-conversion.jpg","Loft bedroom with exposed timber rafters, a rooflight and an oak floor"), ("The garden room is where we live now. It still feels like being outside in January.","Asha Mehta","Garden room, Hackney","garden-room.jpg","Timber-framed garden room with black glazed doors at the back of a brick terrace"), ("The new library opened on budget and on time, built during term without a single closure day.","Peter Lowe","Bursar, St Anne's Primary School","school-library.jpg","School library with curved plywood steps, low bookshelves and colourful chairs"), ("Customers ask who designed the arch at least once a week.","Dami Afolabi","Arch Nine Café, Peckham","cafe-interior.jpg","Café counter under a whitewashed brick railway arch with pendant lights"), ("Twenty-four homes, heating bills under £300 a year, and residents who love living there.","Helen Garvey","Development director, Leaside Housing Association","housing-terrace.jpg","Terrace of pale brick homes with oak front doors and planted front gardens")] n=len(q) slides="" for i,(t,nm,r,f,a) in enumerate(q,1): h="" if i==1 else " hidden" slides+=f'''<figure class="ns-s"{h}><p class="sr-only">Quote {i} of {n}</p><img src="photos/{f}" alt="{a}" width="1216" height="832"{' loading="lazy"' if i>1 else ''}><blockquote><p>{t}</p></blockquote><figcaption><b>{nm}</b><span class="role">{r}</span></figcaption></figure> ''' svg=lambda d:f'<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="{d}" 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>Client quotes | Hale &amp; Okafor Architects, London</title> <meta name="description" content="Five clients of Hale &amp; Okafor Architects on their loft, garden room, school library, café and housing projects."> <meta property="og:title" content="Client quotes | Hale &amp; Okafor Architects"> <meta property="og:description" content="Five clients on the projects we designed with them."> <meta property="og:type" content="website"> <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=Big+Shoulders+Display:wght@700;900&family=Inter:wght@400;500;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <main id="main"> <section class="t-sec" id="clients" aria-labelledby="clients-h"> <div class="sec-head"><h2 id="clients-h">Clients on the work</h2></div> <div class="wrap ns-in" tabindex="0" aria-label="Client quotes, use arrow keys to change"> <p class="ns-count" aria-hidden="true"><span data-ns-n>01</span><small>/ 0{n}</small></p> <div class="ns-body"> <div class="ns-slides" aria-live="polite"> {slides}</div> <div class="ns-bar"> <button class="ns-b" type="button" data-ns="-1">{svg("M15 5l-7 7 7 7")}<span class="sr-only">Previous quote</span></button> <button class="ns-b" type="button" data-ns="1">{svg("M9 5l7 7-7 7")}<span class="sr-only">Next quote</span></button> <ol class="ns-prog" aria-hidden="true"><li></li><li></li><li></li><li></li><li></li></ol> </div> </div> </div> </section> </main> <script src="script.js" defer></script> </body> </html> ''' open("index.html","w").write(html) EOF cat > style.css <<'EOF' :root{--bg:#F4F3EF;--ink:#1C1C1A;--muted:#5B5A55;--line:#D8D6CE;--accent:#1C1C1A;--font-display:'Big Shoulders Display','Arial Narrow',sans-serif;--font-body:'Inter',system-ui,sans-serif} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased} img,svg{max-width:100%;display:block} h2{font-family:var(--font-display);line-height:1.1;margin:0;font-weight:700;font-size:clamp(1.9rem,4.2vw,3.1rem);letter-spacing:-.02em;text-wrap:balance} p,blockquote,figure{margin:0} ol{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--accent);outline-offset:3px} .skip{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--ink);color:var(--bg);padding:.6rem 1rem;text-decoration:none} .skip:focus{left:12px} [hidden]{display:none!important} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .t-sec{padding-block:clamp(64px,9vw,120px)} .wrap{width:min(100% - 40px,1180px);margin-inline:auto} .sec-head{width:min(100% - 40px,1180px);margin:0 auto clamp(28px,4vw,48px)} .ns-in{display:grid;grid-template-columns:minmax(200px,.6fr) 1.4fr;gap:clamp(24px,5vw,80px);align-items:start;border-top:1px solid var(--ink);padding-top:2rem;outline-offset:8px} .ns-count{font-family:var(--font-display);font-weight:900;font-size:clamp(5rem,12vw,10rem);line-height:.85;color:transparent;-webkit-text-stroke:2px var(--ink);display:flex;align-items:flex-start;gap:.3rem} .ns-count small{font-size:.28em;color:var(--muted);-webkit-text-stroke:0;font-weight:700;margin-top:.4em} .ns-s img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin-bottom:1.6rem;background:var(--line)} .ns-s blockquote{font-size:clamp(1.3rem,2.8vw,1.9rem);line-height:1.4;font-weight:500;max-width:32em} .ns-s figcaption{margin-top:1.4rem} .ns-s b{display:block} .ns-s .role{color:var(--muted)} .ns-s.in{animation:nsin .4s ease} @keyframes nsin{from{opacity:0;transform:translateY(16px)}} .ns-bar{display:flex;align-items:center;gap:.6rem;margin-top:2.4rem} .ns-b{width:48px;height:48px;display:grid;place-items:center;border:1.5px solid var(--ink);background:transparent;cursor:pointer;color:var(--ink);transition:background-color .2s,color .2s} .ns-b svg{width:20px;height:20px} .ns-b:hover{background:var(--ink);color:var(--bg)} .ns-prog{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-left:1rem} .ns-prog li{height:3px;background:var(--line);transition:background-color .4s} .ns-prog li.on{background:var(--ink)} @media (max-width:900px){.ns-in{grid-template-columns:1fr}.ns-count{font-size:5rem}} @media (max-width:760px){.ns-in{gap:16px}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} EOF cat > script.js <<'EOF' const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); const sl = [...document.querySelectorAll('.ns-s')]; const segs = [...document.querySelectorAll('.ns-prog li')]; const num = document.querySelector('[data-ns-n]'); let at = 0; const go = (d) => { sl[at].hidden = true; at = (at + d + sl.length) % sl.length; sl[at].hidden = false; num.textContent = String(at + 1).padStart(2, '0'); segs.forEach((s, k) => s.classList.toggle('on', k <= at)); if (!reduceMotion.matches) { sl[at].classList.remove('in'); void sl[at].offsetWidth; sl[at].classList.add('in'); } }; segs[0].classList.add('on'); document.querySelectorAll('[data-ns]').forEach((b) => b.addEventListener('click', () => go(Number(b.dataset.ns)))); document.querySelector('.ns-in').addEventListener('keydown', (e) => { if (e.target.closest('button')) return; if (e.key === 'ArrowRight') { go(1); e.preventDefault(); } if (e.key === 'ArrowLeft') { go(-1); e.preventDefault(); } }); EOF node .claude/skills/numbered-quote-slider/scripts/check.mjs index.html --out check 2>&1 | tail -40
10. ./index.html
11. ./style.css
12. ./script.js
13. cd . && node .claude/skills/numbered-quote-slider/scripts/check.mjs index.html --out check 2>&1 | tail -40
14. sed -i '' 's/aria-label="Client quotes, use arrow keys to change"/aria-label="Quotes from our clients. Left and right arrow keys move between them."/; s#<meta property="og:type" content="website">#<meta property="og:type" content="website">\n<meta property="og:image" content="photos/loft-conversion.jpg">#' index.html && node .claude/skills/numbered-quote-slider/scripts/check.mjs index.html --out check 2>&1 | tail
15. ./check/1440.png
16. ./check/390.png
17. ./index.html
18. ./index.html
19. node .claude/skills/numbered-quote-slider/scripts/check.mjs index.html --out check 2>&1 | tail
20. Done

12 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 2 min 10 s · $0.30 of API use