syncc — Claude Instructions

Claude-specific onboarding. For universal project conventions, see AGENTS.md. For app-specific routes, services, and schema, see apps/<app>/CONTEXT.md.

---

1. Session Protocol

1. Read AGENTS.md — project conventions, architecture, coding rules.
2. Read .clauderules — hard constraint checklist.
3. Read the relevant apps/<app>/CONTEXT.md before working on any app.
4. Do NOT scan the codebase if the answer is already in these files.

Context Routing Table

Need	Where to look
Project conventions, coding rules, GIS, Docker	AGENTS.md
Backend modules, schema, auth, env vars	apps/api-server/CONTEXT.md
Admin routes, components, 2-step line creation	apps/web-admin/CONTEXT.md
Driver routes, GPS flow, QR restore (driver)	apps/mobile-driver/CONTEXT.md
Passenger routes, services, QR restore (passenger)	apps/passengers-app/CONTEXT.md
Landing dark mode, Tailwind tokens, CSS utils	apps/syncc-landing/CONTEXT.md
Analytics routes, silos, event tracking	apps/analytics/CONTEXT.md
QA portal routes, test case codes, execution API	apps/qa-portal/CONTEXT.md
Multi-agent system, agent roles, workflow, tools	apps/agents/CONTEXT.md
Agent specs (design, code, test, routing, docs)	.claude/agents/<name>.md

---

2. Skills (Slash Commands)

Skill	File	What it does
/PUSH	.claude/skills/PUSH.md	Stage changed files, commit with descriptive message, push to remote
/VERIFY	.claude/skills/VERIFY.md	Build affected apps, fix compilation errors, report results
/ANGULAR	.claude/skills/ANGULAR.md	Apply Angular best practices: signals, inputs/outputs, DI, template control flow, routing

---

3. Behavioral Rules

• Never git push unless explicitly asked — commit locally when done, push only on request.
• Never amend a previous commit — always create new commits.
• Never skip pre-commit hooks (--no-verify) — fix the underlying issue.
• Prefer editing existing files over creating new ones.
• No over-engineering — only make changes that are directly requested.
• No .env files in commits — only .env.example.
• Run /VERIFY after any code change before considering a task done.

---

4. Component Recipes (Copy-Paste Reference)

Use these exact patterns when generating UI. Colors and spacing from AGENTS.md § Branding.

Card: <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

Card header: <div class="px-6 py-4 border-b border-slate-100 bg-slate-50 rounded-t-xl">

Primary button:

<button class="inline-flex items-center justify-center rounded-xl bg-primary px-5 py-2.5 text-sm font-bold text-white transition hover:bg-primary-dark shadow-sm">

Secondary button:

<button class="bg-white text-slate-600 border border-slate-200 px-4 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-50 transition">

Destructive button: <button class="bg-red-600 text-white px-4 py-2.5 rounded-xl text-sm font-bold hover:bg-red-700 transition">

Text input:

<input class="w-full text-xs font-medium border border-slate-200 rounded-lg px-3 py-2 bg-slate-50 shadow-inner focus:bg-white focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-all">

Modal overlay:

<div class="fixed inset-0 z-[9999] flex items-center justify-center p-4">
  <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200"></div>
  <div class="relative bg-white rounded-2xl shadow-2xl border border-slate-200 w-full max-w-sm overflow-hidden animate-in zoom-in-95 duration-200">

Toast: <div class="bg-emerald-500/90 text-white border border-emerald-400/50 rounded-2xl backdrop-blur-md p-4 shadow-2xl">

Section wrapper: <section class="max-w-6xl mx-auto mt-8 px-4 pb-10">

Typography

Element	Classes
H1	text-2xl font-semibold tracking-tight text-slate-900
Subtext	text-sm text-slate-600
Form label	text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1 px-1
Table label	text-xs font-bold text-slate-500 uppercase tracking-wider
Card title	text-lg font-bold text-slate-900
Badge	text-xs font-semibold
Input	text-xs font-medium

---

5. Angular Quick Reference

Full conventions in AGENTS.md. These are copy-paste patterns Claude should use directly.

Component skeleton:

@Component({
  selector: 'app-feature-name',
  standalone: true,
  imports: [ReactiveFormsModule, RouterLink],
  templateUrl: './feature-name.component.html',
})
export class FeatureNameComponent {
  private svc = inject(FeatureService);
  id = input.required<string>();
  isLoading = signal(false);
  readonly item = resource({ ... });
  constructor() { effect(() => { ... }); }
}

Templates — always use:

@if (condition()) { ... } @else { ... }
@for (item of items(); track item.id) { ... }
@switch (status()) { @case ('X') { ... } @default { ... } }

Tailwind config (new apps):

colors: {
  primary: { light: '#E8F2F3', DEFAULT: '#32737E', dark: '#245960' },
  secondary: { DEFAULT: '#000000' },
  surface: { DEFAULT: '#FFFFFF' },
}

---

Last updated: 2026-07-07.