explainx / blog
Nutlope/hallmark (11.1k GitHub stars) is a Together AI design skill with 20 themes, 57 slop-test gates, and four verbs — build, audit, redesign, study. Install via explainx.ai/skills or npx skills add.
Jun 28, 2026
The explainx.ai skills registry is the canonical source for Claude Code and Cursor SKILL.md files. This guide explains how npx skills install works, what skills actually do, how to write your own, and how teams can use lockfiles to stay consistent in production.
May 17, 2026
A deep dive into Agent Skills, the managed skill registry solving the security crisis in AI agent extensions. Learn how threat modeling, static analysis, and human curation make it safe to extend Antigravity, Claude Code, Cursor, and other professional coding agents with zero-trust workflows.
Apr 13, 2026
Skills are reusable instruction packages for AI coding agents—not one-off prompts. Here is the full picture: anatomy, ecosystem map, token trade-offs, and backlinks to explainx.ai, the MCP directory, and official docs.
If you've asked an agent to "build a landing page" and gotten the same purple gradient, three identical feature cards, and a hero that says "Revolutionize your workflow" — you've seen the problem Hallmark targets. Nutlope/hallmark is an anti-AI-slop design skill for Claude Code, Cursor, and Codex: it encodes rules that refuse the on-distribution defaults every frontier model was trained on, then runs 57 slop-test gates before handing code back.
Made by Together AI, Hallmark reached 11.1k GitHub stars and 553 forks by July 2026. Live examples cycle at usehallmark.com — press T to swap themes. On explainx.ai, install from the Hallmark skill page (Cursor guide, agent matrix, and one-line CLI copy included).
| Item | Detail |
|---|---|
| Repo | github.com/Nutlope/hallmark · MIT license |
| Version | v1.1.0 on explainx.ai registry (20 catalog themes + Custom route) |
| Install (explainx.ai) | explainx.ai/skills/Nutlope/hallmark/hallmark |
| CLI | npx skills add https://github.com/Nutlope/hallmark --skill hallmark |
| Verbs | build (default) · audit · redesign · study |
| Gates | 57 slop-test checks + 6-axis pre-emit critique (Philosophy, Hierarchy, Execution, Specificity, Restraint, Variety) |
| Output | Self-contained HTML + CSS pages, or in-place edits respecting existing tokens |
Most agent UIs fail on structure, not just colour. Two briefs — a sourdough app and a record-label EP — should not share the same hero → three features → CTA → footer rhythm. Hallmark's differentiator (documented in references/structure.md) is macrostructure variety: it picks layout archetypes per brief, dresses them in one of twenty named themes (Hum, Cobalt, Carnival, Lumen, Garden, Riso, modern-minimal, atmospheric, etc.), and only falls back to Custom when the brief carries creative intent no catalog theme fits.
The skill draws from the consensus anti-slop field — Anthropic's frontend-design guidance, Claude cookbook aesthetics, and the 2026 "tactile rebellion" movement — but packages it as enforceable gates, not vibes.
| Verb | What it does |
|---|---|
| (default) | Build new UI. Pre-flight scan → genre → theme → macrostructure → slop test → emit. |
hallmark audit <target> | Score existing code against anti-patterns. Ranked punch list; no edits. |
hallmark redesign <target> | Throw out visual structure; preserve copy, IA, brand, routes. Rebuild fingerprint. |
hallmark study <screenshot | URL> | Extract DNA — macrostructure, type-pairing, colour anchor. Refuses pixel-clones and paid template URLs. Optional design.md handoff. |
If you paste a URL without a verb, Hallmark asks whether to study (extract DNA) or use it as a reference for a fresh build.
These six rules apply to build, audit, redesign, and study alike:
—), or a different macrostructure.font-family must reference named CSS variables. Inline OKLCH mid-render is forbidden.<figure> or omit chrome.minmax(0, 1fr) on image grids.Component-scope mode (single button, modal, card) skips page macrostructure but mandates all 8 interaction states with a .preview.html demo wrapper.
Before designing, Hallmark scans six signal sources in order:
design.md at project root (locked system from a prior redesign)next/font, @fontsource, Tailwind fontFamily):root tokens, tailwind.config, DTCG files)framer-motion, gsap, etc.)Findings go to .hallmark/preflight.json for reuse. The block is the accountability line: here's what I noticed before I touched anything.
The Hallmark skill listing on explainx.ai is the fastest path if you want agent-specific steps without digging through the repo:
npx skills add https://github.com/Nutlope/hallmark --skill hallmark
.cursor/skills/hallmark/ exists · restart Cursor · invoke via /hallmarkThe registry page includes security notes (review SKILL.md source before production), use cases, and links to related design skills. Always review skill source — skills execute in your environment.
| Agent | Path |
|---|---|
| Claude Code | ~/.claude/skills/hallmark/ |
| Cursor | .cursor/skills/hallmark/ |
| Codex | ~/.codex/skills/hallmark/ or .codex/skills/hallmark/ (project) |
Copy SKILL.md + references/ from the repo, or re-run npx skills add to update.
Hallmark's README gallery shows brief-specific shapes — not colour-swaps of one template:
| Example | Brief | Theme |
|---|---|---|
| Bubble | Guided sourdough app | Hum |
| Distil | Content-extraction API | Cobalt |
| Cold Snap | Record-label EP | Carnival |
| Tally | SaaS product page | modern-minimal |
| Wayfare | Travel booking | atmospheric |
| The Mend Assembly | Repair-café broadsheet | Custom |
Each page is self-contained HTML + CSS with macrostructure stamped in a CSS comment. Browse live at usehallmark.com or under site/_tests/ in the repo.
Hallmark is generative guardrails — it stops slop at emit time. That's complementary to detection tools (classical ML classifiers, Pangram, browser extensions) that score text after publication. If you're fighting AI-written fanfic or blog spam, see explainx.ai's LLM text detection guide. If you're fighting visual sameness in agent-built UIs, Hallmark is the upstream fix.
The shadcn creativity debate and Thoughtworks zero-cost fallacy cover why cheap copying compresses lead time — Hallmark doesn't solve attribution, but it does raise the floor on what "shipped" looks like when you still care about craft.
hallmark audit on output.design.md, first run may conflict with hard-coded font-family: Inter vs next/font Geist. Hallmark flags conflicts; you confirm.Official sources: Nutlope/hallmark on GitHub · usehallmark.com demos · Hallmark on explainx.ai skills
Hallmark version, star count, and theme catalog reflect the Nutlope/hallmark README and explainx.ai registry listing as of July 17, 2026. Re-run npx skills add to pull updates; verify SKILL.md before production installs.