# Onnuri UI System

> This skill enforces a consistent, mobile-first UI.

- Skill: `majiayu000/onnuri-ui-system` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/onnuri-ui-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/onnuri-ui-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/onnuri-ui-system

---


# Skill: onnuri-ui-system

This skill enforces a consistent, mobile-first UI.

## Global styling
- Background color must be `#F9F8F6` across all pages.
- Prefer simple cards, clear spacing, and readable typography.
- Touch targets must be >= 44px height.

## Component rules
- Keep UI minimal and consistent.
- Avoid heavy animations and complex interactions.
- Use a small number of reusable visual patterns:
  - header area
  - search input
  - chip row
  - list cards
  - empty/error states

## State UI
- Loading: skeleton placeholders.
- Empty: short, clear message.
- Error: short message + keep details in `console.error`.

## Navigation UX
- Preserve list context via URL query params.
- Avoid navigation churn that breaks IME or causes excessive rerenders.
- Do not implement scroll restoration.

## Accessibility basics
- Buttons should have clear labels.
- Inputs should have placeholders and/or labels.
- Keep contrast readable against `#F9F8F6`.