Skip to content

.copilot-instructions.md

Latest commit

 

History

History
247 lines (206 loc) · 7.01 KB

.copilot-instructions.md

File metadata and controls

247 lines (206 loc) · 7.01 KB
Raw

Copilot Instructions for Humanet Project

Project Overview

Humanet is a collaborative platform for sharing and developing innovative ideas. It's built with:

  • Frontend: Next.js 15, TypeScript, Tailwind CSS, shadcn/ui
  • Backend: Node.js, Express, TypeScript, MongoDB
  • Architecture: Full-stack TypeScript monorepo with shared types

UI/UX Guidelines

Use shadcn/ui for All Components

Always use shadcn/ui components instead of custom HTML elements or styling:

✅ DO:

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

<Button variant="default" size="lg">Click me</Button>
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>Content here</CardContent>
</Card>

❌ DON'T:

<button className="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>
<div className="border rounded-lg p-4">
  <h3 className="font-bold">Title</h3>
  <p>Content here</p>
</div>

Icon Usage Guidelines

NEVER use emojis or custom SVG icons. Always use professional icon libraries:

✅ DO:

import { Heart, Star, User, Settings, Plus } from 'lucide-react';
import { HeartIcon, StarIcon } from '@heroicons/react/24/outline';
import { HeartIcon as HeartSolid } from '@heroicons/react/24/solid';

<Heart className="w-4 h-4" />
<StarIcon className="w-5 h-5" />
<HeartSolid className="w-4 h-4 text-red-500" />

❌ DON'T:

<span>❤️</span>  // No emojis
<span>⭐</span>  // No emojis
<svg>...</svg>  // No custom SVG icons

Available Icon Libraries

  • Lucide React (lucide-react) - Primary choice for most icons
    • Modern, consistent design
    • Lightweight and tree-shakeable
    • Great for UI actions, objects, arrows, etc.
  • Heroicons (@heroicons/react) - Secondary choice
    • /24/outline - Outline versions
    • /24/solid - Solid versions
    • Good for complementing Lucide icons

Icon Sizing Standards

  • Small icons: w-4 h-4 (16px) - For buttons, inline text
  • Medium icons: w-5 h-5 (20px) - For navigation, cards
  • Large icons: w-6 h-6 (24px) - For headers, prominent actions
  • Extra large: w-8 h-8 (32px) - For empty states, main features

Available shadcn/ui Components

Use these components consistently:

  • Button - all buttons and clickable actions
  • Card, CardContent, CardHeader, CardTitle - content containers
  • Badge - tags, status indicators, counts
  • Input, Label, Textarea - form inputs
  • Select, SelectContent, SelectItem, SelectTrigger, SelectValue - dropdowns
  • Dialog, DialogContent, DialogHeader, DialogTitle - modals
  • DropdownMenu - context menus and user menus
  • Sheet - side panels and mobile navigation
  • Toast (via useToast) - notifications
  • Tabs, TabsContent, TabsList, TabsTrigger - tabbed interfaces

Design System

  • Colors: Use semantic color tokens (primary, secondary, muted, destructive)
  • Typography: Use Tailwind typography classes with shadcn theming
  • Spacing: Use consistent spacing scale (2, 4, 6, 8, 12, 16, 24)
  • Borders: Use border class for consistent 1px borders

Component Patterns

Reddit-like Layout (Ideas Page)

<div className="min-h-screen bg-background">
  <div className="max-w-7xl mx-auto px-4 py-6">
    <div className="flex gap-6">
      {/* Main content - left side */}
      <div className="flex-1 max-w-3xl">
        <div className="space-y-3">
          {/* Cards here */}
        </div>
      </div>
      {/* Sidebar - right side */}
      <div className="w-80 space-y-4">
        {/* Sidebar cards */}
      </div>
    </div>
  </div>
</div>

Interactive Cards

<Card className="hover:border-muted-foreground/20 transition-all duration-200">
  <CardContent className="p-6">
    {/* Content */}
  </CardContent>
  {/* Actions bar at bottom */}
  <div className="border-t bg-muted/30 px-6 py-3">
    <div className="flex items-center justify-between">
      {/* Action buttons */}
    </div>
  </div>
</Card>

User Feedback

Always use Toast notifications for user actions:

import { useToast } from '@/hooks/use-toast';

const { toast } = useToast();

// Success
toast({
  title: "Success!",
  description: "Action completed successfully.",
});

// Error
toast({
  title: "Error",
  description: "Something went wrong.",
  variant: "destructive",
});

Code Style Guidelines

TypeScript

  • Use strict TypeScript with proper typing
  • Import shared types from @humanet/shared
  • Use interfaces for component props
  • Avoid any types

React Patterns

  • Use functional components with hooks
  • Use React Query for data fetching
  • Implement proper loading and error states
  • Use 'use client' for interactive components

File Structure

  • Components in src/components/ui/ (shadcn) or src/components/
  • Pages in src/app/ (App Router)
  • Hooks in src/hooks/
  • Utils in src/lib/
  • Types from shared/src/types/

Authentication

  • Always check auth state with useAuth() hook
  • Redirect to login for protected actions
  • Show appropriate UI for authenticated/unauthenticated states

Error Handling

  • Use React Query's error handling
  • Show user-friendly error messages with Toast
  • Implement proper loading states
  • Handle network errors gracefully

Backend Guidelines

API Design

  • Use RESTful endpoints
  • Implement proper middleware (auth, validation, rate limiting)
  • Return consistent JSON responses
  • Use HTTP status codes correctly

Database

  • Use Mongoose with TypeScript
  • Implement proper validation schemas
  • Use indexes for performance
  • Handle errors gracefully

Security

  • Implement rate limiting
  • Use JWT for authentication
  • Validate all inputs
  • Sanitize user data

Development Workflow

  1. Always use shadcn/ui components - no custom styled components
  2. Implement proper TypeScript - import types from shared package
  3. Use React Query for all API calls
  4. Add Toast notifications for user feedback
  5. Handle loading/error states properly
  6. Test responsive design on different screen sizes
  7. Follow accessibility guidelines - use semantic HTML and ARIA labels

Common Patterns

Form Handling

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';

const MyForm = () => {
  const { toast } = useToast();
  // Form logic here
};

Data Fetching

import { useQuery } from '@tanstack/react-query';
import { Card } from '@/components/ui/card';

const MyComponent = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ['myData'],
    queryFn: fetchMyData,
  });

  if (isLoading) return <Card className="animate-pulse h-32" />;
  if (error) return <ErrorComponent />;
  
  return <div>{/* Render data */}</div>;
};

Remember: Consistency is key - always use shadcn/ui components and follow these patterns for a cohesive user experience.