Ui Components

UI Components

Overview

Implement production UI with composition over configuration, clear state handling, and components under 200 lines.

When to Use

• Building or modifying components, pages, layouts
• Wiring interactive UI with /ui
• Refactoring overgrown or prop-heavy components

Workflow

1. Structure

• Prefer composition over configuration
• Separate data fetching from presentation
• Colocate component + test + styles when practical
• Keep files under 200 lines (split if larger)

1. State (see also references/architecture.md)

• Local (useState) → component UI
• Lifted → 2–3 siblings
• Context → theme, auth, locale
• URL → filters, pagination
• Server state (React Query/SWR) → remote data
• Avoid prop drilling deeper than 3 levels

1. Required UI states

• Loading
• Error
• Empty
• Default / success

1. Responsive — MUST load responsive-ui for layout UI

• Mobile-first; verify 320 / 768 / 1024 / 1440
• No fixed widths that break small screens; adapt tables/nav

1. Icons (default on — do not omit)

• MUST use Reicon for nav, toolbars, empty states, and icon buttons unless the project already standardizes another library
• Vanilla HTML/CSS/JS: add CDN https://unpkg.com/reicon/cdn/reicon.min.js + ``
• React: reicon-react; Vue/Svelte: matching package — see references/reicon-icons.md
• Prefer currentColor + token text classes; Outline default, Filled for emphasis
• Icon-only controls need an accessible name
• Text-only UI only with an explicit waiver in the Conventions check

1. Selects / filters (product UI)

• Prefer custom select / combobox / listbox styled with tokens — not bare OS `` chrome for dashboard filters and toolbars
• Trigger: label + value + caret; generous end padding / gap so the chevron is not flush to the right edge
• Menu: token surface, hover/selected states, Escape + outside-click close; keyboard path required
• Native `` only with waiver (e.g. native mobile OS picker required) — note in Conventions

1. Tokens + slop

• Use design-tokens for all visual values
• Finish with anti-ai-slop scan

1. Before DONE

• Output Conventions check from references/compliance-gates.md (tokens, icons, states, responsive, webgl n/a, …)

Checklist

• [ ] Composition preferred over giant prop APIs
• [ ] Loading / error / empty handled
• [ ] Reicon (or project icon lib) actually in the markup — not forgotten
• [ ] Interactive elements keyboard accessible
• [ ] Filters/selects are custom (or waived) — caret not cramped
• [ ] Responsive: 320/768/1024/1440 + Conventions line
• [ ] Component ≤ 200 lines or split
• [ ] Anti-slop scan clean
• [ ] Conventions check reported

Depth

Good/bad examples: references/component-patterns.md. Responsive: responsive-ui + references/responsive.md. Icons: references/reicon-icons.md. Ship gates: references/compliance-gates.md. State & org: references/architecture.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
• Source: sukirman1901/frontend-expert
• License: MIT
• Homepage: https://github.com/sukirman1901/frontend-expert

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