name: backoffice-fullstack
description: Fullstack development skill for WL Backoffice system. Handles feature implementation across Kirby (FE), Coloris.Core (BE API), Proxydia (Gateway), Promodia (Promotion), and Monika (SQL Database). Use when users want to "create new feature", "implement backend API", "create frontend component", "add new stored procedure", "create database table", or any fullstack development task for the backoffice system.
metadata:
version: 3.3.0
last_updated: 2025-02-02
author: Claude
tags: [fullstack, kirby, coloris-core, proxydia, monika, promodia, backoffice, vue, csharp, sql, grpc]

Backoffice Fullstack Development Skill

⚠️ FIRST: Load Memory

Before starting any task, read memory files to restore context:

.memory/learnings.json  ← Patterns, conventions, dev settings
.memory/tables.md       ← Table structures discovered
.memory/domain/         ← Feature-specific knowledge

Development Settings (from memory):
- WebId = 1 (1company)
- Check tables in Monika project files, never SELECT *
- Use /artemis-debug-secure for STG queries

A comprehensive skill for developing features across the WL Backoffice system stack.

Performance

Features

v3.0.0 Features

Multi-Agent Parallel Execution

3x faster development by running agents in parallel:

Phase 1: DB (Sequential)     → 5-8 min
Phase 2: BE + FE (Parallel)  → 5-8 min (instead of 20-25 min)
Phase 3: FE Integration      → 2-4 min
Total: 12-20 min (was 30-45 min)

Files:
- agents/parallel-execution-guide.md - Full documentation
- prompts/agent-dependencies.json - Task dependency graph
- prompts/batch-spawn-templates.md - Ready-to-use spawn prompts

Automatic Pattern Detection

8 core patterns automatically detected and validated:

Files:
- pattern-detection/pattern-signatures.json - Regex patterns
- pattern-detection/pattern-detector.md - Detection workflow
- pattern-detection/code-generation.md - Stub generation

v3.2.0 Features

Programmatic Pattern Validation

Validate generated code against pattern-signatures.json:

# Validate specific layer
python scripts/pattern-validator.py --path /path/to/feature --layer fe

# Validate all layers
python scripts/pattern-validator.py --path /path/to/feature --layer all

# Generate markdown report
python scripts/pattern-report.py --input violations.json --output report.md

Full Automation Suite

Expanded Template Library (22 Total)

New Templates:
- fe-dialog-template.vue - Modal dialog for create/edit
- fe-filter-form-template.vue - Reusable filter component
- fe-form-validation-template.ts - Form validation rules
- be-test-template.cs - xUnit tests for controllers
- db-sp-search-template.sql - Full-text search SP
- db-sp-bulk-template.sql - Bulk operations SP

v3.1.0 Features

FE Testing with Screenshot Proof

Test Kirby frontend with Playwright and capture visual proof:

python scripts/fe-test-template.py \
  --url "http://localhost:8080/v2/feature-page" \
  --output "/tmp/fe-tests"

Test Patterns:
- Page Load Test
- Table Data Test
- Filter Form Test
- Column Toggle Test
- Export Test
- Form Validation Test

Files:
- playbooks/fe-testing.md - Full testing guide
- scripts/fe-test-template.py - Test script template

Architecture Overview

┌─────────────────────────────────────────────────────────────────┐
│                        FRONTEND (Kirby)                         │
│  Vue 3 + TypeScript + Element Plus                              │
│  Path: /Users/rithytep_1/projects/Nuxt/kirby                    │
├─────────────────────────────────────────────────────────────────┤
│                    BACKEND API (Coloris.Core)                   │
│  .NET 7+ | Web API | Main backend for Kirby                     │
│  Path: /Users/rithytep_1/projects/BackEnd/Coloris.Core          │
├─────────────────────────────────────────────────────────────────┤
│                       GATEWAY (Proxydia)                        │
│  gRPC Gateway | Routes promotion calls to Promodia              │
│  Path: /Users/rithytep_1/projects/BackEnd/proxydia              │
├─────────────────────────────────────────────────────────────────┤
│                 PROMOTION SERVICE (Promodia)                    │
│  gRPC Microservice | Promotion & VIP logic                      │
│  Path: /Users/rithytep_1/projects/BackEnd/promodia              │
├─────────────────────────────────────────────────────────────────┤
│                        DATABASE (Monika)                        │
│  SQL Server + Stored Procedures                                 │
│  Path: /Users/rithytep_1/projects/BackEnd/monika                │
└─────────────────────────────────────────────────────────────────┘

