Architecture & Design Compliance Review (/architecture-review)¶

In plain terms

A final check that your work follows the project's architecture and design rules before it ships.

What this skill does

Enforce architecture rules and design principles before completing tasks

fastapiexpress

[!CAUTION] MANDATORY — This skill MUST be consulted BEFORE making any code changes, not after.

Trigger Conditions (AUTO-TRIGGERED)¶

Trigger	Examples
Styling/Colors	Changing button colors, adding CSS classes, modifying themes
UI Components	Creating/modifying React components, buttons, modals, forms
User Feedback	Adding alerts, confirmations, toasts, error messages
API Routes	Adding new endpoints, modifying authentication
Database Access	Any data layer changes
New Dependencies	Adding npm packages or pip packages

If the user request conflicts with docs/ARCHITECTURE.md, you MUST: 1. STOP before implementing 2. WARN the user about the conflict 3. Run /propose-architecture-update

1. Core Architecture Check¶

[ ] Read the Rules: Review docs/ARCHITECTURE.md — strict frontend/backend separation
[ ] Check for Deviations: If the user request conflicts with these rules, run /propose-architecture-update
[ ] Automated Verification: Run the architecture linter (if configured):
```
cd frontend && npm run lint
```
Pass: Proceed.
Fail: Fix violations or document as explicit exceptions in docs/ARCHITECTURE.md

2. Karpathy's Rules Check¶

[ ] Start Simple: Is this the simplest solution that works?
[ ] Concrete > Abstract: Did you avoid premature abstraction? (Managers/Factories/Services)
[ ] Rule of Three: Only extract to functions if repeated 3 times
[ ] Verify, Don't Guess: Did you verify library behavior with docs or scripts?
[ ] Full Context: Did you read all relevant files before coding?
[ ] Delete Dead Code: Did you remove all unused code?
[ ] Causal Order:
(Backend) Are all side effects awaited before sending responses?
(Frontend) Are UI state changes happening AFTER mutateAsync resolution?

3. Frontend / UI Design Check¶

If your changes involve UI (React components, CSS):

[ ] Button Styling:
Primary actions use Teal rgb(177, 193, 186) / #B1C1BA
Modal Cancel = Dark Teal, Delete = Red (#B21917), Save = Light Blue
Buttons are rounded-full
[ ] Cards: Using rounded-3xl?
[ ] Selects: Using SearchableSelect, not native <select>?
[ ] User Feedback:
No window.alert() or window.confirm() (FORBIDDEN)
Empty states handled (never blank screen)
Loading states use shimmer (animate-pulse on gray blocks), not bare spinner
[ ] Autocomplete: All <input> fields have autoComplete="off" (or autoComplete="new-password")?
[ ] Theme: Does it look right in both Light Mode and Dark Mode?
Dark Mode bg-background = #131314
Light Mode bg-background = #FFFFFF
[ ] Localization: Currency displays use <FormattedCurrency /> (nl-NL)? Dates use formatDateLocal()?
[ ] Negative values: Displayed in red (text-destructive)?

4. Backend / Security Check¶

[ ] No Direct DB Access: No new supabase.from() calls in src/ or services/
[ ] New API Routes:
Has require_auth + require_permission dependencies?
Uses Pydantic v2 for request/response validation?
Raises HTTPException with proper status codes in error paths?
[ ] Mutations use mutateAsync when UI state depends on outcome?
[ ] SonarQube: Quality gate passes (verified via /pr-ready)