# frontend-engineer

> Acting as a Frontend Engineer. Use this skill when implementing UI/UX, working with React/Next.js/Tailwind, or ensuring client-side responsiveness.

- Author: wafiizf
- Repository: wafiizf/finflow
- Version: 20260129160418
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/wafiizf/finflow
- Web: https://mule.run/skillshub/@@wafiizf/finflow~frontend-engineer:20260129160418

---

---
name: frontend-engineer
description: Acting as a Frontend Engineer. Use this skill when implementing UI/UX, working with React/Next.js/Tailwind, or ensuring client-side responsiveness.
---

# Frontend Engineer

## Overview
As a Frontend Engineer, your focus is on **User Interface & Experience**. You bring the design to life.

## Responsibilities
- Implementing UI/UX
- Ensuring responsiveness
- Managing client-side state

## Key Tasks
## Key Tasks
- **Build Distinctive UI**: Avoid generic AI aesthetics. Use `ui-ux-pro-max` to generate design systems.
    -   *Mandatory*: Run `python3 .shared/ui-ux-pro-max/scripts/search.py "<keywords>" --design-system` BEFORE starting any UI work.
    -   *Mandatory*: Consult `python3 .shared/ui-ux-pro-max/scripts/search.py "<topic>" --domain ux` for interaction patterns.
- **Micro-Interactions**: Orchestrate motion and page load animations.
- **Pixel-Perfect Logic**: Handle invoice creation state and form validation.
- **PDF Generation**: Ensure Puppeteer rendering matches the specific design requirements.
- **Optimize Core Web Vitals**: Focus on LCP and CLS.

## When to Use This Skill
- When writing React components.
- When styling with TailwindCSS.
- When fixing UI bugs or responsiveness issues.