How to Install Hallmark Design Skill in Claude Code, Cursor, and Codex

Install the Hallmark design skill across Claude Code, Cursor, and Codex using a single npx skills add nutlope/hallmark command that copies SKILL.md and the references/ directory into assistant-specific paths.

The Hallmark repository by Nutlope provides a self-contained design skill that eliminates AI-generated "slop" by enforcing macrostructure selection, theme rotation, and anti-pattern detection. This guide explains how to install Hallmark in Claude Code, Cursor, and Codex, covering both global and project-scoped configurations.

Installation Paths by AI Assistant

Hallmark installs into different directories depending on which assistant you use. The npx skills add command automatically selects the correct destination based on your environment.

Claude Code (Global)

For Claude Code, the skill installs into your home directory:

~/.claude/skills/hallmark/

This global location makes Hallmark available across all projects when using Claude Code.

Cursor (Project-Scoped)

Cursor expects skills in a project-specific rules directory:

.cursor/rules/hallmark.mdc

Unlike the other assistants, Cursor reads the skill from a single .mdc file rather than a directory structure.

Codex (Personal)

For personal, system-wide access in Codex:

~/.codex/skills/hallmark/

This path functions identically to Claude Code's global installation, providing access across all repositories.

Codex (Project-Scoped)

For repository-specific installations in Codex:

.codex/skills/hallmark/

Use this when you want Hallmark rules available only within a specific project context.

Step-by-Step Installation Guide

Follow these steps to install the Hallmark design skill in your preferred AI coding assistant:

1. Open a terminal in your project root (or any location for personal/global installs).

2. Execute the install command:

   npx skills add nutlope/hallmark

3. The package manager fetches nutlope/hallmark from npm and writes the files to the appropriate directory for your detected assistant.

4. Verify the installation by checking for the presence of SKILL.md and the references/ folder (or .mdc file for Cursor).

Verifying Your Installation

Confirm that Hallmark copied correctly by inspecting the target directories.

For Claude Code:

ls ~/.claude/skills/hallmark/

# Output: SKILL.md  references/

For Cursor:

cat .cursor/rules/hallmark.mdc

# Displays the content of SKILL.md embedded in Cursor's format

For Codex (personal):

ls ~/.codex/skills/hallmark/

# Output: SKILL.md  references/

How Hallmark Works Under the Hood

Hallmark operates as a static set of markdown rules requiring no runtime compilation or external services. The skill consists of two core components:

• SKILL.md – The primary definition file that each assistant reads at startup
• references/ – A collection of markdown files encoding design rules, including macrostructures, themes, anti-patterns, and verb specifications

Each assistant discovers Hallmark by reading these files from their expected installation paths. The internal logic—including macrostructure selection from the 21 documented patterns, custom theme generation, and "slop-test" gating—executes entirely within the assistant's context window using the copied markdown content.

Key reference files include:

• references/verbs/audit.md – Defines the audit behavior
• references/verbs/redesign.md – Defines the redesign behavior
• references/verbs/study.md – Defines the study behavior
• references/macrostructures.md – Indexes available layout patterns
• references/custom-theme.md – Handles palette and font generation logic

Using Hallmark After Installation

Once installed, invoke Hallmark inside your coding session using these commands:

# Default design flow

hallmark

# Audit an existing page for design issues

hallmark audit ./src/index.html

# Redesign with a specific mood

hallmark redesign ./src/main.css --mood playful

# Study a URL or screenshot

hallmark study https://example.com

The skill processes these verbs according to the specifications in references/verbs/, applying the anti-AI-slop rules defined in the Hallmark repository.

Summary

• Single command installation: Run npx skills add nutlope/hallmark to install across Claude Code, Cursor, and Codex.
• Path variations: Claude Code uses ~/.claude/skills/hallmark/, Cursor uses .cursor/rules/hallmark.mdc, and Codex uses either ~/.codex/skills/hallmark/ (personal) or .codex/skills/hallmark/ (project).
• Core files: The installation copies SKILL.md and the references/ directory (or converts to .mdc for Cursor) containing all design rules and verb specifications.
• Static execution: Hallmark requires no compilation or external APIs; assistants execute the markdown rules directly from the copied files.
• Four verbs available: Use hallmark, hallmark audit, hallmark redesign, and hallmark study to interact with the skill.

Frequently Asked Questions

What files are installed by the Hallmark skill?

The installation copies SKILL.md and the entire references/ directory containing verb specifications (audit.md, redesign.md, study.md), macrostructure definitions, and theme generation logic. For Cursor, these contents are embedded into a single .mdc file at .cursor/rules/hallmark.mdc.

Can I use Hallmark in multiple AI assistants simultaneously?

Yes. You can install Hallmark in Claude Code globally, in Cursor for specific projects, and in Codex for personal use without conflicts. Each assistant maintains its own copy of the skill files in their respective directories, allowing you to use Hallmark across different environments concurrently.

Does Hallmark require an internet connection after installation?

No. Hallmark functions entirely offline after installation. The skill comprises static markdown files that encode design rules and logic. Once npx skills add nutlope/hallmark copies these files to your assistant's skill directory, all processing happens locally within the AI assistant's context window without external API calls or services.

How do I update the Hallmark skill to the latest version?

Re-run the installation command npx skills add nutlope/hallmark to fetch the latest version from npm. This overwrites the existing SKILL.md and references/ files (or .mdc file for Cursor) with the current release. Verify the update by checking the file timestamps in your assistant's skill directory or reviewing the version notes in the repository.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}