skills.rest
garfield-bb
garfield-bbCOMMUNITY
Explore all skills by this author →
GitHub

hap-frontend-project

Fetch HAP data via API V3 and render it live in a frontend project.

27|5|Updated Jan 13, 2026
Search Tags:#API#frontend#MCP#data-fetch#local-server#hap
One-click install
npx skills add https://github.com/garfield-bb/hap-skills-collection --skill hap-frontend-project
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hap-frontend-project
Source: https://github.com/garfield-bb/hap-skills-collection/tree/main/.claude/skills/hap-frontend-project
Command: npx skills add https://github.com/garfield-bb/hap-skills-collection --skill hap-frontend-project

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

This skill helps you bootstrap a complete HAP-backed frontend project that reads data from HAP via the API V3, avoiding hardcoded content and enabling live previews.

Core Features & Use Cases

  • End-to-end HAP integration: Design data in MCP, scaffold a frontend project, and wire API V3 calls.
  • Auto-start local server: One command to preview the site locally.
  • Dynamic rendering: Fetches product/news data from HAP and renders cards/articles.
  • Reference resources: Includes templates for front-end files and references to HAP API guides. Example: Build a simple marketing site that shows product cards and latest news powered by HAP data.

Quick Start

  • Set up your config by renaming assets/config.js.template to config.js and replacing HAP_APPKEY and HAP_SIGN and IDs.
  • Start a local server: python -m http.server 8000 or npx serve.
  • Open http://localhost:8000 to preview the site.

Frequently Asked Questions about hap-frontend-project

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

FAQPage Schema
How do I fetch HAP data dynamically in a frontend project?▼

Fetching HAP data dynamically in a frontend project uses API V3 calls configured with your HAP_APPKEY and HAP_SIGN. This skill scaffolds the project, wires the API integration, and renders live product or news data.

Can I preview a HAP-backed frontend app locally without hardcoding content?▼

Yes, you can preview a HAP-backed frontend app locally without hardcoding content. This skill generates sample data with image attachments and auto-starts a local server using Python or npx serve for instant live preview.

What is the workflow for integrating HAP data modeling in MCP with a frontend site?▼

The workflow for integrating HAP data modeling in MCP with a frontend site involves designing data structures in MCP, scaffolding the frontend project, wiring API V3 calls, and booting a local server to render the dynamic data.

Do I need a specific local server to run a HAP frontend application?▼

No, you do not need a specific local server to run a HAP frontend application. You can start a local server using standard tools like python -m http.server 8000 or npx serve to preview the site.

How do I configure API V3 credentials for a HAP frontend project?▼

To configure API V3 credentials for a HAP frontend project, rename the config.js.template file to config.js, then replace the HAP_APPKEY, HAP_SIGN, and relevant IDs with your actual HAP configuration values.

Does this HAP frontend skill support non-destructive structural changes to the data?▼

Yes, this HAP frontend skill supports non-destructive structural changes to the data. It enables dynamic data sourcing from MCP while safely applying structural updates and generating sample data with image attachments.

Related Skills

Explore More Software Engineering Skills→
garfield-bbgarfield-bb
27

hap-as-database

Configure HAP as a backend CMS with MCP and HAP API V3.

Community
Intermediate
hidonguyenhidonguyen

ck:deploy

Detect hosting platforms from config files and deploy projects automatically.

Community
Advanced
csandeepcsandeep

design-guide

Standardize spacing, typography, colors, and interactive states for accessible frontend UI.

Community
Basic
fabioc-alohafabioc-aloha
1

API Documentation Skill

Scaffold technical documentation projects with templates for API endpoints and guides.

Community
Intermediate