velais-markdown-style

active

Formats rendered markdown and prose content with the Velais brand identity. Use when adding blog posts, documentation pages, changelogs, or any long-form markdown content to a Velais website (Astro or Vite+React). Configures the portable `prose-velais` CSS class (.css) and integrates framework-specific layouts for .astro, .tsx, and .mdx files. Do NOT use for general UI layout, component design, or color system setup — use `velais-ui-design` for those tasks.

Owner: velais Category: mcp-enhancement Version: 1.0.0 Tokens: ~4k

cssmarkdownprosetypographyvelaisbrandingastroreact

Quality Score Breakdown

Structure (15%) 18/18

Show checks (11)

✓ SKILL.md exists with exact casing 3/3
✓ Valid YAML frontmatter 3/3
✓ No unexpected frontmatter keys 1/1
✓ Name field valid (kebab-case) 2/2
✓ Name matches folder name 1/1
✓ Description field present 2/2
✓ No angle brackets in frontmatter 1/1
✓ Folder name is kebab-case 1/1
✓ No README.md inside skill folder 1/1
✓ Test directory with test-cases.yml exists 2/2
✓ Status field not set (defaults to active) 1/1

Description (20%) 22/22

Show checks (7)

✓ Contains action verbs: configures, formats, integrates 4/4
✓ Contains trigger indicators: use when, use for 5/5
✓ Description is specific and actionable 4/4
✓ File types mentioned in description 3/3
✓ Description length: 462/1024 chars 2/2
✓ Has negative triggers (scope boundaries) 2/2
✓ Owner/author specified in metadata 2/2

Instructions (25%) 28/28

Show checks (8)

✓ Skill body has content 3/3
✓ Has step/section structure 4/4
✓ Includes examples 5/5
✓ Includes error handling 4/4
✓ Uses progressive disclosure (references/scripts) 4/4
✓ Actionable language: 3/10 verb patterns found 3/3
✓ Word count: 792/5000 2/2
✓ All referenced paths exist 3/3

Test Coverage (25%) 29/29

Show checks (10)

✓ test-cases.yml exists and parses 3/3
✓ 8 should-trigger tests ✓ 4/4
✓ 4 should-not-trigger tests ✓ 3/3
✓ 7 functional tests ✓ 5/5
✓ 2 negative tests ✓ 3/3
✓ 3 edge case tests ✓ 3/3
✓ Performance baseline documented 2/2
✓ All functional tests have ≥2 assertions 2/2
✓ All trigger phrases are diverse 2/2
✓ All assertions are specific 2/2

Security (15%) 14/15

Show checks (5)

✓ No secrets detected 5/5
✓ No injection vectors in frontmatter 3/3
✓ Name is not reserved 3/3
✓ No suspicious code patterns 2/2
✗ 4 external URLs found — verify they're necessary: https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600;700&displ, https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600;700&displ, https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600;700&displ 1/2

Test Coverage

Should Trigger

Should Not Trigger

Functional

Negative

Edge Cases

LLM Evals

Velais Markdown Style Skill

Portable prose styling for all Velais websites. Apply the prose-velais CSS class to any container wrapping rendered markdown to get consistent Velais-branded typography, colors, and spacing.

Quick Reference

Task	Reference File
Astro integration (content collections, MDX layouts)	`references/astro.md`
Vite+React integration (react-markdown, dangerouslySetInnerHTML)	`references/vite-react.md`
Portable CSS asset (copy into any project)	`assets/prose-velais.css`

Complementary Skills

Skill	When to also invoke
`velais-ui-design`	Setting up color tokens, fonts, Tailwind theme, or shadcn/ui
`velais-brand-guidelines`	Brand voice, logo usage, or marketing materials

Integration Steps

Copy the CSS — Copy assets/prose-velais.css into your project’s styles directory.
Define custom properties — Ensure all required var(--color-*) and var(--radius-*) tokens are defined in your global CSS. See the table below for defaults.
Import the CSS — Import it in your layout or entry point (framework-specific — see reference files).
Apply the class — Wrap rendered markdown output in a container with class="prose-velais".

