← ClaudeAtlas

landing-sitelisted

The purpose, UX flow, and modern-minimalist design bar for the vigiles.sh landing site (site/). Use whenever designing, editing, adding to, or reviewing any site/ component, hero, section, or marketing copy — read it BEFORE touching site/, and hold every change against it. Not for docs/ or the app itself.
zernie/vigiles · ★ 15 · AI & Automation · score 73
Install: claude install-skill zernie/vigiles
# Landing site — purpose, UX, and design bar The front door is `site/` (Vite + React + Tailwind, dark-only), deployed to **vigiles.sh**. This skill is the standard every change is held to. The recurring failure it exists to stop: **adding elements instead of removing them**, which makes the page feel crowded and template-y ("tilda-like") instead of modern. **The one rule under all the others: when in doubt, REMOVE. Design by subtraction.** If deleting an element loses no meaning, delete it. A change that _adds_ a box, a caption, a second button, or a reassurance line is suspect until proven necessary. ## Purpose (what the site is for) - **TOP GOAL — maximize the % of visitors who actually RUN `npx vigiles audit`.** This is the ONE conversion metric every design decision serves. The CTA must be GREAT (frictionless, obvious, always reachable). If a change doesn't help someone run the command, it's not earning its place. - **Audience:** developers who already live in agentic-coding tools (Claude Code, Codex, Cursor). They are skeptical and skim on a phone. - **The wow** is the **graded report** — show the result, don't explain the mechanism. - **Front-door promise:** "Lighthouse for your agent harness" — a one-command, zero-config, nothing-uploaded grade of your skills/hooks/subagents/references. - **THE DEMO FRAME SERVES FOUR JOBS AT ONCE — design for all four, don't let one crowd out the rest.** (1) INTRO — teach what vigiles is at a glance (the graded report