Add the start of a note UI

.github/.copilot-instructions.md

@@ -0,0 +1,25 @@
+# Copilot Instructions for FTA-Notepad
+
+## Project Overview
+FTA-Notepad: SvelteKit web app for FIRST Robotics Competition field technical advisors. Client-side app for real-time collaboration on match notes, issues, and team interactions.
+
+## Tech Stack
+- **Frontend**: SvelteKit 2.x + Svelte 5.x + TypeScript
+- **Styling**: Tailwind CSS v4 (CSS-based config, NO tailwind.config.js)
+- **Build**: Vite 6.x with `@tailwindcss/vite` plugin
+- **Package Manager**: npm
+- **Icons**: @steeze-ui/heroicons, **Data**: D3.js, **Realtime**: SignalR
+
+## Development
+```bash
+cd ui && npm run dev
+```
+
+## File Structure
+```
+ui/src/
+├── lib/components/     # Svelte components
+├── routes/            # SvelteKit pages  
+├── fms/              # Field Management System
+└── app.css           # Tailwind config
+```

ui/README.md

@@ -2,6 +2,18 @@
 
 Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
 
+## Shared Styles
+
+This project uses a focused approach to shared styles in `src/lib/styles.ts`. Only genuinely reusable patterns that appear across multiple components are centralized:
+
+- **Form inputs** - Standard input styling for consistent form appearance
+- **Badges** - Color-coded badges used in notes, match cards, and team cards
+- **Section headers** - Interactive headers for collapsible sections
+- **Empty states** - Consistent styling for "no data" states
+- **Error states** - Error messaging and retry button styling
+
+**Philosophy**: Keep component-specific and one-off styles local to the component. Only centralize styles that are truly shared to maintain a consistent visual theme while avoiding over-abstraction.
+
 ## Developing
 
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: