Skill
design-blog-hero
Generate a blog post hero artifact — TWO pixel-exact HTML canvases in a single file: an Open Graph card (1200×630) for social meta tags AND an in-page hero…
@slogsdonView SkillContent
Skill
/design-ui-components
Generate components.html — a brand-agnostic component library that pulls from a project's DESIGN.md tokens. Includes buttons, cards, badges, eyebrows, hairlines, code blocks, callouts, hero blocks, stat callouts, list items, avatar frames, pull quotes, footer blocks. Use AFTER
Install
$ npx -y skills add slogsdon/skills-design --skill design-ui-components --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/design-ui-components
Context preview
The summary Claude sees to decide when to auto-load this skill.
Generate components.html — a brand-agnostic component library that pulls from a project's DESIGN.md tokens. Includes buttons, cards, badges, eyebrows, hairlines, code blocks, callouts, hero blocks, stat callouts, list items, avatar frames, pull quotes, footer blocks. Use AFTER
SKILL.md
design-ui-components.SKILL.mdname: design-ui-components
description: Generate components.html — a brand-agnostic component library that pulls from a project's DESIGN.md tokens. Includes buttons, cards, badges, eyebrows, hairlines, code blocks, callouts, hero blocks, stat callouts, list items, avatar frames, pull quotes, footer blocks. Use AFTER design-system and BEFORE platform artifact skills. Triggers include "components for [brand]", "component library", "generate UI components", "/ui-components".
Skill: ui-components
Produces `./design/<brand-slug>/components/components.html` — a single self-contained HTML library where every reusable atom is rendered using the brand's `tokens.css`. Platform skills (linkedin-post, twitter-card, youtube-thumbnail, stream-overlay, instagram-post) read this library to compose artifacts without re-deriving primitive markup.
When to use
- After `/design-system <brand-slug>` has produced `DESIGN.md` + `tokens.css`
- Before any platform artifact skill — they reference component snippets from this file
- When you've added a new component category (e.g. data viz callouts) that platform skills need
Inputs
- `./design/<brand-slug>/DESIGN.md` (read for component prose guidance)
- `./design/<brand-slug>/tokens.css` (embedded via `<style>` block in the output)
Output
`./design/<brand-slug>/components/components.html` — single file, no external CSS dependencies (Google Fonts `<link>` is allowed for the type families declared in `DESIGN.md`).
Steps
1. Read inputs
test -f ./design/<brand-slug>/tokens.css && test -f ./design/<brand-slug>/DESIGN.md
If either is missing, stop and tell the user to run `/design-system <brand-slug>` first.
2. Pick component variations
For each component category below, pick ONE primary variation that fits the brand's visual direction. Show the alternates in the library too, but mark the primary explicitly so platform skills know which to default to.
3. Generate components.html
Use this structure. Each component section follows: heading → rendered preview → expandable HTML snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand Name> — Component Library</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=<Display+Family>&family=<Body+Family>&family=<Mono+Family>&display=swap">
<style>
/* Embed tokens.css verbatim */
<contents of tokens.css>
/* Page chrome — neutral wrapper, intentionally muted so components stand out */
body { background: var(--color-surface-muted); color: var(--color-ink); margin: 0; padding: var(--space-2xl); font-family: var(--type-body-md-family); }
.library { max-width: 960px; margin: 0 auto; }
.lib-section { margin-bottom: var(--space-3xl); }
.lib-section h2 { font: var(--type-headline-md-weight) var(--type-headline-md-size)/var(--type-headline-md-leading) var(--type-headline-md-family); letter-spacing: var(--type-headline-md-tracking); margin: 0 0 var(--space-md); }
.lib-section .preview { background: var(--color-surface); padding: var(--space-xl); margin-bottom: var(--space-md); border: 1px solid var(--color-rule); }
.lib-section details { font-family: var(--type-code-family); font-size: var(--type-code-size); }
.lib-section summary { cursor: pointer; padding: var(--space-xs) 0; color: var(--color-ink-soft); }
.lib-section pre { background: var(--color-ink); color: var(--color-surface); padding: var(--space-md); overflow-x: auto; margin: var(--space-xs) 0 0; }
</style>
</head>
<body>
<main class="library">
<header style="margin-bottom: var(--space-3xl);">
<span class="t-eyebrow">COMPONENT LIBRARY · v1</span>
<h1 class="t-display-lg" style="margin: var(--space-sm) 0 var(--space-xs);"><Brand Name></h1>
<p class="t-body-lg" style="color: var(--color-ink-soft); margin: 0;">Reusable atoms for platform artifacts. Every component is composed from tokens.css — no magic numbers.</p>
</header>
<!-- Sections below: one per component category -->
</main>
</body>
</html>4. Component inventory (build each as a `.lib-section`)
Order matters — group by atomic level (smallest first).
a. Eyebrows
Mono uppercase tracked label. Variations: with hairline beside, with index number ("01 / "), with date prefix.
**Critical:** eyebrows are a tell when overused. They appear by default on a lot of AI-generated layouts and that's exactly the problem. Mark this category in the library as `OPTIONAL — apply only when the artifact genuinely needs category/section anchoring`. Never include the eyebrow in default scaffolds for platform skills; let the platform skill decide whether to invoke it per-artifact.
b. Hairlines
1px full-width rules. Variations: full-width, indented, with center label ("§").
c. Type scale samples
Render each type level from `DESIGN.md` once with the same string ("Build something obvious."). Useful as a quick reference for platform skills.
d. Buttons
- Primary (filled, ink-on-surface or surface-on-ink depending on direction)
- Secondary (outline)
- Tertiary (text-only with arrow suffix)
- Ghost (icon-only square)
Each in 3 sizes (sm, md, lg). Show hover state via `:hover` rules.
e. Badges / tags
Small inline labels. Variations: solid, outline, dot-prefixed, with count ("New · 3").
f. Cards
- Plain card (padding + surface + border)
- Stat card (big number in `display-xl`, label in eyebrow)
- Linked card (entire surface clickable, arrow appears on hover)
g. Code blocks
- Inline `<code>` with subtle background
- Multi-line `<pre>` with optional filename header bar
h. Callouts
- Note (neutral)
- Warning (uses `--color-warning`)
- Success (uses `--color-success`)
Use a thin left rule, NOT a colored background fill (that's a cliché). Icon optional, must be a single character or simple SVG, never an emoji.
i. Hero blocks
- H
Read more
name: design-ui-components description: Generate components.html — a brand-agnostic component library that pulls from a project's DESIGN.md tokens. Includes buttons, cards, badges, eyebrows, hairlines, code blocks, callouts, hero blocks, stat callouts, list items, avatar frames, pull quotes, footer blocks. Use AFTER design-system and BEFORE platform artifact skills. Triggers include "components for [brand]", "component library", "generate UI components", "/ui-components".
Skill: ui-components
Produces `./design/<brand-slug>/components/components.html` — a single self-contained HTML library where every reusable atom is rendered using the brand's `tokens.css`. Platform skills (linkedin-post, twitter-card, youtube-thumbnail, stream-overlay, instagram-post) read this library to compose artifacts without re-deriving primitive markup.
When to use
- After `/design-system <brand-slug>` has produced `DESIGN.md` + `tokens.css`
- Before any platform artifact skill — they reference component snippets from this file
- When you've added a new component category (e.g. data viz callouts) that platform skills need
Inputs
- `./design/<brand-slug>/DESIGN.md` (read for component prose guidance)
- `./design/<brand-slug>/tokens.css` (embedded via `<style>` block in the output)
Output
`./design/<brand-slug>/components/components.html` — single file, no external CSS dependencies (Google Fonts `<link>` is allowed for the type families declared in `DESIGN.md`).
Steps
1. Read inputs
test -f ./design/<brand-slug>/tokens.css && test -f ./design/<brand-slug>/DESIGN.md
If either is missing, stop and tell the user to run `/design-system <brand-slug>` first.
2. Pick component variations
For each component category below, pick ONE primary variation that fits the brand's visual direction. Show the alternates in the library too, but mark the primary explicitly so platform skills know which to default to.
3. Generate components.html
Use this structure. Each component section follows: heading → rendered preview → expandable HTML snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand Name> — Component Library</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=<Display+Family>&family=<Body+Family>&family=<Mono+Family>&display=swap">
<style>
/* Embed tokens.css verbatim */
<contents of tokens.css>
/* Page chrome — neutral wrapper, intentionally muted so components stand out */
body { background: var(--color-surface-muted); color: var(--color-ink); margin: 0; padding: var(--space-2xl); font-family: var(--type-body-md-family); }
.library { max-width: 960px; margin: 0 auto; }
.lib-section { margin-bottom: var(--space-3xl); }
.lib-section h2 { font: var(--type-headline-md-weight) var(--type-headline-md-size)/var(--type-headline-md-leading) var(--type-headline-md-family); letter-spacing: var(--type-headline-md-tracking); margin: 0 0 var(--space-md); }
.lib-section .preview { background: var(--color-surface); padding: var(--space-xl); margin-bottom: var(--space-md); border: 1px solid var(--color-rule); }
.lib-section details { font-family: var(--type-code-family); font-size: var(--type-code-size); }
.lib-section summary { cursor: pointer; padding: var(--space-xs) 0; color: var(--color-ink-soft); }
.lib-section pre { background: var(--color-ink); color: var(--color-surface); padding: var(--space-md); overflow-x: auto; margin: var(--space-xs) 0 0; }
</style>
</head>
<body>
<main class="library">
<header style="margin-bottom: var(--space-3xl);">
<span class="t-eyebrow">COMPONENT LIBRARY · v1</span>
<h1 class="t-display-lg" style="margin: var(--space-sm) 0 var(--space-xs);"><Brand Name></h1>
<p class="t-body-lg" style="color: var(--color-ink-soft); margin: 0;">Reusable atoms for platform artifacts. Every component is composed from tokens.css — no magic numbers.</p>
</header>
<!-- Sections below: one per component category -->
</main>
</body>
</html>4. Component inventory (build each as a `.lib-section`)
Order matters — group by atomic level (smallest first).
a. Eyebrows
Mono uppercase tracked label. Variations: with hairline beside, with index number ("01 / "), with date prefix.
**Critical:** eyebrows are a tell when overused. They appear by default on a lot of AI-generated layouts and that's exactly the problem. Mark this category in the library as `OPTIONAL — apply only when the artifact genuinely needs category/section anchoring`. Never include the eyebrow in default scaffolds for platform skills; let the platform skill decide whether to invoke it per-artifact.
b. Hairlines
1px full-width rules. Variations: full-width, indented, with center label ("§").
c. Type scale samples
Render each type level from `DESIGN.md` once with the same string ("Build something obvious."). Useful as a quick reference for platform skills.
d. Buttons
- Primary (filled, ink-on-surface or surface-on-ink depending on direction)
- Secondary (outline)
- Tertiary (text-only with arrow suffix)
- Ghost (icon-only square)
Each in 3 sizes (sm, md, lg). Show hover state via `:hover` rules.
e. Badges / tags
Small inline labels. Variations: solid, outline, dot-prefixed, with count ("New · 3").
f. Cards
- Plain card (padding + surface + border)
- Stat card (big number in `display-xl`, label in eyebrow)
- Linked card (entire surface clickable, arrow appears on hover)
g. Code blocks
- Inline `<code>` with subtle background
- Multi-line `<pre>` with optional filename header bar
h. Callouts
- Note (neutral)
- Warning (uses `--color-warning`)
- Success (uses `--color-success`)
Use a thin left rule, NOT a colored background fill (that's a cliché). Icon optional, must be a single character or simple SVG, never an emoji.
i. Hero blocks
- H
Ships withskills-design
Brand-agnostic design system and artifact generators for Claude Code, plus a figure-worth audit and PDF and HTML-to-PNG export utilities. 19 skills total. Install via the slogsdon-claude-code-config marketplace.
Get the whole plugin
Stats
3
Stars
0
Forks
Maintained
Maintenance
HTML
Language
MIT
License
1mo ago
Last commit
4mo ago
Created
Repo: slogsdon/skills-design
Other skills on skills-design.
@slogsdonView SkillSkill
design-business-card
Generate a printable business card — pixel-exact 1050×600 front canvas + 1050×600 back canvas in a single HTML file. Standard 3.5×2 inch card at 300dpi. Front…
@slogsdonView SkillSkill
design-carousel-slide
Generate a LinkedIn / Instagram multi-slide carousel — single HTML file with N square 1080×1080 .canvas divs, each representing one slide. Default N=5 (cover +…
@slogsdonView SkillSkill
design-instagram-post
Generate an Instagram post artifact — pixel-exact HTML canvas at 1080×1350 (portrait, default — Instagram's max-real-estate format) with opt-in 1080×1080…
@slogsdonView SkillSkill
design-landing-page
Generate a deliverable landing-page HTML file (NOT a screenshot artifact). 1440px design width, mobile-responsive (CSS-only, no JS). Sections: hero…
@slogsdonView SkillSkill
design-link-in-bio
Generate a minimal single-column standalone HTML page — mobile-first at 375px width — for use as a link-in-bio destination. Contains: name/wordmark, short…
@slogsdonView Skill