Hallmark: a design skill that lints agent-built pages for machine-made tells

Three gate tiers decide what a page is allowed to ship

Hallmark sorts its checks into three tiers, and the tier decides whether a failure blocks the page. The Floor never ships: contrast, keyboard focus, reduced motion, invented facts and a broken phone layout. Reflex gates cover the defaults a model falls into, and a build that has a reason can overrule one, but only on the record. Finish checks are craft detail and never stop a ship.

The Reflex list is where the project earns its name. The README names the tells it hunts for: an eyebrow line above every heading, tracked-capital labels, one coloured word inside a headline, a page made entirely of empty frames or entirely of photographs, a hero that does not fit its screen, an email sign-up bolted to the end of every page, and a form that says thanks without sending anything. That last one is a functional bug, not a style complaint, and it sits in the same lint pass as the visual tells.

This split matters for anyone running it in a pipeline. A page with weak contrast stops. A page with tracked-capital labels can still go out if the build records why.

theme.mjs deals three materials, and none of them dictates a layout

Version 2 ships fifty themes. Each one is a material: paper, type, colour, surfaces, its own components and a texture, stored as a single file of at most 8 KB in skills/hallmark/references/themes/ with a picture of a finished page beside it. A build reads exactly one of these files. The examples on the site range from Dusk, shown on a bank reconciliation product, to Hedgerow, shown on a gin distillery.

The design choice that sets Hallmark apart from a template pack is that a theme never says what a page contains or in which order. Two prompts in the same theme produce two different pages. Structure comes from a separate step: scripts/theme.mjs deal offers three themes that fit the prompt and clear the log, and draw deals the page's anatomy from its job. A booking page is built to book, a shop to sell, a newsletter to collect subscribers, and the page ends on that action.

Saying custom drops the catalog entirely. There is no plan, no component set and no palette recipe in that mode, only the Floor, the gates and a short brief in skills/hallmark/references/direction.md that pushes the build toward one idea specific to the client.

The hero is rendered and reviewed before the rest of the page exists

A Hallmark build runs in four stages. Pre-flight reads the project for fonts, palette, framework and a locked design.md if one exists, then asks once for material: photos, screenshots, real numbers. The README is blunt about the reason: nothing is invented. Next, theme.mjs deals the theme and the page anatomy. Third, the hero is built on its own, rendered and reviewed cold, so a first screen that misses its viewport is caught before twenty sections are stacked under it. Last, scripts/sloplint.mjs --render checks the finished page at eight widths and a subagent with a fresh context reviews it. That reviewer gets the last word.

Each output page is self-contained HTML and CSS, and its first CSS comment is stamped with the decisions the build took. That stamp is the audit trail for overruled Reflex gates.

For product pages, Hallmark can capture its own screenshots: point it at a URL, a dev server or an app. It also carries 755 openly licensed photographs, picked per subject and credited on the page itself, so expect credit lines in the output.

Installing through npx skills, and where each harness picks it up

The project needs Node 18 or later. The global install puts the skill in place for every project:

npx skills add nutlope/hallmark -g

Dropping -g installs it into the current project only. For Claude Code it lands in ~/.claude/skills/hallmark and is called with /hallmark followed by a prompt. Codex CLI gets ~/.agents/skills/hallmark and uses $hallmark instead. Cursor and OpenCode do not get their own copy: they find the copies installed for the other two and use /hallmark. To target one harness only, pass --agent:

npx skills add nutlope/hallmark -g --agent claude-code

The --agent flag also accepts codex, opencode, cursor and github-copilot. Claude Code users can take the plugin route instead with /plugin marketplace add nutlope/hallmark followed by /plugin install hallmark@hallmark, in which case the skill is invoked as /hallmark:hallmark rather than /hallmark.

From a clone, node skills/hallmark/scripts/install.mjs validates every theme and reference file before it copies anything, and install-hook.mjs adds an edit-time Floor check to Claude Code. If the skill does not trigger on its own, the fix is to name it in the prompt: use hallmark to build a page.

