builder-ui-i18n

Build and update ChatbotX builder UI components with localized English and Vietnamese copy.

601|129|Updated Dec 9, 2024
One-click install
npx skills add https://github.com/ChatbotXIO/ChatbotX --skill builder-ui-i18n
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: builder-ui-i18n
Source: https://github.com/ChatbotXIO/ChatbotX/tree/main/.agents/skills/builder-ui-i18n
Command: npx skills add https://github.com/ChatbotXIO/ChatbotX --skill builder-ui-i18n

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build and update ChatbotX builder screens without breaking the product's localized UI standards, form patterns, or shared component conventions.

Core Features & Use Cases

  • Localize user-facing text for buttons, labels, placeholders, dialogs, empty states, and validation messages.
  • Implement builder UI flows in apps/builder using shared components, React Hook Form, Zod, and next-safe-action patterns.
  • Keep feature pages, tables, toolbars, and dialogs aligned with existing ChatbotX layout and density expectations.
  • Use it when adding a new builder feature, refactoring a form, or translating a screen into English and Vietnamese.

Quick Start

Update the selected builder page or feature so every user-facing string uses the existing translation namespaces and matches the current ChatbotX UI patterns.

Frequently Asked Questions about builder-ui-i18n

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I localize React and Next.js builder UI components for English and Vietnamese?

Localize React and Next.js builder UI components by applying next-intl translations to every user-facing string, including buttons, labels, dialogs, and validation messages. This ensures English and Vietnamese screens meet localized product standards.

Can I use React Hook Form and Zod to build forms in a Next.js builder app?

Yes, you can build forms in a Next.js builder app using React Hook Form, Zod, and next-safe-action patterns. This combination aligns with existing server action conventions and ensures validation patterns match the repository's standards.

What is the best way to add next-intl translations to builder feature pages and toolbars?

Add next-intl translations to builder feature pages and toolbars by mapping every user-facing string to existing translation namespaces. This keeps tables, toolbars, and dialogs aligned with current layout and density expectations.

Does this Skill support localizing empty states and validation messages in a React builder?

Yes, this Skill supports localizing empty states and validation messages in a React builder. It ensures all user-facing copy, including placeholders and form validation, uses established English and Vietnamese translation namespaces.

Why does my localized builder UI break shared component conventions when I refactor forms?

Localized builder UI breaks shared component conventions when forms are refactored without matching existing server action and form patterns. You must use shared components and next-safe-action patterns to maintain consistency.

Do I need next-intl installed to update builder screens with localized copy?

Yes, you need next-intl installed to update builder screens with localized copy. The Skill requires next-intl translations in English and Vietnamese to properly implement shared UI components and validation patterns.