# Frontend Ui Engineering

> Build production-quality frontend interfaces. Use when creating or modifying UI components, layouts, interaction states, responsive behavior, accessibility, visual polish, or user-facing workflows.

- **Type:** Skill
- **Install:** `agentstack add skill-hsienw-ai-agent-engineering-playbook-frontend-ui-engineering`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [HsienW](https://agentstack.voostack.com/s/hsienw)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [HsienW](https://github.com/HsienW)
- **Source:** https://github.com/HsienW/ai-agent-engineering-playbook/tree/master/skills-application-engineering/frontend-ui-engineering

## Install

```sh
agentstack add skill-hsienw-ai-agent-engineering-playbook-frontend-ui-engineering
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Frontend UI Engineering

## Skill Interface

- Name: frontend-ui-engineering.
- Description: Build production-quality frontend interfaces for UI components, layouts, interaction states, responsive behavior, accessibility, visual polish, and user-facing workflows.
- Parameters: User workflow, target components or routes, design system conventions, data states, content constraints, accessibility needs, viewport targets, and available visual or automated verification commands.
- Instructions: Use this skill when creating or modifying UI. Build the usable workflow first, reuse local design patterns, model all important states, verify responsive behavior with realistic content, and check accessibility and console health.

Build the real usable experience first. Match the product context: operational
tools should be efficient and scannable; creative or consumer experiences can be
more expressive.

## Component Process

1. Identify the user workflow and primary task.
2. Reuse the existing design system, component patterns, icons, spacing, and
   state conventions.
3. Model states explicitly: loading, empty, success, partial, error, disabled,
   permission denied, offline, and long content.
4. Keep data parsing and transport concerns outside presentational components.
5. Add accessibility semantics for labels, focus order, keyboard behavior, and
   status updates.
6. Verify desktop and mobile layouts with realistic content lengths.

## Layout Rules

- Use stable dimensions for fixed-format controls, grids, boards, counters, and
  toolbars.
- Avoid nested cards and decorative wrappers that reduce scanability.
- Do not let text overlap, truncate critical information, or resize controls
  unexpectedly.
- Prefer familiar icon buttons for common commands when the icon is clear.
- Use tooltips for unfamiliar icons.
- Keep display type reserved for true page-level hierarchy.

## State Rules

- Derive UI state from typed data and explicit status fields.
- Do not infer backend semantics from display text.
- Keep optimistic updates reversible.
- Make destructive actions explicit and recoverable when possible.
- Show partial progress without hiding errors.

## Verification

Check:

- Responsive behavior at narrow and wide widths.
- Long labels, long values, and missing data.
- Keyboard navigation and focus visibility.
- Loading, empty, error, and permission states.
- Console errors and hydration warnings when applicable.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [HsienW](https://github.com/HsienW)
- **Source:** [HsienW/ai-agent-engineering-playbook](https://github.com/HsienW/ai-agent-engineering-playbook)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-hsienw-ai-agent-engineering-playbook-frontend-ui-engineering
- Seller: https://agentstack.voostack.com/s/hsienw
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.