You are building a web application using React (Vite) with Tailwind. Read existing project instructions and reuse installed components where available. ## Project Project brief: Build a sample product page for Field Goods with a fictional graphite canvas overshirt. Include front, back, and detail illustrations, size selection with M unavailable, a quantity field, and a local demo bag. Use a clearly labeled $48 demo price. Include missing-size and invalid-quantity feedback, an adding state, a success message, an empty bag, and a clear-bag action. Do not include checkout or real stock claims. Target users: Shoppers using phones and laptops Page purpose: Ecommerce Framework: React (Vite) CSS approach: Tailwind UI library: shadcn/ui Tone: Professional ## Visual direction Base theme: Enterprise Flat (visual-style) - Flat design with no shadows or gradients - Consistent spacing using 4px/8px grid - Clear information hierarchy - Muted professional color palette - Data-dense layouts for dashboards - Accessible and readable at all sizes ## Resolved style Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics. Color palette: primary #2563EB, secondary #475569, accent #059669, background #F8FAFC, text #0F172A Typography: Inter for headings, Inter for body text Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable. ```css :root { --tx-surface-bg: #F8FAFC; --tx-font-heading: "Inter", sans-serif; --tx-font-body: "Inter", sans-serif; --tx-surface-bg-image: none; --tx-card-bg: #FFFFFF; --tx-card-border: #E2E8F0; --tx-card-border-width: 1px; --tx-card-radius: 0.5rem; --tx-card-shadow: none; --tx-card-backdrop-blur: 0px; --tx-card-border-hover: #2563EB; --tx-card-shadow-hover: none; --tx-font-heading-weight: 600; --tx-font-body-weight: 400; --tx-text-muted: rgba(15,23,42,0.6); --tx-text-subtle: rgba(15,23,42,0.4); --tx-link-color: #2563EB; --tx-button-radius: 0.375rem; --tx-input-bg: #FFFFFF; --tx-input-border: #E2E8F0; --tx-text: #0F172A; --tx-primary: #2563EB; --tx-secondary: #475569; --tx-accent: #059669; --tx-media-filter: none; } :root { color-scheme: light; --radius: var(--tx-card-radius); --background: var(--tx-surface-bg); --foreground: var(--tx-text); --card: var(--tx-card-bg); --card-foreground: var(--tx-text); --popover: var(--tx-input-bg); --popover-foreground: var(--tx-text); --primary: var(--tx-primary); --primary-foreground: #FFFFFF; --secondary: var(--tx-secondary); --secondary-foreground: #FFFFFF; --muted: var(--tx-card-bg); --muted-foreground: var(--tx-text-muted); --accent: var(--tx-accent); --accent-foreground: #000000; --destructive: #B91C1C; --destructive-foreground: #FFFFFF; --border: var(--tx-card-border); --input: var(--tx-input-border); --ring: var(--tx-text); --sidebar: var(--tx-surface-bg); --sidebar-foreground: var(--tx-text); --sidebar-primary: var(--tx-primary); --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: var(--tx-accent); --sidebar-accent-foreground: #000000; --sidebar-border: var(--tx-card-border); --sidebar-ring: var(--tx-text); } @theme inline { --font-sans: var(--tx-font-body); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); } ``` The mapping targets Tailwind CSS 4. Merge it into the existing Tailwind stylesheet after its imports. Read installed package versions first. Ask before migrating an existing project to a different major version. Use library components for controls. Apply the --tx-* surface, shadow, blur, and font values where the library tokens do not cover them. This export describes one selected color mode. Preserve any other supported modes and scope these tokens to the intended mode. Read components.json and reuse installed shadcn/ui components. Use semantic classes such as bg-background and text-foreground. Merge the tokens with existing :root or color-mode selectors. Preserve unrelated chart tokens and component configuration. Reference: https://ui.shadcn.com/docs/theming ## Layout - Use a consistent spacing scale, clear navigation, and compact readable data panels. ## Interaction - Show validation, loading, empty, and success states close to the affected control. ## Additional user requirements These explicit requirements take precedence over general layout and interaction defaults. Report any conflict with exact tokens before changing them. Layout: Use a two-column product layout with a larger gallery on the left. Stack gallery and details on phones. Keep product facts and choices near the add action. Interaction: All gallery views must change the illustration. Keep unavailable sizes disabled. Make bag totals match the selected quantities. Use React state and installed shadcn/ui controls. ## Suitability notes Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment. - Enterprise Flat: Expressive campaigns that depend on decorative visuals. ## Components Generate the following components in this style: - Navbar - Cards - Buttons - Forms ## Quality requirements Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task. Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims. Every interactive control must perform its declared action or be clearly labeled as a demo. Include loading, empty, error, success, disabled, and focus states where applicable. Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields. Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow. Respect prefers-reduced-motion. Keep essential content visible when animations are disabled. ## Supporting skills Use these skills if they are installed in the target agent. If unavailable, report that and follow the supplied design requirements. Installation commands are references for the user; do not run them automatically. - shadcn/ui: https://ui.shadcn.com/docs/skills Purpose: Read components.json and reuse installed shadcn/ui components. Install: npx skills add shadcn/ui - Anti-slop: https://github.com/miqdadbadjuber/anti-slop Purpose: Check content, controls, and decoration against the selected design direction. Install: npx skills add miqdadbadjuber/anti-slop Use antislop during for this session. The chosen theme and layers are intentional. Check their purpose and implementation. If a skill rule conflicts with them, identify the conflict and ask the user to keep or change the named element. ## Verification Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified. Use Tailwind utility classes with the declared tokens.