🤖 About AI at Digital Heroes

💡 Team Setup — Claude Code Supercharge Prompt

mkdir -p ~/.claude/skills && cd ~/.claude/skills && git clone https://github.com/mabwfas/my-claude-skills-public.git my-claude-skills

Look at every file in this project. Understand the codebase, stack, purpose, and patterns. Then create a CLAUDE.md file in the root.

CLAUDE.md is your project brain. Keep it under 500 lines. Include:

## Project Context
- Project name, purpose, and who uses it
- Tech stack and key dependencies
- Folder structure (top-level only, not every file)
- How to run/build/test/deploy

## Coding Standards
- Language and framework conventions this project follows
- Naming patterns, file organization rules
- Error handling approach
- What NOT to do (common mistakes in this codebase)

## Skills Available
Skills are installed at ~/.claude/skills/my-claude-skills/skills/. Key ones for this project:

For file generation (PDF, DOCX, XLSX, PPTX):
  ~/.claude/skills/my-claude-skills/skills/anthropic/

For UI, design, and frontend work:
  ~/.claude/skills/my-claude-skills/skills/ui-ux-pro-max/
  ~/.claude/skills/my-claude-skills/skills/stitch/

For marketing, copywriting, SEO, and ads:
  ~/.claude/skills/my-claude-skills/skills/marketing/

For external API integrations:
  ~/.claude/skills/my-claude-skills/skills/composio/

For advanced agent workflows (TDD, debugging, planning):
  ~/.claude/skills/my-claude-skills/skills/superpowers/

For mobile/fullstack dev (Flutter, React Native, iOS, Android):
  ~/.claude/skills/my-claude-skills/skills/minimax/

For deployment and Next.js:
  ~/.claude/skills/my-claude-skills/skills/vercel/

For WordPress/CMS:
  ~/.claude/skills/my-claude-skills/skills/wordpress/

For workflow automation:
  ~/.claude/skills/my-claude-skills/skills/n8n-mcp/

Only list skills relevant to THIS project. Don't list all 2,449.

## Workflow Rules
1. Plan before building: Use plan mode for any task with 3+ steps
2. Verify before claiming done: Run tests, check output, prove it works
3. Fix bugs autonomously: Read logs, find root cause, resolve without asking
4. Use subagents: Offload research and parallel tasks to keep context clean
5. Keep changes minimal: Only touch what's necessary. No unnecessary refactors

## Project-Specific Notes
- Add any quirks, gotchas, or domain knowledge unique to this project
- Known issues or technical debt
- Deployment notes or environment variables needed

---

After creating CLAUDE.md, show me what you wrote so I can review it.

# Create in your project:
mkdir -p .claude/commands

# Example: .claude/commands/shopify-section.md
# Write the prompt template inside the file.
# Claude reads it when you type /shopify-section

🚨 Why AI Matters — Read This First

🎯 Why You Must Learn This

• 10x your output: AI doesn't make you lazy — it makes you dangerous. A designer using AI generates 20 concepts while others make 2. A developer ships features in hours, not days.
• Stay employable: Companies are already hiring "AI-native" workers. Within 2 years, not knowing AI tools will be like not knowing Excel in 2010 — a dealbreaker.
• Future-proof your career: AI isn't going away. It's getting faster, smarter, and cheaper every month. The sooner you master it, the bigger your head start.
• Earn more: Professionals who use AI effectively command higher salaries because they deliver 5-10x the output of those who don't.

📈 The Efficiency Gap Is Real

🧠 The Right Mindset

🔗 All Links & Resources

Everything you need in one place — click to open, or clone using the instructions below.

💬 Custom GPTs

🔧 Tools & Platforms

📦 Skills & Plugins (GitHub)

Skills are reusable AI instruction files (SKILL.md) that give Claude Code specialized abilities. Drop them into your .claude/skills/ folder and they activate automatically.

💻 GitHub Repositories — How to Clone & Use

Clone these repos to get AI skills you can use directly with Claude Code.

⚙️ Company-Wide Mandatory Setup

🎯 The DH AI Philosophy

AI is not the future — it's the present. At Digital Heroes, every team member is expected to use AI tools daily to 10x their output. This isn't optional. If you're not using AI, you're working at 10% capacity.

The Non-Negotiable Rules

What AI Can & Cannot Do

🧠 AI Models We Use

Different models have different strengths. Use the right tool for the job.

Key Concepts

✍️ Prompt Engineering

The difference between a junior and senior AI user isn't the model they use — it's how they prompt.

The RCFC Framework

Techniques

💻 Claude Code

Claude Code is an agentic CLI tool that lives in your terminal. It directly reads your files, writes code, runs commands, and manages your entire codebase. This is the single most important AI tool at DH.

