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

> Quickly clone and set up the Nutlope/hallmark project with this complete installation guide. Learn to clone the repository and add the skill to your AI assistant efficiently.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: getting-started
- Published: 2026-08-18

---

**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`](https://github.com/Nutlope/hallmark/blob/main/README.md), [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json), [`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json) |
| **`site/`** | Static demo site with live theme preview | [`index.html`](https://github.com/Nutlope/hallmark/blob/main/index.html), [`js/main.js`](https://github.com/Nutlope/hallmark/blob/main/js/main.js), favicon assets |
| **`skills/hallmark/`** | Core skill definition and design rule sets | [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md), `references/` directory |
| **`docs/`** | Usage examples, recipes, and screenshot assets | [`recipes.md`](https://github.com/Nutlope/hallmark/blob/main/recipes.md), [`study-examples.md`](https://github.com/Nutlope/hallmark/blob/main/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.

```bash
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.

```bash
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/`:

```bash
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`](https://github.com/Nutlope/hallmark/blob/main/README.md) | Installation overview and live demo URL | [README.md](https://github.com/Nutlope/hallmark/blob/main/README.md) |
| [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) | npm metadata and available scripts | [package.json](https://github.com/Nutlope/hallmark/blob/main/package.json) |
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Core skill manifest with rule definitions | [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) |
| [`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md) | Protocol for creating bespoke themes | [custom-theme.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md) |
| [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) | Demo page entry point | [index.html](https://github.com/Nutlope/hallmark/blob/main/site/index.html) |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | Client-side theme cycling and navigation | [main.js](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) |
| [`docs/recipes.md`](https://github.com/Nutlope/hallmark/blob/main/docs/recipes.md) | Task-specific usage examples | [recipes.md](https://github.com/Nutlope/hallmark/blob/main/docs/recipes.md) |
| [`docs/study-examples.md`](https://github.com/Nutlope/hallmark/blob/main/docs/study-examples.md) | Sample commands for the `hallmark study` verb | [study-examples.md](https://github.com/Nutlope/hallmark/blob/main/docs/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md) to add color palettes or layout rules
2. Modify [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/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

```bash

# 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) serves as the primary manifest. It references additional rule files in `skills/hallmark/references/` including [`macro-structures.md`](https://github.com/Nutlope/hallmark/blob/main/macro-structures.md), [`themes.md`](https://github.com/Nutlope/hallmark/blob/main/themes.md), [`components.md`](https://github.com/Nutlope/hallmark/blob/main/components.md), and [`custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.