syscom-master-admin-ui/.github/instructions/Project Instructions Syscom Master Admin UI.instructions.md

Project Instructions: Syscom Master Admin UI

This project is an Angular 21 SaaS Master Admin UI using the Ynex Tailwind Angular theme.

Core Rules

• Use Angular 21 latest features.
• Use standalone components only.
• Do not use NgModules.
• Use signals where suitable.
• Use strict TypeScript.
• Use lazy-loaded feature routes.
• Use environment-based API URLs.
• Keep components clean and small.
• Keep services separate from UI components.
• Do not modify unrelated files.
• Do not break existing working functionality.

Theme Rules

The Ynex Tailwind theme is already copied into the project.

Before creating any UI:

1. Search existing theme files first.
2. Reuse existing theme components and classes.
3. Match the exact Ynex design.
4. Do not create custom UI if theme equivalent exists.
5. Do not add large custom CSS.
6. Prefer theme cards, buttons, dropdowns, forms, tables, tabs, modals, badges, alerts, pagination, breadcrumbs, icons and wizards.

Use existing folders like:

• src/app/@spk
• src/app/components
• src/app/shared
• public/assets
• src/styles.scss

Strict Ynex Theme Reuse Policy

The Ynex folder is the single source of truth for UI implementation.

Treat the folder Ynex as the authoritative reference for:

• UI design
• HTML structure
• component structure
• Tailwind classes
• SCSS/CSS classes
• spacing
• typography
• colors
• cards
• forms
• inputs
• dropdowns
• tables
• buttons
• modals
• dialogs
• tabs
• accordions
• steppers
• wizards
• badges
• alerts
• pagination
• breadcrumbs
• page headers
• navigation
• sidebar
• topbar
• loaders
• empty states
• icons
• responsive behavior

Before creating or modifying any application UI:

1. Search the Ynex folder first.
2. Find the closest existing Ynex page, component, or UI pattern.
3. Inspect its actual source files.
4. Reuse or adapt the exact HTML structure and theme classes from that implementation.
5. Add only the Angular bindings and business logic required by the application.

Do not design UI from scratch. Do not create custom UI when an equivalent Ynex implementation exists.

Source priority for UI work:

1. Ynex/src/app
2. src/app/@spk
3. src/app/components
4. src/app/shared

Do not create a new reusable UI component when an equivalent implementation already exists in Ynex or the application.

For every new UI screen or component, provide a short implementation analysis before coding:

1. Requirement understanding
2. Ynex files/pages inspected
3. Closest matching Ynex page/component
4. Reusable @spk components found
5. Existing application components that can be reused
6. Exact HTML/theme pattern that will be followed
7. Files to create or modify
8. Whether any custom CSS is required and why

Custom CSS and SCSS are not allowed by default. Reuse existing theme classes whenever possible.

Architecture Rules

Use this structure:

src/app/core
├── auth
├── guards
├── interceptors
├── services
├── models
└── config

src/app/shared
├── components
├── directives
├── pipes
└── utils

src/app/layout
├── app-shell
├── sidebar
├── topbar
└── breadcrumb

src/app/features
├── global-masters
├── users
├── tenants
├── billing
├── localization
├── theming
├── platform
└── monitoring