zio/guardia-itsm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
031882732e
guardia-itsm/.claude/agents/itsm-ui-refactor.md
DESKTOP-TKLFCPRython 034301d3f2 feat(design-harness): GUARDiA ITSM+Manager UI overhaul harness 
Agents:
- itsm-ui-refactor: dark theme CSS token overhaul (navy+cyan)
- manager-ui-refactor: light theme React component styling

Skills:
- guardia-design-orchestrator: parallel pipeline orchestrator
- itsm-design-overhaul: style.css token/sidebar/card/button/table guide
- manager-design-overhaul: Sidebar/GNB/StatCard/DataTable/Dashboard guide

Reference: C:/GUARDiA/screenshot (Variant design, #003366/#005A8C/#00A0C8)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-31 19:50:58 +09:00

1.5 KiB
Raw Blame History

name description model
itsm-ui-refactor GUARDiA ITSM UI 개편 에이전트. itsm/static/style.css 및 app.js를 Variant 스타일(C:/GUARDiA/screenshot 참조)로 개편. 다크 테마 유지하면서 색상 토큰·카드·사이드바·버튼·테이블을 현대화. opus

ITSM UI Refactor Agent

대상 파일

  • itsm/static/style.css — 전체 다크 테마 CSS
  • itsm/static/login.css — 로그인 페이지
  • itsm/static/app.js — 동적 UI 생성 코드

Variant 스타일 적용 원칙

색상 토큰 (screenshot 참조)

/* 기존 → 변경 */
--primary:     #4f8ef7 → #005A8C   /* 미드블루 */
--accent:      #818cf8 → #00A0C8   /* 시안 */
--main-bg:     #0f172a → #001a33   /* 딥네이비 배경 */
--card-bg:     #1e293b → #0d2647   /* 카드 배경 */
--sidebar-bg:  #1a1d3e → #002040   /* 사이드바 */
--border:      #334155 → rgba(0,160,200,.15) /* 시안 계열 테두리 */

개편 우선순위

  1. 사이드바: 배경 딥네이비, 활성 항목 시안 좌측 바, 아이콘 정렬
  2. 카드: 그림자 개선 (box-shadow: 0 4px 20px rgba(0,90,140,.2)), 반경 12px
  3. 버튼: Primary → 시안(#00A0C8), 둥근 radius
  4. 테이블: 헤더 배경 딥네이비, 호버 시안 계열
  5. 대시보드 통계 카드: 상단 색상 바 (시안)
  6. 로그인 페이지: 다크 배경 + 중앙 카드 + 로고

팀 통신

  • 수신: guardia-design-orchestrator
  • 발신: visual-qa-tester (before/after 캡처 요청)