Refactoring UI Design
chaxus/ran
A skill your agent uses when designing, reviewing, or improving web UI visual quality, especially when a developer-built interface feels cluttered, flat, generic, poorly spaced, weakly hierarchical…
Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and…
Install UI Aesthetics
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill ui-aesthetics -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp ui-aesthetics --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ui-aesthetics .claude/skills/ui-aesthetics && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ui-aesthetics" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/ui-aesthetics into .claude/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/ui-aestheticsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill ui-aesthetics -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp ui-aesthetics --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/ui-aesthetics .agents/skills/ui-aesthetics && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-aesthetics" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/ui-aesthetics into .agents/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill ui-aesthetics -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp ui-aesthetics --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/ui-aesthetics .cursor/skills/ui-aesthetics && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-aesthetics" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/ui-aesthetics into .cursor/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git --path .agents/skills/ui-aesthetics--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill ui-aesthetics -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp ui-aesthetics --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/ui-aesthetics .gemini/skills/ui-aesthetics && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ui-aesthetics" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/ui-aesthetics into .gemini/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp ui-aestheticsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill ui-aesthetics -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/ui-aesthetics .github/skills/ui-aesthetics && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ui-aesthetics" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/ui-aesthetics into .github/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill ui-aesthetics -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pdsuwwz/chatgpt-vue3-light-mvp ui-aesthetics --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pdsuwwz/chatgpt-vue3-light-mvp.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/ui-aesthetics .opencode/skills/ui-aesthetics && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-aesthetics" agent skill from https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/tree/main/.agents/skills/ui-aesthetics into .opencode/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ui-aesthetics- GitHub stars
- 579
- Used in
- 1 other repo
- Token cost
- ~431 tokens
- SKILL.md length
- 170 words
- Files
- 17 (incl. references)
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and…
- Works in 6 steps: Generation → Review → Refactor → …
- Refactoring web UI that feels generic
- SKILL.md covers Core operating rules, Task routing, How to use supporting files and Output contract
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
UI Aesthetics is an agent skill from pdsuwwz/chatgpt-vue3-light-mvp. Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and coherent depth systems. Use when generating, reviewing, or refactoring web UI that feels generic, cluttered, flat, over-styled, theatrically animated, visually imprecise, or AI-generated.
Its SKILL.md is about 430 tokens, which your agent loads only when the skill is triggered. The skill folder holds 17 other files, including reference files (for example `core.md`, `reference-map.md` and `references/anti-patterns.md`).
It sits in Frontend & Design, covering Frontend development and Refactoring. The repository describes itself as: 💭 一个可二次开发 Chat Bot 单轮对话 Web 端 MVP 原型模板, 基于 Vue 3, Vite8, TypeScript, Naive UI, Pinia(v3), UnoCSS 等主流技术构建, 🧤简单集成大模型 API, 采用单轮 AI 问答对话模式, 每次提问独立响应, 无需上下文, 支持 SSE 打字机效果流式输出, 集成…. The licence is MIT.
When your agent uses it
- Refactoring web UI that feels generic
- Theatrically animated
- Visually imprecise
Example prompts
- “/ui-aesthetics”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Generation
- Review
- Refactor
- Component Polish
- State / Motion Refinement
- Depth / Lighting Refinement
What it can do on your machine
Read from SKILL.md and the folder at commit e0f4678. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
UI Aesthetics loads about 431 tokens when it runs, and up to ~19k if it reads all its reference files. Until then it costs about 98 tokens; SKILL.md has 170 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from pdsuwwz/chatgpt-vue3-light-mvp at commit e0f4678, republished under its MIT licence (© pdsuwwz). 170 words, ~431 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-aesthetics/SKILL.md (or your agent's skills folder). This skill also uses 16 other files; get the full folder from GitHub.- name
- ui-aesthetics
- description
- Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and coherent depth systems. Use when generating, reviewing, or refactoring web UI that feels generic, cluttered, flat, over-styled, theatrically animated, visually imprecise, or AI-generated.
UI Aesthetics
Use this skill to improve visual judgment for web interfaces without inflating scope.
Core operating rules
- Preserve the user's requested artifact scope and information density.
- Improve hierarchy, spacing, and typography before decoration.
- Prefer restrained neutrals, disciplined accents, and coherent state behavior.
- Use depth, blur, glow, and motion only when they clarify hierarchy or interaction.
- Diagnose first when a request mixes critique and rewrite.
Task routing
- Generation
- Review
- Refactor
- Component Polish
- State / Motion Refinement
- Depth / Lighting Refinement
How to use supporting files
Read these shared files first:
- core.md for the condensed operating contract
- reference-map.md to choose the right detailed reference file
- usage.md for invocation patterns and expected output shape
Then open detailed files under ./references/ only when the task needs them.
Output contract
- State the chosen route and intended visual thesis early.
- Keep critique actionable and tied to hierarchy, trust, clarity, or interaction quality.
- When rewriting, state whether the change is light polish, medium restructure, or full rebuild.
- Keep solutions shippable and maintainable.
© pdsuwwz, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 16 other files (references) in .agents/skills/ui-aesthetics of pdsuwwz/chatgpt-vue3-light-mvp.
- SKILL.md
- core.md
- reference-map.md
- references/anti-patterns.md
- references/color-system.md
- references/component-aesthetics.md
- references/depth-lighting-system.md
- references/design-principles.md
- references/distilled-examples.md
- references/interaction-states.md
- references/motion-patterns.md
- references/motion-principles.md
- references/non-card-layouts.md
- references/review-rubric.md
- references/rewrite-playbook.md
- references/style-archetypes.md
- usage.md
Open the folder on GitHubat commit e0f4678
Used in 1 other repository
We found 7 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in pdsuwwz/chatgpt-vue3-light-mvp, which our catalogue first saw on October 7, 2026.
Compare with similar skills
UI Aesthetics next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UI Aesthetics this skillpdsuwwz/chatgpt-vue3-light-mvp | 579 | 1 repos | ~431 | Automated safety check: Pass | MIT | |
| Refactoring UI Designchaxus/ran | 269 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Frontend UI FunctionalvictorGPT/vibeusage | 130 | — | ~939 | Automated safety check: Pass | MIT | |
| Chamilo Vue Base Componentschamilo/chamilo-lms | 1k | — | ~7.6k | Automated safety check: Notes | GPL-3.0 | |
| Frontend UI Foundryjiushiwon/wg-skills | 114 | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| HTML Diff Refactor Checktabler/tabler | 42k | — | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
Frontend UI Functional
victorGPT/vibeusage
A skill your agent uses when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility…
Chamilo Vue Base Components
chamilo/chamilo-lms
Swaps native form elements in Chamilo Vue files for Base components and checks that every Base, SectionHeader and Fieldset tag has its import.
Frontend UI Foundry
jiushiwon/wg-skills
A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…
HTML Diff Refactor Check
tabler/tabler
Proves that a refactor leaves every rendered preview page unchanged by comparing fresh HTML output against a baseline captured beforehand.
Frontend Development
avibebuilder/claude-prime
A skill your agent uses for ANY work involving React, Next.js, TypeScript, or Tailwind in the browser layer.
More from pdsuwwz/chatgpt-vue3-light-mvp
Uncodixfy
pdsuwwz/chatgpt-vue3-light-mvp
Prevents generic AI/Codex UI patterns when generating frontend code.
Conventional Commits
pdsuwwz/chatgpt-vue3-light-mvp
Conventional Commits specification for consistent, machine-readable git commit messages.
Chatbot Mvp Distillation
pdsuwwz/chatgpt-vue3-light-mvp
Distill the chatgpt-vue3-light-mvp project into reusable architecture for building similar ChatGPT-style web products in other repositories.
Chatbot Mvp Distillation Zh
pdsuwwz/chatgpt-vue3-light-mvp
将 chatgpt-vue3-light-mvp 项目蒸馏为可迁移到其他项目的中文架构指南。适用于设计或实现类似 ChatGPT 的 Web 对话产品，包括 SSE/fetch 流式响应、模型适配器契约、打字机渲染、Markdown/代码/KaTeX/Mermaid 渲染、推理过程展示，以及从本 Vue 3 MVP 迁移到其他项目的方案规划。
Related
Categories
Questions about UI Aesthetics
What does UI Aesthetics do?
Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and…. UI Aesthetics is an agent skill from pdsuwwz/chatgpt-vue3-light-mvp. Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and coherent depth systems.
When should I use UI Aesthetics?
UI Aesthetics fits situations like: refactoring web UI that feels generic; theatrically animated; visually imprecise.
How do I install UI Aesthetics in Claude Code?
Run `npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill ui-aesthetics -a claude-code`. Or copy the skill folder (.agents/skills/ui-aesthetics in pdsuwwz/chatgpt-vue3-light-mvp) into .claude/skills/ui-aesthetics in your project. Claude Code loads it when a task matches its description.
How do I install UI Aesthetics in Codex?
Run `npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill ui-aesthetics -a codex`. Or copy the skill folder (.agents/skills/ui-aesthetics in pdsuwwz/chatgpt-vue3-light-mvp) into .agents/skills/ui-aesthetics in your project. Codex loads it when a task matches its description.
Can I use UI Aesthetics in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pdsuwwz/chatgpt-vue3-light-mvp --skill ui-aesthetics -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-aesthetics, .gemini/skills/ui-aesthetics, .github/skills/ui-aesthetics and .opencode/skills/ui-aesthetics in your project.
What does UI Aesthetics need to run?
SKILL.md names no scripts, command-line tools or credentials: UI Aesthetics is instructions for the agent only.
Does UI Aesthetics access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is UI Aesthetics safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does UI Aesthetics use?
UI Aesthetics is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does UI Aesthetics use?
About 431 tokens (SKILL.md is roughly 1.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 19k tokens, read only when the agent opens those files.
What are the alternatives to UI Aesthetics?
Skills that share tags, products or a category with UI Aesthetics: Refactoring UI Design (chaxus/ran, 269 stars), Frontend UI Functional (victorGPT/vibeusage, 130 stars), Chamilo Vue Base Components (chamilo/chamilo-lms, 1k stars) and Frontend UI Foundry (jiushiwon/wg-skills, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UI Aesthetics?
pdsuwwz (a GitHub user) maintains it in pdsuwwz/chatgpt-vue3-light-mvp, which has 579 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on July 31, 2026.
Source: pdsuwwz/chatgpt-vue3-light-mvp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.