# frontend-ui-skill

> Build modern frontend interfaces including pages, components, layouts, styling, animations, and dynamic UI changes.

- Author: MuhammadHamzaKhan786
- Repository: MuhammadHamzaKhan786/GIAIC-HAKAHTON-PHASE-3
- Version: 20260208143438
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-08
- Source: https://github.com/MuhammadHamzaKhan786/GIAIC-HAKAHTON-PHASE-3
- Web: https://mule.run/skillshub/@@MuhammadHamzaKhan786/GIAIC-HAKAHTON-PHASE-3~frontend-ui-skill:20260208143438

---

---
name: frontend-ui-skill
description: Build modern frontend interfaces including pages, components, layouts, styling, animations, and dynamic UI changes.
---

# Frontend UI Skill

## Instructions

1. **Page & layout structure**
   - Build pages with a clear hierarchy
   - Use responsive layouts (flexbox, grid)
   - Implement common layouts (navbar, footer, sidebar)
   - Ensure mobile, tablet, and desktop support

2. **Component development**
   - Create reusable and composable components
   - Manage props, state, and events
   - Keep components modular and readable
   - Follow consistent naming conventions

3. **Styling system**
   - Apply consistent colors, spacing, and typography
   - Use CSS modules, utility-first CSS, or styled components
   - Handle hover, focus, and active states
   - Ensure accessibility-friendly contrast and sizing

4. **Animations**
   - Add entrance and exit animations
   - Use transitions for UI state changes
   - Apply scroll-based and hover animations
   - Keep animations smooth and performant

5. **UI state & visual changes**
   - Update UI based on user interaction
   - Handle loading, empty, and error states
   - Animate layout or component state changes
   - Reflect application state clearly in the UI

## Best Practices
- Mobile-first design approach
- Reuse components instead of duplicating UI
- Keep animations subtle and purposeful
- Avoid layout shifts during animations
- Use semantic HTML elements
- Ensure accessibility with keyboard and screen readers
- Optimize performance by minimizing reflows and repaints

## Example Structure
```html
<section class="card animate-fade-in">
  <h2 class="card-title">Feature Title</h2>
  <p class="card-description">
    Description text goes here.
  </p>
  <button class="btn-primary hover-scale">
    Learn More
  </button>
</section>