`—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`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) and [`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) handles theme transitions using the View Transitions API when available, falling back to direct DOM manipulation for unsupported browsers: ```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(); } } ``` ### Semantic HTML Structure The landing page in [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) uses data attributes to mark dynamic insertion points that JavaScript populates: ```html

``` ### CSS Custom Properties for Theming Theme variations rely on OKLCH color values stored as CSS custom properties in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css), activated by the `data-theme` attribute: ```css :root[data-theme="hum"] { --color-bg: oklch(95% 0.02 260); --color-accent: oklch(60% 0.12 30); } ``` ## Summary - **JavaScript** in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) powers all interactivity including theme switching via `applyTheme()` and `swapArchetypes()`. - **HTML** files like [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) provide semantic structure with data-slots for dynamic component injection. - **CSS** files including [`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css) and [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) define layout, animations, and theme-specific custom properties. - **JSON** in [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) configures the skill package metadata and AI harness compatibility. - **Markdown** in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) supplies 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.