skills.rest
limaon
limaonCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-integration

Implement React and TypeScript frontend workflows that integrate with existing backend APIs.

Updated Jul 8, 2022
Search Tags:#React#frontend#routing#TypeScript#design-system#implement#UI integration
One-click install
npx skills add https://github.com/limaon/dotfiles --skill frontend-ui-integration-limaon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-integration
Source: https://github.com/limaon/dotfiles/tree/main/.config/opencode/skills/frontend-ui-integration
Command: npx skills add https://github.com/limaon/dotfiles --skill frontend-ui-integration-limaon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides implementing or extending a user-facing workflow in a web application, ensuring it integrates with existing backend APIs while adhering to the design system and routing conventions.

Core Features & Use Cases

  • UI integration: Build or modify frontend flows that consume existing APIs without altering backend contracts.
  • Design system alignment: Reuse in-house components, styling, and accessibility primitives.
  • Use Case: When adding a new dashboard widget, implement the frontend UI in React with TypeScript, wire routes, and validate with existing tests.

Quick Start

Use the frontend-ui-integration skill to implement a new dashboard widget that consumes an existing API.

Frequently Asked Questions about frontend-ui-integration

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

FAQPage Schema
How do I implement a React UI feature that integrates with existing backend APIs?▼

To implement a React UI feature that integrates with existing APIs, build or modify frontend workflows using TypeScript, wire routes, and consume API data while adhering to the project's established design system.

How do I align new frontend components with an existing design system in TypeScript?▼

Align new frontend components by reusing in-house design system primitives, styling, and accessibility features, ensuring strong typing and keyboard navigation are validated through unit and component tests.

What's the best way to add a new dashboard widget that consumes an API in React?▼

The best way to add a dashboard widget is to implement the frontend UI in React with TypeScript, wire the necessary routes, and validate the API integration using the project's established testing tooling.

Do I need TypeScript to build frontend workflows that connect to backend APIs?▼

Yes, TypeScript is required to ensure strong typing when building frontend workflows. It guarantees type safety during UI integration and helps validate component behavior through integration tests.

Does this approach to UI integration support accessibility and keyboard navigation?▼

Yes, this UI integration approach satisfies requirements for accessibility and keyboard navigation by reusing the project's design system primitives and validating interactions through established component tests.

Can I alter backend contracts when wiring new routes for frontend features?▼

No, you cannot alter backend contracts. This approach builds or modifies frontend flows that consume existing APIs without changing the backend, ensuring seamless UI integration within current routing patterns.

Related Skills

Explore More Software Engineering Skills→
iamjpsinghiamjpsingh

fullstack-design

Integrate a Django backend with a React/TypeScript frontend using a service-layer pattern.

Community
Advanced
julianromlijulianromli
141

frontend-ui-integration

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

Community
Intermediate
chicanoandres702chicanoandres702

frontend-mobile-development-component-scaffold

Generates React components with TypeScript, tests, and Storybook from a formal spec.

Community
Advanced
www-zaq-aiwww-zaq-ai
66

prototype

Build front-end prototypes for BO routes using static fixtures.

Official
Intermediate