# What Programming Language Powers Skills in Nutlope/hallmark?
> Discover the programming language behind Nutlope/hallmark skills. Learn how JavaScript, HTML, CSS, and Markdown power AI assistant functionality and presentation.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-07-29
---
**The Nutlope/hallmark repository relies on JavaScript as the core programming language for skill functionality, with HTML and CSS handling the presentation layer, while Markdown defines the skill structure for AI assistants.**
Hallmark is a static, client-side design skill that executes entirely within the browser without any server-side runtime. Understanding the programming language used for skills in Nutlope/hallmark requires examining both the executable code that drives interactivity and the declarative files that define the skill for AI assistants like Claude Code, Cursor, and Codex.
## Core Language Stack for Hallmark Skills
### JavaScript: The Interactive Engine
JavaScript drives all dynamic behavior in the Hallmark skill. Located in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js), the code handles theme selection, component swapping, clipboard operations, and keyboard shortcuts.
The `applyTheme()` function demonstrates how JavaScript manages state transitions and view updates:
```javascript
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();
}
}
```
This implementation relies on modern browser APIs including `localStorage` for persistence and `document.startViewTransition` for smooth visual updates.
### HTML: Structural Foundation
HTML provides the markup skeleton for every example page and the landing interface. The [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) file defines structural slots that JavaScript populates dynamically:
```html
```
These `data-slot` attributes serve as injection points for the JavaScript-driven component system.
### CSS: Visual Styling and Theming
CSS supplies the visual language through [`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css) and theme-specific token files like [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css). The styling system uses CSS custom properties that react to the `data-theme` attribute set by JavaScript:
```css
:root[data-theme="hum"] {
--color-bg: oklch(95% 0.02 260);
--color-accent: oklch(60% 0.12 30);
}
```
### Markdown: Skill Definition Language
While not a programming language for execution, Markdown serves as the declarative language for the skill definition itself. The [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) file contains structured instructions parsed by AI assistants rather than executed in the browser.
Supporting documentation in `skills/hallmark/references/*.md` extends the skill's knowledge base using the same Markdown format.
### JSON: Configuration and Metadata
[`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) stores the skill's package metadata, defines entry points, and lists available harnesses in JSON format. This configuration bridges the skill definition with the execution environment.
## Key Source Files by Language
| File | Language | Purpose |
|------|----------|---------|
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | JavaScript | Core interaction engine handling themes, shortcuts, and copy functionality |
| [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) | HTML | Landing page structure with component slots |
| [`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css) | CSS | Visual styling and layout foundations |
| [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) | CSS | Theme token definitions using CSS custom properties |
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Markdown | Primary skill definition for AI assistant consumption |
| [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) | JSON | Package configuration and harness declarations |
## Summary
- **JavaScript** serves as the primary programming language for Hallmark skill functionality, powering all interactive behaviors in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)
- **HTML and CSS** provide the structural and visual layer, with CSS custom properties enabling dynamic theming through the `data-theme` attribute
- **Markdown** functions as the skill definition language in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md), processed by AI assistants rather than browsers
- **JSON** handles configuration metadata in [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json), declaring entry points and supported harnesses
- The repository contains zero server-side code, operating exclusively as a static, client-side skill
## Frequently Asked Questions
### What is the main programming language used for the Hallmark skill's interactive features?
JavaScript is the exclusive programming language for all interactive functionality in Nutlope/hallmark. The [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) file contains the `applyTheme()` function and other logic handling user interactions, local storage persistence, and view transitions.
### Does the Nutlope/hallmark repository use Python or any backend language?
No. The repository deliberately excludes server-side languages like Python, Ruby, or Go. It operates as a purely client-side skill using only browser-native technologies: JavaScript, HTML, and CSS.
### What language are the skill definitions written in?
Skill definitions are written in Markdown. The [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) file uses Markdown to structure instructions, while reference documentation in `skills/hallmark/references/*.md` provides additional guidance for AI assistants parsing the skill.
### How does the theme switching logic work in the Hallmark skill?
The theme system uses JavaScript to toggle the `data-theme` attribute on the root element, which CSS selectors target to activate specific custom property values. The `applyTheme()` function in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) orchestrates this by updating the dataset, swapping component archetypes via `swapArchetypes()`, and persisting the selection to `localStorage`.