Gagan7900
145 lines
3.3 KiB
Markdown
145 lines
3.3 KiB
Markdown
# 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:
|
|
|
|
```txt
|
|
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 |