What Technologies Does Hallmark AI Use? A Complete Technical Stack Breakdown

Hallmark AI runs entirely in the browser using vanilla HTML, CSS, and JavaScript ES modules, leveraging OKLCH color tokens, Google Fonts, and localStorage for state persistence, while integrating with the GitHub REST API and Together AI's model infrastructure.

Hallmark AI is a static-site design skill created for AI coding assistants like Claude Code, Cursor, and Codex. According to the Nutlope/hallmark repository source code, it employs a lightweight, client-only architecture that relies on standard web technologies rather than heavy frameworks, making it callable from multiple AI-assistant environments without server-side dependencies.

Core Frontend Technologies

Vanilla JavaScript ES Modules

The application logic resides entirely in site/js/main.js, implemented as a single ES module that handles theme switching, hero-archetype swapping, clipboard operations, and Easter-egg interactions. The codebase uses modern JavaScript without transpilation or bundling, loaded directly via <script type="module"> tags in site/index.html.

Key functions implemented in this file include:

• applyTheme(theme) – Switches between 20 available themes using View Transitions API when available
• swapArchetypes(theme) – Injects theme-specific hero and footer content
• copyFromSource(source) – Handles clipboard operations for code examples

const THEMES = {
  hum: "Hum",
  specimen: "Specimen",
  // …20 themes total
};

function applyTheme(theme) {
  if (!THEMES[theme]) return;
  const apply = () => {
    document.documentElement.dataset.theme = theme;
    swapArchetypes(theme);           // inject theme‑specific hero/footer
    setPressed(theme);               // update UI state
    localStorage.setItem('hallmark-theme', theme);
  };
  // Use view‑transition if supported
  if (!reduced && document.startViewTransition) {
    document.startViewTransition(apply);
  } else {
    apply();
  }
}

OKLCH Color Model and CSS Custom Properties

Hallmark implements a token-driven design system using the OKLCH color model defined in site/css/tokens.css. Colors reference CSS custom properties (variables) rather than hardcoded values, enforcing the "locked token" rule throughout the interface.

:root {
  --color-paper: oklch(95% 0.01 215);   /* light paper */
  --color-accent: oklch(55% 0.18 250);  /* cool blue accent */
}
.hero { background: var(--color-paper); }
.button { color: var(--color-accent); }

Google Fonts Typography

The interface loads font families from Google Fonts via a stylesheet link in site/index.html (lines 53-58), providing display, body, and monospace typefaces across all 20 themes.

Animation and Motion Layer

CSS Transitions and Accessibility

Motion primitives use exponential ease-out curves defined in site/css/components.css. The implementation respects user preferences through the prefers-reduced-motion media query, as referenced in site/js/main.js (lines 5-8).

When the browser supports document.startViewTransition, theme changes trigger a native view transition; otherwise, the script falls back to immediate DOM updates.

State Management and Browser APIs

localStorage Implementation

Client-side state persists through localStorage with three primary storage keys:

• hallmark-theme – Stores the user's selected theme preference
• Tooltip flags – Tracks whether informational tooltips have been dismissed
• GitHub star cache – Caches repository star counts for one hour

This logic appears in site/js/main.js between lines 64-71 and 80-87.

Clipboard API Integration

The copy-to-clay functionality uses the modern Clipboard API with navigator.clipboard.writeText():

async function copyFromSource(source) {
  const text = source.querySelector("[data-copy-text]").textContent.trim();
  await navigator.clipboard.writeText(text);
  source.dataset.state = "copied";
  setTimeout(() => delete source.dataset.state, 2200);
}

External Service Integrations

GitHub REST API

On initial page load, site/js/main.js (lines 81-88) fetches the repository's star count from api.github.com and stores the result in localStorage with a one-hour expiration timestamp. This eliminates repeated API calls during development sessions.

Together AI and Assistant Harnesses

The package.json description field declares Hallmark is "Powered by Together AI" (lines 4-5). The skill manifest at skills/hallmark/SKILL.md defines integration points for three AI coding assistants: Claude Code, Cursor, and Codex (referenced in package.json lines 27-30).

Build System and Package Configuration

Hallmark ships as an npm package with "type": "module" configured in package.json. The configuration declares the skill entry point at skills/hallmark/SKILL.md and provides a development server via npm run serve. No build step or bundler is required for deployment, as the static files in the site/ directory serve directly to browsers.

Summary

• Hallmark AI uses vanilla HTML, CSS, and JavaScript ES modules without React, Vue, or other frontend frameworks
• Colors utilize the OKLCH model via CSS custom properties defined in site/css/tokens.css
• State persists via localStorage for themes, tooltips, and cached GitHub API responses
• Typography loads from Google Fonts through standard CSS @import
• External integrations include the GitHub REST API for star counts and Together AI for model infrastructure
• Compatible with Claude Code, Cursor, and Codex as defined in the skill manifest

Frequently Asked Questions

Does Hallmark AI use React or other frontend frameworks?

No. According to the source code in site/js/main.js, Hallmark AI is built with vanilla JavaScript ES modules and purposely avoids frontend frameworks. The architecture relies on native browser APIs and DOM manipulation rather than virtual DOM libraries.

How does Hallmark AI store user preferences?

User preferences for theme selection and tooltip dismissal are stored in the browser's localStorage. The theme key (hallmark-theme) persists across sessions, while GitHub star counts cache for one hour to minimize API requests.

What AI assistants are compatible with Hallmark AI?

As implemented in the package.json and skills/hallmark/SKILL.md files, Hallmark AI integrates with Claude Code, Cursor, and Codex. The repository description also notes it is powered by Together AI for model infrastructure.

Where are the color tokens defined?

The OKLCH color tokens are defined in site/css/tokens.css and referenced throughout the application via CSS custom properties (e.g., var(--color-paper)). This token system enforces consistent theming across all 20 available design archetypes.

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