Development assistant for CattoPic, an image hosting service with Next.js frontend and Cloudflare Worker backend using R2 storage and D1 database
This skill helps you work with the CattoPic codebase, an image hosting service with a Next.js frontend (Vercel) and Cloudflare Worker backend (Hono framework) using R2 for storage and D1 for metadata.
CattoPic is a full-stack image hosting service with:
```
├── app/ # Next.js 16 frontend (App Router)
│ ├── components/ # React components
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Frontend utilities
│ └── manage/ # Admin management page
│
└── worker/ # Cloudflare Worker backend
└── src/
├── index.ts # Hono router, routes & middleware
├── handlers/ # API endpoint handlers
│ ├── upload.ts # Image upload with compression
│ ├── images.ts # CRUD operations
│ ├── random.ts # Public random image API
│ └── tags.ts # Tag management
└── services/
├── storage.ts # R2 storage operations
├── metadata.ts # D1 database queries
├── compression.ts # Cloudflare Images compression
└── auth.ts # API key validation
```
When working with the frontend, use these commands:
```bash
pnpm dev # Start dev server at localhost:3000
pnpm build # Build for production
pnpm lint # Run ESLint
```
When working with the backend worker, navigate to the worker directory first:
```bash
cd worker
pnpm dev # Start local worker at localhost:8787
pnpm deploy # Deploy to Cloudflare
pnpm wrangler d1 execute CattoPic-D1 --remote --file=schema.sql # Initialize DB schema
```
Images in R2 follow this organization:
Orientation values: `landscape`, `portrait`
The `/api/random` endpoint provides smart image selection:
- `?orientation=landscape|portrait|auto`
- `?tags=tag1,tag2` - Filter by tags
- `?exclude=tag1,tag2` - Exclude tags
- `?format=webp|avif|original` - Format preference
```
NEXT_PUBLIC_WORKER_URL=http://localhost:8787 # Local dev
```
Required bindings:
When modifying the codebase:
1. **Identify the component**: Determine if changes are frontend (Next.js) or backend (Worker)
2. **Use pnpm**: Always use `pnpm` as the package manager, never npm or yarn
3. **Test locally**:
- Frontend: `pnpm dev` (localhost:3000)
- Worker: `cd worker && pnpm dev` (localhost:8787)
4. **Follow patterns**: Reference existing code in handlers/ and services/ for consistency
**CRITICAL**: After making any functional changes, you MUST update both changelog files:
Follow [Keep a Changelog](https://keepachangelog.com/) format with these sections:
**Example changelog entry**:
```markdown
```
When modifying database schema:
```bash
cd worker
pnpm wrangler d1 execute CattoPic-D1 --remote --file=schema.sql
```
1. Create handler in `worker/src/handlers/`
2. Add route in `worker/src/index.ts`
3. Add authentication middleware if needed
4. Update changelog files
1. Modify `worker/src/services/compression.ts` for compression logic
2. Update `worker/src/handlers/upload.ts` for upload pipeline
3. Adjust storage paths in `worker/src/services/storage.ts` if needed
4. Update changelog files
1. Edit components in `app/components/`
2. Use hooks from `app/hooks/` for shared logic
3. Update utilities in `app/utils/` for helper functions
4. Test with `pnpm dev`
5. Update changelog files
1. Read `worker/src/handlers/tags.ts` to understand existing tag logic
2. Modify the handler to add new filter logic
3. Test with `cd worker && pnpm dev`
4. Update both `CHANGELOG.md` and `CHANGELOG_CN.md`:
```markdown
```
1. Read `worker/src/services/compression.ts`
2. Modify compression parameters or add new format support
3. Update `worker/src/handlers/upload.ts` to use new compression
4. Test upload flow locally
5. Update changelogs with changes
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/cattopic-image-service-development/raw