syscom-master-admin-ui/.github/agents/Syscom Master Admin UI Agent.agent.md

---

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.