# frontend-skill

> Build frontend pages and components with consistent layout, styling, and user experience.

- Author: Ahmed Faraz
- Repository: Ahmedcode-s/Hackathon_02
- Version: 20260210035442
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-09
- Source: https://github.com/Ahmedcode-s/Hackathon_02
- Web: https://mule.run/skillshub/@@Ahmedcode-s/Hackathon_02~frontend-skill:20260210035442

---

---
name: frontend-skill
description: Build frontend pages and components with consistent layout, styling, and user experience.
---

# Frontend Skill

## Instructions

1. **Page Structure**
   - Create clear page-level layouts
   - Organize routes and views logically
   - Ensure responsive behavior

2. **Component Design**
   - Build reusable, composable components
   - Keep components focused and single-purpose
   - Pass data via clear props or state

3. **Layout & Styling**
   - Use consistent spacing and typography
   - Apply a unified color system
   - Support mobile-first design

4. **State & Data Handling**
   - Manage local and global state cleanly
   - Handle loading and error states
   - Integrate with backend APIs

5. **User Experience**
   - Provide clear feedback for user actions
   - Optimize for performance and accessibility
   - Ensure smooth navigation

## Best Practices
- Prefer composition over large components
- Keep styles predictable and scoped
- Avoid over-rendering
- Follow design system conventions
- Test UI across screen sizes

## Example Flow
```text
Route → Page Layout → Components → Styled UI
User Interaction → State Update → UI Re-render