Merge pull request #5 from cornell-dti/annie/setup-design-system

Design System Setup

Author: anchen9

.cursor/rules/frontend/figma.md

@@ -0,0 +1,29 @@
+## Figma MCP Integration Rules
+
+These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.
+
+### Required flow (do not skip)
+
+1. Run get_design_context first to fetch the structured representation for the exact node(s).
+2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
+3. Run get_screenshot for a visual reference of the node variant being implemented.
+4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
+5. Translate the output (usually React + Tailwind) into this project’s conventions, styles and framework.  Reuse the project’s color tokens, components, and typography wherever possible.
+6. Validate against Figma for 1:1 look and behavior before marking complete.
+
+### Implementation rules
+
+- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
+- Replace Tailwind utility classes with the project’s preferred utilities/design‑system tokens when applicable.
+- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
+- Use the project’s color system, typography scale, and spacing tokens consistently.
+- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
+- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
+- Validate the final UI against the Figma screenshot for both look and behavior.
+
+### Figma MCP server rules
+
+  - The Figma MCP server provides an assets endpoint which can serve image and SVG assets
+  - IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
+  - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
+  - IMPORTANT: do NOT use or create placeholders if a localhost source is provided

.github/workflows/ci.yml

@@ -16,3 +16,5 @@ jobs:
         run: bun run type-check
       - name: Lint check
         run: bun run lint
+      - name: Format check
+        run: bun run format:check

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# AI
+CLAUDE.md

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+pnpm-lock.yaml
+convex/_generated

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -17,9 +17,9 @@ If you are developing a production application, we recommend updating the config
 
 ```js
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     extends: [
       // Other configs...
 
@@ -34,40 +34,40 @@ export default defineConfig([
     ],
     languageOptions: {
       parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
         tsconfigRootDir: import.meta.dirname,
       },
       // other options...
     },
   },
-])
+]);
 ```
 
 You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
 
 ```js
 // eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+import reactX from "eslint-plugin-react-x";
+import reactDom from "eslint-plugin-react-dom";
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     extends: [
       // Other configs...
       // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
+      reactX.configs["recommended-typescript"],
       // Enable lint rules for React DOM
       reactDom.configs.recommended,
     ],
     languageOptions: {
       parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
         tsconfigRootDir: import.meta.dirname,
       },
       // other options...
     },
   },
-])
+]);
 ```

ai/data/dummy_data.json

@@ -89,4 +89,4 @@
     "location": "New York City",
     "tags": ["program", "first-year", "professional-track"]
   }
-]
+]

ai/prompts/clubSummary.ts

@@ -22,5 +22,5 @@ Here are the events for this club (JSON):
 \`\`\`json
 ${JSON.stringify(events, null, 2)}
 \`\`\`
-`
-}
+`;
+}

ai/prompts/weeklySummary.ts

@@ -44,5 +44,5 @@ Now write the digest based on this JSON:
 \`\`\`json
 ${JSON.stringify(events, null, 2)}
 \`\`\`
-`
-}
+`;
+}

ai/summarize.ts

@@ -1,14 +1,14 @@
 import { GoogleGenAI } from "@google/genai";
 
 const ai = new GoogleGenAI({
-    apiKey: process.env.GEMINI_API_KEY,
-})
+  apiKey: process.env.GEMINI_API_KEY,
+});
 
 export async function generateSummary(prompt: string) {
   const res = await ai.models.generateContent({
     model: "gemini-2.5-flash",
-    contents: prompt
-  })
+    contents: prompt,
+  });
 
-  return res.text
-}
+  return res.text;
+}