Vibe Templates & .context Directories

FSS ships with two tools that make AI-assisted development faster and more reliable:

Vibe Templates — ready-to-use code scaffolds for adding new features (backend modules, mobile screens)
.context Directories — Markdown documentation written specifically for AI coding agents

Overview

Vibe Templates

Backend: Feature Module Template

Located at projects/fss/backend/vibe-templates/feature-module/, this is a complete, working NestJS CRUD module using "Notes" as the example. Copy it, rename, and register — without touching any existing core files.

What's included:

feature-module/
├── notes.module.ts            NestJS module definition
├── notes.controller.ts        REST controller (CRUD endpoints)
├── notes.service.ts           Business logic + Prisma calls
├── dto/
│   ├── create-note.dto.ts     Validated request body for POST
│   └── update-note.dto.ts     Validated request body for PATCH
└── interfaces/
    └── note.interface.ts      TypeScript response shape

Step-by-step:

Step 1 — Copy the folder

cp -r projects/fss/backend/vibe-templates/feature-module projects/fss/backend/src/modules/tasks

Step 2 — Global rename (search & replace across the copied folder)

Find	Replace with
`notes`	`tasks` (kebab-case, used in routes)
`Notes`	`Tasks` (PascalCase, used in class names)
`note`	`task` (camelCase, used in variables)
`Note`	`Task` (PascalCase singular, used in Prisma model)

Step 3 — Add the Prisma model

Add to prisma/schema.prisma:

model Task {
  id        String   @id @default(cuid())
  title     String
  content   String?
  userId    String
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Also add the back-reference to the User model:

model User {
  // ... existing fields ...
  tasks     Task[]
}

Then run the migration:

npx prisma migrate dev --name add_tasks

Step 4 — Register the module

In src/app.module.ts:

import { TasksModule } from './modules/tasks/tasks.module';

@Module({
  imports: [
    // ... existing modules ...
    TasksModule,
  ],
})

Step 5 — Done

Your new endpoints are live:

POST   /tasks         Create
GET    /tasks         List (paginated, scoped to authenticated user)
GET    /tasks/:id     Get one
PATCH  /tasks/:id     Update
DELETE /tasks/:id     Delete

All endpoints require Authorization: Bearer <token> and are scoped to the authenticated user. Swagger at /api will show the new endpoints immediately.

Checklist:

Folder copied to src/modules/<feature>/
All notes / Notes / note / Note renamed
Prisma model added to schema.prisma
npx prisma migrate dev run
Module registered in app.module.ts
Swagger at /api shows new endpoints

Mobile: New Screen Template

Located at projects/fss/mobile/vibe-templates/new-screen/, this is a complete React Native screen with a service and types, using "Notes" as the example.

What's included:

new-screen/
├── screens/
│   └── NotesScreen.tsx       Full screen (list + create)
├── services/
│   └── notesService.ts       API calls following the SSL-pinning pattern
└── types/
    └── notes.ts              TypeScript types for this feature

Step-by-step:

Step 1 — Copy the files

cp projects/fss/mobile/vibe-templates/new-screen/screens/NotesScreen.tsx   projects/fss/mobile/src/screens/NotesScreen.tsx
cp projects/fss/mobile/vibe-templates/new-screen/services/notesService.ts  projects/fss/mobile/src/services/notesService.ts
cp projects/fss/mobile/vibe-templates/new-screen/types/notes.ts            projects/fss/mobile/src/types/notes.ts

Step 2 — Global rename

Find	Replace with
`Notes`	`YourFeature` (PascalCase)
`notes`	`yourFeature` (camelCase)
`Note`	`YourFeature` (singular PascalCase)
`note`	`yourFeature` (singular camelCase)

Step 3 — Register the route

In src/types/navigation.ts, add your screen:

export type RootStackParamList = {
  // ... existing screens ...
  YourFeature: undefined;
};

In src/navigation/AppNavigator.tsx:

import YourFeatureScreen from '../screens/YourFeatureScreen';

// Inside the authenticated Stack.Navigator:
<Stack.Screen name="YourFeature" component={YourFeatureScreen} />

Step 4 — Navigate to the screen

From any existing screen:

navigation.navigate('YourFeature');

Or add a menu item in MainScreen.tsx:

const menuItems = [
  // ... existing items ...
  {
    title: 'Your Feature',
    icon: 'document-text-outline',
    onPress: () => navigation.navigate('YourFeature' as never),
  },
];

Checklist:

Files copied to correct locations
All names renamed
Route added to src/types/navigation.ts
Screen registered in src/navigation/AppNavigator.tsx
(Optional) Navigation entry added in MainScreen.tsx
Backend module running with matching endpoints

.context Directories

Each FSS package ships with a .context/ folder containing Markdown files written for AI coding agents. When you open a package in Claude Code, Cursor, Copilot Workspace, or any AI-aware editor, the agent reads these files to understand the codebase instantly — without needing to scan hundreds of source files.

Backend `.context/`

Location: projects/fss/backend/.context/

File	What it covers
`README.md`	Quick-start guide — which file to read first
`OVERVIEW.md`	Tech stack, ports, how to run
`ARCHITECTURE.md`	Module map, DB schema, auth flow, request lifecycle
`MODULES.md`	Every module — purpose, key files, patterns
`AI-INTEGRATIONS.md`	AI module endpoints, providers, how to extend
`CONVENTIONS.md`	Naming, patterns, code style rules

Frontend `.context/`

Location: projects/fss/frontend/.context/

File	What it covers
`README.md`	Quick-start guide
`OVERVIEW.md`	Tech stack, ports, how to run
`ARCHITECTURE.md`	Routing, auth flow, API client, middleware
`COMPONENTS.md`	Component library, UI patterns, how to build pages
`AI-INTEGRATIONS.md`	AIChatInterface, AIProviderSelector, useAIChat hook
`CONVENTIONS.md`	File naming, component structure, styling rules

Mobile `.context/`

Location: projects/fss/mobile/.context/

File	What it covers
`README.md`	Quick-start guide
`OVERVIEW.md`	Tech stack, how to run
`ARCHITECTURE.md`	Screen map, navigation tree, auth flow, API client
`SCREENS.md`	Every screen — purpose, key logic, patterns
`AI-INTEGRATIONS.md`	aiService functions, full chat screen example
`CONVENTIONS.md`	File naming, navigation, API calls, storage, styling

.context File Hierarchy

Workflow with an AI Agent

Open any FSS package folder in your AI-aware editor
Point the agent at .context/README.md as the entry point
The agent reads the relevant context files before touching code
Use vibe templates for any new feature — they follow the same conventions documented in .context/CONVENTIONS.md

Backend Package - Backend vibe templates details
Mobile Package - Mobile vibe templates details
AI Integrations - AI setup and usage

Overview​

Vibe Templates​

Backend: Feature Module Template​

Mobile: New Screen Template​

.context Directories​

Backend .context/​

Frontend .context/​

Mobile .context/​

.context File Hierarchy​

Workflow with an AI Agent​

Related​