flydubai Squad Playbook

How to use this

• New to the squad? Read sections 2 to 4 (15 minutes), then do the setup in section 3. Allow about 20 minutes, plus waiting for fonts.
• About to build or fix a component? Section 6 tells you which command to run, section 7 which files it reads.
• Something failed? Section 11 lists the errors we've already hit and the fix for each.
• Want to automate something new? Sections 9 and 10 show how to write a prompt, turn it into a command and share it.

Why we work this way

Until November, Sneha, Nikita and Zeeshan each used Claude differently, in separate streams. Every rule a reviewer gave lived in one person's chat and was lost to the others. The repo fixes that: Claude reads the same rules, logs and commands in every session, for everyone.

Set up your Mac

Everything runs in Claude Code on your own Mac. Cloud sessions can't load the flydubai fonts or drive the hidden browser, so they can't write text into Figma.

1. Install Claude Code

   Desktop app or CLI, signed in with your Horizontal account.

2. Clone the repo with GitHub Desktop

   File › Clone repository › bmaniya1/flydubai-design-squad. Save it at exactly this path; the scripts expect it:

   ~/Desktop/flydubai-design-squadCopy

3. Install the fonts

   Ask Sneha for Effra (Light, Regular, Medium) and Frutiger LT Arabic (45, 55, 65). Double-click each › Install. Keep the Figma font agent running. They are licensed: never put them in Git.

4. Install Chrome Beta and Node 18+

   Chrome Beta is the hidden browser that writes text into Figma, captures the live site and runs the Grid Builder plugin. Download it from google.com/chrome/beta and Node from nodejs.org.

5. Run the setup script

   It copies the commands, checks Node, Chrome Beta and the fonts, installs the browser library, logs the runner into Figma once, starts it and runs a test. Safe to re-run.

   zsh ~/Desktop/flydubai-design-squad/bin/setup.shCopy

6. Connect Figma in Claude Code

   In Claude Code type /plugin, choose figma and log in with your Horizontal Figma account. Check it with: "Run Figma whoami". You should see the Horizontal Enterprise plan.

7. Let the auto-sync push for you (optional)

   Without this, the hook commits and you push from GitHub Desktop. With it, every turn also pushes. In Claude Code, run:

   ! gh auth loginCopy

   ! gh auth setup-gitCopy

8. Test

   Open Claude Code inside the repo folder and ask:

   Run a ping job through scripts/fz-bg.mjs that loads Effra and returns the current page name.Copy

   A page name back means you're ready. Then try /fd-visual-ref Footer FD-12 ↳ Footer ✅.

How the automation fits together

When you open Claude Code in the repo, it loads CLAUDE.md. That pulls in the project context, the build template, the method and every standing rule. A command then drives two routes into Figma:

flowchart LR
  A[You in Claude Code] --> B[CLAUDE.md loads context, template, rules]
  B --> C{Slash command}
  C --> D[Figma MCP: read, structure, tokens, uploads]
  C --> E[Hidden Chrome Beta runner: text in Effra and Frutiger, Grid Builder plugin, live captures]
  D --> F[(MASTER Figma file)]
  E --> F
  C --> G[Build-state files, rules, gotchas]
  G --> H[Stop hook: scan, commit]
  H --> I[GitHub Desktop: push]
  I --> J[(Shared repo)]
  J --> B

A working day

1. Start

   Pull in GitHub Desktop, start the hidden runner, then open Claude Code in the repo folder.

   ~/Desktop/flydubai-design-squad/scripts/fz-bg-start.shCopy

2. Pick up

   Ask Claude what's open: it reads open-items-next-session.md and the component's build-state file.

3. Build

   Run one command per component (section 6). Claude captures live references first, then asks you to sign off the variant count before it writes anything. Answer that question; Figma writes can't be undone.

4. Review in Figma

   Give corrections in plain words ("no truncation", "keep the height when the header is off"). Claude fixes it and records the rule so it isn't repeated.

5. Close

   Run /fd-learn (rules into the right files), then /fd-wrap-session (handoff). Push in GitHub Desktop.

Which command, when

Helper scripts Claude runs for you

Files Claude reads (and you should know)

Rules every build follows

These come from Sneha's reviews and live in memory/ and the build commands. Claude applies them automatically. Knowing them helps you review.

Write your own prompt

Good prompts here read like a short brief to a colleague. The build prompts all follow the same shape:

1. Scope in one line

   What, which FD-ID, which page or node link. Paste the Figma link; Claude reads the node id from it.

2. Sources to read

   FigJam section, concept frame, live URL, the build-state file.

3. The first write

   Usually the reference capture, so the design is checked against live.

4. A gate

   "Ask me to sign off … before any Figma change." This stops costly rebuilds.

5. Rules and checks

   Point to the files instead of repeating them; add only what is special to this task.

6. Where to save the result

   Usually the component's build-state file.

Turn a prompt into a command or skill

A slash command is a Markdown file. Put it in the repo's commands/ folder so the whole squad gets it, and in ~/.claude/commands/ so your Claude Code sees it. The setup script copies the repo's commands for everyone.

Errors we've already hit

The full list, by symptom, is in reference/ds-automation-pack/01-figma-plugin-api-gotchas.md.

flydubai at a glance