Workflows

New Website Workflow SOP

This Standard Operating Procedure (SOP) defines the high-end development standards for Gnomad Studio. It ensures that every website draft is transformed into a premium, high-performance, and mobile-optimized production a

  • davidcole-swarm
  • workflows
Raw markdown Manifest JSON ← Agent Kit

New Website Workflow SOP

This Standard Operating Procedure (SOP) defines the high-end development standards for Gnomad Studio. It ensures that every website draft is transformed into a premium, high-performance, and mobile-optimized production application.

1. Foundation & Technical Architecture

  • Centralized Config (data.ts): Always extract hardcoded text, contacts, and meta-data into a central src/data.ts.
  • The Favicon Requirement: Initialize a unique, high-quality favicon at the start of every project.
  • 🚨 Vite Deployment Pathing (NEO):
    • Set base: './' in vite.config.ts to prevent 404s on Hostinger/demo subdirectories.
    • Use dot-relative paths (e.g., src="./logo.png") for all assets.
  • Pre-Flight Build: Run a local production build (npm run build) and preview it to verify asset paths before every push.

2. Visual Design & Cinematic Interaction

  • Dual-Theme Support: Implement site-wide Light and Dark mode using Tailwind dark: variants.
  • Cinematic Entrance (NIOBE): Use framer-motion for page entrance transitions (fade-in-up) on heroes and primary cards.
  • Interactive Micro-Animations:
    • The “Running Light”: Apply the border-beam animation to the primary header CTA.
    • Motion Priming: Subtle hover scale (1.02) and glow effects on interactive elements.
  • Glassmorphism: Use backdrop-blur-md and semi-transparent borders for internal cards.

3. The “Barracks” Mobile & Accessibility Standard

  • The Unit Principle: Every grid card must be a single clickable UI unit (wrapped in <a> or <Link>).
  • Touch Ergonomics (NIOBE): Ensure all interactive targets are at least 44x44px.
  • The “Bleed Scroller” Pattern:
    • Expand horizontal scrollers beyond the container with -mx-6 px-6.
    • Use snap-x mandatory and snap-start for tactile mobile scrolling.
    • CRITICAL: Include an invisible div spacer at the end of every scroller.
  • Form Ergonomics: Set all inputs to text-base (16px) minimum to prevent iOS automatic zoom-on-focus.

4. Growth, SEO & Conversion (OPTIMUS)

  • Conversion-First Lead Gen: Replace passive contact forms with Multi-Step Wizards (Intake Triage) or Interactive EstimateFlows.
  • Social & OG Ready:
    • Provide a dedicated 1200x630px OG Image for social sharing.
    • Implement specific JSON-LD schemas (LocalBusiness, NGO, or Product).
  • Review Dominance: Inject persistent, floating Google Review widgets directly into the layout.
  • GA4 Insight Strategy: Every website must include Google Analytics 4 (GA4) tags (gtag.js) in the <head> of the entry point file. For Gnomad properties, use G-E1RZ70YGNE; for client sites, create a new property and provide the ID.

5. Compliance & Legal Safeguards (MATLOCK)

  • Access Control: Implement a 21+ Age Verification Gate for all cannabis/dispensary clients.
  • Accessibility Audit: All builds must pass a WCAG 2.1 Level AA scan (ARIA labels, color contrast, keyboard nav).
  • Privacy & Attribution:
    • Include a clear Privacy Policy link in the footer.
    • Add “AI-Assisted, Human-Verified” attribution where applicable for transparency.

6. Automated DevOps (Hostinger)

  • GitHub Actions (deploy.yml): automated CI/CD using --legacy-peer-deps.
  • Vault Security: Never hardcode credentials; always use GitHub Secrets.

[!TIP] This SOP is the Gnomad Studio Gold Standard. No project is considered “Done” until every checkpoint is verified.