How to Clone and Set Up the Nutlope/Hallmark Project: Complete Installation Guide

Clone the Hallmark repository with git clone https://github.com/Nutlope/hallmark.git, then install the skill into your AI assistant using npx skills add nutlope/hallmark—no build step required.

The Hallmark repository is a design skill for AI coding assistants that generates beautiful, theme-based landing pages. This guide walks through cloning the project, understanding its folder structure, and installing the skill into Claude Code, Cursor, or Codex.

Project Structure Overview

Hallmark's root directory organizes source code into four functional areas. The following table maps each area to its purpose and key files:

Area	Purpose	Key Files
Root	Project metadata, npm configuration, and deployment settings	README.md, package.json, vercel.json
site/	Static demo site with live theme preview	index.html, js/main.js, favicon assets
skills/hallmark/	Core skill definition and design rule sets	SKILL.md, references/ directory
docs/	Usage examples, recipes, and screenshot assets	recipes.md, study-examples.md, screenshots/

The skills/hallmark/ directory contains the actual installable skill. When you run npx skills add, the tool copies these files into your AI assistant's configuration directory.

Step 1: Clone the Repository

Start by cloning the Hallmark repository to your local machine. This gives you access to source files, demo pages, and reference documentation.

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

The repository uses a flat structure with no nested Git submodules. Total clone size is approximately 15-20 MB including screenshot assets in docs/screenshots/.

Step 2: Install the Hallmark Skill

Hallmark installs via the skills CLI rather than traditional npm install. This command fetches the latest version from npm and places files in the correct location for your target AI assistant.

npx skills add nutlope/hallmark

The installation destination varies by tool:

• Claude Code: ~/.claude/skills/hallmark/
• Cursor: .cursor/rules/hallmark.mdc (project-scoped) or ~/.cursor/rules/hallmark.mdc (global)
• Codex: ~/.codex/skills/hallmark/ (personal) or .codex/skills/hallmark/ (project-scoped)

No compilation or server process is required. The skill consists entirely of static files: Markdown rule definitions, HTML templates, and CSS reference implementations.

Step 3: Verify Local Setup (Optional)

To preview themes locally before using the skill, serve the static site in site/:

npm install
npm run dev

This starts a development server (typically at http://localhost:3000). Open the URL and press T to cycle through Hallmark's 21 built-in themes. Each theme maps to a macro-structure defined in skills/hallmark/references/.

Key Source Files and Links

Reference these files directly when customizing or debugging your Hallmark setup:

File	Description	GitHub Link
README.md	Installation overview and live demo URL	README.md
package.json	npm metadata and available scripts	package.json
skills/hallmark/SKILL.md	Core skill manifest with rule definitions	SKILL.md
skills/hallmark/references/custom-theme.md	Protocol for creating bespoke themes	custom-theme.md
site/index.html	Demo page entry point	index.html
site/js/main.js	Client-side theme cycling and navigation	main.js
docs/recipes.md	Task-specific usage examples	recipes.md
docs/study-examples.md	Sample commands for the hallmark study verb	study-examples.md

Customizing the Skill After Setup

To modify Hallmark's behavior, edit files in your local clone, then reinstall:

1. Edit skills/hallmark/references/custom-theme.md to add color palettes or layout rules
2. Modify SKILL.md to change how the skill interprets user prompts
3. Re-run npx skills add nutlope/hallmark to push changes to your AI assistant

For Cursor users, edits to .cursor/rules/hallmark.mdc take effect immediately without reinstallation.

Complete Setup Commands

# Clone and enter directory

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

# Install the skill into your AI assistant

npx skills add nutlope/hallmark

# Optional: run local demo server

npm install
npm run dev

Summary

• Hallmark installs as an AI assistant skill via npx skills add nutlope/hallmark, not npm install
• Clone with git clone https://github.com/Nutlope/hallmark.git to access source files and documentation
• The skills/hallmark/ directory contains the installable skill; site/ contains the demo; docs/ contains usage guides
• No build process required—files deploy as static assets
• Reference implementations live in skills/hallmark/references/ with SKILL.md as the entry point

Frequently Asked Questions

Where does npx skills add place Hallmark files?

The destination depends on your AI tool. Claude Code uses ~/.claude/skills/hallmark/, Cursor uses .cursor/rules/hallmark.mdc, and Codex uses ~/.codex/skills/hallmark/ or a project-scoped .codex/skills/hallmark/ directory. Check your tool's documentation for the exact path.

Can I use Hallmark without cloning the repository?

Yes. The npx skills add nutlope/hallmark command pulls directly from npm without requiring a local clone. Cloning is only necessary if you want to customize the skill or run the demo site locally.

What file controls Hallmark's design rules?

skills/hallmark/SKILL.md serves as the primary manifest. It references additional rule files in skills/hallmark/references/ including macro-structures.md, themes.md, components.md, and custom-theme.md.

How do I test theme changes before deploying them?

Run npm run dev from the repository root to start a local server hosting site/index.html. Press T in the browser to cycle through themes. Changes to reference files require reinstalling the skill with npx skills add to see effects in your AI assistant.

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