skills.rest
oceanbase
oceanbaseOFFICIAL
Explore all skills by this author →
Website𝕏@OceanBaseDBGitHub

oceanbase-design-usage

Standardize OceanBase Design adoption with ConfigProvider, design tokens, and codemod migrations.

51|25|Updated Jun 28, 2023
Search Tags:#migration#imports#tokens#design-system#codemod#oceanbase-design#configprovider
One-click install
npx skills add https://github.com/oceanbase/oceanbase-design --skill oceanbase-design-usage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: oceanbase-design-usage
Source: https://github.com/oceanbase/oceanbase-design/tree/main/skills/oceanbase-design-usage
Command: npx skills add https://github.com/oceanbase/oceanbase-design --skill oceanbase-design-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables teams to standardize and accelerate the adoption of OceanBase Design across projects.

Core Features & Use Cases

  • Guides usage of @oceanbase/design、@oceanbase/ui、@oceanbase/icons、@oceanbase/util、@oceanbase/charts 以及 @oceanbase/codemod 的迁移与正确的导入规范，确保设计系统的一致性与易维护性。
  • 说明如何在项目中应用 Design Token、ConfigProvider、ChartProvider 等全局配置，以及如何进行从 Ant Design/旧组件栈的迁移。
  • 适用场景包括代码评审、组件升级、迁移工作流和团队编码规范落地。

Quick Start

Run codemod to migrate legacy imports, then wrap your application with ConfigProvider and adopt design tokens and proper package imports.

Frequently Asked Questions about oceanbase-design-usage

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

FAQPage Schema
How do I migrate from Ant Design to OceanBase Design packages?▼

Migrate from Ant Design by running codemod workflows to update legacy imports, then wrap your application with ConfigProvider and apply design tokens for consistent global configuration.

What is the correct import alignment for @oceanbase design, ui, and charts packages?▼

Correct import alignment requires referencing @oceanbase/design, @oceanbase/ui, @oceanbase/icons, and @oceanbase/charts properly to ensure design system consistency and maintainability.

When do I need to use ConfigProvider and design tokens in my project?▼

Use ConfigProvider and design tokens when adopting OceanBase Design to satisfy global configuration requirements and standardize UI theming across your application components.

Can I automate component upgrades and import standardization with codemod?▼

Yes, you can use @oceanbase/codemod workflows to automate legacy import migrations and standardize component upgrades across OceanBase repositories during code reviews.

Does OceanBase Design adoption require ChartProvider for chart components?▼

Adopting @oceanbase/charts involves applying global configuration through providers like ChartProvider alongside standard design tokens to ensure consistent chart theming.

Related Skills

Explore More Design & Creative Skills→
tiantangcao1980-webtiantangcao1980-web
4

ant-design-vue

Provide Vue 3 parity with Ant Design UI components for admin dashboards.

Community
Intermediate
djankiesdjankies

upgrading-to-prisma-6

Guide Prisma 5-to-6 migrations addressing breaking changes and validation.

Community
Advanced
oceanbaseoceanbase
161

oceanbase-knowledge

Retrieve OceanBase documentation, parameter meanings, and architecture concepts.

Official
Intermediate
wtyangwtyang
1

ant-design

Guide Ant Design component selection, theming, and advanced UI patterns.

Community
Advanced