A comprehensive technical guide and reference for the @ht-smart/basic component library, featuring enterprise-grade UI elements like HtProTable, HtForm, and HtProTree.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install smart-web-components-usage
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install smart-web-components-usage using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Smart Web Components Usage?
The Smart Web Components skill provides deep integration knowledge for the @ht-smart/basic library, a suite of high-level React components based on Ant Design 4. It focuses on accelerating frontend development by providing pre-configured, data-driven components that handle complex states like table pagination, form validation, and tree manipulation out of the box. By using Openclaw Skills, developers can quickly access API references, usage patterns, and best practices for creating consistent enterprise interfaces.
This skill covers a wide array of components from basic buttons and inputs to complex modules like HtProTable for enterprise data management, HtProTree for advanced hierarchical data, and HtFileUpload for large-scale chunked uploads with resume capabilities. It serves as a bridge between raw library documentation and real-world implementation logic.
Smart Web Components Usage Use Cases
- Building data-heavy enterprise dashboards using HtProTable with built-in search and pagination.
- Creating complex multi-step or modal-based forms using HtForm and HtModalForm.
- Implementing advanced file management systems with HtFileUpload for large file handling and HtFilePreview.
- Managing hierarchical organizational structures with HtProTree and HtProRegionTree.
- Global state-managed UI interactions like dictionary-based selection (HtDict) and API-driven modals (HtNiceModal).
How Smart Web Components Usage Works
- Analyze component requirements based on the enterprise UI needs (e.g., table, form, or tree).
- Import high-level components from the @ht-smart/basic package within the React application.
- Configure data fetching by providing a request function that returns specific data formats (e.g., { records, total }).
- Use Refs like actionRef or tableRef to programmatically control component behaviors such as reloading data or clearing selections.
- Leverage the GlobalProvider and HtDictContext to provide necessary environmental configurations like API instances and regional data.
Smart Web Components Usage Setup
To use these components in your project, ensure you are running an Ant Design 4 environment and install the package:
npm install @ht-smart/basic
# or
yarn add @ht-smart/basic
Ensure you wrap your application with the necessary providers for dictionary and modal support:
import { HtDictContext, HtNiceModal } from '@ht-smart/basic';
const App = () => (
<HtDictContext.Provider value={{ request: axiosInstance }}>
<HtNiceModal.Provider>
<YourAppContent />
</HtNiceModal.Provider>
</HtDictContext.Provider>
);
Smart Web Components Usage Data Schema & Taxonomy
The skill expects and generates data according to specific enterprise schemas to ensure seamless component interaction:
| Component | Expected Data Format | Key Fields |
|---|---|---|
| HtProTable | { records: T[], total: number } |
records, total |
| HtProTree | { success: boolean, data?: any } |
success, data, error |
| HtDict | dictData array |
label, value, color |
| HtFileUpload | Chunked file segments | fileId, percent, status |
Components like HtProColumns utilize a valueType system (e.g., 'select', 'date', 'cascader') to automatically map data to the correct UI representation.
Smart Web Components Usage Advanced Features
- Large file chunked uploading with breakpoint resume support via HtFileUpload.
- Draggable, resizable, and maximizable side panels using the advanced HtDrawer features.
- Regional cascading and tree selections with built-in administrative data via HtRegionTree and HtRegionCascader.
- Programmatic modal management using HtNiceModal to prevent redundant rendering and simplify state flow.
- Automatic state memory for table selections across different pages using the memoizedSelected prop.
SKILL.md
Loading
Related Openclaw Skills
Huaxia Wisdom
A sophisticated AI toolset utilizing 24 classical Chinese philosophical frameworks to guide modern decision-making, efficiency, and personal growth.
Taco Strategy Engine
An intelligent trading middleware that transforms real-time market data into high-confidence, actionable trading strategies.
SFE-SXK Data Viewer
A specialized data retrieval tool for querying SFE-SXK project reports and aggregate data with high efficiency.
Wand UI Skill
A specialized tool for developers to rapidly integrate and master the Wand UI 2.0 mobile component library in Vue 2.0 projects.
Feishu Voice
A free utility to convert text into high-quality audio and send it directly to Feishu users or groups via Edge TTS.
EvoMap
EvoMap is a collaborative hub for AI agents to publish validated solutions, complete bounty tasks, and participate in a credit-based service marketplace.
Featured*
