What does the Harmonic Composition skill do?

It gives an AI coding agent a practical workflow for choosing a frame, selecting one proportional family, naming tokens and verifying the rendered result.

Which agents can use it?

The skill follows the open Agent Skills format and can be installed in Codex, Claude Code and compatible tools that load a SKILL.md directory.

Does the skill guarantee a beautiful interface?

No. It makes proportion and verification explicit so an agent can make better, inspectable decisions. Human judgment still chooses the content, mood and final direction.

Can I use it commercially?

The published skill is available under the PolyForm Noncommercial License 1.0.0. Commercial use is not granted and requires a separate written permission from the author.

LUCAS 18 · AGENT SKILL

Harmonic composition
for your agent.

Harmonic Composition is a portable Agent Skill for Codex, Claude Code and compatible tools. It gives an agent a measured way to make interfaces coherent before it starts decorating them.

Choose a frame. Choose one governing family. Name the tokens. Render the result. Inspect the proportions. Repeat until the structure earns its visual voice.

Get the skill on GitHub Read the visual guide

Source-available under PolyForm Noncommercial License 1.0.0. Commercial use requires separate written permission.

governing familysnap targets

One measured frameLucas 18 · root / phi / authored

Portable: A folder with a SKILL.md and references.
Verifiable: Ratios become named, inspectable decisions.
Human-led: The agent proposes. The maker decides.

01 · THE WORKFLOW

Give the agent
a measured frame.

The skill turns proportional composition into a sequence an agent can follow and explain. It is deliberately small: a governing ratio, a spatial frame, a token family, then rendered evidence.

Frame: State the canvas, viewport or container before styling the parts.
Family: Choose one coherent relationship: root, phi, thirds, modular or authored.
Tokens: Carry the family into type, spacing, radii, columns and visual weight.
Verification: Render, inspect and correct the result instead of trusting the source alone.

02 · THREE LEVELS

Ratios become
working decisions.

The examples below are authored for this page. They show the kind of evidence the skill asks an agent to produce.

01 / FrameStart with the ratio that governs the field.

02 / FamilyExtend the family into scale and rhythm.

03 / VerifyInspect the rendered composition and name the result.

03 · INSTALL

Put the method
in the agent.

CODEX · PERSONAL

Use it across your local Codex projects.

mkdir -p ~/.codex/skills
git clone --depth 1 \
  https://github.com/panamini/pi-tooling.git /tmp/pi-tooling
cp -R /tmp/pi-tooling/skills/harmonic-composition \
  ~/.codex/skills/

Then ask Codex to use harmonic-composition when building a visual interface.

CLAUDE CODE · PROJECT

Keep it versioned with the repository.

mkdir -p .claude/skills
git clone --depth 1 \
  https://github.com/panamini/pi-tooling.git /tmp/pi-tooling
cp -R /tmp/pi-tooling/skills/harmonic-composition \
  .claude/skills/

Commit the directory when the whole team should share the same design reasoning.

No server, API key or runtime dependency is required. The skill is a readable folder that an Agent Skills-compatible tool loads as instructions.

04 · THE CONTRACT

Structure before
surface.

Step	Agent asks	Evidence
Legibility first	What must be understood first?	Hierarchy is named before polish.
One family	Which relationship governs the field?	Ratio and frame are explicit.
Tokens	Where does the rhythm repeat?	Spacing and type share a scale.
Rendered check	Does the output still hold?	Screenshot or browser inspection.

License / PolyForm Noncommercial License 1.0.0

Students, personal experiments, research and other noncommercial use are welcome. The published license does not grant commercial use, resale or a commercial service built on the skill. Contact the author for a separate permission.

05 · QUESTIONS

Make the method
easy to find.

What is Harmonic Composition?

A practical workflow for giving an AI coding agent a proportional frame, a governing family, named tokens and a rendered verification loop.

Which tools can load it?

It follows the open Agent Skills directory format. The page documents Codex and Claude Code, and the folder can be adapted to compatible tools that load SKILL.md.

Does it replace design judgment?

No. It makes structural decisions visible so a human can guide, challenge and approve them. It is a thinking aid, not an automatic taste machine.

Can I use it in a commercial product?

Not under the published license. The PolyForm Noncommercial License 1.0.0 allows noncommercial use; commercial use needs separate written permission from the author.

06 · RELATED

Keep following
the relationships.

Give your agent
a better frame.

Install the skill, keep the ratios visible and let the final decision stay human.

Open the GitHub skill

Harmonic compositionfor your agent.

Give the agenta measured frame.

Ratios becomeworking decisions.

Put the methodin the agent.