| name | korean-theming-standards |
| description | Enforces Korean cyberpunk aesthetic and cultural authenticity for Black Trigram.
Ensures proper Korean color palette usage, bilingual text, authentic martial arts
terminology, and Eight Trigram system integration across all UI and game components.
|
| license | MIT |
Korean Theming Standards Skill
Purpose
This skill ensures that all visual, cultural, and thematic elements in Black Trigram maintain authentic Korean cyberpunk aesthetics and respect traditional Korean martial arts philosophy throughout the codebase.
When to Apply
Automatically trigger this skill when:
- Creating or modifying UI components
- Adding visual effects or Three.js elements
- Implementing combat techniques or stances
- Working with text, labels, or descriptions
- Designing menus, HUDs, or overlays
- Adding color themes or styling
- Implementing Korean martial arts terminology
- Creating or modifying trigram stance systems
- Adding player archetypes or character attributes
- Reviewing pull requests with UI or cultural elements
Core Principles
1. Korean Color Palette (색상 체계)
ALWAYS use predefined KOREAN_COLORS constants:
✅ Primary Cyberpunk Colors (사이버펑크 주요 색상)
import { KOREAN_COLORS } from "@/types/constants/colors";
KOREAN_COLORS.PRIMARY_CYAN
KOREAN_COLORS.PRIMARY_BLUE
KOREAN_COLORS.PRIMARY_RED
KOREAN_COLORS.ACCENT_GOLD
KOREAN_COLORS.ACCENT_GREEN
KOREAN_COLORS.ACCENT_PURPLE
✅ Korean Traditional Colors (한국 전통 색상)
KOREAN_COLORS.CARDINAL_EAST
KOREAN_COLORS.CARDINAL_WEST
KOREAN_COLORS.CARDINAL_SOUTH
KOREAN_COLORS.CARDINAL_NORTH
KOREAN_COLORS.CARDINAL_CENTER
✅ Trigram Stance Colors (팔괘 자세 색상)
KOREAN_COLORS.TRIGRAM_GEON_PRIMARY
KOREAN_COLORS.TRIGRAM_TAE_PRIMARY
KOREAN_COLORS.TRIGRAM_LI_PRIMARY
KOREAN_COLORS.TRIGRAM_JIN_PRIMARY
KOREAN_COLORS.TRIGRAM_SON_PRIMARY
KOREAN_COLORS.TRIGRAM_GAM_PRIMARY
KOREAN_COLORS.TRIGRAM_GAN_PRIMARY
KOREAN_COLORS.TRIGRAM_GON_PRIMARY
✅ UI Background Colors (WCAG AA Compliant)
KOREAN_COLORS.UI_BACKGROUND_DARK
KOREAN_COLORS.UI_BACKGROUND_MEDIUM
KOREAN_COLORS.UI_BACKGROUND_LIGHT
KOREAN_COLORS.TEXT_PRIMARY
KOREAN_COLORS.TEXT_SECONDARY
KOREAN_COLORS.TEXT_ACCENT
2. Bilingual Text Requirements (이중 언어 요구사항)
ALL user-facing text MUST include Korean and English:
✅ Proper Bilingual Pattern
interface BilingualText {
readonly korean: string;
readonly english: string;
}
<BilingualLabel
korean="건"
english="Heaven"
separator=" | "
/>
✅ Combat Technique Names
interface Technique {
readonly nameKorean: string;
readonly nameEnglish: string;
readonly nameHanja?: string;
readonly description: BilingualText;
}
const technique: Technique = {
nameKorean: "천둥벽력",
nameEnglish: "Thunder Wall Strike",
nameHanja: "天雷壁列",
description: {
korean: "하늘의 천둥 같은 강력한 벽력 공격",
english: "Powerful thunder wall strike from heaven"
}
};
✅ Vital Point Names (70 Points with Korean/English/TCM)
interface VitalPoint {
readonly nameKorean: string;
readonly nameEnglish: string;
readonly nameTCM: string;
readonly location: string;
}
const baihui: VitalPoint = {
nameKorean: "백회",
nameEnglish: "Hundred Convergences",
nameTCM: "Baihui (GV20)",
location: "정수리 중앙 | Crown of head center"
};
3. Korean Font Usage (한글 폰트 사용)
ALWAYS use FONT_FAMILY constants for Korean text:
✅ Font Family Standards
export const FONT_FAMILY = {
KOREAN: "'Noto Sans KR', 'Malgun Gothic', sans-serif",
ENGLISH: "'Roboto', 'Arial', sans-serif",
MONOSPACE: "'Fira Code', 'Consolas', monospace",
} as const;
<div style={{
fontFamily: FONT_FAMILY.KOREAN,
fontSize: '18px',
fontWeight: 'bold',
color: KOREAN_COLORS.TEXT_PRIMARY,
}}>
{korean} | {english}
</div>
✅ Html Overlay with Korean Fonts
import { Html } from '@react-three/drei';
import { FONT_FAMILY, KOREAN_COLORS } from '@/types/constants';
<Html center position={[0, 2, 0]}>
<div style={{
fontFamily: FONT_FAMILY.KOREAN,
fontSize: isMobile ? 14 : 18,
color: KOREAN_COLORS.ACCENT_GOLD,
fontWeight: 'bold',
textAlign: 'center',
}}>
{korean} | {english}
</div>
</Html>
4. Eight Trigram System Integration (팔괘 체계)
ALWAYS reference authentic I Ching trigrams:
✅ Trigram Stance Definitions
export const TRIGRAM_STANCES = {
GEON: {
symbol: "☰",
korean: "건",
english: "Heaven",
hanja: "乾",
element: "Metal",
direction: "Northwest",
philosophy: "Creative force, initiative, direct power",
techniqueKorean: "천둥벽력",
techniqueEnglish: "Thunder Wall Strike",
color: KOREAN_COLORS.TRIGRAM_GEON_PRIMARY,
},
TAE: {
symbol: "☱",
korean: "태",
english: "Lake",
hanja: "兌",
element: "Metal",
direction: "West",
philosophy: "Joyful, fluid movement, adaptability",
techniqueKorean: "유수연타",
techniqueEnglish: "Flowing Water Strike",
color: KOREAN_COLORS.TRIGRAM_TAE_PRIMARY,
},
LI: {
symbol: "☲",
korean: "리",
english: "Fire",
hanja: "離",
element: "Fire",
direction: "South",
philosophy: "Illumination, precision, clarity",
techniqueKorean: "화염지창",
techniqueEnglish: "Flame Spear",
color: KOREAN_COLORS.TRIGRAM_LI_PRIMARY,
},
JIN: {
symbol: "☳",
korean: "진",
english: "Thunder",
hanja: "震",
element: "Wood",
direction: "East",
philosophy: "Explosive energy, sudden action",
techniqueKorean: "벽력일섬",
techniqueEnglish: "Lightning Flash",
color: KOREAN_COLORS.TRIGRAM_JIN_PRIMARY,
},
SON: {
symbol: "☴",
korean: "손",
english: "Wind",
hanja: "巽",
element: "Wood",
direction: "Southeast",
philosophy: "Gentle persistence, penetration",
techniqueKorean: "선풍연격",
techniqueEnglish: "Whirlwind Strike",
color: KOREAN_COLORS.TRIGRAM_SON_PRIMARY,
},
GAM: {
symbol: "☵",
korean: "감",
english: "Water",
hanja: "坎",
element: "Water",
direction: "North",
philosophy: "Flow, adaptation, depth",
techniqueKorean: "수류반격",
techniqueEnglish: "Water Flow Counter",
color: KOREAN_COLORS.TRIGRAM_GAM_PRIMARY,
},
GAN: {
symbol: "☶",
korean: "간",
english: "Mountain",
hanja: "艮",
element: "Earth",
direction: "Northeast",
philosophy: "Stillness, immovability, defense",
techniqueKorean: "반석방어",
techniqueEnglish: "Mountain Defense",
color: KOREAN_COLORS.TRIGRAM_GAN_PRIMARY,
},
GON: {
symbol: "☷",
korean: "곤",
english: "Earth",
hanja: "坤",
element: "Earth",
direction: "Southwest",
philosophy: "Receptive, grounding, endurance",
techniqueKorean: "대지포옹",
techniqueEnglish: "Earth Embrace",
color: KOREAN_COLORS.TRIGRAM_GON_PRIMARY,
},
} as const;
5. Player Archetypes (플레이어 원형)
ALWAYS use authentic Korean character archetypes:
✅ Five Player Archetypes
export const PLAYER_ARCHETYPES = {
MUSA: {
korean: "무사",
english: "Traditional Warrior",
hanja: "武士",
philosophy: "Honor through disciplined strength",
combatStyle: "Balanced offense and defense",
preferredStances: ["GEON", "GAN"],
},
AMSALJA: {
korean: "암살자",
english: "Shadow Assassin",
hanja: "暗殺者",
philosophy: "Precision through stealth",
combatStyle: "Vital point targeting, critical strikes",
preferredStances: ["LI", "SON"],
},
HACKER: {
korean: "해커",
english: "Cyber Warrior",
hanja: "駭客",
philosophy: "Technology-enhanced combat",
combatStyle: "Analytical, exploit-focused",
preferredStances: ["JIN", "GAM"],
},
JEONGBO_YOWON: {
korean: "정보요원",
english: "Intelligence Operative",
hanja: "情報要員",
philosophy: "Strategic analysis and adaptation",
combatStyle: "Adaptive, counter-focused",
preferredStances: ["GAM", "TAE"],
},
JOJIK_POKRYEOKBAE: {
korean: "조직폭력배",
english: "Organized Crime",
hanja: "組織暴力輩",
philosophy: "Ruthless pragmatism",
combatStyle: "Aggressive, power-focused",
preferredStances: ["GEON", "GON"],
},
} as const;
6. Korean Martial Arts Terminology Accuracy
ALWAYS use authentic Korean martial arts terms:
✅ Combat Terminology
export const COMBAT_TERMS = {
STRIKE: { korean: "타격", english: "Strike", hanja: "打擊" },
PUNCH: { korean: "주먹", english: "Fist", hanja: "拳" },
KICK: { korean: "차기", english: "Kick", hanja: "蹴" },
BLOCK: { korean: "막기", english: "Block", hanja: "防禦" },
DODGE: { korean: "회피", english: "Dodge", hanja: "回避" },
COUNTER: { korean: "반격", english: "Counter", hanja: "反擊" },
VITAL_POINT: { korean: "급소", english: "Vital Point", hanja: "急所" },
PRESSURE_POINT: { korean: "경혈", english: "Acupoint", hanja: "經穴" },
STANCE: { korean: "자세", english: "Stance", hanja: "姿勢" },
READY_POSITION: { korean: "준비자세", english: "Ready Position" },
KI: { korean: "기", english: "Ki Energy", hanja: "氣" },
FOCUS: { korean: "집중", english: "Focus", hanja: "集中" },
TECHNIQUE: { korean: "기술", english: "Technique", hanja: "技術" },
SPECIAL_MOVE: { korean: "필살기", english: "Special Move", hanja: "必殺技" },
} as const;
7. Common Theming Anti-Patterns to REJECT
Immediately flag and reject these patterns:
❌ Hard-coded Colors Instead of Constants
<div style={{ color: '#00ffff' }}>Text</div>
<div style={{ color: `#${KOREAN_COLORS.PRIMARY_CYAN.toString(16)}` }}>
Text
</div>
❌ English-Only Text
<button>Attack</button>
<button>공격 | Attack</button>
❌ Generic Font Families
<div style={{ fontFamily: 'Arial, sans-serif' }}>한글</div>
<div style={{ fontFamily: FONT_FAMILY.KOREAN }}>한글</div>
❌ Incorrect Trigram Names
const stance = { korean: "건", english: "Sky" };
const stance = {
symbol: "☰",
korean: "건",
english: "Heaven",
hanja: "乾"
};
❌ Missing Cultural Context
const technique = { name: "Thunder Strike" };
const technique = {
nameKorean: "천둥벽력",
nameEnglish: "Thunder Wall Strike",
philosophy: "Embodies sudden explosive power like thunder from heaven",
iChingReference: "☰ Geon (Heaven) - Creative force",
};
❌ Non-WCAG Compliant Colors
<div style={{
background: '#1a1a1a',
color: '#444444'
}}>
Text
</div>
<div style={{
background: `#${KOREAN_COLORS.UI_BACKGROUND_DARK.toString(16)}`,
color: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16)}` // 20.3:1 contrast
}}>
Text
</div>
8. Required Theming Patterns
Enforce these Korean theming patterns:
✅ Three.js Material with Korean Colors
import { KOREAN_COLORS } from '@/types/constants/colors';
import * as THREE from 'three';
const koreanMaterial = new THREE.MeshStandardMaterial({
color: KOREAN_COLORS.PRIMARY_CYAN,
emissive: KOREAN_COLORS.ACCENT_GOLD,
emissiveIntensity: 0.2,
metalness: 0.5,
roughness: 0.5,
});
<mesh material={koreanMaterial}>
<boxGeometry args={[1, 1, 1]} />
</mesh>
✅ Stance Aura Effect with Trigram Colors
export const StanceAura3D: React.FC<{ stance: TrigramStance }> = ({ stance }) => {
const stanceData = TRIGRAM_STANCES[stance];
return (
<pointLight
position={[0, 1, 0]}
intensity={0.8}
distance={5}
decay={2}
color={stanceData.color}
/>
);
};
✅ Bilingual Combat HUD
export const CombatHUD: React.FC = () => {
return (
<Html fullscreen>
<div style={{
position: 'absolute',
top: 20,
left: 20,
fontFamily: FONT_FAMILY.KOREAN,
color: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16)}`,
}}>
<div>
{stance.korean} | {stance.english}
</div>
<div style={{ color: `#${KOREAN_COLORS.TEXT_ACCENT.toString(16)}` }}>
{`${stance.symbol} ${stance.hanja}`}
</div>
</div>
</Html>
);
};
✅ Vital Point Overlay with Korean Names
export const VitalPointMarker: React.FC<{ point: VitalPoint }> = ({ point }) => {
return (
<Html position={point.location} center>
<div style={{
fontFamily: FONT_FAMILY.KOREAN,
fontSize: 12,
color: `#${KOREAN_COLORS.VITAL_POINT_HIT.toString(16)}`,
background: `#${KOREAN_COLORS.UI_BACKGROUND_DARK.toString(16)}cc`,
padding: '4px 8px',
borderRadius: '4px',
border: `1px solid #${KOREAN_COLORS.ACCENT_PURPLE.toString(16)}`,
}}>
<div>{point.nameKorean} | {point.nameEnglish}</div>
<div style={{ fontSize: 10 }}>{point.nameTCM}</div>
</div>
</Html>
);
};
Enforcement Rules
Rule 1: All Colors Must Use KOREAN_COLORS Constants
IF (color value is hard-coded in hex or RGB)
THEN (replace with KOREAN_COLORS constant)
ELSE (reject the change)
Rule 2: All User-Facing Text Must Be Bilingual
IF (text is displayed to user)
THEN (include both Korean AND English with " | " separator)
ELSE (add bilingual support before approval)
Rule 3: Korean Text Must Use FONT_FAMILY.KOREAN
IF (Korean characters are displayed)
THEN (apply FONT_FAMILY.KOREAN to ensure proper rendering)
ELSE (add font family before approval)
Rule 4: Trigram Stances Must Use Authentic I Ching Symbols
IF (trigram stance added or modified)
THEN (use correct ☰☱☲☳☴☵☶☷ symbols AND Korean/English/Hanja names)
ELSE (correct symbols and terminology)
Rule 5: Combat Terms Must Use Authentic Korean Martial Arts Vocabulary
IF (combat technique or term added)
THEN (verify authenticity with Korean martial arts sources)
ELSE (research correct terminology before approval)
Rule 6: WCAG 2.1 Level AA Compliance Required
IF (text or UI element added)
THEN (verify 4.5:1 contrast ratio for text, 3:1 for UI components)
ELSE (adjust colors to meet WCAG AA standards)
Cultural Authenticity Checklist
Before approving any Korean-themed change:
ISO 27001 Alignment
This skill enforces controls from:
- A.7.2 - Information Classification (Korean cultural information properly categorized)
- A.8.1 - Inventory of Assets (Korean assets cataloged)
- A.12.1 - Operational Procedures (Korean theming standards documented)
- A.18.1 - Compliance with Legal Requirements (Cultural authenticity and respect)
NIST CSF 2.0 Alignment
- GV.OC-02: Internal stakeholders understand Korean cultural requirements
- GV.PO-01: Korean theming policy established and communicated
- ID.AM-02: Korean cultural assets inventoried
- PR.DS-06: Integrity of Korean cultural information maintained
CIS Controls v8.1 Alignment
- Control 1: Inventory of Korean theming assets
- Control 2: Korean software assets (fonts, constants) inventoried
- Control 14: Korean cultural awareness in development
Korean Philosophy Integration
흑괘의 미학 (Black Trigram Aesthetics)
Core Aesthetic Principles:
- 음양 조화 (Yin-Yang Harmony) - Balance dark backgrounds with bright neon accents
- 오방색 (Five Cardinal Colors) - Use traditional Korean colors for cultural authenticity
- 사이버펑크 융합 (Cyberpunk Fusion) - Merge traditional Korean aesthetics with futuristic cyberpunk
- 명료함 (Clarity) - Ensure high contrast for readability (WCAG AA)
- 존중 (Respect) - Honor traditional Korean martial arts philosophy
Traditional Korean Color Philosophy
오방색 (Five Cardinal Colors) - Based on I Ching:
- 청색 (Blue/Green) - East, Spring, Wood element - Growth and vitality
- 백색 (White) - West, Autumn, Metal element - Purity and righteousness
- 적색 (Red) - South, Summer, Fire element - Passion and energy
- 흑색 (Black) - North, Winter, Water element - Depth and wisdom
- 황색 (Yellow) - Center, Earth element - Balance and stability
Application in Black Trigram:
- Use these colors for trigram stance indicators
- Apply to UI elements representing cardinal directions
- Integrate into particle effects and visual feedback
Remember
Korean theming is not decoration—it is the soul of Black Trigram. Every color, every word, every symbol must honor Korean martial arts tradition while embracing cyberpunk innovation.
When implementing Korean theming:
- RESEARCH - Verify authentic Korean terminology
- CONSTANTS - Always use KOREAN_COLORS and FONT_FAMILY
- BILINGUAL - Include Korean and English for all text
- PHILOSOPHY - Reference I Ching and Korean martial arts concepts
- RESPECT - Treat Korean culture with authenticity and honor
- ACCESSIBILITY - Ensure WCAG 2.1 Level AA compliance
흑괘의 미학을 지켜라 - Protect the Aesthetics of the Black Trigram
