building-the-webapp

Build and extend the static Vite React webapp frontend with bilingual i18n and theme tokens.

2|1|Updated Jun 29, 2026
One-click install
npx skills add https://github.com/frederico-kluser/newsletter-crawler --skill building-the-webapp-frederico-kluser
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: building-the-webapp
Source: https://github.com/frederico-kluser/newsletter-crawler/tree/main/.agents/skills/building-the-webapp
Command: npx skills add https://github.com/frederico-kluser/newsletter-crawler --skill building-the-webapp-frederico-kluser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It guides developers through safely modifying the static webapp frontend (webapp/) — a Vite + React 19 + Motion site reading a committed JSON snapshot — without breaking its custom i18n layer, semantic theme tokens, onboarding tutorial, or BYOK key manager. ## Core Features & Use Cases - Bilingual PT/EN i18n: Custom React Context (DICTS + useStrings + LocaleProvider) with browser locale detection via resolveLocale and a strict both-dicts key-parity rule enforced by tests. - Semantic design tokens: Dark/light theming via tokens.css semantic layer (data-theme or prefers-color-scheme), so new surfaces work in both themes with no extra CSS. - Onboarding tutorial & BYOK modal: Apple-style tutorial with AnimatePresence and focus trap, plus a provider-aware key manager for OpenRouter and DeepSeek direct keys. - Use Case: When adding a new UI string to the webapp, follow the skill to add it to both pt and en dicts, keep the parity test green, and verify with npm test, npm run build, and a Playwright drive. ## Quick Start Ask the AI to add a new translated UI string to the webapp and verify it with the i18n parity test and a Vite build.

Frequently Asked Questions about building-the-webapp

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

FAQPage Schema
How do I add a translated UI string to a React app without react-i18next?

Add the key to both the pt and en dictionaries in webapp/src/strings.js, then read it via useStrings() in the component. The i18n test fails if a key exists in only one dict, so a missing translation becomes a red test.

How to detect browser language for Portuguese vs English in React?

Use the resolveLocale() pure function: if the BCP-47 primary subtag before the first hyphen equals 'pt', return 'pt'; any other language returns 'en'. A saved localStorage choice overrides detection, and the rule is duplicated in the pre-paint script in index.html.

Does the webapp need a backend or environment variables?

No. The webapp is a fully static site that reads a committed JSON snapshot (meta, articles, contents) from webapp/public/data. It has no backend and no env vars; BYOK API keys live in localStorage.

Why does the Motion layoutId pill jump between two language toggles?

Two LanguageToggle instances mount at once (topbar and tutorial card), and Motion layoutId must be unique across the tree. Pass a distinct layoutId prop such as 'lang-pill-tut' to the tutorial copy so the shared-layout pill does not teleport.

Why do Playwright clicks fail on the first visit of the webapp?

The onboarding tutorial modal intercepts all pointer events on first visit. Set localStorage 'nc-tutorial-seen' to '1' via addInitScript before page.goto, otherwise clicks time out against the overlay.

When should I not use this skill for webapp changes?

Do not use it for the AI search rubric, prompts, or the export snapshot contract — those belong to the searching-the-corpus skill. This skill covers only UI chrome: strings, theming, tutorial, toggle, and React components.