Does Nutlope/hallmark Use a Specific Framework? A Deep Dive into Its Root Structure

No—Nutlope/hallmark is a plain static site built with vanilla HTML, CSS, and JavaScript, explicitly configured without any front-end framework.

This repository showcases a deliberately framework-agnostic approach to web development. By examining the root structure and configuration files, you can see exactly how the project avoids React, Vue, Angular, or any other conventional framework while still delivering interactive functionality.

How the Root Structure Reveals a Framework-Free Architecture

The hallmark repository's organization immediately signals its static nature. Unlike framework-based projects with src/ directories, build pipelines, and dependency-heavy package.json files, this project follows a minimal, flat structure centered around a site/ directory.

The Smoking Gun: vercel.json Explicitly Disables Framework Detection

In vercel.json, the configuration leaves no room for interpretation:

{
  "framework": null
}

This single line instructs Vercel to treat hallmark as a static output rather than attempting framework-based builds. According to the Nutlope/hallmark source code, this null framework declaration ensures predictable, zero-build deployments without hidden transformation steps.

package.json Confirms Zero Framework Dependencies

The package.json file contains no dependencies or devDependencies related to bundlers, transpilers, or UI frameworks. Its entire purpose centers on a helper script for local development:

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

Running npm run serve simply launches Python's built-in HTTP server to serve static files from the site/ directory. There are no build tools, no watchers, no hot module replacement—just direct file serving.

Where the Interactivity Lives: Vanilla JavaScript in site/js/main.js

All dynamic behavior resides in site/js/main.js, implemented through direct DOM manipulation without framework abstractions. The theme-switching functionality demonstrates this approach:

function applyTheme(theme) {
  if (!THEMES[theme]) return;
  root.dataset.theme = theme;
  swapArchetypes(theme);
  setPressed(theme);
  localStorage.setItem(STORAGE_KEY, theme);
}

This function accesses document.documentElement directly, modifies dataset attributes, and persists state via localStorage—no virtual DOM, no reactive state management, no component lifecycle methods required.

Skill Entry vs. Framework Entry: Understanding the package.json Structure

Hallmark serves a unique dual purpose: it's both a static website and an AI skill. The package.json includes a skill field that AI assistants use for invocation:

{
  "skill": {
    "entry": "skills/hallmark/SKILL.md",
    "references": "skills/hallmark/references",
    "harnesses": ["claude-code", "cursor", "codex"]
  }
}

This entry point is completely separate from any web framework concerns—it's consumed by AI coding assistants rather than rendered in a browser environment.

Key Files That Prove the Framework-Free Structure

File	Framework Indicator	What It Actually Contains
vercel.json	"framework": null	Explicit opt-out of all framework detection
package.json	No build scripts or framework deps	Single serve script using Python HTTP server
site/index.html	No framework-specific markup	Standard HTML5 document structure
site/js/main.js	No imports from React/Vue/etc.	Vanilla JavaScript with direct DOM APIs

Summary

• Hallmark explicitly disables framework detection via "framework": null in vercel.json
• Zero framework dependencies appear in package.json—only a Python-based static server script
• All interactivity is hand-written vanilla JS in site/js/main.js, using native localStorage and DOM APIs directly
• Root structure follows site/, skills/, docs/ pattern rather than framework-conventional src/ layouts
• Dual-purpose architecture separates the static website from the AI skill entry point defined in package.json

Frequently Asked Questions

Is Nutlope/hallmark built with React or Next.js?

No—vercel.json explicitly sets "framework": null, and package.json contains no React, Next.js, or related dependencies. The project predates or deliberately avoids these tools in favor of direct browser APIs.

How does hallmark handle client-side interactivity without a framework?

All interactions are implemented in site/js/main.js using vanilla JavaScript. Functions like applyTheme() manipulate document.documentElement.dataset and localStorage directly, achieving state persistence and UI updates without virtual DOM overhead.

Why would a project avoid using a front-end framework?

Frameworks add build complexity, bundle size, and abstraction layers. Hallmark's framework-agnostic approach prioritizes lightweight embeddability and direct browser compatibility—particularly valuable for a project whose primary purpose includes being consumed as an AI skill across multiple coding assistants.

Can I deploy hallmark to Vercel without any build step?

Yes—Vercel reads the framework: null configuration and serves files from the root as static assets. No build command, no output directory configuration, and no framework-specific adapter is required.

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