karimmtarek

Shopify Theme Development — Claude Code Guidelines

This file provides frontend best practices and conventions for Claude Code when working on any Shopify theme project. Follow these guidelines unless the project's README or a team member explicitly overrides them.

---

Project Structure

• Follow the standard Shopify theme directory structure: assets/, config/, layout/, sections/, snippets/, templates/, locales/.
• Never create directories outside this structure without explicit justification.

karimmtarek

// JavaScript
let hidePage = () => {
  let payload = {
      object_type: 'page',
      object_id: 123,
      namespace: 'seo',
      key: 'hidden',
      value: 1,
      value_type: 'number_integer'
  };

karimmtarek

// app/javascript/shopify_app/shopify_app.js
import { getSessionToken } from "@shopify/app-bridge-utils";
import $ from "jquery";

const SESSION_TOKEN_REFRESH_INTERVAL = 2000; // Request a new token every 2s

async function retrieveToken(app) {
  window.sessionToken = await getSessionToken(app);
}

karimmtarek

Setup for Cuba in a sample app

I recently read up quite some articles on microframworks and I liked the idea to try out Cuba instead of the regular Sinatra for a change. Here is what I ended up with.

First of all my Gemfile:

source "https://rubygems.org"
ruby "2.0.0"

karimmtarek

Since I did not want to constantly re-invent the wheel I will write down my choices for putting together my Cuba template.

1. Choose your favorite version of ruby and install it using rbenv (I happened to use MRI 2.2.3 at this point).
2. create your template directory and CD into it.
3. fix your ruby version using rbenv local 2.2.3 or somesuch
4. create a github repository and follow the instructions for the README.md and the first commit.
5. get a Gemfile from a running project and edit away the stuff I considered project specific
6. run bundle install, takes a while, but looks nice, remember to add Gemfile.lock to git too
7. create routes and config directories, want to put stuff in there
8. create an initial Cuba route in routes/default.rb

karimmtarek

#Goal Deploy your Rails App super easily with Dokku on Digital Ocean cheap cheap!

##Notes

• Follow 12 factor design (include the rails_12factor gem)
• Don't forget your Procfile with the command to start up your application server
• I prefer using external hosted logging services like Logentries (not in this guide)
• Set up performance monitoring AppSignal or New Relic (not in this guide)

karimmtarek

# Ways to execute a shell script in Ruby
# Example Script - Joseph Pecoraro

cmd = "echo 'hi'" # Sample string that can be used

# 1. Kernel#` - commonly called backticks - `cmd` 
# This is like many other languages, including bash, PHP, and Perl
#  Returns the result of the shell command
#  Docs: http://ruby-doc.org/core/classes/Kernel.html#M001111

karimmtarek

• Dynamic Dispatch
• Dynamic Method
• Ghost Methods
• Dynamic Proxies
• Blank Slate
• Kernel Method
• Flattening the Scope (aka Nested Lexical Scopes)
• Context Probe
• Class Eval (not really a 'spell' more just a demonstration of its usage)
• Class Macros

karimmtarek

# First install tmux
brew install tmux

# For mouse support (for switching panes and windows)
# Only needed if you are using Terminal.app (iTerm has mouse support)
Install http://www.culater.net/software/SIMBL/SIMBL.php
Then install https://bitheap.org/mouseterm/

# More on mouse support http://floriancrouzat.net/2010/07/run-tmux-with-mouse-support-in-mac-os-x-terminal-app/

karimmtarek

set nocompatible              " be iMproved, required
filetype off                  " required
 
" set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" alternatively, pass a path where Vundle should install plugins
"call vundle#begin('~/some/path/here')
  
" let Vundle manage Vundle, required