Installation & First Run

1. Make sure Node.js 18+ is installed: nodejs.org
2. Install globally:
   npm install -g @anthropic-ai/claude-code
3. Navigate to your project and start:
   cd my-shopify-theme claude
4. First run will ask you to sign in — use your Anthropic account
5. Run /init to auto-generate a CLAUDE.md for your project

Essential Commands

Power User Tips

CLAUDE.md — Your Project's AI Brain

A markdown file at the root of your project that gives Claude Code persistent context between sessions.

📄 DH Starter CLAUDE.md — Copy & Use in Every Project

This is the standard CLAUDE.md template every DH team member should use when starting a new project. It includes workflow guidelines, task management rules, and core principles that make Claude Code work at a Level 5+ standard.

How to use: Copy the template below, paste it into a file called CLAUDE.md at the root of your project, and fill in the [brackets] with your project details. Or ⬇ Download CLAUDE.md Template

🛒 Real-Life Examples — How DH Uses Claude Code Daily

Here's exactly how our team uses Claude Code with CLAUDE.md on real Shopify projects:

1. Building a Custom Product Page Section

The task: Client wants a product page with before/after image slider, size guide popup, and trust badges.

Result: Claude reads your CLAUDE.md, sees "vanilla JS only" and "all sections must have schema settings", then builds the full section with Liquid, responsive CSS, and complete schema — ready for theme editor customization.

2. Redesigning a Homepage Hero for Better Conversions

Result: Claude reads the existing hero, rewrites it with better visual hierarchy, a single focused CTA, social proof elements, and mobile-first CSS — all matching your design system.

3. Bulk-Fixing SEO Across All Templates

Result: Claude scans all 15 templates, identifies gaps, edits every file in one pass — adding structured data, fixing alt text, and generating a summary report.

4. Creating a Collection Filter Sidebar

Result: Because CLAUDE.md specifies "BEM naming" and "CSS custom properties", Claude generates code that perfectly matches your existing design system — zero manual renaming.

5. Debugging a Cart Issue at 11 PM

Result: Claude traces the data flow from Cart API to DOM, finds the broken selector, explains the root cause, and fixes it — all in under 2 minutes. Because CLAUDE.md says "Autonomous Bug Fixing: just fix it."

DH Daily Workflow

1. Navigate to project: cd my-shopify-theme
2. Start Claude Code: claude
3. Give clear instructions: Use the RCFC framework (Role, Context, Format, Constraints)
4. Review generated code: Claude shows diffs before applying — always review
5. Accept or modify: Approve changes or ask for adjustments
6. Test locally: shopify theme dev to preview
7. Commit: /commit or ask Claude to handle git

📊 The 6 Levels of Claude Code

Most people get stuck at Level 1 or 2 and never realize it. Understanding where you stand — and what to do next — is the fastest way to go from vibe coder to 10x AI developer.

🎥 Watch: The 6 Levels of Claude Code — Where Do You Stand?

The Progression Roadmap

Level 1 → 2: Stop Commanding, Start Collaborating

The #1 mistake is treating Claude Code as a blunt tool — "build me X" without feedback. This causes regression to the mean (generic AI slop). Instead:

• Use Plan Mode before every build — Claude will ask clarifying questions
• Ask: "What am I not thinking about?" and "What would an expert do differently here?"
• Let Claude push back on your ideas — tell it to be adversarial

Level 2 → 3: Master the Context Window

Context rot is real — performance drops sharply after ~50-60% of the 200K token window. This doesn't improve with bigger windows.

• /context — check your usage anytime
• /clear — reset when you hit ~50%. Prefer this over /compact (Claude picks what to keep; it may pick wrong)
• Set up a persistent status bar showing model + context % so you always know
• Use few-shot examples over extremely long instructions — less is more
• Keep CLAUDE.md concise — too much context can actually hurt performance

Level 3 → 4: Be Surgical With Tools

The trap: installing every MCP and framework you can find. Capability ≠ performance.

• Ask yourself: does this project actually need this MCP?
• Native Claude Code features often beat third-party add-ons
• Learn the building blocks (front end, backend, auth, databases, deployment) — you don't need to code, but you need to know how pieces fit together
• Always ask Claude: "Why did you do it that way?" — this is how you grow

Level 4 → 5: Create Your Own Skills

• Skills are just text prompts — a way to tell Claude to do a specific thing in a specific manner
• Use Skill Creator (/plugin → skill-creator) to build, test, and optimize your skills
• Keep skills project-scoped (not global) to avoid trigger confusion
• Skills can reference other skills — create higher-order workflows

Level 5 → 6: Scale With Multiple Instances

Note: Agent Teams is experimental. Enable it in settings.json. Say "create an agent team" to trigger it. There are diminishing returns beyond 2-3 parallel sessions.

