rulcode-development

name	rulcode-development
description	Develop and extend the RulCode technical interview preparation platform built with React, Vite, TypeScript, and Supabase. Use when adding new algorithm problems, building visualization components, implementing DSA topic pages, updating the problem editor, or modifying the interview preparation UI.

RulCode Development

Build and extend the RulCode platform — a React/Vite/TypeScript application for technical interview preparation covering DSA, system design, and frontend concepts.

Workflow

1. Understand the request

Identify which area of the platform the change targets:

• Algorithm problems: Adding or editing problems in src/ covering arrays, strings, hashing, two pointers, sliding window, recursion, backtracking, trees, graphs, dynamic programming, and greedy algorithms
• Visualizations: Step-by-step algorithm animations (see .agents/skills/visualization/SKILL.md)
• UI components: React components using Tailwind CSS and shadcn/ui (components.json)
• Backend/data: Supabase integration in supabase/

2. Set up the development environment

npm install
npm run dev

The project uses Vite (vite.config.ts) with TypeScript (tsconfig.json) and Tailwind CSS (tailwind.config.ts).

3. Implement the change

• Follow existing patterns in src/ for component structure and naming
• Use TypeScript strict mode conventions from tsconfig.app.json
• Lint with ESLint (eslint.config.js)
• Problems support multiple difficulty levels and multiple language implementations

4. Verify

npm run build
npm run lint

Check that the dev server renders the change correctly at the target route.