---

name: backoffice-fullstack description: Fullstack development skill for WL Backoffice system. Handles feature implementation across Kirby (FE), Coloris (BE API), 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: 4.1.0 last_updated: 2025-01-20 author: Claude tags: [fullstack, kirby, coloris, monika, promodia, proxydia, backoffice, vue, csharp, sql]

Backoffice Fullstack Development Skill

New here? Start with QUICK-START.md for fast onboarding.

Quick Navigation

---

⚠️ FIRST: Load Memory

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

Copy.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:

CopyPhase 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:

Copy# 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:

Copypython 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

Copy┌─────────────────────────────────────────────────────────────────┐
│                        FRONTEND (Kirby)                         │
│  Vue 3 + TypeScript + Element Plus                              │
│  Path: $FE/kirby                                                │
├─────────────────────────────────────────────────────────────────┤
│                     BACKEND API (Coloris.Core)                  │
│  .NET Core + C# + Web API                                       │
│  Path: $BE/coloris/Coloris.Core/Coloris.Core                    │
│  ⚠️ IMPORTANT: Work in Coloris.Core, NOT Coloris folder         │
├─────────────────────────────────────────────────────────────────┤
│                     REST GATEWAY (Proxydia)                     │
│  REST to gRPC translation layer                                 │
│  Path: $BE/proxydia                                             │
├─────────────────────────────────────────────────────────────────┤
│                     PROMOTION SERVICE (Promodia)                │
│  gRPC Microservice for promotion logic                          │
│  Path: $BE/promodia                                             │
├─────────────────────────────────────────────────────────────────┤
│                        DATABASE (Monika)                        │
│  SQL Server + Stored Procedures                                 │
│  Path: $BE/monika                                               │
└─────────────────────────────────────────────────────────────────┘

**Path Variables (configure in your environment):**
- `$FE` = Frontend projects root (e.g., ~/FE or /Users/yourname/FE)
- `$BE` = Backend projects root (e.g., ~/BE or /Users/yourname/BE)

Data Flow

CopyKirby (FE) → Coloris.Core (API) → Proxydia (REST) → Promodia (gRPC) → Monika (DB)

---

Development Flow

Full Stack Order

CopyDatabase (Monika) → Promodia (gRPC) → Proxydia (REST) → Coloris.Core (API) → Frontend (Kirby)

Frontend Flow (CustomerRecordReport Pattern)

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

Backend Flow (Coloris.Core)

CopyModel (Request/Response) → Service Interface → Service Implementation → Controller

⚠️ IMPORTANT:

• Work in Coloris.Core/Coloris.Core/ folder, NOT Coloris/Coloris/
• Add endpoints to EXISTING controllers (e.g., PromotionController), don't create new ones
• Follow existing patterns in the codebase

Proxydia Flow (REST Gateway)

CopyRequest Model → Controller → Promodia gRPC Client → Response Model

Promodia Flow (gRPC Service)

CopyProto Definition → Service Implementation → Repository → Monika SP Call

Database Flow (Monika)

CopyTable → Stored Procedure → InsertData (sp_lookup registration)

---

File Reference

---

Quick Reference

API Layer (ONLY 2 FILES)

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

SP Versioning (REQUIRED)

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

SP Registration (InsertData.sql)

CopyINSERT [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)

Copy// ❌ 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)

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

-- ❌ Don't handle null dates in Monika
-- Validation should be done in Coloris.Core
IF @fromDate IS NULL SET @fromDate = GETDATE()  -- DON'T DO THIS

-- ✅ Let Coloris.Core validate and return error if null

C# (Coloris.Core)

Copy// ✅ 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 for related features
// Add to PromotionController, not create SportsController

Translation (i18n)

Tool: WL Translation Engine

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

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

---

Usage Examples

Example 1: Full Feature

CopyUser: 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

CopyUser: 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

CopyUser: 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 3 components, composables, API integration
• Pattern: CustomerRecordReport flow
• Path: $FE/kirby
• Key files: src/libraries/apiCalling.ts, src/libraries/apis.ts
• Guide: agents/kirby-fe-agent.md
• Rules: No any type, create proper interfaces

