rcode-haitham-frontend

To build a bilingual Arabic-English React interface with proper RTL layout, use logical CSS properties and locale-aware presentation. This ensures correct bidirectional rendering and RTL behavior in Next.js components without hardcoded directional styles.

The best way to clone a Figma mockup into pixel-perfect React and Next.js code is translating visual designs into Tailwind CSS and shadcn/ui components. This approach achieves high visual fidelity while maintaining strict TypeScript validation and production-grade structure.

Fixing accessibility and keyboard navigation issues in a Tailwind CSS component requires applying ARIA attributes, managing focus states, and validating component structure. Production-ready React implementations ensure interactive elements are fully accessible via keyboard.

Yes, you can use shadcn/ui with Next.js for pixel-perfect and RTL-safe frontend development. Combining them with strict TypeScript and logical CSS properties ensures accessible, bidirectional rendering and robust server/client component decisions.

Frontend components break when switching between LTR and RTL layouts if they use physical CSS properties instead of logical ones. Applying locale-aware presentation and bidirectional rendering validation resolves layout shifts in bilingual Arabic-English interfaces.

Yes, the haitham-frontend skill validates server and client component decisions in Next.js. It ensures production-grade React implementations maintain performance discipline and correct component boundaries during pixel-perfect frontend feature delivery.