shancheas
ff6814d038
- Introduced coding standards for TypeScript and React in SKILL.md. - Added continuous learning skill with configuration and evaluation scripts. - Created detail layout guidelines for read-only pages. - Established form layout rules for data-entry forms. - Documented project guidelines for the frontend monorepo. - Implemented security review checklist for frontend/Electron applications. - Developed a verification loop skill for comprehensive session checks. This commit enhances the skill set available for developers, ensuring adherence to best practices and improving code quality.
65 lines
2.3 KiB
Plaintext
65 lines
2.3 KiB
Plaintext
---
|
|
description: Standard design and layout for apps/web module pages
|
|
globs: apps/web/src/apps/**/*.{ts,tsx}
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Web Design & Layout Standards
|
|
|
|
Working directory: `apps/web/`.
|
|
Primitives: `@repo/ui/components`. Foundations: `@repo/ui/foundations`. Icons: `lucide-react`.
|
|
Reference usage: `apps/showcase` (ui-components, forms, action-tools, shell-demo).
|
|
|
|
## App chrome (do not rebuild)
|
|
|
|
- Authenticated routes render inside `ModuleLayout` → `CoreAppShell`.
|
|
- Do not nest another `CoreAppShell` inside a feature module.
|
|
- Sidebar / header / history / bookmarks live only under `apps/main/layouts/`.
|
|
|
|
## Page composition
|
|
|
|
| Page type | Standard wrapper |
|
|
|---|---|
|
|
| List / index (FULL_PAGE) | `EnterpriseIndexPageProvider` + `EnterpriseDataTable` |
|
|
| Detail (FULL_PAGE) | `EnterpriseDetailPageProvider` |
|
|
| Form | `EnterpriseFormPageProvider` |
|
|
| Simple / system page | Match existing `modules/system/*` patterns |
|
|
|
|
Detail **content** layout (section stack, key-value grids, status blocks, tabs for many categories): follow `.agents/skills/detail-layout/SKILL.md` — layout/position only.
|
|
Form **content** layout: follow `.agents/skills/form-layout/SKILL.md`.
|
|
|
|
Every page header (`pageHeaderProps`) should include i18n `title`, `description`, `breadcrumbs`, and Lucide `icon` when useful.
|
|
|
|
```tsx
|
|
// ✅ GOOD
|
|
<EnterpriseIndexPageProvider
|
|
pageHeaderProps={{
|
|
title: t('title'),
|
|
description: t('description'),
|
|
icon: LayoutDashboard,
|
|
breadcrumbs: [
|
|
{ label: t('nav:example-module'), type: 'text' },
|
|
{ label: t('nav:example-full-page'), type: 'text' },
|
|
],
|
|
}}
|
|
>
|
|
<EnterpriseDataTable columnDefs={columnDefs} filterConfig={filterConfig} />
|
|
</EnterpriseIndexPageProvider>
|
|
```
|
|
|
|
```tsx
|
|
// ❌ BAD — custom chrome that duplicates foundations
|
|
<Box p="md">
|
|
<Title order={2}>{t('title')}</Title>
|
|
</Box>
|
|
```
|
|
|
|
## Visual language
|
|
|
|
- Theme via Mantine tokens / CSS vars — no hard-coded theme hex.
|
|
- Surfaces: `Paper` / `Card` with `withBorder`, `radius="md"`, restrained `shadow="sm"`.
|
|
- Status: `StatusBadge` / semantic `Badge` — see showcase `ui-components`.
|
|
- Actions: `PageActions` / row actions from action-tools patterns.
|
|
- Forms: `Field*` components + Zod validators — see showcase `forms` and `example/full-page` form.
|
|
- Do not invent a parallel design system.
|