skills.rest
hobbong21
hobbong21COMMUNITY
Explore all skills by this author →
GitHub

frontend-integration

Connect vanilla JavaScript frontends to backend APIs with centralized api.js wrappers.

Updated Aug 27, 2026
Search Tags:#ui#architecture#authentication#frontend#api#vanilla-js#server-sent-events
One-click install
npx skills add https://github.com/hobbong21/Make.IT_Ai-Assistant_platform --skill frontend-integration-hobbong21
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-integration
Source: https://github.com/hobbong21/Make.IT_Ai-Assistant_platform/tree/main/.claude/skills/frontend-integration
Command: npx skills add https://github.com/hobbong21/Make.IT_Ai-Assistant_platform --skill frontend-integration-hobbong21

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Connects a vanilla JavaScript frontend to a backend API with a centralized api.js wrapper, token management, and unified loading/error UX across pages.

Core Features & Use Cases

  • Centralized API wrapper (api.js) to standardize all fetch calls, automatic token inclusion, and uniform error handling.
  • JWT authentication management (auth.js) to persist login state and secure session flow.
  • Consistent UI helpers (ui.js) for loading states, toasts, and error presentation.
  • SSE-based streaming UX for chat-like interfaces and live updates.
  • Directory normalization and consolidation guidance to remove duplicated front-end assets and create a single source of truth.

Quick Start

Begin by wiring your HTML pages to the api.js wrapper, implement auth.js for token management, and integrate ui.js to handle loading and errors, then replace duplicated front-end code with a clean, centralized structure.

Frequently Asked Questions about frontend-integration

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

FAQPage Schema
How do I connect a vanilla JavaScript frontend to a backend API?▼

Connect a vanilla JavaScript frontend to a backend API using a centralized api.js wrapper that standardizes fetch calls, includes automatic token management, and provides uniform error handling across all pages.

What's the best way to manage JWT authentication in vanilla JS?▼

Manage JWT authentication in vanilla JS by implementing a dedicated auth.js module to persist login state, secure session flows, and automatically attach tokens to centralized API fetch requests.

How do I handle loading states and error UX consistently across HTML pages?▼

Handle loading and error UX consistently across HTML pages by using shared UI helper functions that standardize loading indicators, toast notifications, and error presentation throughout the vanilla JavaScript project.

Can I implement Server-Sent Events streaming UI in a vanilla JS project?▼

Yes, you can implement Server-Sent Events (SSE) streaming UI in a vanilla JS project for chat-like interfaces and live updates by integrating the streaming data flow directly into the centralized frontend structure.

How do I consolidate duplicated frontend assets in an HTML/CSS/JS project?▼

Consolidate duplicated frontend assets in an HTML/CSS/JS project by applying directory normalization guidance to remove redundant files, creating a single source of truth for stable and centralized code.

Related Skills

Explore More Software Engineering Skills→
lfg357lfg357

hybrid-python-web

Coordinate Python backend with HTML/JS frontend for full-stack web applications.

Community
Advanced
merge-apimerge-api

link-implement-frontend-connect

Add a Connect button that opens the Merge Link modal for account linking.

Official
Intermediate
tarrragontarrragon

Frontend with Playwright — SKILL 入口

Validate frontend DOM/CSS/JS interactions using Playwright across vanilla and frameworks.

Community
Advanced
ianyimiianyimi
1

Frontend Components

Standardize frontend components across codebases for structure, naming, styling, accessibility, and reusability.

Community
Basic