great_cto's own committed aesthetic — the instrument panel. Dark five-step surface ladder, exactly one accent, two faces divided by MEANING (Geist speaks, Geist Mono is machine-truth), tabular numerals, and a dash that is not a nought. Twelve checkable rules measured from packages/board and greatcto.systems, not designed for this file. Use when building or extending any great_cto surface — the board, the site, a report, a share page.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
A committed aesthetic in the sense of
skills/committed-aesthetic/SKILL.md: every
rule below is checkable, and every value was read out of the source —
packages/board/public/index.html and great_cto-site/styles.css — rather than
chosen to write this document.
The subject is an instrument, not a brochure. One person reads it to decide what a machine may do next. Everything below follows from that.
The first version of this file opened "this is ours, not a default". Measured against a real corpus on 2026-09-01, that is false, and the correction matters more than anything below it.
Refero's top ten styles for a dark technical developer landing describe: near-black canvas (Depot, Warp, Supabase, Trunk, Checkly, Cron, Linear, Eraser), depth from surface shifts or borders rather than shadows (Warp, Supabase, Trunk, Linear), and one green accent used sparingly (Depot, Warp, Supabase, Trunk). Four of them are described with the words "instrument panel", "command center" or "cockpit".
Every one of those is a rule below. This aesthetic is not great_cto's identity — it is what every infrastructure product looks like, and this file codified the modal choice and labelled it a differentiator. A skill that does that produces template work while asserting it does not.
What follows is still correct, and its correctness is functional, not distinctive. Dark, dense, one accent, tabular numerals and a dash that is not a nought are right for a surface one operator reads all day to decide what a machine may do next. Keep them for the BOARD. Just do not mistake them for a voice.
Where the category default costs something is the LANDING, where a visitor who has
seen Depot, Warp and Supabase cannot tell us apart. Differentiation there is a
brand decision made through committed-aesthetic, not a repaint of this file. And
for a client product — a dental practice does not want an instrument panel — go
through committed-aesthetic and choose deliberately.
1. Five surface steps, each about 5% apart, and depth is always a step.
--bg-page #0a0e0c → --bg-card #11161a → --bg-muted #161c1f →
--bg-elevated #1a2025 → --bg-strong #1e272c. A raised element takes the next
step up. It does not take a shadow.
2. Exactly one accent, and it is mostly not a fill.
--accent #00d97e appears as a 1px border, a 3px rail on the active nav item, and
a 6% glow. It fills only a badge count and a swatch. Two accents is a different
design; adding one is a decision, not a tweak.
3. One shadow in the system carries colour. Card hover:
0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,217,126,.06) — the accent at 6%.
Everywhere else depth is rule 1.
4. Two faces, divided by MEANING rather than by taste. Geist is the voice the surface speaks in — headings, navigation, controls, prose. Geist Mono is machine truth: anything a person would select and paste. Ids, agent slugs, paths, money, versions, timestamps, verdict tokens, commands. The test is one question: would someone copy this? Measured: 115 mono uses against 9 display. A task title is Geist and its id beside it is Geist Mono — the two faces on one row are the point, not an inconsistency.
5. Numerals are tabular, always. font-variant-numeric: tabular-nums at
letter-spacing: -0.02em. A figure that changes width as it changes value reads as
motion the operator did not cause.
6. A dash is not a nought. Unmeasured renders as — in a lighter weight and
--text3; a measured zero renders as 0 in the numeral treatment. Every count on
every surface carries a third state, and it must be visibly different from zero.
This is the house rule the whole product rests on; it is a typographic rule here.
7. Twelve type tokens, never a raw size. 11 · 12 · 13 · 14 · 15 · 16 · 19 · 22,
plus numerics 24 · 30 · 36 · 52, as --fs-*. If a size is not on the scale, either
the scale is wrong or the element is.
8. Tracking moves one way at each end. ≥22px → -0.02em. 11px uppercase →
+0.10em. Nothing in between is tracked.
9. Geist Mono never above weight 500. It is vendored wght 400 500; above the
axis the browser synthesises a smeared bold. Geist runs 400–700; 500 is the
workhorse, 600 is emphasis, 700 exists for badge counts only.
10. Desktop density is deliberate, and does not travel. Controls are 30–32px, chips 20px — below the 44px touch floor on purpose, because this is a pointer surface for one operator. A mobile or client surface must not inherit these numbers; it takes rules 1–9 and its own sizes.
11. One hue per meaning, and colour never carries meaning alone. Every status colour is paired with a glyph or a word. A ▲/▼/— goes with the green/red/grey, so the row survives a reader who cannot distinguish them.
12. Latin subset, self-hosted, 52 KB. Two variable faces, font-display: swap,
no CDN. Cyrillic and anything outside latin falls to the system stack mid-line —
a known look, decided for the byte count, not a bug to re-discover.
| Do not take | Why | Instead |
|---|---|---|
| The 30–32px control heights, to anything touched by a finger | rule 10 — this is a pointer surface for one operator | 44px minimum, keep rules 1–9 |
clamp() fluid type from the site, to the board | a marketing page is read at every width; an instrument at one | fixed steps from rule 7 |
| The dark ladder, to a client product | rule 0 — it is our identity | choose through committed-aesthetic |
--max: 1100px, to board screens | the board's content is rows and cards, not paragraphs | only the Docs reader caps measure, at 72ch |
Rendered, with every measurement on the artboard, in the published board spec —
foundations, components, shell, screens, typography and the open findings. Working
sources in .design-spec/. Read the gallery before adding a component; it is
faster than deriving one from the rules and it is what the rules were written from.
This aesthetic is measured, which means it is also measured to be imperfect.
docs/reference/ and the spec's findings artboard carry the open list — spacing
and radius are not tokenised (11 raw gap values, 11 raw radii), the site carries
46 distinct font sizes against rule 7, and the light theme has three values under
the AA floor. A rule this file states and the source violates is a finding, not a
licence to violate it further.
Related: skills/committed-aesthetic/SKILL.md
for the form · skills/ui-ux-pro-max/SKILL.md for the
catalogue you consult when this does not apply.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Catalogue of known SDLC anti-patterns that great_cto agents must actively reject when reviewing architecture, plans, code, or post-mortems. Used by architect (pre-impl), pm (planning), senior-dev (impl), l3-support (post-incident).
日本語の概要は準備中です。原文の説明を表示しています。
Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.
日本語の概要は準備中です。原文の説明を表示しています。
Shared review framework that every domain reviewer (pci, oracle, gov, edtech, healthcare, mlops, etc.) MUST follow. Defines the output artifact (TM-{slug}.md), mandatory sections, severity scale, verdict format, the workflow scaffold (when-invoked, Step-0 read-inputs, HANDOFF), and the "domain heuristic vs generic check" boundary. Eliminates duplication across the ~30 reviewer prompts.
日本語の概要は準備中です。原文の説明を表示しています。
Structured idea generation + multi-LLM debate for the product-owner stage. Diverge (generate genuinely different bets), debate (a 4-persona panel on 4 models argues over 2 rounds), converge (synthesize a recommendation). Used by product-owner before architect; available to architect for design-space exploration.
日本語の概要は準備中です。原文の説明を表示しています。
Run the great_cto controlled Codex lifecycle with controller-owned writes, verifier evidence, human gates and optional artifact release.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。