frontend-ui-integration

Integrate frontend UI changes with existing backend APIs in a web application.

141|20|Updated Dec 19, 2025
One-click install
npx skills add https://github.com/julianromli/opencode-template --skill frontend-ui-integration-julianromli
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-ui-integration
Source: https://github.com/julianromli/opencode-template/tree/main/skill/frontend-ui-integration
Command: npx skills add https://github.com/julianromli/opencode-template --skill frontend-ui-integration-julianromli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Implement or extend a user-facing workflow in our primary web application, integrating with existing backend APIs and following our design system, routing, and testing conventions.

Core Features & Use Cases

  • UI changes implemented with strong typing for props and API responses.
  • Handles loading, empty, error, and success states using existing primitives.
  • Ensures accessibility and keyboard navigation; respects feature flags and rollout mechanisms.
  • Use Case: Update a feature page to align with the design system while consuming existing API endpoints.

Quick Start

Connect a new frontend feature to existing backend APIs following the design system and routing patterns.

Frequently Asked Questions about frontend-ui-integration

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

FAQPage Schema
How do I integrate frontend UI changes with existing backend APIs?

To integrate frontend UI changes with existing backend APIs, you connect user-facing workflows to established backend contracts. This enforces strong typing for API responses and props while adhering to the web application's existing routing patterns.

What is the best way to handle loading, empty, and error states in a web application?

Handling loading, empty, and error states in a web application involves utilizing existing design system primitives. This ensures consistent UI feedback during API data fetching and aligns with established testing conventions.

Can I use existing design system primitives when updating a feature page?

Yes, you can use existing design system primitives when updating a feature page. The integration process ensures UI changes strictly adhere to the web app's design system, routing patterns, and established testing conventions.

Does UI integration enforce accessibility and keyboard navigation?

Yes, UI integration strictly enforces accessibility and keyboard navigation. It ensures that new user-facing workflows consuming existing API endpoints remain fully accessible and follow established testing conventions.

How do I apply feature flags when integrating new frontend features?

To apply feature flags when integrating new frontend features, you respect existing rollout mechanisms within the web application. This ensures safe deployment of UI changes alongside strong typing and established routing patterns.

Why do I need strong typing for API responses and props during UI integration?

You need strong typing for API responses and props during UI integration to ensure data consistency and prevent runtime errors. It secures the connection between frontend workflows and existing backend API contracts.