design-engineer

To generate a React component with pixel-perfect UI design, describe the interface you need and the skill outputs production-grade React or HTML code. It automatically applies 18 visual polish principles like concentric border radius, optical alignment, and shadow depth for refined frontend interfaces.

Interface polish principles for frontend development include concentric border radius, optical alignment, shadow depth, text crispness, tabular numbers, balanced text wrapping, interruptible animations, and transform origin awareness. These 18 rules ensure high visual quality and refined user experiences in generated React components.

Yes, you can use this to build UI for a login form or product card in React. Simply request the interface you need, and the skill generates distinctive, production-grade component code while automatically applying best practices for visual appeal and usability.

Yes, the generated React UI supports reduced motion and animation restraint. The skill automatically applies performance-safe properties, custom easing curves, sequential tooltip delays, and active press feedback while respecting reduced motion preferences for accessible frontend interfaces.

The best way to ensure optical alignment and text balance in frontend components is to generate code that automatically applies these interface polish principles. The skill handles optical alignment, balanced text wrapping, text crispness, and tabular numbers automatically during React component generation.

No dependencies are required to generate production-grade frontend interfaces. The skill operates independently to output React and HTML code that adheres to high design quality standards, applying 18 polish principles without needing external libraries or setup.