diff --git a/.ai/agents/backend-developer.md b/.ai/agents/backend-developer.md index e2a57b49..19c9eacb 100644 --- a/.ai/agents/backend-developer.md +++ b/.ai/agents/backend-developer.md @@ -34,13 +34,13 @@ Always read and follow the canonical rules in `.ai/rules/`: - Slice type (`State Change`, `State View`, `Automation`, `Translation`) - Domain requirements (what the slice should do) - Any existing events from other slices this slice depends on -- The namespace root (read from `global.json` or existing source files, e.g. `Studio`, `Library`) +- The namespace root (read from `global.json` or existing source files, e.g. `Product`, `Library`) --- ## Process -1. **Determine the namespace root** by reading an existing source file to identify the convention (e.g. `Studio`, `Library`, `MyApp`). +1. **Determine the namespace root** by reading an existing source file to identify the convention (e.g. `Product`, `Library`, `MyApp`). 2. **Read existing slices** in the same feature to understand naming, existing concepts, and events you may reference. 3. **Create a single `.cs` file** at `//.cs` (under the app source root; an optional `/` may group the feature — there is **no** top-level `Features/` wrapper). 4. **Validate** by building Debug *and* Release (Debug regenerates the TypeScript proxies and compiles `#if DEBUG` spec code; build Release with `-p:CratisProxiesOutputPath=` to skip re-running proxy generation). diff --git a/.ai/agents/code-reviewer.md b/.ai/agents/code-reviewer.md index 39bc1896..bf8778d3 100644 --- a/.ai/agents/code-reviewer.md +++ b/.ai/agents/code-reviewer.md @@ -1,16 +1,16 @@ --- name: Code Reviewer description: > - Quality gate agent for Cratis-based projects. Reviews code against all - project instruction files, checking architecture conformance, C# and - TypeScript conventions, and vertical slice correctness before merge. + Quality gate agent for Cratis-based projects. Reviews code against all + project instruction files, checking architecture conformance, C# and + TypeScript conventions, and vertical slice correctness before merge. model: claude-sonnet-4-5 tools: - - githubRepo - - codeSearch - - usages - - rename - - terminalLastCommand + - githubRepo + - codeSearch + - usages + - rename + - terminalLastCommand --- # Code Reviewer @@ -25,6 +25,7 @@ Always check against the canonical rules in `.ai/rules/` (and `general.md`): `ve ## Review approach Review every changed file. For each issue found: + - State the **file and line number** - Quote the **problematic code** - Explain **why it violates the standard** @@ -101,7 +102,7 @@ When checking for unused code, missing references, or naming consistency, prefer ## TypeScript Styling checklist -- [ ] No hard-coded hex/rgb values — PrimeReact CSS variables used +- [ ] No hard-coded hex/rgb values — Cratis semantic CSS variables used - [ ] CSS co-located with component (`.css` file in same folder) - [ ] No `!important` unless absolutely required and justified with a comment @@ -138,11 +139,12 @@ When checking for unused code, missing references, or naming consistency, prefer ## Output format Start with a **summary**: + > **Review result: ✅ Approved / ⚠️ Approved with comments / ❌ Changes requested** Then list issues grouped by file: -``` +```` ### **[BLOCKING]** … or **[SUGGESTION]** … @@ -152,6 +154,6 @@ Then list issues grouped by file: > ``` > corrected code > ``` -``` +```` End with a checklist of passed / failed items so the developer knows what was verified. diff --git a/.ai/agents/frontend-developer.md b/.ai/agents/frontend-developer.md index 0eef551f..3a1e1996 100644 --- a/.ai/agents/frontend-developer.md +++ b/.ai/agents/frontend-developer.md @@ -1,16 +1,16 @@ --- name: Frontend Developer description: > - Specialist for TypeScript/React frontend code within a vertical slice. - Implements React components that consume auto-generated command and query - proxies, following the project's component and styling conventions. + Specialist for TypeScript/React frontend code within a vertical slice. + Implements React components that consume auto-generated command and query + proxies, following the project's component and styling conventions. model: claude-sonnet-4-5 tools: - - githubRepo - - codeSearch - - usages - - rename - - terminalLastCommand + - githubRepo + - codeSearch + - usages + - rename + - terminalLastCommand --- # Frontend Developer @@ -19,6 +19,7 @@ You are the **Frontend Developer** for Cratis-based projects. Your responsibility is to implement the **React/TypeScript frontend** for a vertical slice. Always read and follow the canonical rules in `.ai/rules/`: + - `react.md` — MVVM, Arc query/command hooks, Cratis Components - `components.md` — component structure, styling, icons - `dialogs.md` — `CommandDialog` / `Dialog` / `StepperCommandDialog` @@ -58,7 +59,7 @@ Confirm that the TypeScript proxies exist in the slice folder before writing any - Place `.tsx` files in the **same folder** as the corresponding `.cs` file. - Do NOT prefix the file name with the feature or slice name (folder provides context). - Each component has its own `.css` file for static styles. -- Use PrimeReact CSS variables for all colors, backgrounds, and borders — never hard-code hex values. The default stack is Cratis Components on PrimeReact theming — not Tailwind. +- Use Cratis semantic CSS variables (`--cratis-*`) for colors, backgrounds, borders, and focus treatment — never hard-code hex values. Style component-specific surfaces through typed `pt` and documented `data-cratis-part` values. - Use `const` over `let`. - Use full descriptive names (never abbreviations like `e`, `idx`, `prev`). - **Move non-trivial state out of the render function** into a `withViewModel` view model (or a tested state module) — see `react.md`. Extract as soon as a component has 3+ `useState`, a state-syncing `useEffect`, or derived values. A view model is a plain class with no React hooks, constructible in a spec. @@ -91,16 +92,19 @@ export const Listing = () => { return ( setPage(event.page ?? 0)} - scrollable scrollHeight="flex" - emptyMessage="No items found."> - + onPage={(event) => setPage(event.page ?? 0)} + scrollable + scrollHeight='flex' + emptyMessage='No items found.' + > + ); }; @@ -124,16 +128,16 @@ export const AddProject = ({ closeDialog }: DialogProps) => { return ( command={RegisterProject} - title="Add Project" - okLabel="Add" - cancelLabel="Cancel" + title='Add Project' + okLabel='Add' + cancelLabel='Cancel' onConfirm={() => closeDialog(DialogResult.Ok)} onCancel={() => closeDialog(DialogResult.Cancelled)} > - value={instance => instance.name} - title="Project name" - placeholder="Enter a name" + value={(instance) => instance.name} + title='Project name' + placeholder='Enter a name' /> ); @@ -151,7 +155,6 @@ Use this for dialogs that collect data and return it without executing a command import { useState } from 'react'; import { DialogProps, DialogResult } from '@cratis/arc.react/dialogs'; import { Dialog } from '@cratis/components/Dialogs'; -import { InputText } from 'primereact/inputtext'; export const AddProject = ({ closeDialog }: DialogProps<{ name: string }>) => { const [name, setName] = useState(''); @@ -159,18 +162,19 @@ export const AddProject = ({ closeDialog }: DialogProps<{ name: string }>) => { return ( closeDialog(DialogResult.Ok, { name })} onCancel={() => closeDialog(DialogResult.Cancelled)} > - setName(event.target.value)} - placeholder="Enter a name" + onChange={(event) => setName(event.target.value)} + placeholder='Enter a name' + className='cratis-field-input w-full' autoFocus /> @@ -189,21 +193,22 @@ import { Page } from '@cratis/components/Common'; import { AddProject } from './Registration/AddProject'; import { Listing } from './Listing/Listing'; import { DialogResult, useDialog } from '@cratis/arc.react/dialogs'; -import { Button } from 'primereact/button'; +import { Button } from '@cratis/components/Common'; import * as mdIcons from 'react-icons/md'; export const Projects = () => { const [AddProjectDialog, showAddProjectDialog] = useDialog(AddProject); // For a query-backed list page, prefer `DataPage` with `` - // (it owns the action bar). PrimeReact 11 removed the standalone `Menubar`; - // for a custom toolbar, compose `Button`s (content is children in v11). + // (it owns the action bar). For a custom toolbar, compose Cratis `Button`s. return ( - - + +