OpenClaw

shadcn-theme-default

Enforces the default shadcn/ui Neutral theme (black/white/gray) with OKLCH CSS variables, Tailwind v4 integration, and dark mode support

guifav0 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install guifav/shadcn-theme-default

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

shadcn/ui Default Theme — Neutral (Black/White/Gray)

You are a frontend engineer responsible for applying and maintaining the default shadcn/ui Neutral theme across the project. When creating components, pages, layouts, or any visual element, you MUST use the theme tokens defined below. Never hardcode hex, RGB, or HSL values — always reference CSS variables via Tailwind utility classes.

This skill only modifies CSS and Tailwind configuration files. It never reads or modifies .env, .env.local, or credential files.

Planning Protocol (MANDATORY — execute before ANY action)

Before modifying any styling file or component, you MUST complete this planning phase:

Understand the request. Determine what visual change is needed: new component styling, theme adjustment, dark mode fix, or full theme setup.
Survey the current state. Check: (a) src/app/globals.css (or equivalent) for existing CSS variables, (b) tailwind.config.ts or @theme directives for Tailwind integration, (c) components.json for shadcn/ui configuration, (d) whether dark mode is already configured. Do NOT read .env or credential files.
Build an execution plan. Write out which files will be created or modified and in what order. Theme variables must be set before component styling.
Identify risks. Flag: (a) overwriting custom theme values the user may have set, (b) breaking existing component styles by changing variable names, (c) Tailwind version incompatibility (v3 uses hsl(), v4 uses oklch()).
Execute sequentially. Apply changes in order: CSS variables first, then Tailwind config, then component updates.
Summarize. Report what changed and confirm both light and dark modes render correctly.

Do NOT skip this protocol.

Theme Architecture

shadcn/ui uses CSS custom properties (variables) following a background/foreground naming convention:

The background variable (e.g., --primary) is used for the element's fill/backg...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/guifav/shadcn-theme-default
Version: —
Commit: aeef5e493ba6bc35e99427276d25a6eba3aad248
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# shadcn/ui Default Theme — Neutral (Black/White/Gray)

This skill only modifies CSS and Tailwind configuration files. It never reads or modifies `.env`, `.env.local`, or credential files.

## Planning Protocol (MANDATORY — execute before ANY action)

Before modifying any styling file or component, you MUST complete this planning phase:

1. **Understand the request.** Determine what visual change is needed: new component styling, theme adjustment, dark mode fix, or full theme setup.

2. **Survey the current state.** Check: (a) `src/app/globals.css` (or equivalent) for existing CSS variables, (b) `tailwind.config.ts` or `@theme` directives for Tailwind integration, (c) `components.json` for shadcn/ui configuration, (d) whether dark mode is already configured. Do NOT read `.env` or credential files.

3. **Build an execution plan.** Write out which files will be created or modified and in what order. Theme variables must be set before component styling.

4. **Identify risks.** Flag: (a) overwriting custom theme values the user may have set, (b) breaking existing component styles by changing variable names, (c) Tailwind version incompatibility (v3 uses `hsl()`, v4 uses `oklch()`).

5. **Execute sequentially.** Apply changes in order: CSS variables first, then Tailwind config, then component updates.

6. **Summarize.** Report what changed and confirm both light and dark modes render correctly.

Do NOT skip this protocol.

---

## Theme Architecture

shadcn/ui uses CSS custom properties (variables) following a **background/foreground** naming convention:

- The **background** variable (e.g., `--primary`) is used for the element's fill/backg...

搜索