jason/ONYXSimple
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ONYXSimple/.kronk/claude/CLAUDE.md
Z8MB1E 471f9a3aea refactor: update project references and configurations for ONYXSimple 
- 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
2026-04-29 14:54:10 -04:00

4.5 KiB
Raw Blame History

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