🚀 Antigravity & MCP

Antigravity Platform

Antigravity is DH's internal platform connecting AI tools, automation workflows, and team processes into one unified system. Think of it as mission control for all DH AI operations.

• AI Workspace: Centralized environment for running Claude Code with project templates
• Workflow Automation: Trigger AI tasks on schedules or events
• Knowledge Base: SOPs, brand guides, and training materials accessible to AI
• Team Collaboration: Share AI sessions, prompts, and outputs

Claude in Chrome

A browser extension that lets Claude interact directly with your browser tabs — read pages, fill forms, click buttons, take screenshots, and automate workflows.

MCP — Model Context Protocol

MCP lets AI models connect to external tools and data sources. Think of it as USB ports for AI.

🎯 Daily Use Cases — How Every Role Uses MCP + Skills

These aren't theoretical. This is what your day looks like when you actually use these tools:

⚡ How to Create Your Own Custom Skill in 2 Minutes

Skills aren't magic — they're just markdown files with instructions. Here's how to make one for any task you do repeatedly:

More Skill Ideas for Daily Use

🛠️ Custom GPTs & Claude Projects

Custom GPTs are pre-configured AI assistants with specific instructions, knowledge, and capabilities baked in. Build it once, reuse it forever.

DH Custom GPTs

Custom GPTs vs Claude Projects

🛒 Shopify CLI + AI

The magic happens when you combine Shopify CLI with Claude Code.

The Workflow

1. shopify theme pull --store mystore.myshopify.com
2. claude — start Claude Code in the theme directory
3. Describe what you need: sections, schemas, metafields
4. shopify theme dev — preview changes live
5. Iterate with AI: fix bugs, adjust mobile, refine design
6. shopify theme check — lint for best practices
7. shopify theme push — deploy

What AI Can Generate

🎥 Shopify + Claude Code in Action

Watch how designers and developers use Claude Code to edit Shopify themes at lightning speed:

🎨 AI for Design & Branding

Image Generation Tools

DH Design Tools

Design Workflows

• Logo concepts: Generate 20 with Midjourney → refine top 5 in Figma → present 3 to client
• Color palettes: AI generates palettes with hex codes, emotional associations, and usage rules
• Product photography: AI places products in lifestyle settings — $10 image looks like $500 shoot
• A/B variants: Generate multiple design versions quickly for conversion testing

📝 AI for Content & SEO

Content Types

SEO with AI

📋 AI for PM & Operations

⚡ DH Custom Claude Commands

These are pre-built slash commands you can install in Claude Code. Save them to .claude/commands/ in your project and use them as /command-name.

🎨 Designer's Playbook — Stop Building AI Slop

Step 1: Install the Design Skills Stack

Three tools, stacked together, turn Claude from generic to premium. Install all three.

Step 2: The 5 Design Pillars

Every website Claude builds gets evaluated against these five areas. This is what separates premium from generic.

Step 3: Pick Your Aesthetic Direction

When prompting Claude, pick one of these directions. Being specific about the aesthetic is what separates premium from slop.

Step 4: Prompt Like a Designer, Not a Developer

Once the skills are installed, just describe what you want. The more specific your aesthetic direction, the more distinctive the result.

More designer-level prompts:

Step 5: AI Slop Red Flags — What to Reject

Even with skills installed, watch for these patterns. If you see any of them, push back and iterate.

Step 6: Build Custom Skills Per Client

Want every site to match a specific brand? Create a custom SKILL.md file and Claude follows it every time.

One SKILL.md file = consistent design across every project, every time.

Step 7: Lock Into CLAUDE.md for Every Session

Generate a brand kit PDF and reference it from CLAUDE.md so it's automatically loaded every session.

Then add to your CLAUDE.md:

🧪 Advanced Prompt Tricks & Hacks

These are the power-user techniques that separate a basic AI user from someone who 10x's their output. Master these and you'll produce better results in half the time.

1. Mega-Prompt Architecture

Instead of a simple prompt, build a mega-prompt that includes everything the AI needs in one shot:

2. The “Act As + Teach Me” Pattern

When you need to learn something fast, combine a role with a teaching request:

3. Constraint Stacking

The more specific your constraints, the better the output. Stack multiple constraints:

4. Output Formatting Hacks

5. The “Reverse Prompt” Technique

Give AI an example of great output and ask it to write the prompt that would produce it:

6. Multi-Pass Refinement

Use AI to critique its own output, then improve it:

7. Persona Stacking for Client Work

For client stores, create detailed personas and reference them:

⚡ 10x Speed Hacks — Work Faster With AI

Every team member at DH should use these techniques to dramatically speed up their daily work across clients, stores, and content.

