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
151 lines
3.6 KiB
Text
151 lines
3.6 KiB
Text
# 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
|
|
|