--- title: Beautify Site --- # Beautify Site ## What it is **What it is.** A bundled skill that takes a page or app screen that looks bland, generic, or obviously machine-made, and turns it into something deliberate. It runs four ordered steps — decide the design direction and write it down, fit components to that direction, layer motion, then audit the finished page and strip every AI tell out of it. It ships with Omniscio and installs itself, so there is nothing to set up. ## Where to find it **Where you see it.** Nowhere — and that is deliberate. It has no panel and no button. You ask for what you want in plain language ("make this landing page look expensive", "this page looks AI-generated", "redesign this UI") and the skill triggers itself. ## How it behaves ### Why it exists Left to its own devices an AI reaches for the same handful of moves on every page: a gradient poured into the headline text, a small letterspaced label stapled above every heading, a fake terminal window in the hero with lines typing themselves out. Each one is individually defensible and collectively a fingerprint — show the page to anyone and they will guess how it was made. The skill exists to break that pattern twice over: by committing to one deliberate direction up front instead of assembling good-looking parts, and by auditing the built result against a blocklist of those tells before the work is called done. ### The four steps, and why the order matters 1. **Direction.** Pick one aesthetic, commit to it, and persist it as a `MASTER.md` file in the project. Everything downstream reads that file. 2. **Components.** Choose or build components that fit the recorded direction. 3. **Motion.** Add animation that helps someone understand the page, not animation for its own sake. 4. **Impeccable pass.** Audit the *built artifact* and remove every AI tell by restructuring the element — never by softening it. A banned pattern in a nicer colour is still the banned pattern. The order is the whole point. A component chosen before the direction exists is a guess; a component chosen against `MASTER.md` is a decision. Step 4 comes last because most tells only become visible once the thing actually exists and renders. ### Bold by default The skill designs extravagantly unless you ask it not to. Safe and tasteful is treated as the failure mode, not the goal — it will reach for real technique (canvas backgrounds, scroll-linked motion, pinned sequences, cursor-reactive surfaces, grain, parallax) and commit hard to one idea. It varies the direction every time on purpose. Converging on a recognisable house style across projects is itself a tell. It dials back in exactly two cases: you ask for something minimal or quiet, or the project's own documented design system says so. When a project's rules conflict with going bold, it surfaces the conflict and lets you choose rather than quietly picking restraint. **What it never trades away for boldness:** reduced-motion support, keyboard focus rings, touch-target size, contrast ratios, readability without JavaScript, and no sideways scrolling on a phone. Bold is an aesthetic budget, not an accessibility one. ### What it refuses to ship Two patterns fail the audit outright: - **Gradient text** — a gradient poured into the letters themselves. Emphasis comes from weight, size, or colour instead. - **Side-stripe accents** — a thick coloured bar down the left edge of a card, list item, or callout. The element gets restructured rather than recoloured. Three more are treated with the same weight: - **Labels above headings** — the small letterspaced kicker, the overline, the announcement pill floating over a hero headline. The heading stands on its own. - **Full stops at the end of headings.** Headings are labels, not sentences. - **Fake terminals, code blocks, and IDE mockups** — the window with three coloured dots and monospace lines typing themselves out, plus mock dashboards and mock chat windows. If the product needs showing, the skill invents a visual specific to what it actually does. ### Self-contained The skill can use other tools when they are present — a design-system generator, a component library CLI, a companion audit skill — but every one of them is optional and has a documented fallback. On a machine with nothing else installed it runs all four steps at full strength, because the AI-tell blocklist and its checks live inside the skill itself. ### Cost Nothing until you turn it on. The skill is **off by default** — enable it under **Settings → Features → Enable Beautify Site skill** and it installs at the next launch; turn it off and it is removed again. Once enabled it costs about 170 tokens of overhead per conversation — the size of its description, which loads into every session so the model knows the skill exists. The instructions themselves load only when the skill actually runs. That is an average-sized bundled skill. If you enable it and then never use it, Omniscio's Skill Overhead card will eventually offer to archive it, and archiving sticks across restarts. ## For agents ### Where it lives `.claude/skills/beautify-site/` in the repo. Once you enable it, the bundled-skills installer copies it into `~/.claude/skills/beautify-site/` on your machine at the next launch. Its manifest is `src/shared/integrations/beautify-site.ts`. ## Related Beautify Site is one of the bundled skills you switch on yourself. [use-skills.md](use-skills.md) covers the Skills browser — finding, installing, editing and removing skills, and telling a plugin-bundled one from your own. [skills-bloat-alert.md](skills-bloat-alert.md) is the Skill Overhead alert, the card that notices when your installed skills cost too much always-on context and offers to archive one; [skill-budget-alert.md](skill-budget-alert.md) is its per-engine sibling, which watches how many skills get copied into other AI CLIs and lets you hold some back.