This skill should be used when the user asks to "generate branded HTML", "create a landing page", "build a brand-compliant web page", "produce a styled HTML report", or "design a responsive page", or mentions brand tokens, CSS variables, or HTML generation. [EXPLICIT] It generates brand-compliant HTML/CSS by reading brand tokens from config and applying colors, fonts, spacing, component templates, and responsive patterns. [EXPLICIT] Use this skill whenever the user needs a self-contained branded web page, even if they don't explicitly ask for "brand HTML". [EXPLICIT]
From jm-adknpx claudepluginhub javimontano/jm-adk-alfaThis skill is limited to using the following tools:
agents/guardian.mdagents/lead.mdagents/specialist.mdagents/support.mdevals/evals.jsonknowledge/body-of-knowledge.mdknowledge/knowledge-graph.mdprompts/meta.mdprompts/primary.mdprompts/variations/deep.mdprompts/variations/quick.mdreferences/domain-knowledge.mdtemplates/output.docx.mdtemplates/output.htmlGenerate brand-compliant HTML/CSS for any brand. Reads brand tokens (colors, fonts, spacing) from a config file and produces self-contained, accessible, responsive web pages. [EXPLICIT]
Search for brand config: [EXPLICIT]
./brand-config.json in working directory~/.claude/brand-config.jsonConfig schema: see design-system skill for full schema. Key fields used here: [EXPLICIT]
{
"brand": { "name": "", "wordmark": "", "wordmarkAccent": "", "tagline": "", "positioning": "" },
"colors": { "primary": "", "black": "", "white": "", "background": "", "muted": "" },
"typography": { "display": "", "body": "", "fontLinks": [] },
"spacing": { "radiusSm": "", "radiusMd": "", "radiusLg": "" }
}
If no config: Use neutral blue palette (#2563EB primary, #F8FAFC bg), system fonts.
Define as CSS variables from config: [EXPLICIT]
:root {
--brand-primary: [colors.primary];
--brand-black: [colors.black];
--brand-white: [colors.white];
--brand-bg: [colors.background];
--brand-muted: [colors.muted];
}
Rules:
--brand-primary is always the accent: CTAs, headline highlights, borders, icons--brand-bg for light mode, --brand-black for dark sections:root {
--font-display: [typography.display];
--font-body: [typography.body];
}
h1, h2, h3, .headline { font-family: var(--font-display); }
body, p, span, label { font-family: var(--font-body); }
clamp(2.5rem, 6vw, 5.5rem), line-height 1.05<span class="brand-wordmark" style="
font-family: var(--font-display);
font-weight: 600; font-size: 1.5rem;
color: var(--brand-black);
">[wordmark]<span style="color: var(--brand-primary);">[wordmarkAccent]</span></span>
.brand-page {
background: var(--brand-bg);
padding: clamp(24px, 4vw, 64px);
font-family: var(--font-body);
}
.brand-grid {
display: grid;
gap: clamp(16px, 2.5vw, 40px);
}
Black bg, primary-color accent on key headline word, CTA button in primary color, positioning label above headline. [EXPLICIT]
Primary bg, dark text, white accent on key phrase, wordmark at bottom. [EXPLICIT]
White bg, rounded corners, shadow, heading in display font, body in body font. Optional tag chip in corner. [EXPLICIT]
Primary-color left border (4px), large number in display font, label in body font. [EXPLICIT]
Flex row: wordmark left, links center, CTA button right in primary color. [EXPLICIT]
| Background | Text | Accent | Use Case |
|---|---|---|---|
--brand-bg | --brand-black | --brand-primary | Default pages |
--brand-black | --brand-white | --brand-primary | Dark hero |
--brand-primary | --brand-black | --brand-white | Highlight sections |
--brand-white | --brand-black | --brand-primary | Cards, clean UI |
prefers-color-scheme: dark media query if config includes dark mode tokensdir="rtl" to html element; mirror layout accordinglyAuthor: Javier Montano | Last updated: March 18, 2026
Example invocations: [EXPLICIT]
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.