skills.rest
ZJU-REAL
ZJU-REALOFFICIAL
Explore all skills by this author →
GitHub

hugagent-frontend-dev

Standardize React and TypeScript frontend features for HugAgentOS.

195|12|Updated Jul 19, 2026
Search Tags:#typescript#react#frontend development#zustand#css architecture#ant design#sse streaming
One-click install
npx skills add https://github.com/ZJU-REAL/HugAgentOS --skill hugagent-frontend-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hugagent-frontend-dev
Source: https://github.com/ZJU-REAL/HugAgentOS/tree/main/.claude/skills/hugagent-frontend-dev
Command: npx skills add https://github.com/ZJU-REAL/HugAgentOS --skill hugagent-frontend-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill prevents inconsistent frontend implementations by providing HugAgentOS-specific standards for React, TypeScript, Ant Design, Zustand, API integration, styling, streaming behavior, and component organization.

Core Features & Use Cases

  • Frontend Architecture Guidance: Define consistent structures for components, hooks, stores, shared types, API clients, styles, and barrel exports.
  • Implementation Templates and References: Provide reusable templates, CSS variables, UI design specifications, component trees, icon assets, API patterns, and SSE event semantics.
  • Deterministic Scaffolding: Generate starter component files, styles, and local exports with the included component scaffolding script.
  • Use Case: When adding a new chat, catalog, or settings feature, use this Skill to create the component structure, connect Zustand state and authenticated APIs, process streaming events, and verify the implementation against the project's design and code conventions.

Quick Start

Use the HugAgentOS frontend development skill to scaffold and implement a new React TypeScript component for the requested feature while following the project's Zustand, Ant Design, API, SSE, TypeScript, and CSS conventions.

Frequently Asked Questions about hugagent-frontend-dev

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

FAQPage Schema
How do I scaffold a React TypeScript component that follows project conventions?▼

Scaffold a React TypeScript component by running the included scaffolding script to generate starter files, styles, and local exports while enforcing named exports, typed interfaces, and CSS modules for consistent frontend architecture.

What is the standard way to handle SSE streaming in a React frontend?▼

Standard SSE streaming handling involves processing SSE event semantics through custom hooks and Zustand stores, ensuring authenticated API calls and proper event handling workflows are integrated into your React TypeScript components.

How do I structure Zustand stores and API calls for a new chat feature?▼

Structure Zustand stores and API calls by defining consistent state management patterns, using authFetch endpoints for authenticated API requests, and organizing shared types and API clients through barrel exports.

Does this frontend development approach work with Ant Design theming and CSS modules?▼

Yes, the approach integrates Ant Design theming by applying CSS variables and jx-prefixed classes alongside CSS modules to maintain consistent UI layouts and styling conventions across components.

What are the limitations of using custom hooks for authenticated API calls?▼

Using custom hooks for authenticated API calls requires strict adherence to authFetch endpoint patterns and typed interfaces; implementations bypassing project-specific component organization or lint validation will fail consistency checks.

Related Skills

Explore More Software Engineering Skills→
chidekinachidekina
2

react-antd-setup

Generate a React + Ant Design project with Vite and optional TypeScript, Router, and layout.

Community
Intermediate
Pravin-surawasePravin-surawase
5

react-validation

Run build, lint, type-check, and test checks on React frontend changes.

Community
Intermediate
mralexsaavedramralexsaavedra
41

spotiarr-sse

Stream server-sent events for playlist, download, library, and feed updates.

Community
Intermediate
sametozkalesametozkale

redux

Connect json-render's StateStore interface to Redux stores for React applications.

Community
Basic