PawHaven-FullStack-React-NodeJS

Figma design verification gate. Opens the actual Figma design page via Playwright, extracts structure via visible text/HTML (low token cost), then takes ONE targeted screenshot for visual spot-check. MUST pass before any other code-review doctors run. Trigger: Figma design verification visual comparison design-to-code UI match.

Internationalization compliance detection. Scans JSX for hardcoded English text (missing t() function), ensuring all user-visible text goes through i18next translation. Technical attributes (URLs, test IDs) are exempt. Trigger: i18n internationalization hardcoded string t() translation locale.

React code quality validation. PRIMARY: runs npx react-doctor@0.7.6 (security, performance, correctness, architecture, a11y, bundle size). SUPPLEMENTARY: project-specific convention checks (Redux typed hooks, TanStack Query key factories, React Hook Form, console.log, any type). Trigger: React code quality scan triage cleanup anti-pattern.

Code Review Orchestrator. GATE: figma-doctor verifies design spec match first. On PASS, loads 6 sub-skills in parallel based on scope (frontend|backend|full-stack): typecheck-doctor, react-doctor, style-doctor, boundary-doctor, i18n-doctor, backend-doctor. Each sub-skill is independently composable and can be loaded via use_skill. Trigger: code review PR feedback quality check automated scans anti-pattern detection.

Styling violation detection. Covers hex colors (forbidden), raw Tailwind color names (warning), CSS variable bypass (forbidden), magic numbers (pixel/blur values, warning), Prettier format check (warning). All based on @pawhaven/design-system design token spec. Trigger: style CSS hex color magic number CSS variable bypass design token Prettier format.

Backend code quality detection. Covers: console.log in backend (forbidden, use Logger service), TypeScript any type (forbidden). All Blocking. Trigger: backend NestJS console.log any type backend code quality.

Import boundary & package dependency direction detection. Covers cross-feature imports (forbidden), packages importing feature code (forbidden), ui -> frontend-core dependency inversion (forbidden), backend cross-module internal imports (forbidden). All Blocking. Trigger: import boundary cross-feature cross-module package dependency direction module isolation.

TypeScript type check validation. Dynamically discovers all projects with tsconfig.json and runs pnpm typecheck on each. Ensures zero type errors. Any project failure = Blocking. Trigger: typecheck TypeScript type error compile error tsc build.

组件设计模式与共享组件规范 / Component Design Patterns & Graduation Rules. 定义 PawHaven 共享组件的设计原则：组件 API 设计、组合模式 vs 继承、组件分层（feature 私有 vs packages/ui vs packages/frontend-core）、毕业规则（2+ feature 使用的组件必须晋升到共享包）、Props 接口设计、Single Responsibility 原则、命名导出规范。 触发场景 / Trigger: 组件设计 component design API surface interface signature props contract, 共享组件 shared component reusable common UI building block library, 组件开发 component development build create implement authoring compose, 组件拆分 component decomposition split break down extract decouple separate, 组件提取 extract component pull out lift up promote abstract isolate, 组件重构 component refactor restructure reorganize redesign improve clean up, 组件 API component props children slots render prop composition pattern, packages/ui shared UI library graduation promote publish export package, frontend-core shared core logic utility hook helper, 组件毕业 graduation promote to shared elevate to reusable component promotion, 组件复用 component reuse DRY don't repeat yourself deduplication consolidation, 纯 UI

国际化标准 / Enterprise-Grade Internationalization (i18n) Standards. 定义项目国际化规范：所有用户可见文案必须通过 t() 函数、语义化 key 命名（module.key 格式）、三语同步（zh-CN/en-US/de-DE 必须同时更新）、禁止硬编码字符串、禁止拼接翻译、复数处理、日期/货币格式化、常用文案放入 common 模块。 适用于 React/Next.js 应用的 i18next + react-i18next 技术栈。 触发场景 / Trigger: 国际化 i18n internationalization localization l10n globalization g11n locale adaptation, 翻译 translation translate text string message copy localisation, 多语言 multi-language multilingual language support locale detection switching, locale language code region zh-CN en-US de-DE ja-JP ko-KR fr-FR es-ES, 文案 UX copy microcopy user-facing text label message string content wording, 硬编码字符串 hardcoded strings inline text literal string direct text embedding, t() function translate function i18n key lookup interpolation namespace, i18next react-i18next useTranslation Trans component HOC withTranslation, key naming semantic namespace module.key convention structure organization, pluralization singular plural forms count variable interpolation, date formatting curr

React Hook Form + Zod 表单规范 / React Hook Form + Zod Enterprise Patterns. 定义表单开发全流程标准：Schema-First 验证（Zod schema 作为唯一真源）、z.infer 类型推导、useForm 配置（mode/resolver/defaultValues）、register（非受控）vs Controller（受控自定义组件）、useFieldArray 动态表单、表单提交流程与 isSubmitting 状态、性能优化（避免不必要的重渲染）、noValidate 禁用浏览器默认验证、错误信息展示。 触发场景 / Trigger: 表单 form input field textbox textarea select dropdown checkbox radio switch slider, React Hook Form useForm register handleSubmit watch reset setValue getValues formState, Zod schema validation infer type safe z.object z.string z.number z.enum z.array refinement superRefine, 表单验证 form validation required min max minLength maxLength pattern regex custom validate, schema validation schema-first Zod resolver single source of truth type inference, useForm mode onChange onBlur onSubmit onTouched all defaultValues resolver reValidateMode, register uncontrolled input name ref onChange onBlur defaultValue, Controller controlled component custom input render field fieldState formState, useFieldArray dynamic form

