# Responsive Ui

> >-

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

## Install

```sh
agentstack add skill-sukirman1901-frontend-expert-responsive-ui
```

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

## About

# Responsive UI

## Overview

Ship layouts that work on **all devices** — phone floor through desktop. Not React Native: responsive **web**.

## When to use

- Every `/ui` / polish build that touches layout
- “Mobile”, “responsive”, “tablet”, “semua device”, burger / sidebar
- Tables, dashboards, nav, forms, marketing pages

## When to skip

- Pure token/color tweak with no layout change (still keep existing responsive behavior)
- Explicit waiver: desktop-only internal tool (must state in Conventions)

## Workflow

1. **Mobile-first** — base styles for ~320px; enhance at 768 / 1024 / 1440
2. **Check** — no horizontal page scroll; primary actions reachable; tap targets ≥44px
3. **Adapt content** — tables → cards/stack; **side nav → overlay drawer + backdrop**; don’t hide profile/account without alternative
4. **Mobile controls** — primary CTAs / form submit / destructive row actions → **`width: 100%`** below 768; stack button rows vertically
5. **Breakpoint cleanup** — on resize past mobile, close drawer / clear `is-open` / unlock body scroll
6. **Report** — Conventions: `Responsive: 320/768/1024/1440 checked`

## Figma Auto Layout → CSS (quick)

| Figma | CSS |
|-------|-----|
| **Fill** | `width: 100%` / `flex: 1` / `align-self: stretch` |
| **Hug** | `width: fit-content` / `flex: 0 0 auto` |
| **Fixed** | Explicit width/height |
| **Gap / Padding** | `gap` / `padding` (tokens) |
| Primary CTA on phone | Fill → **`width: 100%`** below 768 |

Full table: `references/responsive.md` → Figma Auto Layout ↔ CSS.

## Mobile controls (MUST <768)

| Control | Mobile rule | Don’t |
|---------|-------------|--------|
| **Primary button** | Full width (`width: 100%`) in forms, toolbars, plan/row actions | Tiny desktop-width CTA floating left |
| **Secondary in same row** | Stack under primary, also full width when it’s the only action column | Side-by-side cramped pair |
| **Form inputs** | Full width; `font-size ≥ 16px` (prevents iOS zoom) | `14px` inputs that zoom the page |
| **Icon utilities in topbar** | Keep essentials (e.g. theme + bell + avatar); hide secondary (search) if crowded | 4–5 icon buttons + label Menu |
| **Profile** | Avatar-only → account menu; name/email inside menu | Always-on name/email in chrome, or `display: none` on whole profile |
| **Theme** | Topbar icon toggle | Sidebar footer “Dark mode” button |

Example:

```css
@media (max-width: 767px) {
  .form__actions { flex-direction: column; align-items: stretch; }
  .form__actions .btn--primary,
  .toolbar .btn--primary,
  .row .btn { width: 100%; }
  .field input { font-size: 1rem; min-height: 2.75rem; }
}
```

## Mobile nav (MUST for dashboard/shell)

| Do | Don’t |
|----|-------|
| Fixed/overlay drawer + dimmed backdrop | `display:block` nav that pushes page down |
| Icon-only burger that swaps to close (X); close also inside drawer | Labeled “Menu” still visible beside open panel |
| Close on backdrop, Escape, nav select | Leave drawer open across breakpoint changes |
| `aria-expanded` + focus management | Focus trap ignored |

## Checklist

- [ ] Verified (or reasoned) at 320 / 768 / 1024 / 1440
- [ ] No page-level horizontal overflow
- [ ] Touch targets ≥44px for primary controls
- [ ] **Primary buttons full-width on mobile** (forms / toolbars / action rows)
- [ ] Figma Fill/Hug mapped correctly when a design file exists
- [ ] Inputs ≥16px font on mobile
- [ ] Drawer + backdrop for side nav on small screens
- [ ] Account/profile control not deleted on mobile
- [ ] Conventions Responsive line filled

## Depth

Full rules + patterns: `references/responsive.md`.  
Shell chrome: `app-shell-routing`.  
Optional local sandbox: `test/` (gitignored; not shipped).  
Ship gate: `references/compliance-gates.md`.

## Source & license

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

- **Author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** [sukirman1901/frontend-expert](https://github.com/sukirman1901/frontend-expert)
- **License:** MIT
- **Homepage:** https://github.com/sukirman1901/frontend-expert

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-sukirman1901-frontend-expert-responsive-ui
- Seller: https://agentstack.voostack.com/s/sukirman1901
- 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%.