fintech-frontend-engineer

What problem does it solve?

This Skill helps you build fintech React interfaces that correctly format money and dates, protect sensitive data, and deliver strong accessibility and SEO performance—reducing trust, compliance, and production reliability risks.

Core Features & Use Cases

• Financial correctness first: enforce locale- and currency-safe rendering with Intl.NumberFormat, handle zero/negative amounts predictably, and prevent unsafe browser-side arithmetic.
• Trustworthy fintech UI patterns: implement accessible transaction tables (semantic headers, sorting semantics, cursor pagination, empty states, aria-live updates) and compliant multi-step payment flows.
• SEO and performance discipline: apply correct metadata/structured data for public pages, ensure authenticated pages are noindex, and improve Core Web Vitals (LCP/INP/CLS) with fintech-specific rendering safeguards.
• Sensitive data safety: mask card/account details by default, require explicit user action to reveal, and forbid logging/unmasked DOM rendering of PII.

Quick Start

Create a React + Tailwind transaction history table that uses Intl.NumberFormat for all currency and date rendering, masks any sensitive identifiers by default, and includes accessible pagination with an appropriate empty state and aria-live updates for balance/transaction changes.