# frontend-ui-composer

> Compose frontend pages and reusable components directly from specs using Next.js App Router. Use when designing UI layout, auth flows, and responsive design.

- Author: Farheenzehra99
- Repository: Farheenzehra99/Hackathone-2
- Version: 20260130004406
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/Farheenzehra99/Hackathone-2
- Web: https://mule.run/skillshub/@@Farheenzehra99/Hackathone-2~frontend-ui-composer:20260130004406

---

---
##name: "spec-driven-ui-composer"
description: "Compose frontend pages and reusable components directly from specs using Next.js App Router. Use when designing UI layout, auth flows, and responsive design."
version: "1.0.0"
---

# Spec-Driven Frontend Composition Skill

## When to Use This Skill

- Building UI from written specifications  
- Using Next.js App Router  
- Authentication affects UI behavior  
- Responsive layout required

## How This Skill Works

1. Identify pages: auth, dashboard, task views  
2. Define reusable UI components  
3. Map API data to UI state  
4. Handle authentication states  
5. Ensure responsive design

## Output Format

- Page Definitions  
- Component List  
- Data Flow Description  
- Auth-aware UI Rules

## Quality Criteria

- UI exactly follows specifications  
- Backend logic does not leak into frontend  
- Auth states clearly handled  
- Components are reusable and minimal