Service Routing

Note: Coloris (legacy .NET Framework) exists but new development uses Coloris.Core (.NET 7+).

Critical: Work Within Existing Code

DO NOT create new services/controllers/repositories. ADD methods to existing ones.

Only create NEW service/controller if:
- Feature is a completely new module/domain
- Existing service would exceed 500+ lines
- Feature has completely different dependencies

Development Flow

Full Stack Order

Standard Features:

Database (Monika) → Backend (Coloris.Core) → Frontend (Kirby)

Promotion Features:

Database (Monika) → Promodia → Proxydia → Coloris.Core → Frontend (Kirby)

Frontend Flow (CustomerRecordReport Pattern)

Model → apiCalling.ts → apis.ts → FakeData → Composable → Component → Router

Backend Flow (Coloris.Core)

Model → Repository → Service → Controller → Register DI

Promotion Flow (Coloris.Core → Proxydia → Promodia)

Coloris.Core Controller → Proxydia gRPC Client → Promodia gRPC Service → Repository → Monika SP

Database Flow (Monika)

Table → Stored Procedure → InsertData (sp_lookup registration)

File Reference

Quick Reference

API Layer (ONLY 2 FILES)

src/libraries/apiCalling.ts  → ALL API methods (callGetFeature)
src/libraries/apis.ts        → Wrapper layer (composables use this)

SP Versioning (REQUIRED)

-- Format: {Service}_{Feature}_{Action}_{Major}.{Minor}.{Patch}
Coloris_Player_GetNotes_1.0.0
Promodia_GetMemberPromotion_1.2.0

SP Registration (InsertData.sql)

INSERT [dbo].[SimpleSettings]
  ([Website], [IsUAT], [Type], [Id], [Value], ...)
VALUES
  (N'Coloris', 0, N'sp_lookup', N'Coloris_Player_GetNotes',
   N'[dbo].[Coloris_Player_GetNotes_1.0.0]', ...)

Error Codes

Coding Conventions (MUST FOLLOW)

General Rules

TypeScript (Kirby)

// WRONG - never use 'any'
const data: any = response.data;

// CORRECT - create interface
interface IPlayerData {
  PlayerId: number;
  PlayerName: string;
}
const data: IPlayerData = response.data;

Type Consistency Across Layers

IDs must be consistent types across all layers:

SQL (Monika)

-- Use GETDATE(), not GETUTCDATE()
SELECT * FROM Players WHERE CreatedOn > GETDATE()

-- Let Coloris.Core validate dates, not Monika

C# (Coloris.Core)

// Add to existing controller
[HttpPost]
[Route("v2/new-endpoint")]
public async Task<ApiResponseWithMessage<Response>> NewEndpoint(Request req)
{
    if (Request.Path.ToString().Contains("/v2/"))
    {
        var userData = req.GetUserData();
        req.WebId = userData.WebId;
    }
    var response = await _service.NewMethod(req);
    return new ApiResponseWithMessage<Response>(response);
}

// Don't create new controller - add to existing PromotionController

Translation (i18n)

Tool: WL Translation Engine

// In composables
import { t } from '@/libraries/vue-i18n'
const msg = t('translation_key')

<!-- In templates -->
{{ $t('translation_key') }}

Usage Examples

Example 1: Full Feature

User: Create a player notes feature

Claude:
1. Load domain knowledge (03-membership.md)
2. Design PlayerNote table in Monika
3. Create stored procedures (CRUD)
4. Register SP in InsertData.sql
5. Create C# models, repository, service, controller
6. Create TypeScript model with ForDisplay getters
7. Add methods to apiCalling.ts and apis.ts
8. Create composable using apis wrapper
9. Create Vue component with ColumnToggle
10. Add route with authorizeRoute

Example 2: FE Only

User: Add a new report page for withdrawal summary

Claude:
1. Follow CustomerRecordReport pattern
2. Create model in src/models/report/
3. Add to apiCalling.ts and apis.ts
4. Create composable with IColumnsDynamic
5. Create Vue component
6. Add route entry

Example 3: DB Only

User: Add audit log table for player actions

Claude:
1. Create table in appropriate schema
2. Create versioned SP (1.0.0)
3. Add to InsertData.sql for sp_lookup
4. Document in shared-memory.md

Domain Knowledge

Load relevant files from docs/backoffice/ before implementation:

Sub-Agents

This skill uses specialized sub-agents for parallel development:

Kirby FE Agent

