skills.rest
hilaryosborne
hilaryosborneCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

fe-bff-patterns

Design BFF layers that shape responses to match frontend component hierarchies.

Updated Feb 21, 2026
Search Tags:#frontend architecture#api design#bff#micro-frontends#data orchestration#backend for frontend
One-click install
npx skills add https://github.com/hilaryosborne/skills --skill fe-bff-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fe-bff-patterns
Source: https://github.com/hilaryosborne/skills/tree/main/frontend-developer/fe-bff-patterns
Command: npx skills add https://github.com/hilaryosborne/skills --skill fe-bff-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the complexity of fetching and shaping data for frontend applications by guiding the design and implementation of Backend for Frontend (BFF) layers, ensuring the frontend receives exactly the data it needs in the optimal format.

Core Features & Use Cases

  • BFF Philosophy: Understand the core principles of BFF, including its ownership by the frontend team and its role as a component-aware orchestration layer.
  • Response Shape Design: Learn to structure BFF responses to mirror the frontend component hierarchy, pre-compute display values, and include only necessary data.
  • Orchestration Patterns: Implement strategies for parallel API calls, graceful degradation, error translation, and effective caching.
  • Use Case: When building a new e-commerce product detail page, use this skill to design a BFF that aggregates data from inventory, pricing, and review services into a single, component-ready JSON payload for the frontend.

Quick Start

Use the fe-bff-patterns skill to design a BFF response that mirrors the component tree for a product card.

Frequently Asked Questions about fe-bff-patterns

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

FAQPage Schema
What is a Backend for Frontend layer and when do I need one?▼

A Backend for Frontend (BFF) layer is a component-aware orchestration layer owned by the frontend team. You need a BFF when frontend applications must aggregate data from multiple backend services into a single, component-ready payload.

How do I design BFF responses that match my frontend component hierarchy?▼

Design BFF responses by structuring the JSON payload to mirror the frontend component tree directly. Pre-compute display values within the BFF and include only the necessary data required by specific UI components.

What orchestration patterns should I use for parallel API calls in a BFF?▼

BFF orchestration patterns include executing parallel API calls, implementing graceful degradation for failed requests, handling error translation, and applying effective caching strategies to serve specific UI needs efficiently.

Can I use a BFF pattern for micro-frontend architectures?▼

Yes, the BFF pattern suits micro-frontend architectures by acting as a component-aware orchestration layer. It aggregates data from multiple services into tailored payloads, ensuring each frontend component receives exactly the data it needs.

How do I handle error translation in a Backend for Frontend layer?▼

Handle error translation in a BFF layer by intercepting backend service errors and converting them into frontend-friendly formats. This orchestration pattern ensures the UI receives graceful degradation responses instead of raw backend failures.

Related Skills

Explore More Software Engineering Skills→
saranskumarsaranskumar

api-designer

Define API contracts with endpoints, schemas, validation, and error handling.

Community
Advanced
paulinghampaulingham
1

bff-scaffold

Generate channel-specific BFF scaffolds with upstream clients, transformers, and middleware.

Community
Advanced
NickCrewNickCrew
29

api-gateway-patterns

Implement API gateway routing, authentication, and traffic management for microservices.

Community
Intermediate
Camilo8902Camilo8902

rest-to-graphql-migrator

Migrate REST APIs to GraphQL incrementally using schema stitching and REST data source wrappers.

Community
Advanced