What Programming Languages Are Used in Nutlope/hallmark? A Complete Technical Breakdown
Nutlope/hallmark is built entirely with front-end web standards—JavaScript, HTML, and CSS—supplemented by JSON configuration and Markdown documentation, with no server-side runtime required.
Hallmark is a static, client-side design skill that runs entirely in the browser. The repository demonstrates how vanilla web technologies can power complex interactive experiences without backend dependencies.
Core Programming Languages
The project relies on three fundamental web technologies for all runtime behavior and rendering.
JavaScript for Interactive Logic
JavaScript drives every dynamic behavior in the application, including theme selection, component swapping, copy-to-clipboard functionality, keyboard shortcuts, and UI state updates. The primary implementation lives in site/js/main.js, where functions like applyTheme() coordinate visual transitions and persist user preferences to localStorage.
HTML for Structural Markup
HTML provides the semantic foundation for every example page and the landing interface. The site/index.html file defines structural slots—such as <section data-slot="hero">—that JavaScript populates dynamically at runtime. Each page uses data-theme attributes to activate specific CSS custom properties.
CSS for Visual Styling and Animation
CSS supplies the visual language, layout systems, token definitions, and animation keyframes. Theme-specific palettes are defined using CSS custom properties in files like site/css/tokens.css and site/css/base.css. The JavaScript toggles data-theme attributes on the root element to activate different visual modes without reloading the page.
Configuration and Documentation Formats
Beyond executable code, the repository uses declarative formats for packaging and AI integration.
JSON for Package Metadata
JSON stores package metadata and skill configuration in package.json. This file declares the skill entry point, lists available harnesses for AI assistant integration, and manages dependency metadata required by the packaging system.
Markdown for Skill Definitions
Markdown holds the human-readable skill specifications consumed by AI assistants. The skills/hallmark/SKILL.md file serves as the declarative skill definition parsed by Claude Code, Cursor, and Codex, while skills/hallmark/references/*.md files contain design guidelines and component documentation. These files are parsed by AI hosts rather than executed as code.
Implementation Examples
The following code patterns demonstrate how these languages interact in the codebase.
Theme Switching Logic in JavaScript
The applyTheme() function in site/js/main.js handles theme transitions using the View Transitions API when available, falling back to direct DOM manipulation for unsupported browsers:
function applyTheme(theme) {
if (!THEMES[theme]) return;
const apply = () => {
root.dataset.theme = theme; // CSS picks up the theme
swapArchetypes(theme); // load the appropriate hero/footer
setPressed(theme); // update UI state
localStorage.setItem(STORAGE_KEY, theme);
};
// Use view-transition when supported
if (!reduced && document.startViewTransition) {
document.startViewTransition(apply);
} else {
apply();
}
}
Semantic HTML Structure
The landing page in site/index.html uses data attributes to mark dynamic insertion points that JavaScript populates:
<body data-theme="hum">
<header class="banner"> … </header>
<main>
<section data-slot="hero"></section>
<section data-slot="footer"></section>
</main>
</body>
CSS Custom Properties for Theming
Theme variations rely on OKLCH color values stored as CSS custom properties in site/css/tokens.css, activated by the data-theme attribute:
:root[data-theme="hum"] {
--color-bg: oklch(95% 0.02 260);
--color-accent: oklch(60% 0.12 30);
}
Summary
- JavaScript in
site/js/main.jspowers all interactivity including theme switching viaapplyTheme()andswapArchetypes(). - HTML files like
site/index.htmlprovide semantic structure with data-slots for dynamic component injection. - CSS files including
site/css/base.cssandsite/css/tokens.cssdefine layout, animations, and theme-specific custom properties. - JSON in
package.jsonconfigures the skill package metadata and AI harness compatibility. - Markdown in
skills/hallmark/SKILL.mdsupplies declarative skill definitions for AI assistants. - No server-side languages are present; the architecture is deliberately limited to front-end assets.
Frequently Asked Questions
Is Nutlope/hallmark a full-stack application?
No. According to the repository source code, Hallmark is a static, client-side design skill that runs entirely in the browser. There are no server-side languages like Python, Ruby, or Go present in the codebase.
What handles the theme switching logic in Hallmark?
The applyTheme() function in site/js/main.js manages theme transitions. It updates the root element's data-theme attribute for CSS selection, calls swapArchetypes() to load theme-specific components, updates UI state via setPressed(), and persists the choice to localStorage using STORAGE_KEY.
Why does the repository include Markdown files if they are not executed?
The Markdown files in skills/hallmark/ serve as declarative skill definitions read by host AI assistants including Claude Code, Cursor, and Codex. These files provide design guidelines, component cookbooks, and verb definitions that AI systems parse to understand how to implement the skill.
Where are the color tokens defined for different themes?
Theme-specific color values are defined as CSS custom properties using the OKLCH color space in site/css/tokens.css. Each theme scope uses the :root[data-theme="theme-name"] selector to apply distinct palettes when JavaScript updates the data-theme attribute on the root element.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" 
Maintain an open-source project? Get it listed too →