skills.rest
oornnery
oornneryCOMMUNITY
Explore all skills by this author →
GitHub

design

Guide API, UI, and BFF boundary design with contract and token alignment.

Updated Jan 14, 2026
Search Tags:#ui#accessibility#bff#design-systems#apis#design-guidance
One-click install
npx skills add https://github.com/oornnery/skills --skill design-oornnery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/oornnery/skills/tree/main/skills/design
Command: npx skills add https://github.com/oornnery/skills --skill design-oornnery

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing robust API, UI, and BFF contracts to ensure consistent surface areas, accessible interfaces, and clear boundaries across front-end and back-end layers.

Core Features & Use Cases

  • Provide contract-first guidance for APIs and UI components.
  • Define BFF boundaries and orchestration rules to avoid leaking internal models.
  • Align design-system tokens and accessibility considerations across surfaces.

Quick Start

Review a project’s API/UI/BFF design needs and apply this guidance to align contracts, surfaces, and accessibility.

Frequently Asked Questions about design

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

FAQPage Schema
What is a BFF boundary and how does it prevent leaking internal API models?▼

A BFF (Backend For Frontend) boundary acts as an orchestration layer that isolates internal API models from frontend interfaces. Defining this boundary prevents leaking internal models by establishing strict contract rules and surface semantics across cross-service orchestration workflows.

How do I design API and UI contracts to ensure consistent surface semantics?▼

Design API and UI contracts by applying contract-first guidance to align surfaces and semantics. This approach ensures consistent design language across API contracts, UI component APIs, and cross-service orchestration by enforcing structured rules and implementation cues.

How do I align design-system tokens with accessibility considerations across UI components?▼

Align design-system tokens with accessibility by applying structured rules and lifecycle checks across all UI surfaces. This process maps tokenization directly to accessibility considerations, ensuring robust and consistent interface boundaries throughout the product.

When do I need to define BFF orchestration rules for cross-service workflows?▼

Define BFF orchestration rules when designing cross-service workflows that require clear boundaries between front-end and back-end layers. Establishing these rules early avoids leaking internal models and aligns contracts during API and UI component design.

Does this design guidance provide lifecycle checks for API and UI component boundaries?▼

Yes, this design guidance provides lifecycle checks for API and UI component boundaries. It satisfies requirements for design workflow guidance by offering structured rules, examples, and implementation cues to maintain robust boundaries throughout the product lifecycle.

Related Skills

Explore More Design & Creative Skills→
snicmakinosnicmakino
2

kiro-spec-design

Translate requirements into a boundary-driven technical design with discovery artifacts.

Community
Advanced
tmcfarlanetmcfarlane
105

web-design-guidelines

Validate UI code against Web Interface Guidelines for accessibility and usability gaps.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
Handy369Handy369

api-and-interface-design

Define contract shapes and boundary semantics for API and module interfaces before coding.

Community
Intermediate