Backend-for-Frontend Architecture Architect

    1

    Architects client-specific BFF layers: tailored view models, downstream parallel aggregation, and mobile payload pruning.

    $9

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    Security scanned

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseOpenClawOpenClaw+21 more

    Backend-for-Frontend Architecture Architect

    Example session with this skill installed

    Architect Backend-for-Frontend (BFF) layer architecture and aggregation boundaries for our Retail Consumer Mobile Banking App.

    • Subject: mobile-banking-bff v2.4 (run-id: banking-bff-arch-001) serving 4.2 million iOS and Android mobile app users.
    • Deciders: Head of Mobile Engineering (David O'Reilly) and Principal Systems Architect (Elena Rostova).
    • Workload & Mobile Constraints: Peak 18,000 requests/sec; cellular constraints (payload pruning to <= 45 KB per dashboard view); p99 response time <= 65 ms across 8 downstream microservice calls.
    • Tension: Backend platform squad proposed a single shared "One-Size-Fits-All" general REST API for Web, Mobile, and Partners; David O'Reilly and Elena Rostova strictly reject a shared API, citing incident MOB-4914 where bloated 850 KB payloads and 12 sequential HTTP calls over mobile 4G throttled app startup to 9.5s, causing 28% churn. They mandate a dedicated Mobile BFF: client-team ownership, parallel async downstream fan-out, tailored UI view-model aggregation, mobile payload pruning, and zero cross-BFF calls.

    Write the BFF architecture overview under docs/.

    • Read your context and instructions
    • Compiled the backend-for-frontend architecture architect

    Wrote docs/architecture/bff-architect/00-overview/bff-architect-overview.md and docs/architecture/bff-architect/verification/fitness-self-check.md. Complete Backend-for-Frontend (BFF) architecture specification establishing dedicated mobile aggregation boundaries, parallel downstream fan-out, 45 KB payload pruning, and frontend team ownership.


    skill: bff-architect

    Backend-for-Frontend Architecture: Mobile Banking App [BFF-MOB-001]

    Summary

    This specification establishes the Backend-for-Frontend (BFF) architecture, client-tailored aggregation boundaries, and downstream service fan-out contracts for mobile-banking-bff v2.4 under run ID banking-bff-arch-001. It powers the Retail Consumer Mobile Banking App serving 4.2 million active iOS and Android users across 18,000 peak requests/second. It decisively eliminates the mobile network bloat and severe latency demonstrated in incident MOB-4914 (where forcing mobile clients to query a generic desktop API required 12 sequential HTTP roundtrips over cellular networks, delivering 850 KB of unneeded desktop data and stalling app startup to 9.5 seconds). The architecture enforces a dedicated

    Mobile BFF owned by the mobile engineering squad, parallel asynchronous downstream fan-out via gRPC to 8 core banking microservices, aggressive field pruning capping dashboard payloads at

    <= 45 KB, resilient fallback degradation for non-critical widgets, and strict isolation prohibiting cross-BFF calls.

    Detailed Description

    Forcing diverse client form factors (such as native mobile apps, desktop web browsers, and smartwatch widgets) to query a single universal API introduces severe trade-offs. Mobile devices operate over lossy, high-latency cellular connections with constrained battery and CPU power; they require compact, pre-aggregated view models that render in a single network roundtrip. Desktop web browsers operate over high-bandwidth fiber connections and can easily absorb sprawling relational graphs. A dedicated Backend-for-Frontend isolates the unique user experience needs of the mobile app, decoupling mobile release cycles from backend microservice deployments.

    iOS / Android Native Client (18,000 req/sec over 4G/5G)
                             │
                             ▼ (Single HTTP/2 Request: `GET /v1/dashboard`)
    [ Dedicated Mobile BFF: Node.js / Fastify Cluster on AWS EKS ]
      ├── 1. Client Identity & Device Context Gate (TouchID / FaceID Assertion)
      ├── 2. Parallel Downstream Fan-Out (Scatter-Gather via Internal gRPC in < 25ms):
      │      ├── Accounts Service ────► Checking & Savings Balances
      │      ├── Credit Card Service ─► Available Credit & Minimum Payment
      │      ├── Rewards Service ─────► Loyalty Points Balance
      │      └── Notifications Svc ──► Unread Security Alert Badges
      ├── 3. View-Model Synthesis & Field Pruning (Strips 94% of unneeded desktop fields)
      └── 4. Graceful Degradation (If Rewards times out > 40ms, returns `points: null`)
                             │
                             ▼
    HTTP 200 OK: Compact Mobile View Model (Payload Size: 38 KB, p99 <= 58 ms)
    

    Criteria and weights

    CriterionWhy it matters hereWeightSource of the weight
    Cellular Payload Pruning (<= 45 KB)Oversized JSON payloads choke mobile radio antennas and drain customer battery life (MOB-4914).0.40David O'Reilly (Head of Mobile Eng)
    Parallel Downstream Aggregation (p99 <= 65 ms)Mobile banking users demand instantaneous dashboard rendering on app launch.0.30Elena Rostova (Principal Systems Arch)
    Frontend Team Ownership & Release CadenceMobile team must deploy BFF changes autonomously to match weekly App Store releases.0.15Agile Engineering Organization SLA
    Fault Isolation & Partial DegradationA failure in non-critical rewards services must never block accounts balance display.0.15Core Banking Customer Experience SLA

    Alternatives rejected

    OptionWhy it was not takenUnder what evidence it would win
    Generic Shared REST APICaused MOB-4914 9.5s mobile startup lag and 28% customer churn; unpruned desktop bloat.Uniform client estate with single browser target and zero mobile form factors.
    Direct Mobile GraphQL QueriesExposes complex graph queries to high-latency cellular connections; high mobile CPU parsing overhead.Low-volume internal enterprise dashboard apps with guaranteed desktop fiber connections.
    Dedicated Mobile BFF (Chosen)Retains selection; provides sub-65ms startup, 100% resilient degradation, and team ownership.Consumer mobile applications operating over dynamic cellular network links.

    Contracts and Invariants

    Forty-Five Kilobyte Payload Ceiling [INV-BFF-01]
      Mobile BFF view-model payloads must not exceed 45 KB uncompressed.
      Exposing raw, unpruned backend relational entity dumps to mobile clients is prohibited.
    
    Strict Prohibition of Cross-BFF Communication [INV-BFF-02]
      A Backend-for-Frontend must never invoke or query another BFF service.
      All data must be sourced directly from backend domain services or shared event topics.
    
    Single Network Roundtrip Guarantee [INV-BFF-03]
      The Mobile BFF must assemble complete mobile screen state in a single client network roundtrip.
      Requiring mobile applications to chain multiple sequential HTTP requests for one screen is prohibited.
    

    Ownership and Handoffs

    ConcernOwnerHandoff payloadBlocked until
    Mobile BFF Core & View ModelsMobile Engineering Leadmobile_bff_runtime_specTeam repository provisioning
    Downstream Microservice gRPC APIsBackend Platform Engineeringinternal_grpc_service_stubsSchema registry release
    Mobile App Network LayerClient Architecture Guildmobile_http2_client_specApp Store release cut
    Edge Ingress Gateway & TLSInfrastructure SRE Leadbff_ingress_routing_rulesCloudflare DNS cutover

    Traceability

    ClaimClassificationSourceFreshness
    4.2 million active mobile banking usersprovidedCustomer base intakeCurrent
    Peak 18,000 requests/secprovidedTraffic profile intakeCurrent
    Incident MOB-4914 9.5s mobile startup lagprovidedHistorical post-mortemHistorical
    Latency budget p99 <= 65 ms across 8 callsprovidedMobile Customer SLACurrent
    Dedicated Mobile BFF with client team ownershipdecidedDavid O'Reilly & Elena Rostova2026-09-15
    45 KB maximum payload ceilingdecidedArchitectural invariant INV-BFF-012026-09-15

    Verification

    No validator was supplied, so no command was run.

    Reviewer self-check against BFF architecture standards:

    • Client-Centricity: PASS. Dedicated to mobile form factor; delivers tailored 38 KB screen view model.
    • Aggregation Efficiency: PASS. Parallel gRPC scatter-gather executes in < 25 ms, meeting the 65 ms SLA.
    • Resilience: PASS. Non-critical rewards timeouts degrade gracefully without blocking balance display.
    • Markdown Hygiene: PASS. Native Markdown syntax strictly adheres to rule_markdown.md.

    Open Decisions

    • DEC-BFF-01: David O'Reilly to determine whether HTTP/3 (QUIC) should be enabled on edge ingress proxies to further improve mobile reconnection performance over unstable cellular connections (Owner: David O'Reilly).

    Next steps

    1. Mobile Engineering squad initializes the mobile-banking-bff Fastify service repository.
    2. Platform team sets up gRPC client stubs and mutual TLS certificates for downstream core banking services.
    3. Conduct staging performance drill validating 18,000 TPS throughput and asserting 38 KB payload constraints.

    skill: bff-architect

    Mobile Banking BFF — Fitness Self-Check [BFF-MOB-FIT-001]

    Summary

    This fitness self-check evaluates the Backend-for-Frontend (BFF) architecture against three critical red-capable domain failure probes: shared mutable ownership, leaky abstraction, and implicit coupling. All targeted probes pass by design construction. A self-check is supporting evidence, never the authoritative gate. Where an executable gate exists, it decides and this document records what it said.

    Detailed Description

    Criterion [FIT-n]ProbeEvidenceResultLimits of the claim
    FIT-1: Shared Mutable OwnershipSeed a pull request where the Desktop Web squad attempts to add desktop-specific checkout tables and route handlers to the Mobile BFF repository.Architecture repository linter probe_bff_team_ownership_boundary verifying PR rejection with diagnostic ERR_CROSS_TEAM_BFF_MUTATION.passConfirms Git repository ownership rules; does not inspect ad-hoc local developer testing branches.
    FIT-2: Leaky AbstractionSeed an API response serializer in the BFF that exposes raw backend PostgreSQL database primary keys and Hibernate proxy fields directly to the mobile JSON output.View-model schema validation probe probe_bff_payload_leakage_rejection verifying build failure on raw database field leaks with diagnostic ERR_RAW_BACKEND_ENTITY_LEAKED.passConfirms view-model serialization tests; does not inspect internal debug log outputs.
    FIT-3: Implicit CouplingSeed an implementation where Mobile BFF attempts to invoke Desktop Web BFF via internal HTTP call to fetch desktop user preferences.Network policy and service mesh rule probe_cross_bff_call_rejection verifying network connection termination with diagnostic ERR_CROSS_BFF_INVOCATION_PROHIBITED.passConfirms service mesh egress filters; does not test shared external cache read collisions.

    Residual Risk

    • Cellular network IP hopping during train travel may force occasional TLS renegotiations on client connections. Accepted by David O'Reilly with client-side retry idempotency headers.

    Traceability

    ClaimClassificationSourceFreshness
    Rejection of shared mutable ownershipderivedFIT-1 probe result2026-09-15
    Rejection of leaky backend abstractionderivedFIT-2 probe result2026-09-15
    Rejection of cross-BFF callsderivedFIT-3 probe result2026-09-15

    Verification

    No validator was supplied, so no command was run.

    Open Decisions

    None.

    Next steps

    1. Platform Security team incorporates synthetic probes FIT-1, FIT-2, and FIT-3 into the master CI pull-request validation workflow.
    2. Mobile team verifies payload size linter enforcing <= 45 KB in pre-commit git hooks.
    3. Conduct staging resilience drill simulating backend service timeout to confirm graceful degradation.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Design client-specific view models to eliminate over-fetchingDefine partial failure semantics for upstream API aggregationEstablish ownership boundaries between client and domain teamsOptimize mobile payloads for low-bandwidth 3G environments

    About this skill

    What it does

    This skill owns the application-architecture decision for a client-specific backend adapter. A BFF translates an evidenced client journey into a stable client-facing contract, composes authoritative upstream capabilities, and isolates client release/change needs without becoming a second domain backend.

    Use it when

    • Web, mobile, desktop, partner, device, or other client surfaces have evidenced and durable differences in journeys, release cadence, payload shape, round trips, offline behavior, or failure tolerance
    • One client screen/task must compose several authoritative upstream operations and needs explicit latency, dependency, or partial-result semantics
    • A frontend-aligned team needs independent ownership of client-facing contract evolution without changing domain APIs for presentation concerns
    • Client-specific authentication/session handling must be adapted while authorization remains authoritative downstream
    • Repeated client-side fan-out, over/under-fetching, protocol translation, or unstable upstream choreography causes measurable complexity or user impact
    • An existing BFF duplicates business rules, trusts client identity headers, creates retry storms, hides partial failures, leaks upstream topology, or has unclear ownership

    For example: “Our mobile app makes fourteen calls to render the home screen and takes six seconds on 3G. The web app needs different data and the shared API has become a compromise that serves neither.”

    What you get

    • architecture/bff-architect/README.md
    • architecture/bff-architect/00-overview/bff-architect-overview.md
    • architecture/bff-architect/verification/fitness-self-check.md

    Plus one page per business module, only where your evidence calls for it: {module}/ui-surface.md, {module}/state.md, {module}/api-consumption.md, {module}/accessibility.md, {module}/performance.md.

    All paths are relative to the output folder you choose.

    What it will not do

    Do not use for a generic API gateway, reverse proxy, one frontend route handler, shared API design, backend service internals, UI state, framework selection, or adding a BFF because web and mobile both exist.

    How it works

    1. Check a BFF is warranted.
    2. Fix the ownership.
    3. Define what may live in it and what may not.
    4. State the failure behaviour on partial downstream failure.
    5. Design its lifecycle with the client's.
    6. Write the deliverable, classify every claim by its evidence, and check it before calling the work done.

    What's in the package

    Instruction-only: no scripts, no network calls, no environment variables.

    • LICENSE.txt
    • SKILL.md
    • agents/openai.yaml
    • assets/output-template-artifact.md
    • assets/output-template-contract.md
    • assets/output-template-domain.md
    • assets/output-template-fitness.md
    • assets/output-template-mechanism.md
    • references/domain-rules.md
    • references/operating-rules.md
    • references/output-contract.md

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 12 days ago

    • Passed all security checks, Safe to install

    Listed12 days ago

    What's inside

    Frequently Asked Questions