Without puppeteer-core and Chrome, sloplint loses its rendered checks

The browser half of Hallmark is optional at install time and easy to miss. sloplint --render and the screenshot capture both need puppeteer-core installed globally and a Chrome binary on the machine:

npm i -g puppeteer-core

Without them the static checks still run. The consequence is concrete. The eight-width render pass is where a page is seen at phone size, and a broken phone layout is a Floor item. On a headless CI box or a locked-down laptop without Chrome, the gate that is supposed to never let that ship has nothing to look at. Screenshot capture of your own product from a URL or dev server also stops working, so product pages fall back on whatever screenshots you hand over.

The linter runs on any page, not only Hallmark output, which makes it the quickest way to confirm the browser side works before trusting a full build:

node skills/hallmark/scripts/sloplint.mjs <file-or-dir> --render

Redesign only starts when you name the path, and sloplint guards the wiring

Hallmark never touches a design that already exists unless you name it. Two commands cover that ground:

/hallmark redesign ./src/app
/hallmark audit ./index.html

Audit only reports. A full redesign keeps content and wiring while changing the system and the layout. Saying keep the layout narrows it to a restyle, and polish narrows it further to removing the tells. Before work begins, sloplint --before records every link, form field, handler and heading. Afterwards sloplint --kept fails the redesign if any of those went missing, and the handoff is a side-by-side before and after.

The guard has a cost for teams that expect an agent to act on a vague request. Asking a harness to make the marketing site look better will not start a Hallmark redesign by itself, because the skill waits for an explicit path. New builds carry a second boundary: they come out as self-contained HTML and CSS. Pre-flight reads your framework, but a team that wants a new page delivered as components in its own stack should check what a build hands back before relying on it.

Invented facts sit on the Floor, so the build needs your real content

Treating invented facts as a Floor failure is the most opinionated rule in the project, and it shapes the workflow. Pre-flight asks once for photos, screenshots and real numbers. A page that would otherwise fill a stats band with made-up figures or a testimonial wall with fictional customers cannot pass. The 755 stock photographs fill some of the gap for imagery, but there is no equivalent catalog for metrics or quotes.

For a founder prototyping a launch page before the product has users, this means gathering real figures before the first build rather than after it. For an agency building on a client's real material, it removes a class of embarrassing placeholder that survives into production. Either way, plan to have the numbers ready before you invoke it.

Where Hallmark departs from frontend-design and Impeccable

The README credits Impeccable and Anthropic's frontend-design plugin for Claude Code among its inspirations. frontend-design is a written skill that steers the model's aesthetic choices. Hallmark adds machinery around that kind of guidance: a dealt theme file, a scripted page anatomy, a browser linter with a before and after check, and a separate reviewer subagent. That machinery is also its weight. You install Node scripts and, for full checks, a headless browser stack, where a prompt-only skill needs neither.

On upkeep, the repository is MIT licensed and made by Together AI. package.json reports version 2.0.0, and the repository has no GitHub releases, so tracking changes means following commits on the main branch. The last push was on 2026-10-29. The package publishes only the skills directory, with skills/hallmark/SKILL.md as the entry point and skills/hallmark/references holding themes and direction notes. Any theme you tune by hand lives in that tree, inside the installed skill folder for each harness.

Editorial conclusion

Hallmark suits developers who already let Claude Code, Codex, Cursor or OpenCode build landing, product or booking pages and want a hard floor on contrast, focus, reduced motion and invented facts, plus a lint pass against tells like eyebrow labels and one-coloured-word headlines. It is the wrong choice if you need output as components in your own framework for a new build, since new pages come out as self-contained HTML and CSS, or if you cannot supply real photos, screenshots and numbers. Before adopting it, run npm i -g puppeteer-core on a machine with Chrome and confirm that node skills/hallmark/scripts/sloplint.mjs <file-or-dir> --render actually renders, because without it only the static checks run.

Frequently asked questions

Official sources

1. Official documentation
2. Official README
3. Project repository