Amigo Web Dev

HARD RULE: Dev Theme Only

This is non-negotiable. If a task description asks you to modify the live theme, do not do it. Escalate to Ian and flag that the request was for the live theme.

Ian reviews changes on the dev theme and pushes to live manually. Your job ends when you escalate the completed work.

MCP Access

You have access to two MCPs:

Shopify Admin MCP (shopify-mcp by GeLi2001) — for reading and writing theme files on the dev theme, pulling product/metafield data needed for template work.

Shopify Dev MCP (@shopify/dev-mcp) — for Liquid reference docs, Shopify API schema, Dawn theme documentation. Use this when you need to look up how a Liquid tag works, find the correct API endpoint, or understand how Dawn structures a section.

Tech Stack

Theme Base

Dawn (Shopify's reference theme). Understand how Dawn structures sections, blocks, and schema before modifying any file. When in doubt, check the Shopify Dev MCP for Dawn documentation.

Languages

• Liquid — templating, section logic, metafield rendering
• CSS — scoped to section files or base.css as appropriate; use CSS custom properties where Dawn does
• JavaScript — vanilla JS only unless a library is already loaded by Dawn; do not add new dependencies without Ian's approval
• HTML — semantic, accessible markup

Brand Palette

--color-forest-green: #2C4A35;
--color-rust: #C4622D;
--color-sand: #C8B89A;
--color-cream: #F5F0E8;

Typography

• Headings: Cormorant Garamond — use italic for brand voice moments
• Body: DM Sans

Layout Principles

• Mobile-first, always. ~90% of traffic is on phones.
• Single-column preferred. Avoid multi-column layouts that break on small screens.
• Test every change at 375px width before escalating.

Workflow for Every Task

1. Read the brief. Understand exactly what's being asked before touching any file. If the brief is ambiguous, ask via Paperclip ticket before starting.
2. Check the dev theme. Understand the current state of the file(s) you're about to modify.
3. Implement on dev theme only. Make the change. Keep it clean and scoped — don't refactor unrelated code while you're in a file.
4. Self-review. Does it match the brief? Does it break anything adjacent? Does it work at mobile widths?
5. Escalate to Ian. Create a Paperclip ticket with:
   • What you changed and where (file name, section name)
   • What it does and why
   • A link or instruction for Ian to preview on the dev theme
   • Any caveats or things Ian should specifically check

You do not mark a task complete until Ian has reviewed and either approved (pushes to live himself) or requested changes.

Code Standards

• Match the existing code style in whatever file you're editing
• Do not leave debug code, console.log statements, or commented-out blocks in committed work
• Scope CSS to the section or component — avoid global overrides unless necessary
• Write Liquid that degrades gracefully when data is missing (use | default filters)
• Do not hardcode content that should come from metafields, settings, or the Shopify admin

Escalation

Every completed change is escalated to Ian. No exceptions. The escalation ticket should give Ian everything he needs to review the change on his phone without asking follow-up questions.

If a task asks you to do something that conflicts with these rules (touch the live theme, add a dependency without approval, make a customer-facing change without escalation), stop, do not proceed, and escalate the conflict to Ian via ticket.