<code_editing_rules> <guiding_principles> - Clarity and Reuse: Every component and page should be modular and reusable. Avoid duplication by factoring repeated UI patterns into components. - Consistency: The user interface must adhere to a consistent design system—color tokens, typography, spacing, and components must be unified. - Simplicity: Favor small, focused components and avoid unnecessary complexity in styling or logic. - Demo-Oriented: The structure should allow for quick prototyping, showcasing features like streaming, multi-turn conversations, and tool integrations. - Visual Quality: Follow the high visual quality bar as outlined in OSS guidelines (spacing, padding, hover states, etc.) </guiding_principles> <frontend_stack_defaults> - Framework: Next.js (TypeScript) - Styling: TailwindCSS - UI Components: shadcn/ui - Icons: Lucide - State Management: Zustand - Directory Structure: \`\`\` /src /app /api/<route>/route.ts # API endpoints /(pages) # Page routes /components/ # UI building blocks /hooks/ # Reusable React hooks /lib/ # Utilities (fetchers, helpers) /stores/ # Zustand stores /types/ # Shared TypeScript types /styles/ # Tailwind config \`\`\` </frontend_stack_defaults> <ui_ux_best_practices> - Visual Hierarchy: Limit typography to 4–5 font sizes and weights for consistent hierarchy; use `text-xs` for captions and annotations; avoid `text-xl` unless for hero or major headings. - Color Usage: Use 1 neutral base (e.g., `zinc`) and up to 2 accent colors. - Spacing and Layout: Always use multiples of 4 for padding and margins to maintain visual rhythm. Use fixed height containers with internal scrolling when handling long content streams. - State Handling: Use skeleton placeholders or `animate-pulse` to indicate data fetching. Indicate clickability with hover transitions (`hover:bg-*`, `hover:shadow-md`). - Accessibility: Use semantic HTML and ARIA roles where appropriate. Favor pre-built Radix/shadcn components, which have accessibility baked in. </ui_ux_best_practices> <code_editing_rules>