uiux-react-jsx-packager

uiux-react-jsx-packager

Output Contract

• Create one new *.jsx file (do not overwrite existing files unless explicitly requested).
• Export the root component via export default.
• Keep runtime dependencies to React only (no react-router, lucide-react, echarts, classnames, zustand, etc.).
• Keep styles in-file via <style> injection and/or inline style={{...}}.
• Replace icon libraries with inline SVG components.
• Replace images with base64-inlined data URLs or deterministic placeholders.
• Implement navigation via component state (optionally sync to location.hash for shareable URLs).
• Preserve all interactions/animations/state logic; do not simplify behavior.
• Prefer embedding the compiled CSS (if available) to preserve spacing/colors/shadows.

关于“像素级一致”（可选增强，不是默认门禁）

“像素级一致 / pixel-perfect”在工程上必须限定条件，否则不可验证。只有当你要对外宣称 pixel-perfect 时，才需要做像素 diff 验收：

• 同一台机器、同一 OS 与同一浏览器版本（建议固定 Chrome 版本）
• 固定 viewport（宽高）与 deviceScaleFactor（DPR）
• 字体必须一致（包含字重）：不要依赖系统字体差异；必要时把字体文件以 @font-face 形式内联进 CSS（base64 data URL）
• 截图对比时必须处于“稳定态”：避免进行中动画/过渡影响像素 diff（见 Verification）

默认交付的强门禁是“可携带可跑、不白屏、导航可用”（见 Verification Gate）。

Workflow (do in order)

1) Discover structure and runtime surface

• Find and follow any AGENTS.md instructions that apply to the target directory tree.
• Locate the actual app entry (src/main.*, src/index.*, App.*) and identify:
  • Router entrypoints (hash router / react-router / custom)
  • Pages and module switch logic
  • Global providers (theme/style/toast/auth)
  • Global CSS + theme tokens (CSS variables, dark mode attribute, etc.)
  • Third-party runtime deps that must be removed (icons, charts, router, utilities)
• Prefer reading the demo source plus the built output CSS (if it exists) to lock visuals.

2) Choose a “visual parity” strategy for styles (pick one)

• Preferred: Embed production/built CSS (e.g. dist/assets/index-*.css) into const APP_CSS = String.raw\...`;and inject via`.
  • Keep existing className strings unchanged.
  • This is the most reliable way to keep spacing/colors/shadows identical without Tailwind tooling.
• Otherwise: Inline/merge source CSS files into one <style> block (still in-file).