Name: Ui To Frontend
Author: muffedd

UI to Frontend Skill

When implementing UI designs into front-end code, follow these steps:

Build checklist

Design accuracy: Match spacing, layout, fonts, colors, radius, borders, shadows, and hierarchy exactly.
Component architecture: Split the UI into reusable components (Button, Card, Badge, Section) with clean props.
Responsiveness: Ensure the UI adapts correctly for mobile, tablet, and desktop without overflow or broken alignment.
States & motion: Add hover, focus, active, disabled, loading states, plus transitions/animations if the design implies them.
Integration safety: Do not modify global CSS, theme files, or shared tokens unless explicitly required. Keep styles scoped.
Accessibility: Use semantic HTML, keyboard support, visible focus states, and ARIA where needed.
Performance: Avoid layout shifts, heavy effects, unnecessary wrappers, and repeated rendering.

When implementing UI designs into front-end code, follow these steps:

Design accuracy: Match spacing, layout, fonts, colors, radius, borders, shadows, and hierarchy exactly.
Component architecture: Split the UI into reusable components (Button, Card, Badge, Section) with clean props.
Responsiveness: Ensure the UI adapts correctly for mobile, tablet, and desktop without overflow or broken alignment.
States & motion: Add hover, focus, active, disabled, loading states, plus transitions/animations if the design implies them.
Integration safety: Do not modify global CSS, theme files, or shared tokens unless explicitly required. Keep styles scoped.
Accessibility: Use semantic HTML, keyboard support, visible focus states, and ARIA where needed.
Performance: Avoid layout shifts, heavy effects, unnecessary wrappers, and repeated rendering.