kb-bank-styles
KB Bank Style Guide (KB국민은행 / KB스타뱅킹 UI)
이 스킬은 KB금융그룹 / KB국민은행 / KB스타뱅킹의 시각 언어를 토대로 한국형 인터넷뱅킹 UI를 빠르게 구축하기 위한 가이드와 토큰·컴포넌트 모음이다.
1. 디자인 정체성
| 요소 | 톤 |
|---|---|
| 인상 | 신뢰감 있고 명료한 / 정보 밀도가 높지만 답답하지 않은 |
| 분위기 | 화이트 캔버스 + 강한 옐로우 포인트 + 진한 본문 그레이 |
| 형태 | 큰 라운딩(12–20px), 옅은 그림자, 카드 단위 정보 그룹화 |
| 모션 | 과하지 않게. 누름 상태(scale 0.98) + 토글 트랜지션 위주 |
| 보이스 | "○○님, ~하세요/했어요" 친근한 존댓말. 숫자는 천단위 콤마 + "원" |
More from parkyoungwoong/skills
react-vite-scaffold
(heropy) Use when initializing a new Vite + React (CSR) project or when an existing Vite React project needs missing configuration (ESLint, Prettier, TanStack Query, React Router, Zustand, Tailwind CSS, VSCode settings, path aliases).
62lighthouse
(heropy) Use when analyzing web page performance, accessibility, best practices, or SEO using Google Lighthouse. Runs LHCI CLI locally, parses results, and suggests improvements with optional code fixes.
14react-next-scaffold
(heropy) Use when initializing a new Next.js (SSR) project or when an existing Next.js project needs missing configuration (ESLint, Prettier, TanStack Query, Tailwind CSS, VSCode settings, path aliases).
12react-vite-to-next-migration
(heropy) Use when migrating an existing Vite + React (TypeScript) project to Next.js (App Router, v16). Converts entry points, routing (React Router → App Router), environment variables, path aliases, static assets, and styling setup.
8skill-commit
(heropy) Use when committing changes in this project. Analyzes changes to generate appropriate commit messages and bumps skill versions in frontmatter when SKILL.md files are modified.
6web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
3