Toolverse
All skills

localize

by ryokun6

Localize ryOS apps and components by extracting hardcoded strings, replacing with translation keys, and syncing across languages. Use when localizing an app, adding i18n support, translating UI text, or working with translation files.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
ryokun6
Category
Frontend

About this skill

Localize ryOS apps and components by extracting hardcoded strings, replacing with translation keys, and syncing across languages. Use when localizing an app, adding i18n support, translating UI text, or working with translation files.

How to use

  1. Uruchom skrypt do wyodrębniania tekstów: bun run scripts/extract-strings.ts --pattern [PATTERN], gdzie [PATTERN] to wzorzec plików do przeskanowania. Skill przeskanuje komponenty i znajdzie wszystkie zakodowane na stałe stringi.

  2. W każdym komponencie dodaj import react-i18next: import { useTranslation } from "react-i18next", następnie użyj hooka const { t } = useTranslation(). Zamień znalezione teksty na wywołania t() z kluczami w formacie apps.[nazwaAplikacji].kategoria.klucz, na przykład t("apps.ipod.menu.file") dla etykiet menu czy t("apps.ipod.dialogs.clearLibraryTitle") dla tytułów okien.

  3. Dodaj angielskie tłumaczenia do pliku src/lib/locales/en/translation.json, zachowując strukturę zagnieżdżoną: apps > nazwa aplikacji > kategoria (menu, dialogs, status, ariaLabels, help) > klucz. Na przykład {"apps": {"ipod": {"menu": {"file": "File"}}}}.

  4. Zsynchronizuj tłumaczenia między wszystkimi językami: bun run scripts/sync-translations.ts --mark-untranslated. Skill doda brakujące klucze do wszystkich plików języków i oznacz je jako [TODO].

  5. Przejrzyj wygenerowane klucze i upewnij się, że struktura jest spójna. Możesz używać zmiennych w tłumaczeniach, na przykład t("apps.ipod.status.trackCount", { count: 5 }), oraz warunkowych wyrażeń t() w logice komponentu.

Related skills

interactive-dashboard-builder

by anthropics

Build self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.

Frontend
2298

tailwind-design-system

by wshobson

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Frontend
2676

screenshot-to-code

by OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

Frontend
94209

dev-browser

by SawyerHood

Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include \

Frontend
38151

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656

frontend-slides

by sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual

Frontend
65135