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

0•

设计工具

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.

主要功能

01Cross-language key synchronization for ko.json, en.json, and vi.json

020 GitHub stars

03Automated i18n linting to detect and prevent missing translation keys

04Identification and replacement of hardcoded strings with message keys

05Enforcement of layout-safe CSS patterns like break-words and line-clamp

06Tailwind-compatible UI safety rules for flexbox and text wrapping

使用场景

01Preventing UI layout bugs when switching languages to Vietnamese

02Auditing localization files for missing keys during feature updates

03Standardizing frontend component styles to handle variable text lengths

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lee-sang-bok/vkc-2- vkc-i18n-ko-vi-safety

For use in Claude.ai and ChatGPT

主要功能

01Cross-language key synchronization for ko.json, en.json, and vi.json

020 GitHub stars

03Automated i18n linting to detect and prevent missing translation keys

04Identification and replacement of hardcoded strings with message keys

05Enforcement of layout-safe CSS patterns like break-words and line-clamp

06Tailwind-compatible UI safety rules for flexbox and text wrapping

使用场景

01Preventing UI layout bugs when switching languages to Vietnamese

02Auditing localization files for missing keys during feature updates

03Standardizing frontend component styles to handle variable text lengths

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lee-sang-bok/vkc-2- vkc-i18n-ko-vi-safety

For use in Claude.ai and ChatGPT