How do I install the Chakra UI Theme Directory Rules skill?

Run npx skillmds@latest add liaosw97/chakra-ui-theme-directory-rules in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Chakra UI Theme Directory Rules skill do?

主题目录的特定规则，用于管理和自定义 Chakra UI 主题 It is listed under Coding & Dev Tools on SkillMD.

Is Chakra UI Theme Directory Rules safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Chakra UI Theme Directory Rules?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Chakra UI Theme Directory Rules free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Chakra UI Theme Directory Rules?

liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Chakra UI Theme Directory Rules by liaosw97

Name: Chakra UI Theme Directory Rules
Rating: 4.2 (5 reviews)
Author: liaosw97

File contents

主题目录的特定规则，用于管理和自定义 Chakra UI 主题：
- 创建 theme/index.js 来导出主题：
  - 所有的主题配置都应集中在 theme/index.js 文件中，并从这里导出最终的主题对象。
  - 示例：
```
// theme/index.js
import { extendTheme } from '@chakra-ui/react';
import { colors } from './foundations/colors';
import { Button } from './components/Button';

const theme = extendTheme({
  colors,
  components: {
    Button,
  },
});

export default theme;
```
- 将主题基础放在 theme/foundations/ 中：
  - 基础主题设置，如颜色（colors.js）、字体（fonts.js）、间距（space.js）等，应组织在 theme/foundations/ 目录下。
  - 示例：
```
// theme/foundations/colors.js
export const colors = {
  brand: {
    900: '#1a365d',
    800: '#153e75',
    700: '#2a69ac',
  },
};
```
- 将组件特定的主题覆盖放在 theme/components/ 中：
  - 对特定 Chakra UI 组件的样式覆盖和变体定义，应组织在 theme/components/ 目录下，每个组件一个文件。
  - 示例：
```
// theme/components/Button.js
export const Button = {
  baseStyle: {
    fontWeight: 'bold',
  },
  variants: {
    solid: (props) => ({
      bg: props.colorMode === 'dark' ? 'brand.700' : 'brand.500',
      color: 'white',
    }),
  },
};
```
- 模块化和可维护性：这种结构有助于保持主题配置的模块化、可读性和可维护性，特别是在大型项目中。

Frequently asked questions

Chakra UI Theme Directory Rules