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

> Discover if Nutlope/hallmark uses a specific framework. Explore its root structure and learn it's a plain static site built with vanilla HTML CSS and JavaScript no framework used.

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

---

**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`](https://github.com/Nutlope/hallmark/blob/main/package.json) files, this project follows a minimal, flat structure centered around a `site/` directory.

### The Smoking Gun: [`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json) Explicitly Disables Framework Detection

In [`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json), the configuration leaves no room for interpretation:

```json
{
  "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`](https://github.com/Nutlope/hallmark/blob/main/package.json) Confirms Zero Framework Dependencies

The [`package.json`](https://github.com/Nutlope/hallmark/blob/main/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:

```json
{
  "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`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)

All dynamic behavior resides in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js), implemented through direct DOM manipulation without framework abstractions. The theme-switching functionality demonstrates this approach:

```javascript
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`](https://github.com/Nutlope/hallmark/blob/main/package.json) Structure

Hallmark serves a unique dual purpose: it's both a static website and an AI skill. The [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) includes a `skill` field that AI assistants use for invocation:

```json
{
  "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`](https://github.com/Nutlope/hallmark/blob/main/vercel.json) | `"framework": null` | Explicit opt-out of all framework detection |
| [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) | No build scripts or framework deps | Single `serve` script using Python HTTP server |
| [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) | No framework-specific markup | Standard HTML5 document structure |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/vercel.json)
- **Zero framework dependencies** appear in [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json)—only a Python-based static server script
- **All interactivity is hand-written vanilla JS** in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/package.json)

## Frequently Asked Questions

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

No—[`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json) explicitly sets `"framework": null`, and [`package.json`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.