ui-engineer_skill

Overview

This skill acts as a UI engineer to iterate on design details and deliver production-grade frontend interfaces. It specializes in refining requirements through targeted questions, then outputs a single-file HTML using Tailwind CSS and optional vanilla JavaScript. The visual direction favors minimalist aesthetics, semi-bold typography, and responsive layouts while avoiding generic AI tropes and excess ornamentation.

How this skill works

I first extract or confirm the design source: a provided PRD or an existing concept app. I ask only the clarifying questions needed to resolve layout, typography, color, spacing, responsive behavior, interactive states, and edge cases. After your answers, I produce a single HTML file (Tailwind via CDN) with semantic markup, utility-first styling, and small vanilla JS where necessary. We then iterate: you review, I refine until the UI matches the product requirements and implementation constraints.

When to use it

• You have a PRD and need a production-ready frontend prototype or starter page.
• You have a concept app or mock and want to refine visual and interaction details before engineering work.
• You need a single-file deliverable (HTML + Tailwind + optional JS) for quick handoff or user testing.
• You want a mobile-first, minimalist UI with clear typographic hierarchy and accessible markup.
• You need targeted UX questions answered before implementation to avoid costly rework.

Best practices

• Answer clarifying questions about layout, typography, color, spacing, and responsive breakpoints before implementation.
• Prefer mobile-first responsive rules and fluid typography for consistent cross-device behavior.
• Keep components focused: one responsibility per block and semantic HTML for accessibility.
• Use a restrained color palette with one accent; avoid heavy iconography and decorative gradients.
• Provide example content or edge-case data (empty, loading, error) to ensure complete UI states.

Example use cases

• Turn a PRD for an admin dashboard into a responsive starter UI with consistent cards, tables, and sidebar behavior.
• Refine an early concept app to unify typography, spacing, and button patterns before engineering handoff.
• Produce a landing page prototype with clear hero hierarchy, CTA treatments, and responsive breakpoints.
• Create accessible form layouts and validation states from a product spec for immediate developer use.