TanStack Query v5 服务端状态管理规范 / TanStack Query v5 Enterprise Patterns. 定义服务端数据请求全流程标准：QueryClient 配置（staleTime/gcTime/retry）、Query Key Factory 查询键工厂（禁止裸字符串）、queryOptions 共享查询配置、useQuery 数据获取、useMutation 变更操作与乐观更新 optimistic update、错误边界 error boundary 集成、预取 prefetch、无限滚动 useInfiniteQuery、防重复请求。 服务端状态属于 TanStack Query — 永远不要放入 Redux store。 触发场景 / Trigger: 数据请求 data fetching server state API request network call HTTP fetch axios, API 调用 API call endpoint integration request response REST GraphQL, TanStack Query react-query v5 useQuery useMutation useInfiniteQuery useSuspenseQuery, useQuery query key data isLoading isError isFetching isPending status error refetch, useMutation mutate mutateAsync onSuccess onError onSettled onMutate optimistic update rollback, 乐观更新 optimistic update immediate UI feedback rollback on error cache invalidation, 缓存 cache staleTime gcTime cacheTime garbage collection time refetchInterval refetchOnWindowFocus, staleTime stale data fresh data background refetch staleness window focus, 预取 p

React 开发标准 / Enterprise-Grade React Development Standards. 定义 React 组件开发全链路规范：组件架构模式、状态管理决策树（useState vs useReducer vs Redux vs TanStack Query）、useEffect 使用规范与清理、性能优化（useMemo/useCallback/React.memo）、无障碍访问 a11y（语义化 HTML/ARIA/keyboard navigation）、Error Boundary 错误边界、React Doctor 验证工具、Props 类型定义、组件拆分原则。 触发场景 / Trigger: React 开发 react development frontend framework library SPA JSX TSX component-based, 组件开发 component create build implement author compose design write, hooks useState useEffect useCallback useMemo useRef useContext useReducer custom hook rules of hooks, 性能优化 performance optimization memoization memo useMemo useCallback React.memo lazy Suspense code splitting bundle size, 无障碍 accessibility a11y wai-aria WCAG screen reader keyboard navigation focus trap semantic HTML, 错误边界 error boundary ErrorBoundary componentDidCatch getDerivedStateFromError fallback UI resilience, React Doctor validation tool best practice check automated fix recommendation lint, 状态管理决策 state decision tree when to use what useState

Redux Toolkit 客户端状态管理规范 / Redux Toolkit Enterprise Patterns. 定义客户端全局状态管理全流程标准：Store 配置、类型化 Hooks（useAppDispatch/useAppSelector — 禁止裸 useDispatch/useSelector）、createSlice 切分与 extraReducers（builder 模式）、createAsyncThunk 异步操作、memoized 记忆化 Selectors、redux-persist 持久化配置、状态设计原则（只放客户端状态，不放服务端数据）。 触发场景 / Trigger: Redux Redux Toolkit RTK global store state management predictable container, 全局状态 global state application-wide shared cross-component cross-feature, 客户端状态 client state UI state app state only client-side not server data, Store configureStore combineReducers middleware enhancer devTools preloadedState, createSlice name initialState reducers extraReducers builder addCase addMatcher addDefaultCase, createAsyncThunk async thunk action creator pending fulfilled rejected extraReducers, useAppDispatch useAppSelector typed hooks RootState AppDispatch never use bare useDispatch useSelector, 持久化 persist redux-persist persistReducer persistStore FLUSH PAUSE PERSIST PURGE REGISTER REHYDRATE, middleware redux-thunk redux

样式规范与设计系统 / Styling Standards & Design System Enforcement. 定义项目样式全流程标准：所有样式必须基于 @pawhaven/design-system 设计 Token、必须使用 Tailwind 语义 utility class（禁止 CSS 变量绕过 bg-[var(--color-*)]）、禁止硬编码颜色值（hex/rgb/rgba/hsl）、禁止魔法数字（backdrop-blur-[12px]/w-[137px]）、禁止内联 style={}、响应式断点规范、cn() 工具类合并、深色模式兼容。 触发场景 / Trigger: 样式 styling CSS SCSS SASS CSS Modules Tailwind utility-first utility class atomic CSS, Tailwind className utility class postcss JIT just-in-time compiler config, 设计系统 design system design token primitives foundation brand identity consistency, design tokens colors spacing typography font shadow radius border elevation z-index, 颜色 color palette primary secondary accent neutral background surface text border, 间距 spacing padding margin gap layout grid flex box alignment, 响应式 responsive breakpoint sm md lg xl 2xl mobile tablet desktop adaptive, 深色模式 dark mode light mode theme toggle color-scheme prefers-color-scheme, 硬编码颜色 hardcoded color hex #fff #000 rgb( rgba( hsl( hsla( named color, 魔法数字 magic numbers arbitrary valu