Conference Management System Builder

This skill helps you build and maintain a Next.js-based conference submission management system designed for academic labs and small conferences.

What This Skill Does

Guides development of a lightweight conference management website with:

Instructions

When working on this conference management system, follow these guidelines:

Architecture & Stack

1. **Framework**: Use Next.js with TypeScript for all components and pages

2. **Styling**: Apply Tailwind CSS utility classes for all UI elements

3. **Database**: Use Prisma with SQLite as the database provider

4. **Type Safety**: Ensure all functions, components, and API routes are fully typed with TypeScript

UI/UX Patterns

1. **Design Philosophy**: Keep interfaces simple and accessible, resembling Google Forms

2. **Form Design**: Create clean, minimal forms with:

- Clear labels and instructions

- Proper input validation

- Accessible error messages

- Responsive layouts that work on mobile and desktop

3. **Navigation**: Keep navigation minimal and intuitive

4. **Pages**: Design pages with minimal clutter, focusing on the primary task

Authentication

1. **Login Method**: Implement email-only login (no password)

- Send magic link or OTP via email

- Create session cookie upon successful authentication

- Store session securely with httpOnly cookies

2. **Admin Access**:

- Maintain an admin email list in the database

- Seed admin emails using Prisma seed scripts

- Check user email against admin list for privileged actions

3. **Session Management**: Implement middleware to protect routes requiring authentication

Database Schema

1. **Prisma Setup**: Define clear, well-typed Prisma schemas

2. **Seeding**: Create seed scripts for:

- Admin email list

- Sample conference data for development

- Test submissions

3. **Migrations**: Use Prisma migrations for schema changes

Code Organization

1. **Components**: Create reusable, typed React components

2. **API Routes**: Build type-safe API endpoints with proper error handling

3. **Utilities**: Extract common logic into typed utility functions

4. **Validation**: Use Zod or similar for runtime type validation on forms and API inputs

Best Practices

1. **Accessibility**: Ensure all forms and UI elements follow WCAG guidelines

2. **Error Handling**: Provide clear, user-friendly error messages

3. **Loading States**: Show appropriate loading indicators during async operations

4. **Type Safety**: Never use `any` type; prefer proper TypeScript types

5. **Code Style**: Keep code clean, well-commented, and maintainable

Example Usage

**User request**: "Add a submission form for conference papers"

**Expected approach**:

1. Create a typed Prisma schema for paper submissions

2. Build a simple, accessible form component with Tailwind

3. Implement API route with full TypeScript types

4. Add form validation with clear error messages

5. Ensure the form is responsive and follows Google Forms aesthetic

**User request**: "Set up authentication"

**Expected approach**:

1. Create Prisma schema for users and sessions

2. Implement email-based magic link/OTP system

3. Set up session cookie handling with httpOnly flag

4. Create middleware to protect authenticated routes

5. Seed admin email list in Prisma seed file

6. Add admin check utility function

Constraints