# frontend-skill

> Build pages, components, layouts, and styling for modern web applications. Use for frontend development projects.

- Author: MehmaRashid123
- Repository: MehmaRashid123/Hackathon-II_phase-II
- Version: 20260208191303
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-08
- Source: https://github.com/MehmaRashid123/Hackathon-II_phase-II
- Web: https://mule.run/skillshub/@@MehmaRashid123/Hackathon-II_phase-II~frontend-skill:20260208191303

---

---
name: frontend-skill
description: Build pages, components, layouts, and styling for modern web applications. Use for frontend development projects.
---

# Frontend Skill – Pages, Components, Layout, Styling

## Instructions

1. **Layout Structure**
   - Organize pages with semantic HTML
   - Use grid or flexbox for responsive layouts
   - Keep consistent spacing and alignment

2. **Components**
   - Break UI into reusable components
   - Use props and states (if using React/Vue)
   - Keep components modular and maintainable

3. **Styling**
   - Apply CSS, SCSS, or CSS-in-JS
   - Use variables and themes for consistency
   - Responsive design with media queries

4. **Interactions**
   - Add hover, focus, and active states
   - Implement smooth transitions and animations
   - Ensure accessibility (aria tags, keyboard navigation)

## Best Practices
- Keep class and component names clear and consistent
- Prioritize mobile-first design
- Avoid inline styles unless necessary
- Reuse components to reduce redundancy
- Optimize assets for performance