• Focus: Vue components, composables, API integration
• Pattern: CustomerRecordReport flow
• Key files: apiCalling.ts, apis.ts, FakeAPI.ts
• Guide: agents/kirby-fe-agent.md

Coloris.Core BE Agent

• Focus: C# Controllers, Services, Repositories (.NET 7+)
• Pattern: Repository pattern with Dapper
• Key files: Controllers/, Services/, Repository/
• Path: /Users/rithytep_1/projects/BackEnd/Coloris.Core
• Guide: agents/coloris-core-be-agent.md

Proxydia Agent (Gateway)

• Focus: gRPC gateway routing to Promodia
• Pattern: gRPC Client → Promodia Service calls
• When: Promotion features that need Promodia
• Path: /Users/rithytep_1/projects/BackEnd/proxydia
• Guide: agents/proxydia-agent.md

Promodia Agent (Promotion Service)

• Focus: Promotion logic, VIP features
• Pattern: gRPC + Strategy pattern (not REST)
• SP Prefix: Promodia_
• Path: /Users/rithytep_1/projects/BackEnd/promodia
• Guide: agents/promodia-agent.md

Monika DB Agent

• Focus: SQL tables, stored procedures
• Pattern: Versioned SPs with InsertData registration
• Key files: Tables/, Stored Procedures/, InsertData.sql
• Guide: agents/monika-db-agent.md

Promotion Feature Flow

For promotion-related features, the full flow is:

Kirby (FE) → Coloris.Core (BE) → Proxydia (Gateway) → Promodia (Service) → Monika (DB)

Agents involved (in order):
1. Monika DB Agent - Create tables, SPs with Promodia_ prefix
2. Promodia Agent - Implement gRPC service, strategies, repository
3. Proxydia Agent - Add gRPC client call routing
4. Coloris.Core Agent - Create controller calling Proxydia
5. Kirby FE Agent - Create UI components

Learning Prompts

After completing an implementation, capture knowledge for future sessions:

Workflow:

1. Complete implementation
2. Commit code changes
3. Update memory files
4. Commit memory (separate commit)

Example learning entry:

{
  "pattern_name": "description",
  "learned_from": "source file",
  "usage": "when to apply"
}

Git Contribution

Commit Message Format (Skill Updates)

[BackofficeFullstack] {Type} v{Major}.{Minor}.{Patch} - {Description}

Types:
| Type | Usage |
|------|-------|
| Init | Initial release |
| Feature | New feature or major addition |
| Fix | Bug fix |
| Docs | Documentation only |
| Refactor | Code restructure without new features |

Commit Message Format (Feature Branches)

For feature implementation in Kirby/Coloris/Monika projects:

[FeatureName] Action: Brief description

Branch Pattern: Feature/{FeatureName} → Extract FeatureName

Actions:
| Action | Usage |
|--------|-------|
| Add | New functionality |
| Update | Modify existing |
| Fix | Bug fix |
| Remove | Delete code |
| Refactor | Restructure |

Examples:

# Branch: Feature/PromotionInsight
git commit -m "[PromotionInsight] Add: overview page with KPI cards"
git commit -m "[PromotionInsight] Add: detail page charts"
git commit -m "[PromotionInsight] Fix: divide by zero in ROI calculation"

# Branch: Feature/MenuSettings
git commit -m "[MenuSettings] Add: icon upload with validation"
git commit -m "[MenuSettings] Update: column toggle functionality"

Workflow:

# 1. Get branch name
git branch --show-current  # Feature/PromotionInsight

# 2. Stage changes
git add <files>

# 3. Commit (DO NOT push automatically)
git commit -m "[PromotionInsight] Add: description"

# 4. Push manually when ready
git push

Git Tag Format

# Create annotated tag after version commit
git tag -a backoffice-fullstack-v{version} {commit} -m "BackofficeFullstack v{version} - {description}"

# Example
git tag -a backoffice-fullstack-v2.2.0 2bc7ba9 -m "BackofficeFullstack v2.2.0 - Learning & Validation"

# Push tags to remote
git push origin --tags

Version Bump Workflow

1. Implement changes
2. Update VERSION.md changelog
3. Update SKILL.md version + changelog
4. Commit: [BackofficeFullstack] Feature vX.Y.Z
5. Tag: git tag -a backoffice-fullstack-vX.Y.Z HEAD -m "..."
6. Push: git push && git push --tags

CLI Commands

