Z8MB1E
471f9a3aea
- Changed favicon and logo references to ONYXSimple - Updated package.json to modify start command and add deploy scripts - Adjusted layout and page metadata to reflect ONYXSimple branding - Enhanced marquee animation with dynamic duration - Added robots.txt and sitemap.xml for SEO - Refactored various components for consistency and clarity
182 lines
4.5 KiB
Markdown
182 lines
4.5 KiB
Markdown
# 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*
|