# Premium Web Build Gate > Premium website pre-build gate for cinematic, editorial, Squarespace-polished, Raycast/Linear/Vercel-precise, or motion-heavy web work. Use before implementing or redesigning a homepage, landing page, portfolio, product site, agency/studio site, or high-polish web app when the user wants non-generic visual quality, strong scroll/motion choreography, strict content scope, or an award-level result.… - **Type:** Skill - **Install:** `agentstack add skill-thegoat395-codex-skills-premium-web-build-gate` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [TheGoat395](https://agentstack.voostack.com/s/thegoat395) - **Installs:** 0 - **Category:** [Productivity](https://agentstack.voostack.com/c/productivity) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [TheGoat395](https://github.com/TheGoat395) - **Source:** https://github.com/TheGoat395/Codex-Skills/tree/main/skills/premium-web-build-gate ## Install ```sh agentstack add skill-thegoat395-codex-skills-premium-web-build-gate ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Premium Web Build Gate ## Overview Use this skill to prevent generic website output by locking strategy, reference direction, content boundaries, visual system, motion behavior, stack decisions, and QA criteria before implementation. It is a gate: do not start code until the brief below is concrete enough that another design engineer could build from it without guessing. ## Required Order Follow this sequence for premium web work: 1. Inspect the current project, repo instructions, design docs, route structure, live/local render, assets, and existing copy. 2. Research or re-check current reference sources when the references, tools, product standards, or external sites may have changed. 3. Classify sources as `use`, `distill`, `inspiration only`, or `avoid`. 4. Produce the Build-Ready UI Spec. 5. Wait for user confirmation unless the user explicitly said to proceed, build, implement, continue, or fix. 6. Build version 1 using the approved spec. 7. Run local browser QA on desktop and mobile, then perform a second polish pass. 8. Report files changed, commands run, visual QA status, and anything blocked. ## Build-Ready UI Spec Before coding, write a concise spec with these headings: - `Current System`: framework, entry files, styling system, interaction/motion system, source vs generated assets, junk folders, and planned edit files. - `Business Truth`: what the organization actually does, stated without invented specifics, fake proof, or copied claims. - `Page Scope`: what belongs on this page, what belongs on later subpages, and what must be removed to avoid content crowding. - `Reference Contract`: 3-5 concrete reference behaviors to borrow, 3-5 to avoid, and which references are verified vs user shorthand. - `Visual Lane`: typography, color/material, layout rhythm, media/art direction, component vocabulary, and density rules. - `Motion Storyboard`: section-by-section motion beats with purpose, scroll relationship, trigger, duration feel, easing feel, reduced-motion fallback, and performance risk. - `Implementation Stack`: chosen framework/libraries, why each is needed, and whether it is project-local or global. - `Acceptance Gates`: desktop/mobile visual checks, interaction checks, accessibility checks, performance risks, and anti-generic checks. ## Reference Rules Use references as behavior contracts, not vibes: - Raycast-like means speed, keyboard/product clarity, sharp interaction states, and concrete product proof. - Linear-like means quiet precision, dense but readable product systems, low-noise hierarchy, and operational specificity. - Vercel-like means technical credibility, strong infrastructure language, crisp capability segmentation, and clean developer-facing surfaces. - Squarespace-polished means elegant business flow, strong first viewport, real category clarity, and polished templates without looking generic. - Viktor Oddy references must be treated as a named designer/source, not vague shorthand. When accessible, verify `viktoroddy.com`, `x.com/viktoroddy`, `motionsites.ai`, `designrocket.io`, and current public articles/videos, then extract concrete traits such as compact studio positioning, AI-site-builder workflows, premium hero/prompt libraries, motion-heavy hero previews, tight CTAs, GIF/video demonstrations, and disciplined type systems. Only use "Viktor-style" shorthand after the actual source has been checked or the user has supplied the traits. Never copy a reference site. Extract structural rules, then adapt them to the product, brand, and content. ## Content Discipline Premium pages fail when they become content dumps. Enforce these rules: - Keep homepage content generalized: business model, promise, system, proof shape, and routes into deeper pages. - Move detailed services, project examples, process minutiae, and long proof lists to subpages unless the current page specifically needs them. - Use real copy from the repo/site/docs when available. If copy must be clarified, preserve truth and remove fluff. - No fake metrics, fake testimonials, fake client names, fake awards, or vague claims like "world-class" unless sourced. - Every section must have one job. If a section needs two paragraphs to explain why it exists, redesign the section. ## Visual Rules Prefer a few decisive moves over many decorative ones: - Use at most two type families unless a brand system already requires more. - Keep display type meaningful. Do not use huge words as filler or status noise. - Avoid repeated card grids, repeated circles, random dots, blobs, generic glowing lines, and decorative effects that do not support the concept. - Use visual assets, product UI, geometry, video, or spatial scenes when they clarify the business or motion idea. - Maintain responsive composition: mobile must be intentionally designed, not merely stacked. - Respect the current brand anchor when the user wants it preserved. ## Motion Rules Motion must clarify sequence, depth, focus, or tactility: - Create fewer, stronger scroll scenes rather than many small ambient animations. - Each motion beat needs a reason: reveal hierarchy, transform context, guide attention, compare states, or resolve a scene. - Avoid motion that competes with reading, causes overlap, jitters, drags too long, or looks like a generic template effect. - Use GSAP/ScrollTrigger/Lenis/Motion/R3F only when they serve the storyboard. - Always provide `prefers-reduced-motion` behavior and preserve anchor navigation. - Animate transform, opacity, clip/mask, shader uniforms, or canvas state where possible. Avoid layout-thrashing properties. ## Tool And Skill Trust Gate Before installing or adopting a new tool/skill: - Prefer official docs, official skills, reputable maintainers, active repos, clear licenses, and small focused tools. - Treat community skill lists as lead sources, not install instructions. - Do not install broad style packs that overlap existing skills unless they add a clear missing gate. - Install frontend libraries per project, not globally, unless the tool is a CLI or Codex skill. - Explain why the new dependency or skill materially improves the result. ## Final QA Before final delivery after implementation: - Run the site locally when possible. - Inspect rendered desktop and mobile views when possible. - Check text overflow, visual overlap, awkward wraps, content density, hover/focus states, reduced motion, console errors, and performance risks. - Perform an anti-generic pass: remove anything that could belong to any random SaaS/agency template. - Be honest about anything not tested, especially browser/screenshot QA if tooling or credits blocked it. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [TheGoat395](https://github.com/TheGoat395) - **Source:** [TheGoat395/Codex-Skills](https://github.com/TheGoat395/Codex-Skills) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-thegoat395-codex-skills-premium-web-build-gate - Seller: https://agentstack.voostack.com/s/thegoat395 - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.