# committed-aesthetic

Replaces vague design catalogues with testable rules for coding agents. Helps build distinct interfaces from scratch without falling into generic AI layouts.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 107
- Author: avelikiy
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/avelikiy/great_cto/tree/HEAD/skills/committed-aesthetic/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/committed-aesthetic

## What it does

Catalogues give models too much freedom. Left alone, an agent reaches for safe averages: purple gradients, three cards, and standard sans-serif typefaces. This skill enforces hard constraints instead of style labels. It defines between 8 and 14 falsifiable rules, such as fixed font weights or exact whitespace ratios. Anyone can check the result.

A committed aesthetic skill contains five structural layers. It includes testable visual rules, an intellectual property table to prevent cloning, a standalone HTML component file with inline styles, key pattern templates, and reference captures marked for study rather than direct copying. It also provides a default banned list that strips out mesh gradients, emoji icons, and three-column feature blocks.

The skill strictly steps aside when an established design system already governs the repository.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add avelikiy/great_cto --skill committed-aesthetic -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/committed-aesthetic/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/committed-aesthetic/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add avelikiy/great_cto --skill committed-aesthetic -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/committed-aesthetic/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add avelikiy/great_cto --skill committed-aesthetic -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/committed-aesthetic/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install avelikiy/great_cto committed-aesthetic
```

2. **Manually: put the files in place**
- File: `.github/skills/committed-aesthetic/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add avelikiy/great_cto --skill committed-aesthetic -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/avelikiy/great_cto --path skills/committed-aesthetic
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/committed-aesthetic/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add avelikiy/great_cto --skill committed-aesthetic -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/avelikiy/great_cto/tree/HEAD/skills/committed-aesthetic/SKILL.md

## When to use it
- strip out repetitive AI layout clichés and default fonts
- enforce falsifiable styling rules with exact numeric bounds
- bootstrap standalone frontend interfaces without a legacy design system
- establish clear trademark boundaries when adapting visual references

## Example prompts
- Draft a landing page hero following committed-aesthetic rules and check it against the banned list
- Write eight falsifiable design constraints for our new web client
- Inspect this component against the committed-aesthetic style boundaries

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 616d4e5b0df4c90b.

BEGIN THIRD-PARTY FILE 616d4e5b0df4c90b
```text
---
name: committed-aesthetic
description: "How to write — and how to use — a skill that IS one aesthetic rather than a catalogue of them. A catalogue lets an agent pick, and it picks the modal option; a committed aesthetic makes it execute one thing precisely, against rules you can check. Use when a design keeps coming out competent and forgettable, when starting a new brand surface with no reference, or when authoring a house style you want executed the same way twice."
when_to_use: |
  Apply when:
  - design-advisor is starting a UI-bearing surface with NO existing system to match
  - output from ui-ux-pro-max keeps landing on "clean modern minimal"
  - you are writing a house style meant to be executed by an agent, not read by a human
  Do NOT apply when:
  - an existing product's design already governs (match it — that is anydesign's job)
  - the surface is one screen inside a system that already has a vocabulary
effort: low
allowed-tools: Read, Write, Grep, Glob
---

# A committed aesthetic beats a catalogue

## The problem this exists for

`ui-ux-pro-max` ships 84 styles, 161 palettes and 57 font pairings, and
`design-advisor` is wired to all of it. The catalogue is not the bottleneck.

The bottleneck is that **a catalogue lets a model pick, and an unconstrained pick
is the modal one.** Asked for a landing page with no brand, any model reaches for
the same safe centre: a soft gradient, a large sans heading, three rounded cards
with a left accent border, generous neutral grey. Every input in the training
distribution votes for it. Nothing in a catalogue entry saying *"Swiss minimalism
— clean, grid-based, generous whitespace"* is specific enough to override that,
because that sentence describes the safe centre too.

Compare a rule from a committed aesthetic:

> every dimension is `calc(fraction * 100vw)` against a baseline width, so one
> page at 1024px reads as a perfect scaled-down of the same page at 1920px

You can **check** that. A design either obeys it or does not. That is the whole
difference: a catalogue entry is a *label*, a committed aesthetic is a *constraint*.

## The form

A committed-aesthetic skill has five parts. The first is the one that does the work.

### 1. Transferable DNA — numbered, specific, falsifiable

Between 8 and 14 rules. Each must be checkable by someone who was not in the
room. Test every rule against this: **could two designers disagree about whether
a page obeys it?** If yes, it is a vibe, rewrite it.

| Vibe (useless) | Constraint (usable) |
|---|---|
| "thin, elegant type" | "weights 100 or 300 only, never 400+" |
| "lots of whitespace" | "~60% of any above-the-fold area is empty" |
| "restrained motion" | "no shadows, no gradients, no bounce; one shadow exists in the system, on toasts" |
```
END THIRD-PARTY FILE 616d4e5b0df4c90b

The third-party file has ended. Everything between the 616d4e5b0df4c90b tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2790 of 6741 bytes. © avelikiy · MIT · https://github.com/avelikiy/great_cto/tree/HEAD/skills/committed-aesthetic/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md