Hallmark Deployment Strategies: 4 Ways to Deploy the Static Design Skill

Deploy Hallmark by serving the pre-built site/ folder via Vercel, any static host, a local Python server, or by copying the skill files into Claude Code, Cursor, or Codex.

Hallmark is a pure-static design skill created by Nutlope that generates pre-rendered HTML, CSS, and JavaScript. Whether you're publishing a live showcase or integrating the skill into an AI coding assistant, the repository supports multiple deployment paths. Each strategy centers on the same artifact: the self-contained site/ directory.

---

Vercel Static Hosting

The fastest path to production uses Vercel's zero-config static hosting. The repository includes a vercel.json file that explicitly disables framework detection and points Vercel to the correct output directory.

In vercel.json:

{
  "outputDirectory": "site",
  "framework": null
}

Setting framework: null prevents Vercel from attempting to build the project with a detected framework. This ensures Vercel treats Hallmark as plain static files.

Deploy with one command:

npm install -g vercel
vercel deploy --prod

Vercel reads the configuration automatically and serves everything from site/.

---

Local Static Server Preview

For rapid iteration before deploying, the package.json includes a serve script that spins up a Python HTTP server pointed at the site directory.

From package.json (lines 31-34):

"scripts": {
  "serve": "python3 -m http.server --directory site 4173"
}

Run the local server:

npm run serve

This starts a server at http://localhost:4173, ideal for testing UI changes without external dependencies.

---

AI Assistant Skill Installation

Hallmark's primary distribution model is as a skill for Claude Code, Cursor, or Codex. The repository provides two installation methods.

CLI Installation (Recommended)

npx skills add nutlope/hallmark

This fetches the skill definition and registers it with your AI assistant.

Manual Copy Installation

Copy the skill files directly into your assistant's skill directory. The README.md documents exact target paths for each platform.

Claude Code example:

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

The skill files live in skills/hallmark/ and include:

• SKILL.md — the skill definition
• references/ — design references used by the AI

---

Generic Static Hosting (GitHub Pages, Netlify, Cloudflare Pages)

Because Hallmark outputs fully self-contained static assets, any static hosting service works without special configuration. The site/ directory contains a complete index.html plus all CSS, JS, and assets.

GitHub Pages deployment example:

git subtree push --prefix site origin gh-pages

For Netlify or Cloudflare Pages, simply configure the build output directory as site/ in your dashboard. No build command is required—the files are already generated.

---

Key Architecture Decisions

Hallmark's deployment flexibility stems from a few deliberate design choices in the Nutlope/hallmark source:

• Framework-agnostic output: The vercel.json explicitly disables framework detection, ensuring consistent treatment as static files.
• Skill-first packaging: The skills/hallmark/ directory is structured for direct consumption by AI assistants, separate from the showcase site.
• Zero server-side code: All pages are pre-rendered; site/index.html and site/_tests/ contain no dynamic dependencies.

---

Summary

• Vercel: Zero-config deployment via vercel.json with outputDirectory: "site".
• Local preview: npm run serve launches Python's HTTP server on port 4173.
• AI assistant integration: Install via npx skills add or manual copy to ~/.claude/skills/, ~/.cursor/skills/, or equivalent.
• Any static host: Push the site/ folder to GitHub Pages, Netlify, Cloudflare Pages, or similar.

---

Frequently Asked Questions

How do I deploy Hallmark to Vercel without a build step?

Vercel requires no build step. The vercel.json file already specifies outputDirectory: "site" and disables framework detection. Run vercel deploy --prod and Vercel serves the pre-built files directly.

Can I use Hallmark with Claude Code without installing it as a skill?

Yes. Manually copy the skills/hallmark/ folder—including its references/ subdirectory—to ~/.claude/skills/hallmark/. The README documents equivalent paths for Cursor and Codex.

What port does the local development server use?

The serve script in package.json hardcodes port 4173. The command python3 -m http.server --directory site 4173 serves the static site at http://localhost:4173.

Is Hallmark compatible with serverless functions or edge runtimes?

No. Hallmark is intentionally static-only. The site/ directory contains pre-rendered HTML, CSS, and JavaScript with no server-side code, making it incompatible with serverless or edge function deployment patterns.

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