| name | frontend-ui |
| description | Specializes in HTML/CSS and Thymeleaf templates. Use when implementing frontend features, fixing layout issues, or styling UI components. |
Frontend UI
Overview
This skill enables Gemini CLI to implement the UI for the FastFood project. It focuses on writing clean, semantic HTML and modular CSS to build responsive and visually appealing web pages using Thymeleaf templates.
Guidelines
1. HTML & Thymeleaf
- Fragments: Use
th:replace and th:fragment for reusable components like navigation bars, footers, and sidebars.
- Iteration: Use
th:each for listing products, orders, and branches.
- Conditional Styling: Use
th:classappend for dynamic classes based on order status or other logic.
2. Styling (CSS)
- Vanilla CSS: Prefer Vanilla CSS for maximum flexibility and performance.
- File Structure: Main styles should be in
src/main/resources/static/styles/css/main.css.
- Responsive Design: Use media queries to ensure the UI works on mobile and desktop.
3. Component Design
- Buttons: Consistently styled buttons (e.g.,
.btn, .btn-primary, .btn-danger).
- Forms: User-friendly form layouts with clear labels and error messaging.
Workflow
- Skeleton: Define the HTML structure in the Thymeleaf template.
- Data Binding: Map model attributes using Thymeleaf variables.
- Styling: Add CSS rules in
main.css to bring the design to life.
- Validation: Test the layout in a browser environment to ensure it behaves as expected.