Required CSS Custom Properties

Define these in your global CSS (e.g., in a @theme block for Tailwind 4, or :root for plain CSS). Dark-theme defaults shown:

Token	Default (dark)	Used for
`--color-text-primary`	`#fbfaf4`	Body text, headings, bold
`--color-text-secondary`	`#aecceb`	Blockquote text, table headers
`--color-text-tertiary`	`#627ebf`	Strikethrough, figcaption
`--color-text-accent`	`#dbe5f5`	Inline code text, link hover
`--color-interactive`	`#2a5ca1`	Link color
`--color-bg-card`	`#1a1d2b`	Code backgrounds, table header bg
`--color-border-subtle`	`#1f3968`	Borders (hr, pre, table, h2)
`--color-energetic-blue`	`#2a5ca1`	Blockquote border, checkbox accent
`--color-midnight-blue`	`#0b1b3e`	Light-theme code text
`--radius-sm`	`4px`	Inline code border-radius
`--radius-md`	`8px`	Pre block / image border-radius

If you already use velais-ui-design to set up your project, all tokens are already defined.

Theme Support

The stylesheet supports dark (default) and light themes via the [data-theme="light"] attribute:

Dark (default): Headings use --color-text-primary; code uses inherited colors.
Light: Set data-theme="light" on <html>. Headings switch to --color-energetic-blue; code blocks use --color-midnight-blue.

Toggle by setting/removing the attribute on <html>:

document.documentElement.setAttribute("data-theme", "light");

Element Formatting Rules

Element	Key styles
h1	`2em`, top/bottom margin
h2	`1.5em`, bottom border (`border-subtle`), `0.3em` padding-bottom
h3	`1.25em`
h4–h6	Inherit heading styles
p	`0.75em` vertical margin
a	`interactive` color, underline, `2px` offset; hover → `text-accent`
strong	`text-primary`, weight `600`
code (inline)	`bg-card` bg, `text-accent` color, `0.875em`, system monospace
pre	`bg-card` bg, `border-subtle` border, `radius-md`, `1em` padding
pre code	Transparent bg, no padding
blockquote	`3px` left border (`energetic-blue`), `text-secondary` color
ul	`disc`, `1.5em` padding-left
ol	`decimal`, `1.5em` padding-left
li	`0.25em` vertical margin
checkbox	`energetic-blue` accent
hr	`1px` top border (`border-subtle`), `1.5em` margin
table	Full width, fixed layout, collapsed borders, `0.875em`
th	`bg-card` bg, `text-secondary` color, `600` weight
td	`0.5em 0.75em` padding, `border-subtle` border
del	`text-tertiary` color
img	`100%` width, block, `radius-md`
figure	`100%` width, `1em` vertical margin
figcaption	Centered, `0.875em`, `text-tertiary`, italic

Font Requirements

The prose-velais class itself does not set font-family — it inherits from the page. Ensure:

Headings — Set font-family: "Onsite Extended", sans-serif on h1–h6 globally. Font files are provided by the velais-ui-design skill.
Body text — Set font-family: "Host Grotesk", sans-serif on body. Load via Google Fonts: @import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600;700&display=swap").
Code — Uses system monospace stack: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace.

Troubleshooting

Problem	Check	Fix
Headings/text appear unstyled	Missing CSS custom properties	Ensure all 11 `--color-` and `--radius-` tokens are defined in `:root` or `@theme`
Styles not applied at all	Missing class or import	Verify `prose-velais.css` is imported and the container has `class="prose-velais"`
Light theme not working	Missing `data-theme` attribute	Set `data-theme="light"` on the `<html>` element
Fonts not rendering	Font files not loaded	Ensure Host Grotesk (Google Fonts) and Onsite Extended (`velais-ui-design` assets) are loaded
Styles conflict with Tailwind prose	Duplicate prose plugin	Remove `@tailwindcss/typography` — `prose-velais` replaces it

Framework Integration

See the reference files for step-by-step integration:

Astro — references/astro.md
Vite+React — references/vite-react.md