Design UI components to accommodate text expansion from translation
SkillMediaText-expansion is a skill for reviewing CSS on elements that render translatable strings. It guides an agent to spot fixed widths, truncation, and overflow rules that break when text grows in translation, and to suggest fixes like min-inline-size and pseudo-locale testing.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a skill-capable agent environment and the text-expansion skill files available.
Then ask your AI: use the Design UI components to accommodate text expansion from translation skill
What your AI can do with it
- Review CSS for fixed widths on buttons, labels, navigation items, and headings
- Flag overflow: hidden, white-space: nowrap, and text-overflow: ellipsis on translatable te
- Recommend min-inline-size instead of inline-size for text containers
- Explain how German and Finnish translations expand beyond English copy
- Suggest adding a pseudo-locale build step to local development and CI
- Point to references/rule.md for code examples and framework-specific guidance
Getting started
- Have a skill-capable agent environment and the text-expansion skill files available.
- Add the skill so the agent can load it when reviewing frontend styles.
- Ask the agent to review CSS files or component styles for fixed dimensions and truncation on text-bearing elements.
- Apply the suggested fixes, such as replacing fixed inline-size with min-inline-size and removing overflow: hidden from interactive elements.
- Set up a pseudolocalized build or preview so expanded strings can be tested before translations are delivered.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/text-expansion/SKILL.md and read by ahel’s review.
Layouts designed only with English copy routinely break when translated: buttons overflow their containers, labels truncate, and navigation items wrap unexpectedly. Catching these issues early with pseudo-locale testing is far cheaper than fixing them after translations are delivered.
Quick Reference
- German translations are typically 30% longer than English; Finnish 50% longer
- Avoid fixed-width containers for text-bearing elements like buttons and labels
- Use min-inline-size instead of inline-size to allow natural growth
- Test with a pseudo-locale that inflates strings before committing translations
- Include pseudolocalization in CI or preview testing, not just manual QA
Check
Identify CSS rules and component styles that use fixed widths or hard truncation on elements containing translatable text, which would break when content expands in other languages. Check that the team can test a pseudolocalized build or preview.
Fix
Replace fixed inline-size with min-inline-size on text containers, remove overflow: hidden from interactive elements, and add a pseudo-locale build step for visual testing in local development and CI.
Explain
Explain how text expansion during translation breaks fixed layouts and what CSS patterns prevent overflow and clipping across locales.
Code Review
Review CSS files and component styles for fixed widths, overflow: hidden, white-space: nowrap, and text-overflow: ellipsis on buttons, labels, navigation items, and headings that contain translatable text.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/i18n/text-expansion
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- When reviewing CSS for fixed dimensions, truncation, or overflow rules on elements that render translatable strings.
- How much longer are translations than English?
- German translations are typically 30% longer than English, and Finnish about 50% longer, so layouts sized only for English can overflow or clip.
- What CSS changes does it recommend?
- Replace fixed inline-size with min-inline-size on text containers and remove overflow: hidden from interactive elements.
Advanced
- Item type
- skill
- Key
text-expansion- Source
- github.com/thedaviddias/front-end-checklist