Design Engineer: Figma to Production

Identify and use semantic HTML elements (header, nav, main, section, footer) to structure web page content.

Create hyperlinks, images, and lists in HTML.

Build an HTML form with text inputs, selects, checkboxes, and a submit button.

Identify how the CSS box model (content, padding, border, margin) affects element sizing and spacing.

Apply CSS properties for typography, colors, and spacing.

Build flexible horizontal and vertical layouts using CSS Flexbox.

Build grid-based page layouts using CSS Grid.

Apply CSS transitions and hover effects to interactive elements.

Set up a project with Tailwind CSS using a pre-configured starter or online playground.

Apply Tailwind utility classes for spacing, typography, colors, and borders.

Translate a Figma design's responsive breakpoints into Tailwind responsive prefixes (sm, md, lg, xl).

Implement a mobile-first design approach using Tailwind to recreate UI components from a Figma design (e.g., cards, navigation bars).

Write and iterate on structured prompts for Cursor, combining design descriptions with UX needs to generate and refine Tailwind components.

Review and fix AI-generated Tailwind code for responsiveness and visual accuracy against a design file.

Initialize a Git repository, commit changes, and push a project to GitHub.

Declare variables and use primitive data types (string, number, boolean).

Write and invoke functions using declarations, expressions, and arrow syntax.

Use conditional logic (if/else, ternary) to control which UI elements appear on a page.

Transform data in arrays using .map(), .filter(), and .forEach() methods.

Implement simple UI updates by selecting and modifying DOM elements.

Attach event listeners to handle user interactions (clicks, input changes).

Debug JavaScript errors using the browser developer tools console.

Identify why asynchronous code is needed by examining how slow operations affect the user experience.

Read and understand async/await syntax in code that fetches data from an API.

Fetch data from a REST API using the Fetch API.

Interpret the structure of a JSON API response and access specific data points.

Implement basic loading and empty states in the UI while data is being fetched.

Configure component instances by passing data through props, analogous to Figma component properties.

Manage local component state (e.g., a menu's open/closed state) using the useState hook.

Handle user events (clicks, input changes) in React components.

Render a list of items from an array of data using the .map() method in JSX.

Show or hide UI elements based on state or props to implement interactive patterns like toggles and dropdowns.

Recognize and supervise AI-generated useEffect patterns for data fetching on component mount.

Create and switch between Git branches to manage new features or experiments.