deerflow-code/.codex/skills/deerflow-ui-guard/SKILL.md

name, description

name	description
deerflow-ui-guard	Improve or review UI in the DeerFlow Vite/React frontend while preserving its light, dark-blue, and light-blue themes, Radix/shadcn-style primitives, Chinese enterprise density, embedded routes, and Chrome 109 compatibility. Use for visual refinements, new frontend pages/components, UI reviews, token cleanup, or design-system work under frontend-web/.

DeerFlow UI Guard

Use this skill only in this repository. Preserve the product's existing visual system; do not replace it with a generic SaaS template or a new component library.

Read the relevant sources first

1. Read references/project-sources.md, then the relevant theme specification.
2. Inspect the page and the nearest existing components before proposing or changing UI.
3. Read frontend-web/src/styles/globals.css and the affected primitives under frontend-web/src/components/ui/ before changing tokens, shared styles, or variants.

Design and implementation rules

• Reuse the existing Radix/shadcn-style primitives, lucide-react, Tailwind v4, and established CSS variables. Do not add Ant Design, another component system, or a visual-effects package unless the user explicitly asks.
• Keep all three themes correct: light/red, dark/blue, and light-blue. Prefer semantic classes and existing variables over raw color values. When a new token is necessary, define matching values for every theme.
• Preserve Chinese enterprise-product density and task completion speed. Make hierarchy, primary action, status, empty states, error recovery, and keyboard focus clearer before adding decoration.
• Keep the shell, deep links, authentication, embed/isolation behavior, sidebar menu semantics, and responsive layout unchanged unless the request explicitly targets them.
• Avoid unscoped global overrides and !important; place page-specific styling beside the feature and make selectors local.
• Support the Chrome 109 constraint. Do not introduce unguarded oklch(), oklab(), lab(), lch(), or color-mix() values.
• Preserve accessible names, keyboard interaction, visible :focus-visible states, sufficient contrast, and reduced-motion behavior for new or changed controls.

Delivery workflow

1. State which existing theme and UI primitives the work will reuse.
2. Make the smallest coherent change; do not perform an unrelated visual sweep.
3. Validate with pnpm typecheck; when CSS or built UI changes, also run pnpm build and pnpm check:chrome109-css from frontend-web/ when practical.
4. If a browser is available, inspect screenshots in light, dark, and light-blue modes. Otherwise say that visual verification remains outstanding.
5. For a review-only request, use web-design-guidelines as an additional quality gate when it is available, then distinguish confirmed issues from visual checks that still need a browser.