القائمة
Scaffold a new client feature folder following the Page→hook→sections pattern, using features/tools as the template. Use when starting a new client feature.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Stage the intended changes only, derive a scoped conventional-commit message, branch first if on main, run the staged lint check, and commit. Use when the user asks to commit work.
Run the full pre-push gate (lint, typecheck, test, build) and triage any failures by stage. Use before pushing or when asked to verify the repo is green.
Review a pull request against member-manager's invariants and post inline comments. Use when asked to review a PR.
Reset and seed the local Supabase stack, then run the Playwright E2E suite (or a single spec) and summarize failures. Use when asked to verify end-to-end behavior.
Use when changing UI, styling, theming, logos, imagery, or visual copy in this repo so the result follows the TUM.ai corporate identity. Apply the vendored brand guide, color system, typography, button treatment, and dark/light mode rules before shipping frontend work.
| name | new-feature |
| description | Scaffold a new client feature folder following the Page→hook→sections pattern, using features/tools as the template. Use when starting a new client feature. |
Scaffold client/src/features/<domain>/ in the house style. Template to mirror:
client/src/features/tools/ (TumaiDaysPage.tsx, hooks/useTumaiDays.ts, components/,
hooks/useTumaiDays.test.tsx).
Ask for the feature name/domain if not given, then create:
<Name>Page.tsx — thin route component (default export OK here). Calls one hook, renders
sections inside a layout shell (grid grid-cols-1 gap-5 md:grid-cols-12). Keep it well under 400
lines.hooks/use<Name>.ts — TanStack Query useQuery/useMutation, useState, useToast() from
contexts/ToastContext, all handlers. Data via lib/apiClient. Validation via shared Zod schema.components/<Name>Section.tsx (and *Panel/*Form as needed) — presentational, prop-driven.hooks/use<Name>.test.tsx — Vitest test stub (RTL + MSW handler with
onUnhandledRequest:"error"), via src/test/renderWithClient.tsx.components/<Name>Section.stories.tsx — Storybook story stub with a play + a11y check for
interactive components.Then: wire the route (React Router), run pnpm --filter @member-manager/client lint && ... typecheck.
Use @/ for any cross-feature imports; mobile-first + dark-mode from the start.