Does this work with Tailwind CSS?

Yes, the safety rules are designed to work perfectly with Tailwind utility classes like break-words, line-clamp-*, and whitespace-pre-line.

Why does this skill focus on Vietnamese text specifically?

Vietnamese translations are often significantly longer than Korean or English counterparts, which frequently causes UI containers to overflow or break if specific CSS safety patterns aren't used.

What UI patterns does it recommend?

It promotes 'layout-safe' patterns like min-w-0 on flex children, whitespace-pre-line for wrapping, and line-clamping to ensure long text is capped within its intended container.

How does it ensure translation consistency?

The skill enforces a rule that no key should exist in only one language file, and it provides a linting script to check that nested structures match across all JSON localization files.

VKC i18n and UI Safety

Name: VKC i18n and UI Safety
Author: LEE-SANG-BOK

byLEE-SANG-BOK

デザインツール

Ensures translation consistency across Korean, English, and Vietnamese while preventing UI layout breakage caused by long localized text.

概要

The VKC i18n Safety skill provides automated guardrails for multi-language projects specifically targeting Korean, English, and Vietnamese locales. It helps developers maintain synchronization between translation files, ensuring no key is left missing in one language while present in others. Beyond simple key management, it enforces 'layout-safe' UI patterns—such as word-breaking and line-clamping—to prevent the typically longer Vietnamese translations from breaking frontend containers, making it an essential tool for robust cross-border application development.

主な機能

Cross-language key synchronization for ko.json, en.json, and vi.json
0 GitHub stars
Automated i18n linting to detect and prevent missing translation keys
Identification and replacement of hardcoded strings with message keys
Enforcement of layout-safe CSS patterns like break-words and line-clamp
Tailwind-compatible UI safety rules for flexbox and text wrapping

ユースケース

Preventing UI layout bugs when switching languages to Vietnamese
Auditing localization files for missing keys during feature updates
Standardizing frontend component styles to handle variable text lengths

概要

主な機能

Cross-language key synchronization for ko.json, en.json, and vi.json
0 GitHub stars
Automated i18n linting to detect and prevent missing translation keys
Identification and replacement of hardcoded strings with message keys
Enforcement of layout-safe CSS patterns like break-words and line-clamp
Tailwind-compatible UI safety rules for flexbox and text wrapping

ユースケース

Preventing UI layout bugs when switching languages to Vietnamese
Auditing localization files for missing keys during feature updates
Standardizing frontend component styles to handle variable text lengths