# ONYXSimple - Claude Development Guide

This document provides context and guidelines for Claude when working on this project.

## Project Overview

This is a **Next.js** project managed with Kronk CMS.

## Framework: Next.js

### Configuration
Config file: next.config.ts

### Content Structure
- App Router: 0 files

### Package Manager: NPM

### Next.js-Specific Information
Router: App Router (recommended)

### Next.js Commands
- `npm run dev` - Start dev server
- `npm run build` - Build for production
- `npm run start` - Start production server
- `npm run lint` - Run ESLint


## Development Guidelines

### Code Style

- Follow existing code patterns and conventions in the codebase
- Use consistent naming conventions
- Write clear, self-documenting code
- Add comments only where the logic is not self-evident

### Content Management

- Content files use front matter for metadata (YAML format)
- Respect the existing content structure and collections
- When creating new content, use appropriate templates

### Next.js-Specific Guidelines

- Use App Router conventions (`app/` directory)
- Server Components by default, use 'use client' for client components
- Use `next/image` for optimized images
- API routes go in `app/api/`

## Key Files and Directories

```
pages/           # Content files
app/           # Content files
src/pages/           # Content files
src/app/           # Content files
next.config.js           # Configuration
next.config.mjs           # Configuration
next.config.ts           # Configuration
.kronk/          # Kronk CMS configuration
```

## Common Tasks

When working on this project, you may be asked to:

1. **Create new content** - Use the appropriate content directory and front matter format
2. **Modify layouts** - Follow existing patterns and component structure
3. **Update configuration** - Be careful with site-wide settings
4. **Add features** - Consider the framework's conventions and best practices

## AI Guardrails & Design Standards

These standards guide AI-assisted content and code generation.

### Design Standards

### Brand Colors

No brand colors defined.

### Typography

**Font Families:**
- System UI
- sans-serif

**Font Sizes:** 12px, 14px, 16px, 20px, 24px, 32px, 48px

**Font Weights:** 400 (normal), 500 (medium), 700 (bold)

**Line Heights:** 1.2, 1.5, 1.75, 2.0

### Spacing Scale

**Margins:** 4px, 8px, 16px, 24px, 32px, 48px, 64px

**Paddings:** 4px, 8px, 16px, 24px, 32px, 48px, 64px

### Border Radius

- Small: 2px
- Medium: 4px
- Large: 8px

### Shadows

- **small**: `0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)`
- **medium**: `0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)`
- **large**: `0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)`

### Accessibility Requirements

### WCAG Compliance Level

Target: **WCAG Level AA**

### Requirements

- **Alt Text**: Required for all images
- **Minimum Contrast Ratio**: 4.5:1
- **Keyboard Navigation**: Required for all interactive elements
- **ARIA Labels**: Required for semantic markup

### Guidelines

- All interactive elements must be keyboard accessible
- Color contrast must meet or exceed 4.5:1 ratio
- Semantic HTML should be used (nav, main, article, aside, etc.)
- Form inputs must have associated labels
- Focus indicators must be visible and clear

### SEO Guidelines

### Meta Information

- **Meta Description Length**: 140-160 characters
- **Title Format**: `{title} | {siteName}`

### Content Structure

- **Heading Hierarchy**: Required (H1 → H2 → H3, no skipping levels)
- **Sitemap**: Required (sitemap.xml must be generated)
- **Structured Data**: Optional

### Best Practices

- Each page should have one unique H1 heading
- Meta descriptions should be compelling and include target keywords
- URLs should be descriptive and use hyphens (not underscores)
- Images should include descriptive filenames and alt text
- Internal linking should be used to connect related content

### Performance Budgets

### Page Performance Budgets

- **Maximum Page Size**: 1500KB
- **Maximum Image Size**: 200KB
- **Target Load Time**: 3.0s (on 3G connection)

### Lighthouse Score Targets

- **Performance**: 90/100
- **Accessibility**: 95/100
- **Best Practices**: 95/100
- **SEO**: 95/100

### Optimization Guidelines

- Use lazy loading for images below the fold
- Minimize and compress CSS/JS assets
- Use modern image formats (WebP, AVIF)
- Implement proper caching headers
- Use a CDN for static assets
- Minimize third-party scripts
- Optimize font loading with font-display: swap

---

*Generated by Kronk CMS*