UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
“tinyvue组件库开发规范”
Install Tinyvue Develop Spec
$ npx skills add opentiny/tiny-vue --skill tinyvue-develop-spec -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install opentiny/tiny-vue tinyvue-develop-spec --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/opentiny/tiny-vue.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills .claude/skills/tinyvue-develop-spec && 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 "tinyvue-develop-spec" agent skill from https://github.com/opentiny/tiny-vue/tree/dev/.agents/skills into .claude/skills/tinyvue-develop-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tinyvue-develop-spec", 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/opentiny/tiny-vue/tree/dev/.agents/skillsType 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 opentiny/tiny-vue --skill tinyvue-develop-spec -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install opentiny/tiny-vue tinyvue-develop-spec --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opentiny/tiny-vue.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills .agents/skills/tinyvue-develop-spec && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "tinyvue-develop-spec" agent skill from https://github.com/opentiny/tiny-vue/tree/dev/.agents/skills into .agents/skills/tinyvue-develop-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tinyvue-develop-spec", 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 opentiny/tiny-vue --skill tinyvue-develop-spec -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install opentiny/tiny-vue tinyvue-develop-spec --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opentiny/tiny-vue.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills .cursor/skills/tinyvue-develop-spec && 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 "tinyvue-develop-spec" agent skill from https://github.com/opentiny/tiny-vue/tree/dev/.agents/skills into .cursor/skills/tinyvue-develop-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tinyvue-develop-spec", 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/opentiny/tiny-vue.git --path .agents/skills--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 opentiny/tiny-vue --skill tinyvue-develop-spec -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install opentiny/tiny-vue tinyvue-develop-spec --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opentiny/tiny-vue.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills .gemini/skills/tinyvue-develop-spec && 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 "tinyvue-develop-spec" agent skill from https://github.com/opentiny/tiny-vue/tree/dev/.agents/skills into .gemini/skills/tinyvue-develop-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tinyvue-develop-spec", 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 opentiny/tiny-vue tinyvue-develop-specInstalls 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 opentiny/tiny-vue --skill tinyvue-develop-spec -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/opentiny/tiny-vue.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills .github/skills/tinyvue-develop-spec && 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 "tinyvue-develop-spec" agent skill from https://github.com/opentiny/tiny-vue/tree/dev/.agents/skills into .github/skills/tinyvue-develop-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tinyvue-develop-spec", 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 opentiny/tiny-vue --skill tinyvue-develop-spec -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install opentiny/tiny-vue tinyvue-develop-spec --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opentiny/tiny-vue.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills .opencode/skills/tinyvue-develop-spec && 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 "tinyvue-develop-spec" agent skill from https://github.com/opentiny/tiny-vue/tree/dev/.agents/skills into .opencode/skills/tinyvue-develop-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tinyvue-develop-spec", 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
tinyvue-develop-spec- GitHub stars
- 2.3k
- Token cost
- ~676 tokens
- SKILL.md length
- 88 words
- Files
- 12
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
- Works in 2 steps: 跨端模板： tiny vue组件库中，同一个组件可以有2种组件模板，… → 无渲染逻辑层: tiny…
- SKILL.md covers 使用时机, 适用场景 and 组件库的架构
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
About this skill
Tinyvue Develop Spec is a skill in opentiny/tiny-vue (2.3k stars). Its SKILL.md is about 676 tokens, with 11 other files in the folder. Licence: MIT.
Workflow steps
2 steps, taken from the first numbered list in SKILL.md.
- 跨端模板： tiny vue组件库中，同一个组件可以有2种组件模板， 其中pc.vue 面向家用PC浏览器的场景， mobile-first.vue是移动优先的浏览器场景（可以兼容用户使用手机或PC浏览器）。
- 无渲染逻辑层: tiny vue组件库遵从模板和逻辑分离的原则进行开发。模板层只负责绑定变量和函数，所有的业务逻辑（data 处理、状态计算等）都要放在无渲染逻辑层 packages/renderless 目录
What it can do on your machine
Read from SKILL.md and the folder at commit 676ab44. 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
Tinyvue Develop Spec loads about 676 tokens when it runs. Until then it costs about 9 tokens; SKILL.md has 88 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 opentiny/tiny-vue at commit 676ab44, republished under its MIT licence (© opentiny). 88 words, ~676 tokens.
Download SKILL.mdSave it as
.claude/skills/tinyvue-develop-spec/SKILL.md (or your agent's skills folder). This skill also uses 11 other files; get the full folder from GitHub.- name
- tinyvue-develop-spec
- description
- tinyvue组件库开发规范
使用时机
在当前仓库进行组件的开发，主题开发，国际化开发，测试脚本开发时，必须遵守以下规范。
适用场景
- 新增 UI 组件
- 修改现有组件逻辑
- 重构组件架构
- 理解 Renderless 模式
重要术语
跨端模板： tiny vue组件库中，同一个组件可以有2种组件模板， 其中
pc.vue面向家用PC浏览器的场景，mobile-first.vue是移动优先的浏览器场景（可以兼容用户使用手机或PC浏览器）。无渲染逻辑层: tiny vue组件库遵从模板和逻辑分离的原则进行开发。模板层只负责绑定变量和函数，所有的业务逻辑（data 处理、状态计算等）都要放在无渲染逻辑层
packages/renderless目录
组件库的架构
| 模块名称 | 代码目录 | 参考规范 | 说明 |
|---|---|---|---|
| 模板层 | packages/vue | ./vue.skill.md | 每个组件的模板，必须在相应的组件目录 |
| 无渲染逻辑层 | packages/renderless | ./renderless.skill.md | 每个组件的逻辑，必须在相应的组件目录 |
| 样式层 | packages/theme | ./theme.skill.md | 每个组件的样式，必须在相应的组件目录 |
| 设计规范层 | packages/design | ./design.skill.md | 交互规范、默认 props、图标与 renderless 扩展 |
| 适配Vue2/Vue3层 | packages/vue-common | ./common.skill.md | 非必要不修改适配层代码 |
| 图标库 | packages/vue-icon | ./icon.skill.md | 图标库 |
| 国际化层 | packages/vue-locale | ./i18n-workflow.skill.md | 组件的国际化 |
| 公用hooks | packages/vue-hooks | ./hooks.skill.md | 跨组件可以复用的hooks函数 |
| 公用指令 | packages/vue-directive | ./directive.skill.md | 跨组件可以复用的指令 |
| utils | packages/utils | ./utils.skill.md | 公用函数 |
| 组件测试 | examples/sites/demos/pc/app/**/*.spec.ts 或 packages/vue/src/**/__tests__ | ./testing-guide.skill.md | e2e测试和单元测试 |
| 文档开发 | examples/sites/demos/pc/app/** | ./vue.skill.md | 每一个组件的 api 和 demo 的开发 |
© opentiny, 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 11 other files in .agents/skills of opentiny/tiny-vue.
- SKILL.md
- common.skill.md
- design.skill.md
- directive.skill.md
- hooks.skill.md
- i18n-workflow.skill.md
- icon.skill.md
- renderless.skill.md
- testing-guide.skill.md
- theme.skill.md
- utils.skill.md
- vue.skill.md
Open the folder on GitHubat commit 676ab44
Compare with similar skills
Tinyvue Develop Spec 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 |
|---|---|---|---|---|---|---|
| Tinyvue Develop Spec this skillopentiny/tiny-vue | 2.3k | — | ~676 | Automated safety check: Pass | MIT | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| UithingBayBreezy/ui-thing | 729 | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| UI UX Pro Maxsundial-org/awesome-openclaw-skills | 663 | 2 repos | ~657 | Automated safety check: Pass | None | |
| Tailwind CSS Patternsever-works/ever-works | 158 | 3 repos | ~1.6k | Automated safety check: Notes | AGPL-3.0 |
Similar skills
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
Uithing
BayBreezy/ui-thing
Manages UI Thing components, prose, blocks, themes, shortcuts, docs, and MCP-driven workflows in Nuxt projects and in the UI Thing source repo.
UI UX Pro Max
sundial-org/awesome-openclaw-skills
UI/UX design intelligence and implementation guidance for building polished interfaces.
Tailwind CSS Patterns
ever-works/ever-works
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.
Figma Build
awdr74100/figwright
Build a Figma design from code or a description — the reverse of figma-codegen.
Related
Works with
Categories
Questions about Tinyvue Develop Spec
How do I install Tinyvue Develop Spec in Claude Code?
Run `npx skills add opentiny/tiny-vue --skill tinyvue-develop-spec -a claude-code`. Or copy the skill folder (.agents/skills in opentiny/tiny-vue) into .claude/skills/tinyvue-develop-spec in your project. Claude Code loads it when a task matches its description.
How do I install Tinyvue Develop Spec in Codex?
Run `npx skills add opentiny/tiny-vue --skill tinyvue-develop-spec -a codex`. Or copy the skill folder (.agents/skills in opentiny/tiny-vue) into .agents/skills/tinyvue-develop-spec in your project. Codex loads it when a task matches its description.
Can I use Tinyvue Develop Spec 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 opentiny/tiny-vue --skill tinyvue-develop-spec -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tinyvue-develop-spec, .gemini/skills/tinyvue-develop-spec, .github/skills/tinyvue-develop-spec and .opencode/skills/tinyvue-develop-spec in your project.
What does Tinyvue Develop Spec need to run?
SKILL.md names no scripts, command-line tools or credentials: Tinyvue Develop Spec is instructions for the agent only.
Does Tinyvue Develop Spec 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 Tinyvue Develop Spec 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 Tinyvue Develop Spec use?
Tinyvue Develop Spec 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 Tinyvue Develop Spec use?
About 676 tokens (SKILL.md is roughly 2.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Tinyvue Develop Spec?
Skills that share tags, products or a category with Tinyvue Develop Spec: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), Design Style (Castor6/tactus, 376 stars), Uithing (BayBreezy/ui-thing, 729 stars) and UI UX Pro Max (sundial-org/awesome-openclaw-skills, 663 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Tinyvue Develop Spec?
opentiny (a GitHub organization) maintains it in opentiny/tiny-vue, which has 2,271 GitHub stars. The repository was last updated on September 17, 2026.
Source: opentiny/tiny-vue on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.