fintech-frontend-engineer

fintech-frontend-engineer is a skill for Claude Code from pranav8494/team-of-agents. It costs 93 tokens per session (2,273 once invoked), scanned A, original, MIT.

A set of guidelines for building React interfaces used in financial products, such as dashboards, transaction histories, and payment flows. It also covers accessibility, search visibility, page speed, and handling sensitive financial data.

In plain words
What is it for?
Creating financial UI components, displaying transaction and account data, implementing payment flows, improving accessibility and SEO, and testing financial values across locales.
Why use it?
It helps prevent display and privacy mistakes involving currencies, amounts, card data, and personal information.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the team-of-agents plugin — 18 skills, 17 agents, 1 hook shipped together

Good fit Creating financial UI components, displaying transaction and account data, implementing payment flows, improving accessibility and SEO, and testing financial values across locales.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/pranav8494/team-of-agents/fintech-frontend-engineer
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add pranav8494/team-of-agents --skill fintech-frontend-engineer
Clone the repo
git clone --depth 1 https://github.com/pranav8494/team-of-agents

Made for: Claude Code.

Or install team-of-agents, the plugin that ships this one along with the rest of its 18 skills, 17 agents, 1 hook.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for fintech-frontend-engineer

README.md
[![agentmods](https://agentmods.dev/badge/skills/pranav8494/team-of-agents/fintech-frontend-engineer/github.svg)](https://agentmods.dev/skills/pranav8494/team-of-agents/fintech-frontend-engineer)
Your own site
<a href="https://agentmods.dev/skills/pranav8494/team-of-agents/fintech-frontend-engineer"><img src="https://agentmods.dev/badge/skills/pranav8494/team-of-agents/fintech-frontend-engineer/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for fintech-frontend-engineer

Your own site · 80×15
<a href="https://agentmods.dev/skills/pranav8494/team-of-agents/fintech-frontend-engineer"><img src="https://agentmods.dev/badge/skills/pranav8494/team-of-agents/fintech-frontend-engineer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 93 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,273 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00093 $0.02273
Opus 5 $0.00046 $0.01137
Sonnet 5 $0.00019 $0.00455
Haiku 4.5 $0.00009 $0.00227

Measured 12d ago against content hash 739d411a3a40, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

fintech-frontend-engineer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/fintech-frontend-engineer/SKILL.md · 177 lines

How it starts

The opening of the file, as written. The whole thing — 177 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Fintech Frontend Engineer

Iron Law

Display correctness is as important as logic correctness. Showing the wrong currency,
locale, or amount is a bug with legal consequences, not just a UX failure.
Never log PII to the console. Never render raw card numbers.

Before Taking Any Action

  1. Announce what you intend to do and why, e.g. "I'd like to create components/TransactionTable.tsx to display the paginated transaction history with sorting and accessible row focus management"
  2. Explain the approach, component structure, Tailwind strategy, accessibility decisions, SEO implications, any trade-offs
  3. Ask for confirmation before writing or editing any file, running any command, or fetching any external resource
  4. Report what was created or changed, how to use or extend it, and any follow-up concerns

Task Approach

Use this table to determine what to produce for each task type:

User asks for What to produce
Financial data display (amounts, balances) Component using Intl.NumberFormat with explicit locale and currency; zero and negative amount handling; unit tests for edge cases (zero, negative, large numbers, multiple locales)
Transaction list or history Paginated table with <th scope="col"> and aria-sort, cursor-based pagination, empty state message, aria-live="polite" for real-time updates, and accessible row focus management
Payment form Multi-step flow with progress indicator, on-blur inline validation, specific error messages, confirmation step before irreversible action, disabled submit during processing
Sensitive data display (card numbers, account numbers) Masked default state per the Sensitive Data Display table; reveal toggle requiring explicit user action; no console.log of unmasked values
Public marketing or product page SSG or SSR rendering strategy, <title> and <meta description>, Open Graph tags, structured data where applicable, and noindex confirmation for any auth-gated content
Authenticated account screen CSR with <meta name="robots" content="noindex"> or X-Robots-Tag: noindex; confirm the page is excluded from the sitemap
Core Web Vitals fix Identified metric (LCP / INP / CLS), fintech-specific risk explained, concrete code fix, and expected improvement
Compliance or regulatory display Immutable record UI, exact datetime (not relative), regulatory disclosure placement, flag any disclosure text for legal review before writing it
Tailwind component Design tokens applied from tailwind.config, mobile-first responsive classes, dark: variants, and extraction to @apply if the pattern repeats 3+ times
Formatting utility Intl-based function with explicit locale parameter, unit tests covering zero, negative, large numbers, and at least two different locales

Read the full file on GitHub · 177 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 12d ago First seen · 177 lines · 93 tokens per session scan A 739d411a3a40

Subscribe to this mod's changes

fintech-frontend-engineer is a skill published in the GitHub repository pranav8494/team-of-agents (7 stars, last pushed 1mo ago), licensed MIT. It adds 93 tokens to every session and 2,273 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

frontend-development

Use when building or structuring a React/Next.js + TypeScript + Tailwind frontend, choosing libraries, or wiring design tokens. Provides the opinionated blessed-library stack and the React-vs-Next decision, all on-token to DESIGN.md and accessible to WCAG AA.

martian56/claude-engineer · 59 tokens

impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…

gaia-research/gaia-skill-heaven · 189 tokens

moai-design-tools

Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.

modu-ai/moai-adk · 45 tokens

shiny-bslib-theming

Advanced theming for Shiny apps using bslib and Bootstrap 5. Use when customizing app appearance with bstheme(), Bootswatch themes, custom colors, typography, brand.yml integration, Bootstrap Sass variables, custom Sass/CSS rules, dark mode and color modes, dynamic theme switching, real-time theming, theme inspection…

posit-dev/skills · 87 tokens

shiny-bslib

Build modern Shiny dashboards and applications using bslib (Bootstrap 5). Use when creating new Shiny apps, modernizing legacy apps (fluidPage, fluidRow/column, tabsetPanel, wellPanel, shinythemes), or working with bslib page layouts, grid systems, cards, value boxes, navigation, sidebars, filling layouts, theming…

posit-dev/skills · 107 tokens

interface-craft

Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or…

cbrock84/headcount · 79 tokens