How to Install Nutlope/Hallmark for Claude Code, Cursor, and Codex

Run npx skills add nutlope/hallmark to instantly install the Hallmark design skill for AI coding assistants including Claude Code, Cursor, and Codex.

Nutlope/hallmark is an AI design skill package that enforces structured UI constraints through macrostructures, themes, and slop-test gates. Learning how to install Nutlope/hallmark allows you to deploy consistent design rules across your development environment using either a single npm command or manual file placement.

Prerequisites

Before installing, ensure you have Node.js and npm available to execute the npx helper. The skill supports Claude Code, Cursor, and Codex as target platforms, with each assistant reading the skill definition from skills/hallmark/SKILL.md as declared in package.json.

Installation Methods

You can install Hallmark using the automated npm helper or by manually copying the skill files from the repository.

One-Line Installation with npx (Recommended)

The fastest method uses the skill ecosystem helper to fetch and place files automatically:

npx skills add nutlope/hallmark

This command reads the skill field in package.json and installs the contents of the skills/hallmark/ directory into the appropriate location for your detected AI assistant.

Manual Installation

If you prefer not to use npm, clone the repository and copy the skill directory manually:

1. Clone the Nutlope/hallmark repository:

   git clone https://github.com/Nutlope/hallmark.git

2. Copy the skills/hallmark folder to your assistant’s specific skill directory (see platform paths below).

Platform-Specific Setup Paths

The installation destination varies by AI assistant. When using the npx helper, these paths are handled automatically, but manual installers must target these locations directly.

Claude Code

For Claude Code, install the skill to:

~/.claude/skills/hallmark/

Manual copy command:

cp -r ./hallmark/skills/hallmark ~/.claude/skills/hallmark

Cursor

Cursor consumes rule files rather than skill directories. The installer converts skills/hallmark/SKILL.md into .cursor/rules/hallmark.mdc:

.cursor/rules/hallmark.mdc

Codex

Codex supports both personal and project-scoped installations:

• Personal: ~/.codex/skills/hallmark/
• Project-scoped: .codex/skills/hallmark/

How Hallmark Works

Once installed, the skill activates through skills/hallmark/SKILL.md, which serves as the entry point defined in package.json. The skill pulls design constraints from the skills/hallmark/references/ directory, which contains macrostructure definitions, theme rules, genre choices, and slop-test gates that prevent low-quality UI generation.

Using Hallmark After Installation

After you install Nutlope/hallmark, invoke it within your AI assistant using these command verbs:

• hallmark — Run default design constraints
• hallmark audit <target> — Audit an existing UI component
• hallmark redesign <target> — Redesign a specific file or component
• hallmark study <screenshot_or_URL> — Extract design DNA from reference images

Example usage in Claude Code:

hallmark redesign ./src/components/Button.tsx

Summary

• One-command install: npx skills add nutlope/hallmark fetches the skill from the npm registry and places files automatically
• Multi-platform support: Installs to ~/.claude/skills/ for Claude Code, .cursor/rules/ for Cursor, and ~/.codex/skills/ or .codex/skills/ for Codex
• Entry point: The skill reads skills/hallmark/SKILL.md as its primary definition, with constraints stored in skills/hallmark/references/
• Manual alternative: Copy the skills/hallmark directory directly from the cloned repository if you cannot use npm
• Design enforcement: The skill enforces token-based design via site/css/tokens.css and reference files to ensure consistent UI quality

Frequently Asked Questions

What is Nutlope/hallmark?

Nutlope/hallmark is an AI skill package that adds structured design constraints to coding assistants. It prevents low-quality "slop" UI by enforcing macrostructures, themes, and genre-specific rules defined in the skills/hallmark/references/ directory, according to the repository source code.

Where does the skill install on my system?

The installation path depends on your AI assistant. Claude Code uses ~/.claude/skills/hallmark/, Cursor uses .cursor/rules/hallmark.mdc, and Codex uses either ~/.codex/skills/hallmark/ for personal installs or .codex/skills/hallmark/ for project-specific setups. The npx skills add command automatically detects and uses the correct path for your environment.

Can I use Hallmark without npm?

Yes. You can manually copy the skills/hallmark directory from a cloned repository into your assistant’s skill folder. For Claude Code, copy to ~/.claude/skills/hallmark/. For Cursor, manually convert SKILL.md to .cursor/rules/hallmark.mdc. The package.json file in the repository root identifies skills/hallmark/SKILL.md as the entry point.

How do I update the Hallmark skill?

Run npx skills add nutlope/hallmark again to fetch the latest version from the npm registry or GitHub repository. For manual installations, delete the existing skill directory and recopy the files from the latest commit, ensuring you refresh the skills/hallmark/references/ directory which contains the design constraint rules.

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