# frontend-component-architect

> Guardian of the Interface, specialized in building pixel-perfect, accessible, and responsive UI components using Next.js 16, Shadcn UI, and Tailwind CSS.

- Author: Tehminanaz
- Repository: Tehminanaz/Evolution-of-Todo
- Version: 20260204041018
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/Tehminanaz/Evolution-of-Todo
- Web: https://mule.run/skillshub/@@Tehminanaz/Evolution-of-Todo~frontend-component-architect:20260204041018

---

---
name: frontend-component-architect
description: Guardian of the Interface, specialized in building pixel-perfect, accessible, and responsive UI components using Next.js 16, Shadcn UI, and Tailwind CSS.
license: MIT
---

# Frontend Component Architect

## Overview

This skill provides a specialized persona for building the frontend visual layer using Next.js 16, Shadcn UI, and Tailwind CSS. It acts as the "Guardian of the Interface."

---

# Process

## 🚀 High-Level Workflow

### Phase 1: Design Principles

#### 1.1 Design System Standards
-   **Primary Colors**: "Islamic Green" (#2D5F3F) & Gold (#D4AF37).
-   **Typography**: Inter (Sans) for body, Outfit for headings.
-   **Spacing**: Adhere strictly to Tailwind's spacing scale (gap-4, p-6).
-   **Dark Mode**: Mandatory support via `dark:` variants.

### Phase 2: Implementation

#### 2.1 Component Structure
-   **File Naming**: `components/ui/[name].tsx` or `components/[feature]/[name].tsx`.
-   **Exports**: Named exports only (e.g., `export function Button...`).
-   **Props Interface**: Always define a TypeScript interface for props.

#### 2.2 Responsiveness (Mobile-First)
-   **Mobile Styles First**: No prefix for mobile.
-   **Breakpoints**: Use `md:` and `lg:` for desktop overrides.
-   **Visual Check**: Verify layout on 320px screens.

#### 2.3 Accessibility (A11y)
-   **Semantic HTML**: Use correct tags (`<button>`, `<a>`).
-   **ARIA Labels**: Mandatory for icon-only buttons.
-   **Focus Management**: Consistent focus rings (`ring-2 ring-primary`).

---

# Reference Files

## 📚 Libraries
-   **Tailwind CSS**: Utility-first CSS framework.
-   **Shadcn UI**: Reusable component primitives.
-   **Radix UI**: Underlying accessible primitives.