# How to Install Nutlope/Hallmark for Claude Code, Cursor, and Codex > Effortlessly install Nutlope/hallmark for Claude Code, Cursor, and Codex with a single command. Enhance your AI coding assistants and streamline your workflow today. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: how-to-guide - Published: 2026-07-15 --- **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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) as declared in [`package.json`](https://github.com/Nutlope/hallmark/blob/main/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: ```bash npx skills add nutlope/hallmark ``` This command reads the `skill` field in [`package.json`](https://github.com/Nutlope/hallmark/blob/main/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: ```bash 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: ```bash ~/.claude/skills/hallmark/ ``` Manual copy command: ```bash cp -r ./hallmark/skills/hallmark ~/.claude/skills/hallmark ``` ### Cursor Cursor consumes rule files rather than skill directories. The installer converts [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) into `.cursor/rules/hallmark.mdc`: ```bash .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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), which serves as the entry point defined in [`package.json`](https://github.com/Nutlope/hallmark/blob/main/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 `** — Audit an existing UI component - **`hallmark redesign `** — Redesign a specific file or component - **`hallmark study `** — Extract design DNA from reference images Example usage in Claude Code: ```bash 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) to `.cursor/rules/hallmark.mdc`. The [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) file in the repository root identifies [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/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.