본문으로 건너뛰기
cccskills
무료GitHub에 공개

antd-theme-customization

Customize Ant Design colors, spacing, corners, and typography using design tokens, shared values that control appearance. Configure global styles, individual components, dark mode, and CSS variables through ConfigProvider, and extract computed theme values when needed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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.

ant-design/ant-design
설치 방법 보기

이럴 때 유용합니다

  • Matching interface colors and typography to a design
  • Configuring a dark theme
  • Adjusting the appearance of individual components
  • Extracting theme values or enabling CSS variables

포함된 파일(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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

antd-commit-msg

무료

Write a single-line commit message for Ant Design by reading staged changes, the changes selected for the next commit. It summarizes the full commit intent and follows the style of recent repository commits.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Write a message for staged changes
  • Match the style of recent commits
  • Summarize changes across multiple files in one line
ant-design/ant-design10만2026년 10월 19일 업데이트

antd-component-lookup

무료

Look up Ant Design React components in official documentation to find available settings, default values, and usage examples. Check subcomponents and methods, and consult type definitions in the antd package when TypeScript details are needed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking component settings and default values
  • Finding usage examples and demo code
  • Looking up available subcomponents and methods
ant-design/ant-design10만2026년 10월 19일 업데이트

antd-create-pr

무료

Prepare Ant Design pull requests from all changes on a branch. It uses official templates, drafts an English title and a Chinese or English body, and asks for approval before creating the pull request.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Summarize all branch changes for a pull request
  • Draft a title and body using an official template
  • Check the target branch and change type
ant-design/ant-design10만2026년 10월 19일 업데이트

antd-issue-reply

무료

Review Ant Design GitHub issues and prepare responses, labels, and closure recommendations. It distinguishes bugs from feature requests, checks bot answers, and presents a complete plan for approval before making changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Draft responses to unanswered issues
  • Classify bugs and feature requests
  • Review dosubot answers
ant-design/ant-design10만2026년 10월 19일 업데이트

antd-migration

무료

Update Ant Design projects, mainly from v4 to v5, by reviewing changed component APIs, replacing removed features, and migrating theme settings. The skill also guides use of the official tool for automated code changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Upgrading an Ant Design project from v4 to v5
  • Replacing removed components and deprecated properties
  • Migrating Less theme settings to theme tokens
ant-design/ant-design10만2026년 10월 19일 업데이트

antd-test-review

무료

Review Ant Design tests to decide whether they should be kept, rewritten, or removed. Examine documented behavior and existing coverage to identify duplicate checks or assertions that merely repeat implementation details, with concise reasons for each conclusion.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Deciding whether a test should be kept, rewritten, or removed
  • Finding assertions that merely repeat implementation details
  • Checking for duplicate test coverage
ant-design/ant-design10만2026년 10월 19일 업데이트

ant-design의 스킬 모두 보기

이 스킬의 문제 신고