skills.rest
yamcodes
yamcodesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hallmark

Enforces YAML frontmatter contract and entry for SKILL.md-based design units.

138|6|Updated Jan 25, 2025
Search Tags:#workflow#theming#accessibility#tokens#design-system#hallmark#macrostructure
One-click install
npx skills add https://github.com/yamcodes/arkenv --skill hallmark
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hallmark
Source: https://github.com/yamcodes/arkenv/tree/main/skills/hallmark
Command: npx skills add https://github.com/yamcodes/arkenv --skill hallmark

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Hallmark helps teams design marketing pages and product interfaces with a built-in design system, preventing AI-template tells and ensuring repeatable macrostructure, theming, and token discipline.

Core Features & Use Cases

  • Macrostructure discipline: pick a named page shape that defines heading placement, body, CTAs, and image treatment.
  • Theme routing: catalog of 20 named themes or a custom route for brand-specific palettes and fonts, with diversification rules to ensure variety.
  • Global tokens and accessibility: insist on OKLCH color tokens, tokens.css, and contrast/accessible focus treatments.
  • Study/audit/design workflows: supports default typography-only outputs and enrichment/human-in-the-loop design processes.

Quick Start

Provide a first-pass macrostructure and theme to start; the system will return a stamped preview.

Frequently Asked Questions about hallmark

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent AI-generated pages from looking like generic templates?▼

Preventing AI-template tells requires enforcing a YAML frontmatter contract and selecting a named macrostructure that governs heading placement, body content, CTAs, and image treatment to ensure repeatable page layouts.

How do I manage design tokens for accessibility in a UI design system?▼

Managing design tokens for accessibility involves using OKLCH color tokens within a tokens.css file, ensuring proper contrast ratios and accessible focus treatments across all generated marketing pages and product interfaces.

Can I use custom themes and palettes for brand-specific marketing pages?▼

Yes, custom theme routing supports brand-specific palettes and fonts, while a catalog of 20 named themes provides predefined options with diversification rules to ensure visual variety across marketing pages and dashboards.

What's the best way to start a design audit or redesign workflow?▼

Start a design audit or redesign by providing a first-pass macrostructure and theme to generate a stamped preview, which supports enrichment and human-in-the-loop processes for typography-only or full UI outputs.

Does this design system workflow require any external dependencies?▼

No, this design system workflow operates with zero external dependencies, utilizing internal scripts, references, and assets to establish the YAML frontmatter contract and enforce macrostructure, theming, and token discipline.

Related Skills

Explore More Design & Creative Skills→
CatsofsufferingCatsofsuffering
5

neubrutalism

Apply Neubrutalism design tokens and nb- CSS classes to frontend components.

Community
Intermediate
danmartinez78danmartinez78

popular-web-designs

Convert web design templates into HTML/CSS UI components and patterns.

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

color-system

Define semantic color tokens in OKLCH with WCAG 2.1 AA contrast.

Community
Advanced
misty-stepmisty-step
13

hallmark

Enforce macrostructure and token governance to design non-template web pages.

Official
Advanced