Coloris.Core BE Agent

• Focus: C# Controllers, Services, Request/Response models
• Pattern: Service pattern with IPromodiaService
• Path: $BE/coloris/Coloris.Core/Coloris.Core
• Key folders: Controllers/, Services/, Models/
• Guide: agents/coloris-be-agent.md
• ⚠️ IMPORTANT: Work in Coloris.Core, NOT Coloris folder
• Rules: Add to existing controllers, don't create new ones

Proxydia REST Gateway Agent

• Focus: REST endpoints that call Promodia gRPC
• Pattern: REST to gRPC translation
• Path: $BE/proxydia
• Key folders: Controllers/, Models/
• Guide: agents/proxydia-agent.md

Promodia gRPC Agent

• Focus: Promotion logic, VIP features, gRPC services
• Pattern: gRPC + Strategy pattern (not REST)
• Path: $BE/promodia
• Key files: Protos/, Services/
• SP Prefix: Promodia_
• Guide: agents/promodia-agent.md

Monika DB Agent

• Focus: SQL tables, stored procedures
• Pattern: Versioned SPs with InsertData registration
• Path: $BE/monika
• Key folders: Tables/, Stored Procedures/, data/
• Guide: agents/monika-db-agent.md
• Rules: Use GETDATE() not GETUTCDATE(), no null date handling

---

Learning Prompts

After completing an implementation, capture knowledge for future sessions:

Workflow:

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

Example learning entry:

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

---

Git Contribution

Commit Message Format

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

Types:

Git Tag Format

Copy# 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

Copy1. 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

Copy# Set your paths first (add to ~/.bashrc or ~/.zshrc)
export FE=~/FE          # or your frontend projects root
export BE=~/BE          # or your backend projects root

# Frontend dev server
cd $FE/kirby && npm run dev

# Build Coloris.Core
cd $BE/coloris/Coloris.Core/Coloris.Core && dotnet build

# Build Proxydia
cd $BE/proxydia && dotnet build

# Build Promodia
cd $BE/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

v4.1.0 (2025-01-20)

• Decision Tree - New DECISION-TREE.md for choosing the right approach
• Git Workflow - New GIT-WORKFLOW.md with branch naming and commit conventions
• Visual flowcharts for task type selection
• Layer decision matrix
• Branch naming: {Type}/{TicketID}-{ShortDescription}
• Commit format: [{Layer}] {Type}: {Description}
• Multi-project git workflow examples

v4.0.0 (2025-01-20)

• Quick Start Guide - New QUICK-START.md for fast onboarding
• Troubleshooting Guide - New TROUBLESHOOTING.md with common issues and solutions
• Checklists - Layer-specific checklists for FE, BE, and DB development
• Examples - Real-world implementation examples with copy-paste code
• Better Navigation - Improved INDEX.md with clear navigation
• Relative Paths - All paths use $FE and $BE variables for portability
• 5-Layer Architecture - Full documentation of Proxydia layer
• Coding Conventions - Comprehensive conventions checklist
• Added QUICK-START.md - 5-minute onboarding guide
• Added TROUBLESHOOTING.md - Common issues and solutions
• Added checklists/conventions.md - Coding standards checklist
• Added checklists/fe-checklist.md - Frontend development checklist
• Added checklists/be-checklist.md - Backend development checklist
• Added checklists/db-checklist.md - Database development checklist
• Added examples/add-list-page.md - FE list page example
• Added examples/add-api-endpoint.md - BE endpoint example
• Added examples/add-stored-procedure.md - DB stored procedure example
• Updated INDEX.md with better navigation and quick reference
• Updated all paths to use $FE and $BE variables

v3.3.1 (2025-01-20)

• Fixed hardcoded paths to use $FE and $BE variables
• Updated all agent files with relative paths
• Added coding conventions to agent files

v3.3.0 (2025-01-20)

• Added Proxydia layer documentation
• Updated Coloris paths to Coloris.Core
• Added coding conventions (no comments, no any type)
• Created agents/proxydia-agent.md

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