# Frontend dev server (staging)
cd /Users/rithytep_1/projects/Nuxt/kirby && npm run serve:stg

# Build Coloris.Core
cd /Users/rithytep_1/projects/BackEnd/Coloris.Core && dotnet build

# Build Coloris (legacy)
cd /Users/rithytep_1/projects/BackEnd/Coloris/coloris/Coloris && dotnet build

# Build Proxydia
cd /Users/rithytep_1/projects/BackEnd/proxydia && dotnet build

# Build Promodia
cd /Users/rithytep_1/projects/BackEnd/promodia && dotnet build

# Test API endpoint
curl -X POST "http://localhost/api/{feature}/v2/{endpoint}" \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json" \
  -d '{"WebId": 1, "PageIndex": 1, "PageSize": 25}'

Changelog

v3.3.0 (2025-02-02)

• Architecture Correction - Updated to correct promotion feature flow
• Added Coloris.Core as the main backend (not legacy Coloris)
• Added Proxydia gateway layer for promotion routing
• Updated flow: Kirby → Coloris.Core → Proxydia → Promodia → Monika
• Added agents/coloris-core-be-agent.md for Coloris.Core development
• Added agents/proxydia-agent.md for gateway development
• Updated sub-agents section with complete promotion flow
• Updated CLI commands for all projects
• Clarified Coloris (legacy) vs Coloris.Core (.NET 7+) distinction

v3.2.0 (2025-01-08)

• Programmatic Pattern Validation - Python scripts for code validation
• Full Automation Suite - 6 new automation scripts
• Expanded Template Library - 22 templates (6 new)
• Added scripts/pattern-validator.py - Pattern detection with line numbers
• Added scripts/pattern-report.py - Markdown report generation
• Added scripts/be-test-template.py - BE API testing with requests
• Added scripts/validate-templates.py - Template syntax validation
• Added scripts/sp-validator.py - SQL SP naming convention validator
• Added scripts/stubgen.py - Code stub generator from API contract
• Added scripts/mock-server.py - Flask-based API mock server
• Added scripts/scaffold-feature.py - Full feature scaffolding
• Added templates/fe-dialog-template.vue - Modal dialog component
• Added templates/fe-filter-form-template.vue - Reusable filter form
• Added templates/fe-form-validation-template.ts - Form validation rules
• Added templates/be-test-template.cs - xUnit controller tests
• Added templates/db-sp-search-template.sql - Full-text search SP
• Added templates/db-sp-bulk-template.sql - Bulk operations SP

v3.1.0 (2025-01-08)

• FE Testing - Playwright tests with screenshot proof
• Added playbooks/fe-testing.md - Testing patterns and examples
• Added scripts/fe-test-template.py - Reusable test script
• URL format: http://localhost:8080/v2/{page}

v3.0.0 (2025-01-08)

• Multi-Agent Parallel Execution - 3x faster feature development
• Automatic Pattern Detection - 8 patterns with violation checking
• Added agents/parallel-execution-guide.md
• Added prompts/agent-dependencies.json
• Added prompts/batch-spawn-templates.md
• Added pattern-detection/pattern-signatures.json
• Added pattern-detection/pattern-detector.md
• Added pattern-detection/code-generation.md
• Updated orchestrator with v3.0.0 protocol

v2.2.1 (2025-01-08)

• Added Git Contribution section (commit format, tag format, workflow)
• Created git tags for all versions (v1.0.0 → v2.2.0)

v2.2.0 (2025-01-08)

• Added FE composable template with export and column toggle
• Added Promodia agent guide (gRPC architecture)
• Added validation playbook (FE/BE/DB patterns)
• Added learning prompts section for knowledge capture
• Updated sub-agents section with Promodia

v2.1.0 (2025-01-08)

• Added auto-load memory on session start
• Added BE templates (controller, service, repository, model)
• Added DB templates (table, SP CRUD, insertdata)
• Added memory strategy for session persistence
• Renamed memory/ to .memory/ (hidden folder)

v2.0.0 (2025-01-08)

• Added CustomerRecordReport flow pattern for FE
• Clarified API layer: only apiCalling.ts + apis.ts
• Added apis.ts wrapper layer documentation
• Added SP versioning and InsertData patterns
• Added IColumnsDynamic for dynamic columns
• Reorganized folder structure (docs, templates, playbooks)
• Added INDEX.md quick reference
• Added VERSION.md for tracking

v1.0.0 (2025-01-08)

• Initial skill creation
• Basic FE/BE/DB workflows
• Domain knowledge documentation