NYCRAVES Development Guide

Complete patterns and conventions for the NYCRAVES NYC rave events app.

What This Skill Covers

1. •UI Design System - Brutalist dark-mode aesthetic
2. •Component Patterns - Structure, naming, exports
3. •Architecture - Data fetching, caching, utilities
4. •Next.js 16 - Cache Components, Server/Client patterns

Core Principles

1. •Consistency over creativity - Match existing patterns exactly
2. •Server Components by default - Only use 'use client' when necessary
3. •Centralized utilities - Never duplicate functions across files
4. •Centralized constants - Import from lib/constants/, don't hardcode
5. •Barrel exports always - Every folder needs index.ts with named exports
6. •Cache everything - Data functions use 'use cache' + cacheTag + cacheLife

Quick Reference

Creating a New Component

1. •Place in /components/[domain]/
2. •Add 'use client' only if using hooks/browser APIs
3. •Define TypeScript interface for props
4. •Follow design tokens from design-tokens.md
5. •Match structure from component-patterns.md
6. •Add named export to domain's index.ts

Creating a Data Function

1. •Place in /lib/data/[domain].ts
2. •Add 'use cache' directive
3. •Add cacheTag('[domain]') for invalidation
4. •Add cacheLife('hours') or 'days'
5. •Export from lib/data/index.ts

See architecture-patterns.md for full examples.

Creating a New Utility

1. •Check if similar function exists in lib/utils.ts
2. •If reusable (2+ files), add to lib/utils.ts
3. •Add JSDoc comment explaining purpose
4. •Import from @/lib/utils everywhere

Reference Files

Load these as needed for detailed patterns and examples:

• •design-tokens.md - Typography, colors, spacing, borders, interactive states
• •component-patterns.md - File organization, component structure, common UI patterns, page layouts
• •architecture-patterns.md - Data fetching, caching, utilities, constants, import order, anti-patterns