ui-theme-skill

English | Tiếng Việt

A Claude Code skill that keeps every UI you build in one consistent look. It ships two approved themes (tokens, components, sample pages), a palette board to pick light/dark and an accent, and the owner's style notes so Claude doesn't have to guess.

Live demo: https://huydp93.github.io/ui-theme-skill/themes/bang-chon.html

What it does

When you ask Claude to mock up or build a page, the skill tells it to:

1. Look up which theme and accent your project uses (in your private du-an.md).
2. Start from that theme's tokens and components instead of inventing new styles.
3. Follow the style notes in phong-cach-owner.md: compact text, thin borders, stroke icons, no emoji, light and dark mode.
4. Preview the result and check it in both modes before handing it over.

Themes

Theme	Look	Good for
clickup-radar	ClickUp-style sidebar, thin-bordered cards, purple accent	dashboards, news feeds, card lists with filters
saas-sang	Clean light SaaS (Linear, Stripe, Amplitude inspired), blue accent	reports, tasks, sales, news, landing, sign in/up

Both have light and dark mode and 8 accents each.

Install

Clone into your personal skills folder:

git clone https://github.com/huydp93/ui-theme-skill.git ~/.claude/skills/theme-giao-dien

On Windows (Command Prompt) the folder is %USERPROFILE%\.claude\skills\theme-giao-dien.

Or install it for a single project by cloning into that project's .claude/skills/theme-giao-dien.

The folder name theme-giao-dien matches the skill's name. Keep it.

Use it

Just ask for UI work. For example:

• "Mock up an admin dashboard for my orders"
• "Build the sign-in page using the saas-sang theme, teal accent"
• "Add a dark mode to this page following the theme"
• "Add a new theme from these screenshots"

What's inside

SKILL.md / SKILL.vi.md                 the skill itself
phong-cach-owner.md / .vi.md           the owner's style notes
them-theme.md / .vi.md                 how to add a theme
du-an.example.md                       template for your private du-an.md
themes/
  bang-chon.html                       palette board: pick theme, mode, accent
  i18n.js, i18n-en.js                  English/Vietnamese switch for sample pages
  clickup-radar/                       tokens.css, components.css, mau-nhan.css, components.md, vi-du.html
  saas-sang/                           same files, plus chu-de/ (topic sample pages)
  _mau/                                template for a new theme

Folder and file names

Names are in Vietnamese. Here is what they mean:

Name	Meaning
bang-chon	palette board
chu-de	topics (sample pages by page type)
mau-nhan	accent colors
vi-du	sample page
bao-cao	reports
cong-viec	tasks
ban-hang	sales
tin-tuc	news
dang-ky	sign in / sign up
landing	landing page
_mau	template
phong-cach-owner	owner's style
them-theme	add a theme
chung.js	shared script for the sample pages

Accent ids

Id	Color
xanh-duong	blue
tim	purple
cham	indigo
xanh-troi	sky
xanh-ngoc	teal
xanh-la	green
cam	orange
than	charcoal
hong	pink

Language

Sample pages and the palette board come in English and Vietnamese. They pick the language in this order: ?lang=en or ?lang=vi in the URL, the last choice you made (saved in your browser), then your browser's language. Switch it with the VI | EN buttons on the palette board or in the Appearance panel on each sample page.

Preview locally

python -m http.server 8766 -d themes

Then open http://localhost:8766/bang-chon.html.

Make it yours

1. Copy du-an.example.md to du-an.md and list your projects. du-an.md is gitignored.
2. Edit phong-cach-owner.md to match your own taste.
3. Add your own theme by following them-theme.md.

License

MIT. See LICENSE.