frontend-engineer_skill

Overview

This skill guides frontend engineers to understand product requirements, implement UI pages, and build interactive user interfaces. It focuses on turning design and API specs into maintainable, performant frontend code. The guidance covers component design, state management, API integration, and delivery standards.

How this skill works

I take UI mockups, feature lists, and API documentation as inputs and produce a clear implementation plan, component breakdown, and code deliverables. The process includes requirement analysis, component development, business logic implementation, API integration, and performance tuning. I also provide testing and delivery checklists to ensure production readiness.

When to use it

• You need to implement a new front-end page from design and API specs.
• You must translate product requirements into components and interactions.
• You want to integrate frontend features with backend APIs reliably.
• You need to optimize page performance and user experience.
• You are preparing code for review and production delivery.

Best practices

• Break UI into single-responsibility, reusable components.
• Keep component interfaces explicit and document props/state.
• Use responsive design with defined breakpoints (mobile/tablet/desktop).
• Debounce input-heavy interactions and lazy-load large assets.
• Add clear error handling for API calls and user feedback paths.

Example use cases

• Implementing a configurable export panel that calls an export API and streams files to users.
• Building a search UX with real-time suggestions, filters, sorting, and virtualized result lists.
• Creating a form-heavy page with validation, dependent fields, and submission retries.
• Refactoring a monolithic page into a component library for reuse across the app.
• Optimizing initial load by code-splitting routes and lazy-loading images.