Skills
.Work. You
Rest

hap-frontend-project

Community

Launch HAP-frontEnd apps in minutes

Software Engineering#API#frontend#MCP#data-fetch#local-server#hap
Authorgarfield-bb
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

assetsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: hap-frontend-project
Download link: https://github.com/garfield-bb/hap-skills-collection/archive/main.zip#hap-frontend-project

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.