agentmods.dev

uiux-upgrade

A command that reviews a project’s interface and user experience, then changes the code to fix the problems it finds. It checks areas such as mobile layouts, accessibility, forms, loading states, navigation, and themes.

In plain words
What is it for?
Use it to inspect and improve a web application’s responsive design, keyboard access, image labels, loading feedback, form behavior, navigation, typography, spacing, and animations. Its output is written in Korean in a Tost-style voice.
Why use it?
It removes the need to find and correct common interface problems by hand across many files. It also gives the review a consistent set of checks.

Command

Part of the fireauto plugin — 19 skills, 17 commands, 6 agents, 3 hooks, 1 MCP server shipped together

140 4mo ago A scan 16 tokens original MIT
View the source file imgompanda/fireauto
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add commands/imgompanda/fireauto/uiux-upgrade
Clone the repo
git clone --depth 1 https://github.com/imgompanda/fireauto

Or install fireauto, the plugin that ships this one along with the rest of its 19 skills, 17 commands, 6 agents, 3 hooks, 1 MCP server.

Per session 16 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,265 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00016 $0.01265
Opus 5 $0.00008 $0.00633
Sonnet 5 $0.00003 $0.00253
Haiku 4.5 $0.00002 $0.00127

Measured 3d ago against content hash 33c304c3931a, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

uiux-upgrade scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugin/commands/uiux-upgrade.md · 143 lines

How it starts

The opening of the file, as written. The whole thing — 143 lines — stays where its author put it; the contents beside it link to each section on GitHub.

uiux-upgrade: UI/UX 개선 실행

내 프로젝트의 UI/UX를 분석하고, 발견된 문제를 직접 코드로 고쳐주는 커맨드예요.

모든 출력은 **한국어(토스체)**로 작성해요.

Step 1: 프로젝트 스캔

먼저 프로젝트 구조를 파악하세요:

  1. src/app/ — 페이지 라우트 구조
  2. src/components/ — 컴포넌트 구조
  3. src/app/globals.css 또는 tailwind.config.* — 스타일 시스템
  4. package.json — UI 관련 의존성 (DaisyUI, Radix, Framer Motion 등)

Step 2: UI/UX 감사 (8개 카테고리)

2-1. 다크/라이트 모드 호환성

  • 하드코딩된 색상 검색: text-white, text-black, bg-black, bg-white, bg-zinc-*, bg-gray-*
  • DaisyUI 시맨틱 토큰으로 변환 필요한 곳 식별
  • CSS 변수 충돌 검사 (:root vs [data-theme] 우선순위)

2-2. 반응형 디자인

  • 모바일 브레이크포인트 누락 확인 (sm:, md:, lg:)
  • 터치 타겟 크기 (최소 44x44px)
  • 모바일에서 가로 스크롤 발생하는 요소
  • 텍스트 오버플로우 (truncate, line-clamp 누락)

2-3. 접근성 (a11y)

  • alt 속성 누락된 이미지
  • 색상 대비 부족 (특히 text-base-content/40 이하)
  • aria-label 없는 인터랙티브 요소
  • 키보드 네비게이션 가능 여부

2-4. 로딩 상태

  • loading.tsx 또는 Skeleton 누락된 페이지
  • 버튼 클릭 후 피드백 없는 곳
  • 이미지 레이지 로딩 누락

2-5. 폼 UX

  • 유효성 검사 피드백 (에러 메시지 위치, 색상)
  • 포커스 상태 스타일링
  • 자동완성 / 자동 포커스 설정

2-6. 네비게이션 일관성

  • 활성 페이지 표시 (active state)
  • 뒤로 가기 동작
  • 브레드크럼 누락

2-7. 타이포그래피 & 간격

  • 제목 크기 계층 (text-4xl > text-2xl > text-xl)
  • 줄 간격 (leading-*)
  • 섹션 간 간격 일관성

2-8. 애니메이션 & 전환

  • 페이지 전환 효과 유무
  • 호버 상태 누락
  • 과도한 애니메이션 (성능 영향)

Step 3: 문제 분류 및 우선순위

발견된 문제를 분류하세요:

우선순위 기준 예시
P0 (긴급) 사용 불가 또는 심각한 UX 결함 다크모드에서 글자 안 보임, 모바일에서 터치 안 됨
P1 (높음) 사용자 이탈에 영향 로딩 상태 없음, CTA 잘 안 보임, 폼 에러 피드백 없음
P2 (보통) 불편하지만 사용 가능 간격 불일관, 호버 상태 없음, 접근성 미흡
P3 (낮음) 있으면 좋은 개선 애니메이션 추가, 마이크로 인터랙션

Step 4: 자동 수정

사용자에게 확인 후 수정을 진행하세요:

{N}개 문제를 발견했어요. P0 {x}개, P1 {y}개, P2 {z}개, P3 {w}개

어떤 범위까지 수정할까요?

  • P0만 — 긴급한 것만 빠르게
  • P0 + P1 — 중요한 것까지 (추천)
  • 전부 — 다 고칠게요

수정 시 규칙:

  • 하드코딩 색상 → DaisyUI 시맨틱 토큰 (예: text-white → text-base-content)
  • 반응형 누락 → 모바일 퍼스트 브레이크포인트 추가
  • 로딩 상태 → DaisyUI skeleton 또는 loading 컴포넌트 추가
  • 접근성 → aria 속성, alt 텍스트 추가
  • 기존 코드 스타일과 일관되게 수정
  • 수정할 때 관련 없는 코드는 건드리지 않기

Read the full file on GitHub · 143 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 143 lines · 16 tokens per session scan A 33c304c3931a

Subscribe to this mod's changes

uiux-upgrade is a command published in the GitHub repository imgompanda/fireauto (140 stars, last pushed 4mo ago), licensed MIT. It adds 16 tokens to every session and 1,265 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

CSS and stylingDesign and UXFrontendai-agentautomationclaude-codeopensourceplugin
Related

Other commands, from other repositories

pn-typeset

Fix typography — font choices, type scale, hierarchy, loading, and readability. Surgical command for typography improvements. Works standalone or as part of pn-design.

perniemann/pnCore · 35 tokens

pn-arrange

Fix layout, spacing, and visual rhythm — grid, asymmetry, spatial hierarchy. Surgical command for spatial design. Works standalone or as part of pn-design.

perniemann/pnCore · 36 tokens

pn-audit-design-tokens

Surgical design-token audit — CSS custom property coverage, token naming, dark-mode correctness, and hardcoded value elimination. Standalone or chained by pn-frontend-audit.

perniemann/pnCore · 42 tokens

pn-audit-layout

Surgical frontend layout audit — spacing tokens, grid consistency, component rhythm, and responsive behavior. Standalone or chained by pn-frontend-audit.

perniemann/pnCore · 35 tokens

pn-audit-typography

Surgical frontend typography audit — type scale, font choices, loading strategy, hierarchy, and accessibility. Standalone or chained by pn-frontend-audit.

perniemann/pnCore · 38 tokens

pn-bolder

Amplify a timid, safe, or generic design — more visual weight, stronger personality, clearer point-of-view. Use when the design is technically correct but forgettable.

perniemann/pnCore · 38 tokens