HiUI Documentation

The hiui-page-workflow is an end-to-end delivery orchestration agent for React / HiUI pages. It manages the entire lifecycle from requirement refinement to implementation, engineering verification, and UX acceptance.

It orchestrates three primary sub-skills:

• hiui-refine: Handles requirement clarification, product schemes, page lists, and the 'HiUI Handoff Package'.
• hiui-design: Manages page planning, generation, source code constraints, and engineering gates.
• ux-walkthrough: Provides UX inspection standards, evidence gates, and formal reporting.

The workflow is designed as a 'gate-based' orchestration, meaning it controls stage transitions using specific status checks to ensure quality and prevent unauthorized code generation.

HiUI is a frontend component library optimized for middle and back-end systems. Its key characteristics include:

• Interaction & Visual Design: Specifically tailored for the needs of middle and back-end products.
• Business-Oriented Templates: Provides comprehensive templates for data display and business processes to cover most system requirements.
• Data-Structure Separation: Component design separates data structures from presentation, making the library easy to learn, upgrade, and use out of the box.

The hiui-design-skill repository is a sanitized, public-edition monorepo derived from the internal HiUI design Codex. It provides the foundational design rules and structures for building HiUI-compliant interfaces.

Included in this scope:

• Generic HiUI design rules and page archetypes.
• Schemas and templates.
• Validation helpers.
• Public machine CLI contracts.
• Generic typical-page examples.
• The @hiui-design/typical-page-shells runtime package.

Note: This repository is a generated subset and does not include internal automation, telemetry, or private business-line overlays.

HiUI Design Scripts is a public package containing reusable page-generation and validation scripts intended for downstream projects. It provides a machine-readable contract surface for planning, asset management, project setup, and validation.

Note that this public version excludes private publishing, internal telemetry, Feishu sync, and global-sync automation.

The Table component is a large data container designed to manage unified structures of data records. It supports various data-related operations, statistical functions, and column configurations.

When to use

• When you need to manage a significant volume of structured data records.
• When you need to perform editing, filtering, or screening on a subset of the total data.

Critical Implementation Notes

• Key Requirement: Following React best practices, all array components must bind a key. For the Table component, every row in the data property must have a unique key. The component does not automatically generate keys if they are missing; failing to provide them may cause performance and maintenance issues.
• Column Freezing: When implementing column freezing (using fixedToColumn), you must provide a width for the columns involved.

The Input component is used to receive text-based content from users. It is commonly used within forms as a standard input field.

Key Features

• Supports various input types (text, email, tel, etc.).
• Supports prefix/suffix elements and prepend/append external content.
• Includes built-in features like clearable and trimValueOnBlur.
• Supports different visual appearances: line, unset, or filled via the appearance prop.

The CheckTreeSelect component is a tree-structured multi-selector designed for complex data displays. It is ideal for scenarios such as selecting organizational structures (departments), product categories, or any nested hierarchical data.

Key features include:

• Hierarchical Data Support: Handles nested DataItem structures.
• Search Modes: Supports 'highlight' and 'filter' modes for finding nodes.
• Asynchronous Loading: Supports loading data via a dataSource prop.
• Flexible Selection Modes: Control how selected items are displayed via checkedMode.