nycraves

majiayu000's avatarfrom majiayu000

Complete development guide for the NYCRAVES codebase. Use this skill when creating any new code - components, pages, features, data functions, or utilities. Ensures visual consistency (brutalist dark theme), code consistency (established patterns), and proper Next.js 16 architecture (caching, Server Components, loading states). Triggers on (1) Creating new components, (2) Building new pages, (3) Adding features, (4) Writing data functions, (5) Questions about patterns or conventions.

⭐5stars🔀1forks📁View on GitHub🕐Updated Jan 11, 2026
[Architecture Design]

When & Why to Use This Skill

The NYCRAVES Development Guide is a specialized Claude skill designed to maintain architectural integrity and visual consistency within the NYCRAVES codebase. It streamlines the development process by enforcing Next.js 16 best practices, including Server Components, advanced caching strategies, and a unique brutalist dark-mode design system. By providing instant access to established patterns and conventions, it helps developers write clean, performant, and standardized code for components, data functions, and utilities.

Use Cases

  • 1. Component & Page Creation: Generate new UI elements and layouts that strictly follow the project's brutalist design tokens and TypeScript prop interfaces.
  • 2. Next.js 16 Optimization: Implement high-performance data fetching using 'use cache' directives, cache tags, and proper Server/Client component separation.
  • 3. Code Standardization: Ensure project-wide consistency by applying barrel exports, centralized utility management, and standardized import orders.
  • 4. Technical Onboarding & Reference: Quickly resolve questions about specific project conventions, anti-patterns, and architectural layouts to reduce development friction.
namenycraves
description"Complete development guide for the NYCRAVES codebase. Use this skill when creating any new code - components, pages, features, data functions, or utilities. Ensures visual consistency (brutalist dark theme), code consistency (established patterns), and proper Next.js 16 architecture (caching, Server Components, loading states). Triggers on (1) Creating new components, (2) Building new pages, (3) Adding features, (4) Writing data functions, (5) Questions about patterns or conventions."

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: