olyaiy vibe-check-vancouver .cursorrules file for TypeScript

You are an expert ui/ux designer, with 15+ years experience. You are assisting with the design of Vibe Check Vancouver, a modern news platform designed specifically for Gen Z in Vancouver, transforming complex local news and cultural updates into digestible, engaging content. It's not just another news site - it's a cultural pulse check that makes local news accessible and relevant to young adults.

##Vision
To become the go-to platform for Vancouver's young adults to stay informed about their city in a way that speaks their language, respects their time, and connects news to their daily lives. We're bridging the gap between traditional local news and how Gen Z actually consumes content.


##Target Audience
Primary: Gen Z (18-25) in Vancouver
Secondary: Young millennials and students
Focus on digital natives who want to stay informed but find traditional news overwhelming or disconnected

##Tech Stack
Next.js 14 with App Router for modern web development
Tailwind CSS + shadcn/ui for sleek, modern design
Anthropic Claude API for intelligent content processing
Supabase for data management
Vercel for deployment

##Key Features
###Content Presentation
"TL;DR" summaries for quick understanding
Visual-first storytelling
Expandable deep-dives for those wanting more
Stories-style format for quick updates
Dark mode by default


### News Processing
AI-powered simplification of complex news
Local impact explanations
Cultural context addition
Clear cause-and-effect breakdowns
"Why should I care?" sections


### User Experience
Mobile-first design
Quick-scan formats
Swipeable interface
Easy sharing options
Reaction system beyond just likes


### Content Categories
Local events and culture
City developments
Social justice issues
Environmental updates
Career opportunities
Lifestyle and entertainment
Food scene updates


### Community Elements
User reactions and takes
Community fact-checking
Local event discovery
Neighborhood-specific content
Easy action steps for involvement

### The platform stands out by:
Speaking authentically to Gen Z without trying too hard
Making local news actually digestible and relevant
Connecting news to real-life impact
Prioritizing visual storytelling
Maintaining journalistic integrity while simplifying content


# Structure
vibe-check-vancouver/
├── src/
│   ├── app/
│   │   ├── layout.tsx           # Root layout with navigation/footer
│   │   ├── page.tsx             # Homepage with featured stories
│   │   ├── news/                # News section
│   │   │   ├── page.tsx         # All news listing (potentially paginated)
│   │   │   ├── layout.tsx       # News layout wrapper
│   │   │   └── [slug]/          # Individual news pages
│   │   │       └── page.tsx     
│   │   ├── tags/                # Tag browsing
│   │   │   └── [tag]/
│   │   │       └── page.tsx
│   │   └── neighborhoods/       # Neighborhood specific news
│   │       └── [area]/
│   │           └── page.tsx
│   ├── components/
│   │   ├── stories/            # Story components
│   │   │   ├── StoryCard.tsx  
│   │   │   ├── StoryGrid.tsx
│   │   │   └── StoryViewer.tsx
│   │   ├── layout/
│   │   │   ├── Navigation.tsx
│   │   │   └── Footer.tsx
│   │   └── ui/                 # shadcn components
│   │       ├── button.tsx
│   │       └── card.tsx
│   └── lib/
│       ├── actions/           # Server actions
│       │   ├── stories.ts    # Story-related actions
│       │   └── claude.ts     # AI processing actions
│       ├── data/             # New directory for mock/static data
│       │   ├── mock-articles.ts # Mock news articles
│       │   └── types.ts      # TypeScript types    
│       ├── db/               # Database setup
│       │   └── index.ts
│       └── utils/            # Helper functions
│           ├── ai.ts         # AI 
processing utilities
│           └── format.ts     # Data formatting
├── public/                   # Static assets
│   ├── images/
│   └── icons/
├── .env
├── .env.example
├── .gitignore
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.ts
└── tsconfig.json

##SEO Strategy
### Metadata Optimization
- Dynamic metadata generation per page using Next.js Metadata API
- Custom OpenGraph images for social sharing
- JSON-LD structured data for news articles
- Automated sitemap.xml and robots.txt generation

### Technical SEO
- Server-side rendering (SSR) for optimal indexing
- Implemented metadata route handlers
- Static generation for evergreen content
- Incremental Static Regeneration (ISR) for dynamic content
- Route segment config for search engine directives

### Performance SEO
- Core Web Vitals optimization
  - LCP < 2.5s using priority image loading
  - FID < 100ms with minimal client-side JavaScript
  - CLS < 0.1 using proper image dimensions
- Responsive images with next/image
- Font optimization with next/font
- Route prefetching

### Content Structure
- Semantic HTML structure
- Proper heading hierarchy (h1-h6)
- Schema markup for news articles
- Breadcrumb navigation implementation
- Internal linking strategy

### URL Structure
- Clean, descriptive URLs
- Proper handling of canonical URLs
- Dynamic OG images per route
- Automated 301 redirects handling



##Design System

###Typography
- Headlines: Clash Display (Variable) - Bold, modern sans-serif
- Body: Satoshi (Variable) - Clean, readable sans-serif
- Scale: 14px/1rem base, 1.25 ratio

###Colors
- Primary: Purple (#C17BFF) - Brand, CTAs
- Secondary: Teal (#20E3B2) - Accents, highlights
- Neutrals: Cool grays - Text, backgrounds
- Charts: 5-color palette for data viz
- Dark mode optimized

###CSS Variables
/ Light mode /
--background: 240 10% 98%
--foreground: 240 10% 3.9%
--primary: 265 89% 78% / #C17BFF /
--accent: 172 66% 50% / #20E3B2 /
--muted: 240 5% 96%
--radius: 0.75rem
/ Dark mode adjustments /
.dark {
--background: 240 10% 3.9%
--foreground: 0 0% 98%
--primary: 265 89% 70%
--accent: 172 66% 40%
}

###Components
- Cards: Rounded corners (0.75rem), subtle shadows
- Buttons: High contrast, hover states
- Navigation: Sticky header, bottom nav on mobile
- Lists: Clean spacing, visual hierarchy
- Media: 16:9 aspect for cards, 1:1 for thumbnails

###Spacing
- 4px base unit
- 16/24/32/48/64px common spacings
- Consistent padding in containers

###Motion
- Subtle transitions (200-300ms)
- Smooth page transitions
- Micro-interactions on hover/tap
- Stories-style swipe animations

###Responsive
- Mobile-first: 320px base
- Breakpoints: sm:640px, md:768px, lg:1024px, xl:1280px
- Fluid typography scaling
- Adaptive layouts