# Frontend UI Engineering

> Frontend UI Engineering

- Skill: `charlieviettq/frontend-ui-engineering-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add charlieviettq/frontend-ui-engineering-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/charlieviettq/frontend-ui-engineering-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: charlieviettq (https://skillmd.com/u/charlieviettq)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/charlieviettq/frontend-ui-engineering-2

---


# Frontend UI Engineering

End-to-end UI implementation: structure, styling, responsive behavior, state, and accessibility. Extends `frontend-ui-accessibility` with architecture and design-system discipline.

## When to use

- New page, form, or interactive component
- Refactoring UI for consistency or responsiveness
- Applying or extending a design system

## When not to use

- Backend-only change
- Accessibility audit only (use `frontend-ui-accessibility`)
- Full visual redesign exploration (consider design consultation workflows)

## Workflow

1. **Inventory** — existing components, tokens, patterns to reuse
2. **Structure** — semantic HTML; split presentational vs container components
3. **Layout** — mobile-first breakpoints; avoid fixed widths that break small screens
4. **State** — local vs shared; minimize prop drilling; document async/loading/error UI
5. **Styling** — tokens (color, spacing, type); no magic numbers scattered
6. **A11y** — keyboard, focus, labels, contrast (see `frontend-ui-accessibility`)
7. **Verify** — key viewports; critical user paths; no console errors

## Checklist

| Area | Check |
|------|-------|
| Components | Single responsibility; reusable primitives |
| Responsive | Works at 320px and desktop; touch targets adequate |
| Loading/empty/error | All three states designed |
| Performance | Avoid unnecessary re-renders; lazy-load heavy assets |
| A11y | Focus order, ARIA only when needed, form labels |

## Output

- Implemented components with consistent patterns
- Brief note on new tokens or patterns added to the design system

## Related skills

- `frontend-ui-accessibility` — WCAG-focused review
- `browser-testing-with-devtools` — runtime verification
- `performance-optimization` — bundle and render performance

*Adapted from [addyosmani/agent-skills](https://github.com/addyosmani/agent-skills) (MIT).*