skills.rest
authgear
authgearOFFICIAL
Explore all skills by this author →
Website𝕏@authgearGitHub

update-portal-ui

Reviews and updates React portal UI code for i18n, link components, and config form conventions.

2.0k|126|Updated Jun 16, 2020
Search Tags:#Frontend#form validation#typeScript#fluentui#reAct#Code review#I18n
One-click install
npx skills add https://github.com/authgear/authgear-server --skill update-portal-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: update-portal-ui
Source: https://github.com/authgear/authgear-server/tree/main/.claude/skills/update-portal-ui
Command: npx skills add https://github.com/authgear/authgear-server --skill update-portal-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Portal UI changes in the Authgear React frontend frequently ship with subtle bugs: untranslated strings hidden in chart configs, links that render as unstyled plain text inside FluentUI Text wrappers, and config forms that silently save unrelated edits or restate server-side defaults. This Skill encodes the conventions and known traps so these defects are caught before review.

Core Features & Use Cases

  • i18n enforcement: Ensures every user-facing string, including chart.js labels, tooltips, and Intl/luxon formatted values, goes through renderToString/FormattedMessage with the active portal locale.
  • Link component rules: Distinguishes Link, ExternalLink, and LinkButton from bare-anchor components like react-router-dom's Link and ReactRouterLink, which lose styling inside FluentUI Text.
  • Config-backed form guidance: Covers useAppConfigForm pitfalls such as restating server defaults, missing parentJSONPointer/fieldName error binding, and per-control saveWith calls.
  • Use Case: When adding a new settings tab to the portal, apply this Skill to bind validation errors to fields, translate all labels, and verify copy against the enforcing Go code before submitting.

Quick Start

Review my changes to portal/src for untranslated strings, wrong link components, and config form issues using the update-portal-ui guidelines.

Frequently Asked Questions about update-portal-ui

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

FAQPage Schema
How do I add a translated string with a link in React using FormattedMessage?▼

Define an XML-like tag in the locale JSON string, then pass a render function in FormattedMessage values whose key matches the tag name. Use Link or ExternalLink from portal/src inside the render function, never react-router-dom's Link.

Which link component should I use in a React app with FluentUI?▼

Use Link from portal/src for internal navigation, ExternalLink for external URLs, and LinkButton for buttons styled as links. Avoid react-router-dom's Link and ReactRouterLink because they render bare anchors that lose styling inside FluentUI Text.

Why do links render as plain text inside FluentUI Text components?▼

FluentUI Text overrides the color of plain anchor tags, and Tailwind preflight removes underlines, so bare anchors look like body text. Wrapping links in FluentUI's FluentLink via portal/src Link or ExternalLink preserves link styling.

How do I bind schema validation errors to form fields in React config forms?▼

Pass parentJSONPointer and fieldName to the v2 TextField or FormTextField components, along with errorRules. Without them, schema violations like minimum or type errors fall through to a generic error bar with no field indication.

Why should config forms not save from individual controls?▼

The saveWith function applies changes to the entire form state, including edits on sibling tabs, then clears the dirty flag. This silently saves unrelated pending changes, so all controls should use setState and wait for the Save button.

Related Skills

Explore More Software Engineering Skills→
asanexampleasanexample
1

backstage-portal

Manages and configures Backstage portal components for Kubernetes environments.

Official
Intermediate
AnveioAnveio
1

task-verification-pipeline

Run and debug repository verification pipelines with ./verify.sh and E2E modes.

Community
Intermediate
LerianStudioLerianStudio
205

api-field-descriptions

Write clear API field descriptions for REST and GraphQL schemas.

Official
Basic
AbsolutelySkilledAbsolutelySkilled
207

localization-i18n

Guide AI agents in designing multilingual software with i18n and l10n practices.

Official
Advanced