website-layout

To update a website layout without altering the visual design, the skill audits existing sections and spacing density, provides three distinct layout proposals, and reconfigures Tailwind grid classes and JSX components while preserving colors and fonts.

The best way to audit website grid patterns is to scan page components to map existing sections, hero variants, and spacing density, which identifies structural issues and informs subsequent layout reconfiguration for improved user flow.

Yes, you can generate multiple layout proposals tailored to your site's content. The skill provides sector-standard, creative, and bold layout options to evaluate before applying the chosen design to your web project.

Yes, this layout reconfiguration approach works with Tailwind and JSX by directly updating JSX files, modifying shared layout components, and adjusting Tailwind grid classes to implement the new structural design.

Implement a new layout proposal by applying the chosen design directly to your codebase. The skill updates JSX files, Tailwind grid classes, and shared layout components to reflect the reconfigured section order, hero variants, and spacing.