# Cursor Rules for ONYXSimple

You are working on a Next.js project managed with Kronk CMS.

## General Rules

- Follow existing code patterns and conventions
- Write clean, maintainable code
- Use TypeScript/JavaScript best practices where applicable
- Prefer functional programming patterns
- Keep components small and focused

## Next.js Rules

- Use Server Components by default
- 'use client' only when necessary
- App Router file conventions
- Use next/image for images
- Metadata API for SEO

## Content Rules

- Front matter must be valid YAML/TOML/JSON
- Use consistent date formats
- Tags and categories should be lowercase
- Slugs should be URL-friendly
- Images should have alt text

## Code Patterns

When generating code:

- Match existing file naming conventions
- Use existing component patterns
- Follow the project's directory structure
- Include appropriate error handling
- Add types where TypeScript is used

## Avoid

- Breaking changes to existing content structure
- Hardcoded URLs or paths
- Inline styles (use CSS/Tailwind)
- Console.log in production code
- Committing sensitive data

## AI Guardrails & Design Standards

### 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