GitHub Copilot Development Guidelines
This skill enforces development guidelines and architectural patterns for the TopShelfLiveInventory application, a modular Vue 3-based inventory management system with Google Sheets backend.
Communication & Documentation Standards
**Professional Objectivity:**
Do NOT use excessive validation or praise phrases like "You're absolutely correct!" or "I can see the issue!"Prioritize technical accuracy and brevity over emotional validationOnly make markdown files or documentation when explicitly requestedNEVER create files like `docs/notes/implementation-complete.md` or `docs/notes/summary-of-work.md`**Code Quality Principles:**
Prioritize simplicity and modularityRemove unused code proactivelyOnly add new systems when absolutely necessaryWork within existing application structure and patternsProject Architecture
Domain Structure
The application manages three core domains:
1. **Inventories**: Lists of items with current information, stored in warehouse crates
2. **Pack Lists**: Items to be packed for shows with quantities and details
3. **Production Schedule**: Show schedules and related production tasks
File Organization
Code is organized under `docs/` with these subfolders:
`docs/css/`: Stylesheets`docs/images/`: Images`docs/js/`: Main application logic`docs/notes/`: Notes (minimal use)Three-Layer Architecture
**Layer 1: Presentation (Vue 3 UI)**
Location: `docs/js/application/components/`Manages reactive state and lifecycleCommunicates ONLY through API layer for persistent dataNever access data directlyComponent organization:
`content/`: Domain-specific components (inventory, pack lists, production). Most API interactions happen here.`dashboard/`: User-customizable home page components`interface/`: Reusable UI elements (modals, buttons, tables, forms)`navigation/`: Application routing and navigation**Layer 2: API/Data Management**
Location: `docs/js/data_management/`Provides clean interface for data operationsHandles caching and cache invalidation automaticallyAll data access MUST go through this layerDomain abstractions:
`database.js`: Database abstraction layer for Google Sheets Services`application-utils.js`: Application-specific operations (user data storage/retrieval)`inventory-utils.js`: Inventory data management and workflows`packlist-utils.js`: Pack list data management`production-utils.js`: Production data management**Layer 3: Google Sheets Services**
Location: `docs/js/google_sheets_services/`Handles ALL direct Google Sheets interactionManages authentication, queries, and Google-specific logicShould NEVER be accessed directly by UI or application logicData Flow Rules
1. **UI → API → Google Sheets Services**: All data flows through these layers in order
2. **Caching**: Automatically managed by API layer using `wrapMethods`
3. **User Data**: Stored in dedicated CACHE sheet tabs, managed by `application-utils.js`
4. **No Direct Access**: UI must never access Google Sheets Services or database directly
Development Environment
**Local Development:**
VSCode LiveServer runs at `http://127.0.0.1:5500/docs/#`No build step required (JS/CSS/HTML used directly)Google Sheets data requires deployment to web server**Testing & Debugging:**
Database abstraction switches between fake and real Google Sheets based on environmentUse browser console logging and Vue devtools for UI debuggingManual testing for API endpointsChanges in Google Sheets services must be reflected in `FakeGoogle.js` for local testingImplementation Guidelines
When writing code for this project:
1. **Respect the layers**: Never bypass the architecture (UI → API → Google Sheets)
2. **Use existing patterns**: Check domain utilities before creating new systems
3. **Clean as you go**: Remove unused code immediately
4. **Component placement**: Put new Vue components in the correct subfolder based on function
5. **API-first**: All persistent data operations go through API layer
6. **Cache-aware**: Let the API layer handle caching; don't implement manual cache logic
7. **Test locally**: Use FakeGoogle.js for local development without Google Sheets access
Common Patterns
**User-specific data**: Use `application-utils.js` methods for CACHE sheet tab management**Domain data**: Use appropriate domain utility (inventory/packlist/production)**UI state**: Manage reactively within Vue components; don't persist unless necessary**Google operations**: Always go through Google Sheets Services layer with proper error handlingDevelopment Status
This application is in active development on a development branch and not yet in production. Breaking changes are acceptable if they improve architecture or simplicity.