Frontend Skill – UI Pages & Components
Instructions
Pages & Routing
- Create structured pages and routes
- Organize UI by feature or domain
- Support responsive layouts
Component Development
- Build reusable, composable components
- Separate presentation and logic
- Manage component state cleanly
Layout Structure
- Implement consistent layouts
- Use grid and flexbox appropriately
- Ensure responsiveness across devices
Styling
- Apply modern CSS or styling frameworks
- Maintain consistent design tokens
- Support theming and accessibility
Best Practices
- Use reusable and modular components
- Follow mobile-first design principles
- Keep styles consistent and maintainable
- Ensure accessibility standards
- Optimize UI for performance
Example Structure
<main class="layout">
<header class="navbar">Navigation</header>
<section class="content">
<Card />
</section>
</main>