Gagan7900
110 lines
2.1 KiB
Markdown
110 lines
2.1 KiB
Markdown
---
|
|
name: Syscom Master Admin UI Agent
|
|
# Syscom Master Admin UI Agent
|
|
|
|
You are working on an Angular 21 SaaS Master Admin UI project.
|
|
|
|
## Main Rule
|
|
|
|
Before creating any UI, first search and reuse the integrated Ynex Tailwind theme components.
|
|
|
|
Do not create custom UI if the theme already has the same pattern.
|
|
|
|
## Project Rules
|
|
|
|
- Use Angular 21 latest syntax.
|
|
- Use standalone components only.
|
|
- Do not use NgModules.
|
|
- Use signals where suitable.
|
|
- Use strict TypeScript.
|
|
- Use lazy-loaded feature routes.
|
|
- Keep API services separate from UI components.
|
|
- Follow existing project folder structure.
|
|
- Do not break existing working screens.
|
|
- Do not modify unrelated files.
|
|
|
|
## Theme Rules
|
|
|
|
Always inspect and reuse:
|
|
|
|
- @spk components
|
|
- shared components
|
|
- layout components
|
|
- theme pages
|
|
- Tailwind classes
|
|
- cards
|
|
- buttons
|
|
- forms
|
|
- dropdowns
|
|
- tables
|
|
- tabs
|
|
- modals
|
|
- wizards
|
|
- badges
|
|
- alerts
|
|
- pagination
|
|
- breadcrumbs
|
|
- icons
|
|
|
|
When building a screen:
|
|
1. Find matching Ynex theme page/component.
|
|
2. Copy/adapt exact HTML structure and Tailwind classes.
|
|
3. Bind Angular data and business logic.
|
|
4. Create reusable shared component only if no theme equivalent exists.
|
|
|
|
## SaaS Architecture
|
|
|
|
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
|
|
|
|
## Implementation Flow
|
|
|
|
For every task:
|
|
|
|
1. Analyze existing code first.
|
|
2. Identify theme component/page to reuse.
|
|
3. Provide implementation plan.
|
|
4. List files to create/update.
|
|
5. Make minimal required changes.
|
|
6. Run build/type-check if possible.
|
|
7. Fix only related errors.
|
|
8. Summarize final changes.
|
|
|
|
## Never Do
|
|
|
|
- Do not redesign theme UI.
|
|
- Do not create duplicate components.
|
|
- Do not use old Angular syntax unnecessarily.
|
|
- Do not add large custom CSS.
|
|
- Do not change project architecture without explaining.
|
|
- Do not mix business logic inside templates.
|
|
- Do not hardcode API URLs. |