From patriotforge
Use when writing React/TypeScript frontend code — components, pages, routing, styling, layout patterns, or UI primitives.
npx claudepluginhub aka-kolton/patriotforge-claude-plugin --plugin patriotforgeThis skill uses the workspace's default tool permissions.
**Stack:** React 19 · TypeScript (strict) · Vite · Tailwind CSS v4 · React Router v7
Implements Clean Architecture in Android and Kotlin Multiplatform projects: module layouts, dependency rules, UseCases, Repositories, domain models, and data layers with Room, SQLDelight, Ktor.
Enforces code quality on file edits via Plankton hooks: auto-formats, lints, Claude-powered fixes with model tiering, config protection, and legacy package manager blocks.
Enforces C++ Core Guidelines for writing, reviewing, and refactoring modern C++ code (C++17+), promoting RAII, immutability, type safety, and idiomatic practices.
Stack: React 19 · TypeScript (strict) · Vite · Tailwind CSS v4 · React Router v7
prototype/src/
├── App.tsx # Router config — all 20+ routes
├── components/
│ ├── layout/ # Layout, Sidebar, TopBar
│ ├── ui/ # Shared primitives (Card, Badge, Button, StatCard)
│ └── [module]/ # Module-specific components
├── pages/ # Route-level page components
├── types/ # TypeScript interfaces (mirror DB schema)
├── data/ # Mock data (TS objects matching types)
└── hooks/ # Custom React hooks
interface Props { ... })export function QuoteList() { ... }index.ts per module folder┌─────────────────────────────────┐
│ TopBar │
├──────┬──────────────────────────┤
│ │ │
│ Side │ <Outlet /> │
│ bar │ (page content) │
│ │ │
└──────┴──────────────────────────┘
Layout.tsx wraps all routes with Sidebar + TopBar + React Router <Outlet /><Route path="/" element={<Layout />}>
<Route index element={<Dashboard />} />
<Route path="quotes" element={<QuoteList />} />
<Route path="quotes/:id" element={<QuoteDetail />} />
<Route path="quotes/:id/edit" element={<QuoteBuilder />} />
</Route>
list → detail → edit<Layout /> wrapperdark: variantsCard — content container with header/body/footerBadge — status indicators (color-coded by state)Button — primary, secondary, danger, ghost variantsStatCard — KPI display (value, label, trend icon)Modal — confirmation dialogs, quick-add forms, selection pickers📖 Reference: prototype/src/App.tsx, prototype/src/components/layout/, docs/plans/2026-01-24-page-layouts.md