Bonaca example magazine site built by the Skill: a fan of tilted photo cards over the serif headline Things worth a second look, with the seven-topic index starting below

The same home page scrolled to the full-width feature: a harbour photograph with the story title At the edge of the outer islands and its standfirst underneath

The Stories page: a serif title and lead, topic filter chips with counts, a Grid and Index switch and the first large story photographs

Runs in

Install guides

Claude Code Cursor

Generates with

Host Agent LLM

Similar Skills

View all

Ines Whitlock example resume site built by the Skill: an ID badge on a cobalt lanyard with a taped contact card, a torn notepaper introduction under a cobalt plate, and a cobalt ribbon closing the first screen

New

Paper Pinboard Resume Site

Kit Varga example studio site built by the Skill: two italic serif words over a giant cobalt DESIGNER, split by a pale blue cut-out portrait, with the cobalt services band starting at the bottom of the first screen

New

Serif Freelancer Site

Rowan Teale example photography site built by the Skill: a photograph of a stone wall along a sea cliff fills the left half, and on the right an intro card, four channel cards and the first series tiles with labels cut into their corners

New

Half Pane Photo Portfolio

Larkby Racquet Club example site home page built by the Skill: a blue sky hero with a tennis ball and a serve, a court booking bar and the club introduction with small inline photos

Sports Club Site

New

Drifting Quote Wall

Slow Summits example travel site home page built by the Skill: a full-bleed golden alpine valley with one huge word over it and a journey search bar along the bottom

Travel Agency Site

Hourline example suite built by the Skill: a centred two-line hero with an amber gradient clause, stickers around the title and one calm product card showing the day planned around two meetings

New

Taped Paper Product Suite

Larkspur example landing built by the Skill: a centred headline, one line of copy, a black order pill and the cut-out speaker on a white stage

New

Audio Product Landing

What you get

A single offline HTML site: the fanned hero, a numbered topic list with thumbnails on hover, 7/5 grids of stories, a full-width feature, a carousel of portraits, this issue's cover beside its contents, counting figures, readers' letters and a newsletter band
A searchable story index filtered by topic or saved items, with sorting and a compact list view; articles carrying key facts, a pull quote and their topic's print archive; topic pages; a shop of framed prints and composed covers whose preview follows each option
A slide-out bag and a bag page, checkout that checks every field, gift-ready subscriptions, about, tabbed contact, the newsletter, FAQ, delivery, terms, privacy and a designed 404, together with a photo plan and a validator

Good fit

Print quarterlies and travel or culture journals selling issues, prints and subscriptions
Makers and studios running a journal alongside a small shop
Editorial brands wanting long reads and a quiet white page where photographs carry the work

Not for

Taking live payments or tracking stock: checkout just displays an order number and transmits nothing
News sites posting many short pieces each day
Brands after dark or heavily coloured pages; apart from a single pine accent, everything is ink on white

Brand identityWeb designBuild a product websitemagazineeditorialindependent publisherjournallong-formserifshopsubscriptionssingle-file

Good forBuild a product website

About this Skill

You say/ours-scattered-cards-magazine Make the site for our travel quarterly: two prints, three back issues, six topics and eight stories, all described in brief.md.

Fanned Cards Magazine is a website skill for Claude Fable 5 that builds the full site of a small publication. The first screen deals five paper story cards across white space beneath a heavy serif headline, followed by a numbered topic index, generous photo grids and long articles that open on a drop cap and track progress with a reading line. Further in sit a shop selling framed prints and composed covers, a bag with checkout, subscriptions that can be given as gifts, and the service pages a real magazine needs. Everything lives in a single HTML file with 36 routes that works offline.

How it works

Gather the stories, topics, issues, prints, plans, people and delivery rates of the publication, keeping to facts you can confirm
Write a single art direction; each photo slot is regenerated from it at the same size and crop
The agent fills the content block and page copy, packs the site into a single file and reruns the validator until no trace of the worked example remains
Check the site on phone, tablet and desktop, try the forms, checkout, the bag, filters and search, then tell it what to adjust

Checked before delivery

validate.mjs passes: single file, one h1 per page, every route and link resolves, no remote assets, structured data
Every price, rate, date, name and policy matches the brief; no invented awards, ratings or press
Search, filters, saved stories, product options, the bag, checkout, gift subscriptions, contact tabs, the questions filter and the phone menu work at 390, 768, 1024 and 1440 px and inside a sandboxed frame

What you need before you start

You bring: Publication name, wordmark, what it covers, where it is edited and printed, legal name and contact addresses · Stories with title, standfirst, topic, issue, date, reading time, author, photographer, four facts and the body (paragraphs, subheads, one pull quote) · Topics, the print archive (title, topic, issue, page), issues with their contents, prints and other products with prices, options and stock · Subscription plans and terms, delivery zones and rates, masthead people, stockists, reader letters, questions and policy text
Dependencies: Node.js 20 or later to pack and check the page; internet only during packing, to embed the two font families · Fresh photos come from your agent's own image generator, which may charge per image; no other key is needed
Outside costs: None
Last tested: v0.1.1 — Claude Code / Codex / Cursor

User reviews

Loading reviews…

FAQ

Does checkout charge anyone?

No. It validates each field, calculates delivery by zone and displays an order number, entirely on the page. Hook up your own shop or payment provider before going live.

Does it come with photos?

The example ships 21 generated photos at their final sizes, with a prompt per slot. Its portraits are stand-ins, and for other content your agent remakes the whole set under one art direction, which can cost a few cents an image.

Can it be built in React or Next.js?

Yes. The pages carry over to your stack keeping their routes, classes and values, with ReUI supplying the controls.

Preview gallery