# frontend-skill

> Build modern frontend applications by generating routes, pages, reusable components, responsive sections, layouts, and styling using best practices.

- Author: Muhammad Ashar
- Repository: MuhammadAshar28/Todoapp-phase-Three
- Version: 20260208122712
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-08
- Source: https://github.com/MuhammadAshar28/Todoapp-phase-Three
- Web: https://mule.run/skillshub/@@MuhammadAshar28/Todoapp-phase-Three~frontend-skill:20260208122712

---

---
name: frontend-skill
description: Build modern frontend applications by generating routes, pages, reusable components, responsive sections, layouts, and styling using best practices.
---

# Frontend Skill

## Purpose

This skill is designed to generate **clean, responsive, and production-ready frontend code** for modern web applications.  
It focuses on **routing**, **page construction**, **component architecture**, **responsive layouts**, and **styling** with accessibility and performance in mind.

---

## Instructions

### 1. Route Generation
- Define clear and consistent application routes
- Support nested and dynamic routes
- Separate public and protected routes
- Follow framework routing conventions
- Ensure SEO-friendly URLs

### 2. Page Building
- Build structured and readable pages
- Use semantic HTML elements
- Separate layout from page content
- Optimize pages for performance
- Support server-side or static rendering when applicable

### 3. Component Architecture
- Create reusable and composable components
- Keep components small and focused
- Use props for data flow
- Avoid duplicated UI logic
- Organize components by feature or domain

### 4. Responsive Sections & Layouts
- Design mobile-first layouts
- Use flexible grids and containers
- Support multiple screen sizes
- Handle spacing and alignment consistently
- Build reusable layout components (header, footer, sidebar)

### 5. Styling
- Apply consistent styling conventions
- Use CSS modules, utility classes, or scoped styles
- Maintain a design system or theme
- Ensure accessibility (contrast, focus states)
- Avoid unnecessary complexity in styles

---

## Best Practices
- Mobile-first responsive design
- Accessibility-first approach (ARIA, semantic tags)
- Consistent spacing and typography
- Reusable UI patterns
- Minimize layout shift
- Keep styles maintainable and scalable

---