|
1 | | -# AGENTS.md |
| 1 | +# CLAUDE.md |
2 | 2 |
|
3 | | -This file provides instructions for AI coding agents working with this repository. |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
4 | 4 |
|
5 | | -## Task Tracking with Beads |
| 5 | +## Project Overview |
6 | 6 |
|
7 | | -Use `bd` (Beads) for all task and issue tracking. See [Beads documentation](https://github.com/steveyegge/beads) for full details. |
| 7 | +This is the FashionUnited Developer Portal - a documentation site built with [Astro](https://astro.build/) and [Starlight](https://starlight.astro.build/). It provides API documentation, guides, and resources for developers integrating with FashionUnited's services (Marketplace GraphQL API, Jobs, News embedding, etc.). |
8 | 8 |
|
9 | | -### Session Start |
| 9 | +## Common Development Commands |
10 | 10 |
|
11 | | -1. Run `bd ready` to see unblocked tasks |
12 | | -2. Pick a task and run `bd update <id> --status in_progress` |
13 | | -3. Work on the task |
| 11 | +### Development |
| 12 | +```bash |
| 13 | +bun dev # Start dev server (default: http://localhost:4321) |
| 14 | +bun start # Run production server |
| 15 | +``` |
14 | 16 |
|
15 | | -### During Work |
| 17 | +### Building |
| 18 | +```bash |
| 19 | +bun run build # Run type checking and build for production |
| 20 | +astro check # Type check without building |
| 21 | +``` |
16 | 22 |
|
17 | | -- Create new issues: `bd create "Issue title" -p <priority>` |
18 | | -- Update progress: `bd update <id> --status <status>` |
19 | | -- View details: `bd show <id>` |
20 | | -- List all: `bd list` |
| 23 | +### Testing |
| 24 | +```bash |
| 25 | +bun test:e2e # Run Playwright E2E tests |
| 26 | +``` |
21 | 27 |
|
22 | | -### Session End (Landing the Plane) |
| 28 | +### Preview |
| 29 | +```bash |
| 30 | +bun run preview # Preview production build locally |
| 31 | +``` |
23 | 32 |
|
24 | | -**Critical: Work is NOT complete until `git push` succeeds.** |
| 33 | +### Docker |
| 34 | +```bash |
| 35 | +# Build and push to Google Cloud Artifact Registry |
| 36 | +docker build -t europe-west1-docker.pkg.dev/developers-fashionunited-com/developersite/ssrastrofrontend:latest . && docker push europe-west1-docker.pkg.dev/developers-fashionunited-com/developersite/ssrastrofrontend:latest |
| 37 | +``` |
25 | 38 |
|
26 | | -1. File issues for any incomplete work |
27 | | -2. Run quality checks if code changed (`bun run build`, `bun test:e2e`) |
28 | | -3. Update all issue statuses appropriately |
29 | | -4. Close completed issues: `bd close <id> --reason "Completed"` |
30 | | -5. Run `bd sync` to export changes |
31 | | -6. Run `git push` - **absolutely required** |
32 | | -7. Verify with `git status` showing "up to date with origin" |
| 39 | +## High-Level Architecture |
33 | 40 |
|
34 | | -### Important Rules |
| 41 | +### Tech Stack |
| 42 | +- **Framework**: Astro 5+ with SSR/SSG hybrid rendering |
| 43 | +- **UI Library**: Starlight (Astro's documentation template) |
| 44 | +- **Styling**: Tailwind CSS with custom blue-themed design system |
| 45 | +- **React Components**: UI components using shadcn/ui patterns (button, card, input, label, separator, vortex) |
| 46 | +- **Animations**: Framer Motion for interactive elements, astro-vtbot for page transitions |
| 47 | +- **Testing**: Playwright for E2E testing |
| 48 | +- **Analytics**: Plausible (loaded via Partytown) |
| 49 | +- **Deployment**: Google Cloud Run (see Dockerfile) |
35 | 50 |
|
36 | | -- **Never use `bd edit`** - It launches an interactive editor. Use `bd update` with flags instead: |
37 | | - - `--title "New title"` |
38 | | - - `--description "Description"` |
39 | | - - `--status <status>` |
40 | | - - `--priority <1-5>` |
41 | | - - `--notes "Additional notes"` |
| 51 | +### Project Structure |
42 | 52 |
|
43 | | -- **Include issue IDs in commits** - Format: `"Fix authentication bug (bd-abc)"` |
| 53 | +``` |
| 54 | +src/ |
| 55 | +├── components/ |
| 56 | +│ ├── starlight/Head.astro # Custom Starlight head component |
| 57 | +│ └── ui/ # shadcn/ui-style React components |
| 58 | +├── content/ |
| 59 | +│ └── docs/ # Markdown documentation files |
| 60 | +│ ├── docs/ # Main documentation |
| 61 | +│ │ ├── marketplace/ # Marketplace API docs |
| 62 | +│ │ ├── jobs/ |
| 63 | +│ │ ├── editorial-*/ |
| 64 | +│ │ └── *.md |
| 65 | +│ └── posts/ # Blog posts |
| 66 | +├── layouts/Layout.astro # Base layout |
| 67 | +├── pages/ |
| 68 | +│ ├── vortex.astro # Demo page with vortex effect |
| 69 | +│ └── register.astro # Registration page |
| 70 | +├── lib/utils.ts # Utility functions |
| 71 | +└── styles/custom.css # Custom CSS overrides |
| 72 | +``` |
44 | 73 |
|
45 | | -- **Status values**: `inbox`, `backlog`, `in_progress`, `blocked`, `done` |
| 74 | +### Content Management |
46 | 75 |
|
47 | | -- **Priority values**: 1 (highest) to 5 (lowest) |
| 76 | +- Documentation lives in `src/content/docs/` as Markdown/MDX files |
| 77 | +- Starlight automatically generates navigation from the sidebar config in `astro.config.mjs` |
| 78 | +- The `docs` collection uses Starlight's schema (defined in `src/content/config.ts`) |
48 | 79 |
|
49 | | -## Project-Specific Commands |
| 80 | +### Styling System |
50 | 81 |
|
51 | | -```bash |
52 | | -bun dev # Start dev server |
53 | | -bun run build # Type check and build |
54 | | -bun test:e2e # Run E2E tests |
55 | | -``` |
| 82 | +- **Tailwind Config**: Custom blue-themed palette inspired by Solid.js (`tailwind.config.mjs`) |
| 83 | +- **Color System**: Sophisticated blue gradients (50-950 scale) with custom gradient utilities |
| 84 | +- **Fonts**: Inter Variable (sans), Lora Variable (serif), IBM Plex Mono (code) |
| 85 | +- **Starlight Theme**: Custom accent and gray colors defined in Tailwind plugin |
| 86 | + |
| 87 | +### Build & Deployment |
| 88 | + |
| 89 | +- **Output Mode**: Static site generation with optional Node.js middleware adapter |
| 90 | +- **Docker**: Multi-stage build with Sharp support for image optimization |
| 91 | +- **Runtime**: Bun in Alpine Linux container |
| 92 | +- **Port**: 8080 (configured in Dockerfile) |
| 93 | + |
| 94 | +## Key Configuration Files |
56 | 95 |
|
57 | | -## Code Quality |
| 96 | +- `astro.config.mjs`: Astro configuration with Starlight, Tailwind, React, Partytown, vtbot integrations |
| 97 | +- `tailwind.config.mjs`: Tailwind with Starlight plugin, custom blue theme, shadcn/ui setup |
| 98 | +- `tsconfig.json`: TypeScript config with `@/*` path alias for `./src/*` |
| 99 | +- `playwright.config.ts`: E2E tests run against preview server on port 4321 |
| 100 | +- `Dockerfile`: Multi-stage Bun build with vips-dev for Sharp image processing |
58 | 101 |
|
59 | | -Before ending a session with code changes: |
60 | | -1. Run `bun run build` to verify types |
61 | | -2. Run `bun test:e2e` if UI was modified |
62 | | -3. Commit with descriptive message including issue ID |
63 | | -## Issue Tracking |
| 102 | +## Package Manager |
64 | 103 |
|
65 | | -This project uses **bd (beads)** for issue tracking. |
66 | | -Run `bd prime` for workflow context, or install hooks (`bd hooks install`) for auto-injection. |
| 104 | +- **Bun** is used as the package manager and JavaScript runtime |
| 105 | +- Install dependencies with `bun install` |
67 | 106 |
|
68 | | -**Quick reference:** |
69 | | -- `bd ready` - Find unblocked work |
70 | | -- `bd create "Title" --type task --priority 2` - Create issue |
71 | | -- `bd close <id>` - Complete work |
72 | | -- `bd sync` - Sync with jj (run at session end) |
| 107 | +## Development Environment |
73 | 108 |
|
74 | | -For full workflow details: `bd prime` |
| 109 | +This project supports multiple development environments: |
| 110 | +- **Nix**: `nix develop` for reproducible environment (see flake.nix) |
| 111 | +- **devenv**: Alternative Nix-based development environment |
| 112 | +- **Docker**: For containerized builds |
| 113 | +- **Standard Bun**: Install Bun from https://bun.sh |
75 | 114 |
|
76 | | -Always commit changes to .beads folder with other changes. |
| 115 | +## Important Patterns |
| 116 | + |
| 117 | +### Adding New Documentation |
| 118 | +1. Create `.md` or `.mdx` file in `src/content/docs/docs/` |
| 119 | +2. Add frontmatter with `title` and optionally `comments`, `toc`, `images` |
| 120 | +3. Update sidebar in `astro.config.mjs` if needed (or use `autogenerate`) |
| 121 | + |
| 122 | +### Creating React Components |
| 123 | +- Use TypeScript (`.tsx` extension) |
| 124 | +- Place in `src/components/ui/` for reusable UI components |
| 125 | +- Follow shadcn/ui patterns (class-variance-authority, Radix UI primitives) |
| 126 | +- Import with `@/components/ui/*` alias |
| 127 | + |
| 128 | +### Starlight Customization |
| 129 | +- Override Starlight components by creating files in `src/components/starlight/` |
| 130 | +- Custom head component already exists at `src/components/starlight/Head.astro` |
| 131 | + |
| 132 | +### GraphQL API Documentation |
| 133 | +The primary use case for this site is documenting the FashionUnited GraphQL API: |
| 134 | +- Endpoint: `https://fashionunited.com/graphql/` |
| 135 | +- Playground: `https://fashionunited.com/graphiql/` |
| 136 | +- Marketplace queries support pagination, locales, and brand filtering |
| 137 | + |
| 138 | +## Issue Tracking with Beads |
| 139 | + |
| 140 | +This project uses [Beads](https://github.com/steveyegge/beads) by Steve Yegge for issue tracking. Beads is a distributed, Git-backed issue tracker designed specifically for AI coding agents. |
| 141 | + |
| 142 | +### Installation |
| 143 | + |
| 144 | +```bash |
| 145 | +# macOS/Linux |
| 146 | +curl -fsSL https://raw.githubusercontent.com/steveyegge/beads/main/scripts/install.sh | bash |
| 147 | + |
| 148 | +# or via Homebrew |
| 149 | +brew install steveyegge/beads/bd |
| 150 | + |
| 151 | +# or via npm |
| 152 | +npm install -g @beads/bd |
| 153 | +``` |
| 154 | + |
| 155 | +### Usage |
| 156 | + |
| 157 | +```bash |
| 158 | +bd init # Initialize beads in project (run once) |
| 159 | +bd create "Issue title" -p 1 # Create new issue (priority 1-5) |
| 160 | +bd list # Show all issues |
| 161 | +bd ready # Display unblocked tasks ready for work |
| 162 | +bd show <id> # View issue details |
| 163 | +bd update <id> --status in_progress # Update status |
| 164 | +bd close <id> --reason "Completed" # Close finished work |
| 165 | +bd sync # Force sync to Git |
| 166 | +``` |
77 | 167 |
|
| 168 | +### Key Principles |
78 | 169 |
|
| 170 | +- **Always use `bd` for task tracking** - File issues for incomplete work, track progress with status updates |
| 171 | +- **Include issue IDs in commits** - Use format like `"Fix bug (bd-abc)"` in commit messages |
| 172 | +- **Never use `bd edit`** - Use `bd update` with flags instead (it requires an interactive editor) |
| 173 | +- **Run `bd sync` before ending sessions** - Ensures all changes are pushed to Git |
| 174 | +- **Work is NOT complete until `git push` succeeds** - Always push before finishing |
79 | 175 |
|
80 | | -## Related Tools |
| 176 | +### Beads Configuration |
81 | 177 |
|
82 | | -- **Beads**: [github.com/steveyegge/beads](https://github.com/steveyegge/beads) - AI-native issue tracking |
| 178 | +The `.beads/` directory contains: |
| 179 | +- `issues.jsonl` - Git-tracked issues in JSONL format |
| 180 | +- `beads.db` - Local SQLite cache (gitignored) |
83 | 181 |
|
| 182 | +### Claude Code Integration |
84 | 183 |
|
| 184 | +When using Claude Code with this project, the agent should: |
| 185 | +1. Check `bd ready` at session start to see pending tasks |
| 186 | +2. Create issues for any discovered work with `bd create` |
| 187 | +3. Update issue status as work progresses |
| 188 | +4. Close completed issues with `bd close` |
| 189 | +5. Run `bd sync` and `git push` before ending sessions |
0 commit comments