skills.rest
TencentBlueKing
TencentBlueKingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

bk-magicbox-vue

Standardize MagicBox UI mapping in TSX templates using bk-magic-vue components.

88|138|Updated Oct 26, 2023
Search Tags:#ui#frontend#ux#design-system#MagicBox#bk-magicbox-vue
One-click install
npx skills add https://github.com/TencentBlueKing/bk-monitor --skill bk-magicbox-vue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bk-magicbox-vue
Source: https://github.com/TencentBlueKing/bk-monitor/tree/main/bklog/web/.ai-shared/skills/bk-magicbox-vue
Command: npx skills add https://github.com/TencentBlueKing/bk-monitor --skill bk-magicbox-vue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized approach to mapping and using the MagicBox UI features across projects, ensuring consistency, accessibility, and faster front-end iteration.

Core Features & Use Cases

  • UI mapping with bk-magicbox-vue to create consistent visual mappings across dashboards.
  • Template/tsx usage guidance to embed MagicBox-based interactions using the bk-* components.
  • ChangeImpact and Boundary guidance to avoid re-implementing components and conflicting UI patterns.

Quick Start

Install and import bk-magicbox-vue, then render the MagicBox in your TSX templates using bk-* components, following the guidelines in this skill to maintain consistency.

Frequently Asked Questions about bk-magicbox-vue

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

FAQPage Schema
How do I standardize Vue UI components for consistent frontend dashboards?▼

To standardize Vue UI components for consistent frontend dashboards, map your interfaces using the bk-magicbox-vue library, which provides uniform UX patterns and clear boundaries for TSX templates.

How do I integrate bk-magicbox-vue components into TSX templates?▼

You can integrate bk-magicbox-vue components into TSX templates by installing the library, importing it, and rendering bk-* components while following UI mapping guidelines to maintain accessibility and visual consistency.

What is UI mapping for frontend development and when do I need it?▼

UI mapping for frontend development is the process of standardizing visual and interactive component behaviors across projects. You need it to ensure uniform UX patterns and avoid conflicting interfaces in dashboards.

Can I use bk-magicbox-vue to avoid re-implementing existing UI components?▼

Yes, you can use bk-magicbox-vue to avoid re-implementing existing UI components by following its change impact and boundary guidance, which prevents conflicting UI patterns and ensures accessible interfaces.

Why should I use a design system for frontend interactions across dashboards?▼

Using a design system for frontend interactions ensures consistent UX patterns and accessibility across dashboards. It accelerates front-end iteration by providing clear component boundaries and standardized UI mapping.

Related Skills

Explore More Design & Creative Skills→
forranyforrany

bk-chat-x

Render AI chat interfaces with Vue components for input, messages, and shortcuts.

Community
Intermediate
TencentBlueKingTencentBlueKing
2.5k

pipeline-template-module

Describe a BK-CI pipeline template architecture with API, service, and data access layers.

Official
Advanced
tarrragontarrragon

Frontend with Playwright — SKILL 入口

Validate frontend DOM/CSS/JS interactions using Playwright across vanilla and frameworks.

Community
Advanced
skatedduskateddu
27

frontend-design

Generate frontend interfaces with HTML/CSS/JS for React, Vue, or plain websites.

Community
Advanced