# frontend-skill

> Build frontend applications including pages, components, layouts, and styling for modern web interfaces.

- Author: Shafaq Mughal
- Repository: shafaqmughal20/Todo_Hackathon
- Version: 20260209012612
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-08
- Source: https://github.com/shafaqmughal20/Todo_Hackathon
- Web: https://mule.run/skillshub/@@shafaqmughal20/Todo_Hackathon~frontend-skill:20260209012612

---

---
name: frontend-skill
description: Build frontend applications including pages, components, layouts, and styling for modern web interfaces.
---

# Frontend Skill

## Instructions

1. **Page & Layout Structure**
   - Organize pages with semantic HTML elements
   - Use responsive layout patterns (flexbox, grid)
   - Ensure proper spacing, alignment, and hierarchy
   - Keep components modular and reusable

2. **Component Development**
   - Build UI components (buttons, forms, cards, modals)
   - Use frameworks/libraries like React, Vue, or Svelte
   - Pass props or state to make components dynamic
   - Separate presentation and logic when possible

3. **Styling**
   - Use CSS, Sass, Tailwind, or styled-components
   - Apply consistent color schemes and typography
   - Implement hover, focus, and active states
   - Optimize for mobile-first responsiveness

4. **Frontend Best Practices**
   - Keep code modular and reusable
   - Use semantic HTML for accessibility
   - Optimize images and assets for performance
   - Minimize inline styles; prefer reusable classes
   - Test components across different screen sizes

## Example Structure
```html
<!-- Page Layout -->
<div class="page-container">
  <header class="header">Header Content</header>
  <main class="main-content">
    <section class="hero">
      <h1 class="hero-title">Welcome to Our Site</h1>
      <p class="hero-subtitle">Build modern pages efficiently</p>
      <button class="cta-button">Get Started</button>
    </section>
    <section class="features">
      <div class="feature-card">Feature 1</div>
      <div class=