本文へ移動
cccskills
無料GitHub で公開

antd-theme-customization

Customize Ant Design theme using Design Tokens and ConfigProvider. Use when adjusting visual styles, colors, spacing, or other theme properties in an Ant Design project.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md1.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Ant Design Theme Customization

Customize the visual appearance of Ant Design components using the theme system.

When to Use

  • You need to change primary colors, border radius, or other design tokens
  • You need to implement dark mode or custom themes
  • You need to configure component-specific token overrides
  • You need to use the static token extraction or CSS variable mode

Instructions

  1. Review the theme documentation at https://ant.design/docs/react/customize-theme
  2. Use <ConfigProvider theme={{ token: { ... } }}> to customize global tokens
  3. Use <ConfigProvider theme={{ components: { Button: { ... } } }}> for component-specific tokens
  4. For dark mode, use <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
  5. For CSS variable mode, set <ConfigProvider theme={{ cssVar: true }}>

Key Design Tokens

  • colorPrimary — primary color (default: #1677ff)
  • colorBgContainer — background color of containers
  • borderRadius — global border radius
  • fontFamily — font family
  • fontSize — base font size

Notes

  • Ant Design v5 uses CSS-in-JS; no more Less variable overrides
  • Use theme.getDesignToken() to extract computed tokens
  • See all available tokens at https://ant.design/docs/react/token

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Generate a single-line commit message for ant-design by reading the project's git staged area and recent commit style. Use when the user asks for a commit message, says "msg", "commit msg", "写提交信息", or wants one-line text that covers all staged changes. Output should match the repository's existing commit style and summarize all staged changes in one line.

日本語の概要は準備中です。原文の説明を表示しています。

ant-design/ant-design10万2026年10月13日 更新

Look up Ant Design React component documentation, props, and usage examples. Use when working with Ant Design (antd) components and needing API details, default values, or usage patterns.

日本語の概要は準備中です。原文の説明を表示しています。

ant-design/ant-design10万2026年10月13日 更新

Create pull requests for ant-design using the repository's official PR templates. Use this skill when the user asks to create/open a PR, draft PR title/body, summarize branch changes for a PR, or otherwise prepare PR content. Judge by intent rather than fixed phrases; short colloquial requests still count if they are about creating a PR rather than discussing PR concepts.

日本語の概要は準備中です。原文の説明を表示しています。

ant-design/ant-design10万2026年10月13日 更新

Help maintainers reply to Ant Design GitHub issues following official guidelines. Use this skill when the user asks to handle issues, reply to issues, process issues, check issues, or manage issues for ant-design/ant-design repository. Also use when the user mentions "issue" in the context of antd, Ant Design, or GitHub issue management. This skill provides guidelines for classifying issues (Bug vs Feature Request), handling dosubot replies, using proper labels, writing polite responses, and knowing when to close issues.

日本語の概要は準備中です。原文の説明を表示しています。

ant-design/ant-design10万2026年10月13日 更新

Migrate between Ant Design major versions. Use when upgrading from antd v4 to v5 or addressing breaking changes in component APIs.

日本語の概要は準備中です。原文の説明を表示しています。

ant-design/ant-design10万2026年10月13日 更新

审查 ant-design 测试用例是否值得保留。在用户要求验证测试 case、review 测试质量、判断测试是否合理、是否“用 A 证明 A”、是否重复、是否锁定实现细节,或决定测试应删除、保留还是改写时使用。

日本語の概要は準備中です。原文の説明を表示しています。

ant-design/ant-design10万2026年10月13日 更新

ant-design のスキルをすべて見る

このスキルの問題を報告する