> For the complete documentation index, see [llms.txt](https://lilo.gitbook.io/lilocookbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lilo.gitbook.io/lilocookbook/role-pages/1.4-frontend.md).

# 1.4 Frontend

You turn product intent into fast, accessible UI that stays correct over time.

**What to emphasize**

* Component architecture, state, routing, data fetching, auth guard
* Performance: bundle size, FCP/LCP, interaction latency
* Accessibility, testing, and visual correctness

### **Copy-paste**

#### **Role‑specific SWITCHER**

{% code overflow="wrap" %}

```prompt
SWITCH ROLE → Frontend
Priority: UX correctness, performance, and accessibility. Use the JD’s framework terms, testing stack, and perf metrics. Keep the bullets tied to real user flows.
```

{% endcode %}

### Core tailor prompt

```prompt
Produce 2–3 Frontend bullets aligned to the JD:
- Call out the main flows and components you shipped.
- State data‑fetch pattern and loading/error states.
- Include 1 performance or accessibility metric.

JD:
[Paste]

Experience:
[Paste role or project]
```

**Role micro‑prompts**

* “Replace generic ‘load time’ with a concrete metric like LCP, TTI, or input delay if you measured it.”
* “Add one a11y proof such as tab order, aria labels, or color contrast.”

```prompt
Ask me:
1) Main flows shipped and which pages or components.
2) State management approach (hooks, context, store) and why.
3) Data‑fetch patterns and loading/error states.
4) Performance improvements: what metric, by how much, how measured.
5) Accessibility checks: aria, keyboard, contrast, focus traps.
Then write 2–3 bullets that cite a UI flow and one metric.
```

### Examples

### Short patterns you can model

* Implemented booking flows in Next.js with protected routes and server‑side data fetching, added optimistic updates to keep UI responsive, and trimmed hero bundle to reduce time to first interaction.\
  TODO: add LCP or interaction delay.
* Shipped a news dashboard with search and filters, wrote unit tests for the critical components, and added keyboard navigation and focus management to improve accessibility.\
  TODO: add coverage percent or bug reduction.

### **Before→After** 

#### *Before*

Built a booking website with Next.js.

#### *After*

Built a booking UI in Next.js and React with protected routes and server‑side data fetching, added optimistic updates for create/cancel flows, and cut time to first interaction by trimming the hero bundle.\
*TODO: add bundle size delta or LCP value.*

#### *Before*

Made a news dashboard.

#### *After*

Shipped a news content tracker with search, topic filters, and saved views; wrote unit tests for critical components and added keyboard navigation and focus management to pass basic accessibility checks.\
*TODO: add test coverage or issue count reduced.*

### Quick checklist

* Mention at least one main flow (page or component)
* Include a data-fetch detail and how errors/loading were handled
* Show one performance metric (LCP, TTI, bundle size, interaction delay)
* Add one accessibility or testing proof
* One line, verb first, correct tense