For Client Work

For Shopify Stores

For YouTube Channel

Universal Speed Tips

🌐 Claude Chrome Extension

The Claude Chrome extension connects Claude directly to your browser. It can see what you see — read pages, click buttons, fill forms, take screenshots, and automate entire workflows.

What It Can Do

Tasks Every Role Can Automate

📈 Marketing Skills Framework

DH uses the open-source Marketing Skills framework — 36 specialized AI skills for every marketing task. These can be installed as Claude Code skills for instant, expert-level assistance.

Install

This adds 36 marketing skill files to your project. Each skill gives Claude deep domain expertise in a specific marketing area.

Conversion & CRO (6 Skills)

Content & Copywriting (5 Skills)

SEO & Discovery (6 Skills)

Paid Ads & Growth (5 Skills)

Strategy & Analytics (6 Skills)

🖼️ Image Generation Guide

AI image generation is a game-changer for design work. Here's how to use each tool effectively for client stores, branding, and marketing.

Midjourney — Best for Photorealistic & Artistic

DALL-E 3 — Best for Text & Precision

AI Product Photography Workflow

1. Remove background: Use Stitch or remove.bg to isolate the product
2. Generate lifestyle scene: Midjourney creates the environment (kitchen counter, bedroom shelf, garden table)
3. Composite: Place product into scene using Photoshop or Canva
4. Enhance: AI upscaling for print-quality resolution

Image Generation for Marketing

🔒 Security & Ethics

AI Bias Awareness

• Cultural bias: AI may not resonate with diverse audiences — review for inclusivity
• Visual bias: Image generation may default to stereotypes — use explicit diversity requirements
• Language bias: AI may favor formal English over your audience's regional expressions

Hallucination Detection

1. Verify all statistics and data — find the actual source or remove the claim
2. Test all generated code — verify API functions actually exist in official docs
3. Check links and references — AI may generate plausible but fake URLs
4. Question extreme confidence — that's often when AI hallucinations sound most believable

IP & Disclosure

• AI-assisted work is YOUR work: You directed, reviewed, and refined it
• Be transparent: If a client asks, be honest about AI-assisted workflows
• Copyright caution: For logos and brand identity, always refine AI concepts with human tools

🧩 Claude Skills & MCP — Supercharge Your AI Output

Out of the box, Claude is powerful. But with Skills and MCP (Model Context Protocol), it becomes an expert-level assistant that knows your exact workflows, tools, and preferences. This is the difference between generic AI output and production-ready work.

What Are Claude Skills?

Skills are reusable instruction sets that teach Claude how to perform specific tasks the way YOU want them done. Think of them as specialized training modules for Claude — each skill gives Claude deep domain knowledge and step-by-step procedures for a particular job.

Without skills, you get generic output. With skills, you get output that matches your exact brand voice, coding standards, file formats, and quality bar.

How Skills Work

Every skill is a Markdown file (SKILL.md) stored in your project's .claude/skills/ directory or your global ~/.claude/skills/ folder. When you invoke a skill (using /skillname or it triggers automatically), Claude reads the instructions and follows them precisely.

A skill file has two parts:

1. Frontmatter — Metadata that tells Claude WHEN to trigger the skill (description, trigger patterns, allowed tools)
2. Body — The actual instructions Claude follows (step-by-step procedures, rules, examples, output format)

Skills We Use at DH

How to Add Skills

There are three ways to add skills to Claude:

Method 1: Install from npm (Community Skills)

This downloads the skill files into your project's .claude/skills/ directory. Community skills are open-source and peer-reviewed.

Method 2: Create Your Own Skill

Method 3: Use the Skill Creator

Ask Claude Code: /skill-creator and describe what you want. It will generate the skill file, test it, and optimize the trigger description for accuracy.

What Is MCP (Model Context Protocol)?

MCP is an open protocol that lets Claude connect to external tools and services. If Skills teach Claude WHAT to do, MCP gives Claude the TOOLS to do it. MCP servers act as bridges — each one gives Claude new capabilities.

How to Add MCP Servers

MCP servers are configured in your Claude settings file. There are two levels:

Project-Level (recommended for team consistency)

Add to .claude/settings.json in your project root:

Global-Level (works across all projects)

Add to ~/.claude/settings.json in your home directory. Same format as above but applies everywhere.

Adding via Antigravity (Easiest)

If you use Antigravity (our recommended Claude Code launcher), it manages MCP servers automatically through its GUI. Just enable/disable servers from the settings panel.

Skills + MCP Together = 10x Output

The real power comes from combining Skills with MCP. Here is how they work together:

Quick Start Checklist

👤 AI Quick Guide by Role

Every role at DH benefits from AI. Here's your starting point: