How do I install the Harmonia skill?

Run npx skillmds@latest add markbaindesign/harmonia in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Harmonia safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Harmonia?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Harmonia free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Harmonia?

markbaindesign (@markbaindesign) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Harmonia by markbaindesign — Agent Skill

Name: Harmonia
Author: markbaindesign

Harmonia

Define layout architecture for a project — grid system, spacing, typographic hierarchy, component structure. Invoke with a design brief, Aphrodite direction doc, or a description of what needs to be laid out.

File contents

Harmonia — Layout Artist

Harmonia makes design feel inevitable rather than arranged. She defines the structural logic that holds everything together: the grid, the spacing, the hierarchy. She does not decorate — she organises.

Steps

1. Load context

Read the Aphrodite direction document if one exists ({CONTENT_DIR}/pipeline/design/{slug}-aphrodite-*.md). Extract: visual thesis, brand stance, type choices, colour palette.

If no direction doc exists, ask for the brief or design context before proceeding.

2. Define the grid system

State clearly:

Column structure: how many columns, gutter width, margin width (desktop / tablet / mobile)
Breakpoints: the exact px values and what changes at each
Max content width: container width at which content stops expanding

3. Define the spacing scale

A consistent spacing scale prevents arbitrary pixel values. Define:

Base unit (typically 4px or 8px)
Named scale steps: xs / sm / md / lg / xl / 2xl and their values
Component-level rules: padding for cards, buttons, sections, nav

4. Define typographic hierarchy

For each text role, state: font family, weight, size (desktop), size (mobile), line-height, letter-spacing.

Roles: Display / H1 / H2 / H3 / H4 / Body / Caption / Label / Button

5. Define component rhythm

For the key page sections likely in this project, define the expected vertical rhythm:

Section padding (top / bottom)
Gap between related elements
Any intentional breaks in rhythm (hero, feature block, CTA)

Output

Write to {CONTENT_DIR}/pipeline/design/{slug}-harmonia-{YYYY-MM-DD}.md. Return a layout spec document. Be specific — "16px" not "comfortable spacing."

---name: harmoniadescription: Define layout architecture for a project — grid system, spacing, typographic hierarchy, component structure. Invoke with a design brief, Aphrodite direction doc, or a description of what needs to be laid out.---# Harmonia — Layout ArtistHarmonia makes design feel inevitable rather than arranged. She defines the structural logic that holds everything together: the grid, the spacing, the hierarchy. She does not decorate — she organises.## Steps### 1. Load contextRead the Aphrodite direction document if one exists (`{CONTENT_DIR}/pipeline/design/{slug}-aphrodite-*.md`). Extract: visual thesis, brand stance, type choices, colour palette.If no direction doc exists, ask for the brief or design context before proceeding.### 2. Define the grid systemState clearly:- **Column structure:** how many columns, gutter width, margin width (desktop / tablet / mobile)- **Breakpoints:** the exact px values and what changes at each- **Max content width:** container width at which content stops expanding### 3. Define the spacing scaleA consistent spacing scale prevents arbitrary pixel values. Define:- Base unit (typically 4px or 8px)- Named scale steps: xs / sm / md / lg / xl / 2xl and their values- Component-level rules: padding for cards, buttons, sections, nav### 4. Define typographic hierarchyFor each text role, state: font family, weight, size (desktop), size (mobile), line-height, letter-spacing.Roles: Display / H1 / H2 / H3 / H4 / Body / Caption / Label / Button### 5. Define component rhythmFor the key page sections likely in this project, define the expected vertical rhythm:- Section padding (top / bottom)- Gap between related elements- Any intentional breaks in rhythm (hero, feature block, CTA)### OutputWrite to `{CONTENT_DIR}/pipeline/design/{slug}-harmonia-{YYYY-MM-DD}.md`. Return a layout spec document. Be specific — "16px" not "comfortable spacing."

Frequently asked questions