Siteasy

Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. Accessible to beginners, powerful enough for experts.

Good taste is trained, not innate — the ability to see beyond the obvious and recognize what elevates. Unseen details compound: when a feature works exactly as assumed, users proceed without a second thought. That is the goal.

Setup (non-optional)

> Several commands (audit, craft, quality passes) call the impeccable CLI via npx. Tested with impeccable 2.3.2; pin with npx impeccable@2.3.2 to avoid upstream drift.

Before any design work or file edits, pass these gates. Skipping them produces generic output that ignores the project.

| Gate | Required check | If fail | |---|---|---| | Context | PRODUCT.md and DESIGN.md are read from the workspace. | Use Read to look for PRODUCT.md; if missing, run /siteasy setup first. | | Product | PRODUCT.md exists and is not empty or placeholder ([TODO] markers, 1px as a colored accent on cards, list items, callouts.

• Gradient text. background-clip: text on anything other than display-only hero type.
• Glassmorphism as default. Blurs and glass cards used decoratively.
• The hero-metric template. Big number, small label, supporting stats, gradient accent.
• Identical card grids. Same-sized cards with icon + heading + text, repeated endlessly.
• Centered hero, centered text, dark image. Use an asymmetric split instead.
• Modal as first thought. Exhaust inline / progressive alternatives first.
• Inter on brand surfaces (and other training-data defaults like Outfit and DM Sans; see references/brand.md). Use Geist, Cabinet Grotesk, or Satoshi. Product UI may use system stacks (see references/product.md).
• Serif fonts in software UIs or dashboards.
• AI Purple/Blue gradient aesthetic. Use neutral bases (Zinc/Slate) with singular, concrete accents.
• Pure black (#000) for large areas. Use off-black with a hint of hue (chroma 0.005+).
• transition: all. Always specify exact properties.
• ease-in on UI animations. Use ease-out or a custom curve.
• Durations > 300ms on UI feedback.
• Generic placeholder content. "John Doe", "Acme Corp", "99.99%". Use realistic names, organic numbers (47.2%), and picsum.photos/seed/{word}/width/height.
• Emojis in the website you build (code, markup, or UI copy). Replace with proper icons (Radix, Phosphor) or SVG primitives. (Status markers like PASS/WARN/FAIL in audit reports are exempt.)

Copy

• Every word earns its place. No restated headings, no intros that repeat the title.
• No em dashes. Use commas, colons, semicolons, or parentheses.

Commands

| Command | Category | Description | Reference | |---|---|---|---| | build [feature] | Build | Shape, then build a feature end-to-end | [references/craft.md](references/craft.md) + [references/css-architecture.md](references/css-architecture.md) + [references/component-patterns.md](references/component-patterns.md) | | plan [feature] | Build | Plan UX/UI before writing code | [references/shape.md](references/shape.md) + [references/landing-patterns.md](references/landing-patterns.md) | | setup | Build | Create PRODUCT.md and DESIGN.md context | [references/teach.md](references/teach.md) | | research [scope] | Build | UX research planning, methods selection, persona and journey synthesis | [references/ux-research.md](references/ux-research.md) + [references/personas.md](references/personas.md) + [references/journey-mapping.md](references/journey-mapping.md) | | ia [target] | Build | Information architecture, card sorting, tree testing, navigation patterns | [references/information-architecture.md](references/information-architecture.md) | | journey [persona] | Build | Generate empathy maps, journey maps, or service blueprints from research | [references/journey-mapping.md](references/journey-mapping.md) | | document | Build | Generate DESIGN.md from existing project code | [references/document.md](references/document.md) | | extract [target] | Build | Pull reusable tokens and components into a design system | [references/extract.md](references/extract.md) | | handoff [target] | Build | Developer handoff spec: layout, tokens, props, states, breakpoints, edge cases, motion, accessibility | [references/handoff.md](references/handoff.md) | | tokens [project] | Build | Audit or create a two-layer CSS token system — primitives + semantic layer + dark mode | [references/tokens.md](references/tokens.md) + [references/color-systems.md](references/color-systems.md) + [references/elevation.md](references/elevation.md) | | critique [target] | Evaluate | UX design review with heuristic scoring | [references/critique.md](references/critique.md) | | audit [target] | Evaluate | Technical quality checks (a11y, perf, responsive, WCAG 2.2, image strategy, forms) | [references/audit.md](references/audit.md) + [references/accessibility-engineering.md](references/accessibility-engineering.md) + [references/wcag-2-2.md](references/wcag-2-2.md) + [references/image-strategy.md](references/image-strategy.md) + [references/form-patterns.md](references/form-patterns.md) | | polish [target] | Refine | Final quality pass before shipping | [references/polish.md](references/polish.md) | | amplify [target] | Refine | Amplify safe or bland designs — bolder typography, stronger color, more presence | [references/bolder.md](references/bolder.md) + [references/colorize.md](references/colorize.md) + [references/style-systems.md](references/style-systems.md) | | simplify [target] | Refine | Reduce visual noise, tone down, strip to essence | [references/quieter.md](references/quieter.md) + [references/distill.md](references/distill.md) | | clarify [target] | Refine | UX copy, error messages, button labels, empty states | [references/clarify.md](references/clarify.md) | | launch [target] | Refine | Production hardening + performance — errors, i18n, edge cases, Core Web Vitals | [references/harden.md](references/harden.md) + [references/optimize.md](references/optimize.md) + [references/ship-checklist.md](references/ship-checklist.md) | | onboard [target] | Refine | First-run flows, empty states, feature discovery, activation | [references/onboard.md](references/onboard.md) | | animate [target] | Enhance | Add purposeful animations and motion | [references/animate.md](references/animate.md) + [references/animation-engineering.md](references/animation-engineering.md) | | typeset [target] | Enhance | Typography audit, font selection, hierarchy | [references/typeset.md](references/typeset.md) + [references/typography.md](references/typography.md) | | layout [target] | Enhance | Spacing systems, visual rhythm, grid tools | [references/layout.md](references/layout.md) | | charts [target] | Enhance | Accessible data visualization: chart-type choice, a11y grades, non-color fallbacks | [references/data-viz.md](references/data-viz.md) | | adapt [target] | Enhance | Mobile/tablet/desktop/print adaptation | [references/adapt.md](references/adapt.md) + [references/responsive-design.md](references/responsive-design.md) | | mobile [target] | Enhance | Phone-specific ergonomics — thumb zone, touch targets, mobile navigation, virtual keyboards, mobile audit | [references/mobile-ergonomics.md](references/mobile-ergonomics.md) | | delight [target] | Enhance | Micro-interactions, personality in copy, satisfying feedback | [references/delight.md](references/delight.md) + [references/creative-patterns.md](references/creative-patterns.md) | | overdrive [target] | Advanced | View Transitions API, WebGL, scroll-driven animations | [references/overdrive.md](references/overdrive.md) + [references/creative-patterns.md](references/creative-patterns.md) + [references/inspiration.md](references/inspiration.md) | | parallax [target] | Advanced | Multi-layer depth, scrollytelling, AI-adaptive motion governance, WCAG 2.2.2 compliance | [references/parallax.md](references/parallax.md) | | live [target] | Advanced | Interactive variant mode (requires running dev server) | [references/live.md](references/live.md) |

Running commands

When the user invokes a command:

1. Load the matching reference file(s) listed in the table above using the Read tool
2. Follow the instructions in that reference
3. Apply the shared design laws above throughout

If no command is specified, treat the request as build for new work, or critique for existing work.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: MariusYvard
• Source: MariusYvard/NullToHero
• License: Apache-2.0
• Homepage: https://lecvdemarius.netlify.app/

Install and usage instructions live in the source repository linked above.