React Router Development
remix-run/react-router
Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.
Generate installable SolonCode Web UI skin zip packages from natural-language design requests.
Install Soloncode Skin Skill
$ npx skills add opensolon/soloncode --skill soloncode-skin-skill -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install opensolon/soloncode soloncode-skin-skill --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/opensolon/soloncode.git skills-src && mkdir -p .claude/skills && cp -r skills-src/soloncode-cli/release/skills/soloncode-skin-skill .claude/skills/soloncode-skin-skill && 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 "soloncode-skin-skill" agent skill from https://github.com/opensolon/soloncode/tree/main/soloncode-cli/release/skills/soloncode-skin-skill into .claude/skills/soloncode-skin-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "soloncode-skin-skill", 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/opensolon/soloncode/tree/main/soloncode-cli/release/skills/soloncode-skin-skillType 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 opensolon/soloncode --skill soloncode-skin-skill -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install opensolon/soloncode soloncode-skin-skill --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opensolon/soloncode.git skills-src && mkdir -p .agents/skills && cp -r skills-src/soloncode-cli/release/skills/soloncode-skin-skill .agents/skills/soloncode-skin-skill && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "soloncode-skin-skill" agent skill from https://github.com/opensolon/soloncode/tree/main/soloncode-cli/release/skills/soloncode-skin-skill into .agents/skills/soloncode-skin-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "soloncode-skin-skill", 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 opensolon/soloncode --skill soloncode-skin-skill -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install opensolon/soloncode soloncode-skin-skill --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opensolon/soloncode.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/soloncode-cli/release/skills/soloncode-skin-skill .cursor/skills/soloncode-skin-skill && 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 "soloncode-skin-skill" agent skill from https://github.com/opensolon/soloncode/tree/main/soloncode-cli/release/skills/soloncode-skin-skill into .cursor/skills/soloncode-skin-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "soloncode-skin-skill", 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/opensolon/soloncode.git --path soloncode-cli/release/skills/soloncode-skin-skill--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 opensolon/soloncode --skill soloncode-skin-skill -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install opensolon/soloncode soloncode-skin-skill --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opensolon/soloncode.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/soloncode-cli/release/skills/soloncode-skin-skill .gemini/skills/soloncode-skin-skill && 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 "soloncode-skin-skill" agent skill from https://github.com/opensolon/soloncode/tree/main/soloncode-cli/release/skills/soloncode-skin-skill into .gemini/skills/soloncode-skin-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "soloncode-skin-skill", 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 opensolon/soloncode soloncode-skin-skillInstalls 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 opensolon/soloncode --skill soloncode-skin-skill -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/opensolon/soloncode.git skills-src && mkdir -p .github/skills && cp -r skills-src/soloncode-cli/release/skills/soloncode-skin-skill .github/skills/soloncode-skin-skill && 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 "soloncode-skin-skill" agent skill from https://github.com/opensolon/soloncode/tree/main/soloncode-cli/release/skills/soloncode-skin-skill into .github/skills/soloncode-skin-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "soloncode-skin-skill", 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 opensolon/soloncode --skill soloncode-skin-skill -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install opensolon/soloncode soloncode-skin-skill --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opensolon/soloncode.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/soloncode-cli/release/skills/soloncode-skin-skill .opencode/skills/soloncode-skin-skill && 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 "soloncode-skin-skill" agent skill from https://github.com/opensolon/soloncode/tree/main/soloncode-cli/release/skills/soloncode-skin-skill into .opencode/skills/soloncode-skin-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "soloncode-skin-skill", 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
soloncode-skin-skill- GitHub stars
- 197
- Token cost
- ~1.9k tokens
- SKILL.md length
- 467 words
- Files
- 17 (incl. scripts, references, assets)
- Skills in repo
- 2
- Repo updated
- First seen
- Licence
- MIT
At a glance
Generate installable SolonCode Web UI skin zip packages from natural-language design requests.
- Works in 6 steps: 优先一键（Agent 默认路径） → 解析需求 → 选择配方 → …
- The user asks to create/make/customize a skin
- SKILL.md covers When to Use, Critical Rules, Progressive Loading and Workflow, plus 6 more sections
- Runs Python scripts from its folder; calls python3, pip and make
What it does
Soloncode Skin Skill is an agent skill from opensolon/soloncode. Generate installable SolonCode Web UI skin zip packages from natural-language design requests. Use when the user asks to create/make/customize a skin, theme, 皮肤, 换肤, settings panel background, welcome-page look, accent color theme, or produce a .zip skin for SolonCode (settings → general → skin).
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 24 other files, including scripts, reference files and assets (for example `assets/templates/README.md`, `assets/templates/full-theme/skin.json` and `assets/templates/minimal-accent/skin.json`).
It sits in Frontend & Design, covering Frontend development. It works with Java. The repository describes itself as: The open source coding agent. The licence is MIT.
When your agent uses it
- The user asks to create/make/customize a skin
- Settings panel background
- Welcome-page look
- Accent color theme
Example prompts
- “/soloncode-skin-skill”
Requirements
- Python 3
Workflow steps
6 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit f9b4ac5. 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
Ships 2 files in scripts/ (Python, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
python3pipmake
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pip, which can reach the network depending on how they are called.
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
Soloncode Skin Skill loads about 1.9k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 80 tokens; SKILL.md has 467 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); the scripts in this folder are not scanned.
SKILL.md
The full file from opensolon/soloncode at commit f9b4ac5, republished under its MIT licence (© opensolon). 467 words, ~1,892 tokens.
Download SKILL.mdSave it as
.claude/skills/soloncode-skin-skill/SKILL.md (or your agent's skills folder). This skill also uses 16 other files; get the full folder from GitHub.- name
- soloncode-skin-skill
- description
- Generate installable SolonCode Web UI skin zip packages from natural-language design requests. Use when the user asks to create/make/customize a skin, theme, 皮肤, 换肤, settings panel background, welcome-page look, accent color theme, or produce a .zip skin for SolonCode (settings → general → skin).
SolonCode Skin Generator
根据用户自然语言需求，生成可直接上传安装的 SolonCode Web 皮肤 Zip。
目标产物始终是可安装的 zip（默认 .uploads/{name}-yyyyMMddHH.zip），不是零散 CSS 片段。
作用范围：仅 SolonCode Web UI 皮肤系统。
禁止：改 soloncode-desktop；生成 js/html/svg/可执行文件；使用保留名。
When to Use
- 「做个皮肤 / 生成 skin / 换肤 / 主题包」
- 「设置面板加背景 / 像 ddd 那样」
- 「海洋/极光/护眼/高对比风格」
- 「欢迎页别太空 / 主区氛围图」
- 「根据 skin.md / skin-spec 出 zip」
Critical Rules
- 交付物必须是 zip：至少含
skin.json+skin.css。 name合法：^[a-zA-Z0-9][a-zA-Z0-9_-]{0,63}$，且不是default/eyecare/contrast。- 选择器绑定 name：
[data-skin="{name}"][data-theme="light|dark"]，light/dark 成对；模板 id 必须改干净。 - 图片只写包内相对路径：优先
url("./assets/...")；禁止..与绝对路径；不推荐外链。 - 列表预览固定
preview.png（不要只给 webp/jpg）。 - 限制：zip ≤ 8MB；单资源 ≤ 2MB（仅
skin.css例外；skin.json也算资源）；解压总量 ≤ 32MB。 - 可读性优先：输入框/正文/代码块必须可读；功能色（success/danger/git）默认不动。
- 不要臆造 token：当前无
--bg-welcome-image等官方欢迎区槽位。 - 无可靠位图能力时用 CSS 渐变；有 Pillow 时用本 skill 的
gen_bg.py/gen_preview.py。 - 详细规范按需加载：
references/skin-spec.md。
Progressive Loading
| 需要时 | 读取 / 执行 |
|---|---|
| 完整规范 / 变量表 / 排障 | references/skin-spec.md |
| 一键生成（推荐） | scripts/make_skin.py |
| 脚手架 | scripts/scaffold_skin.py |
| 预览图 | scripts/gen_preview.py |
| 有结构背景图 | scripts/gen_bg.py |
| 模板 A/B/C/D | assets/templates/{minimal-accent,ocean-gradient,settings-panel,full-theme}/ |
| 校验 | scripts/validate_skin.py |
| 打包 | scripts/pack_skin.py |
脚本路径：先定位本 skill 根目录，再 python3 scripts/...。
依赖：校验/打包仅需标准库；生成 PNG 需要 Pillow（pip install pillow）。
Workflow
0. 优先一键（Agent 默认路径）
用户给了风格词时，直接：
python3 scripts/make_skin.py \
--name aurora \
--recipe c \
--theme aurora \
--display-name "极光设置" \
--with-assets \
--force
# 默认产出：.uploads/aurora-yyyyMMddHH.zip（如 aurora-2026071715.zip）| 参数 | 说明 |
|---|---|
--name | 皮肤 id |
--recipe | a/b/c/d/e/f |
--theme | ocean/forest/aurora/ink/warm/pink/business |
--with-assets | 配方 C/D 生成有结构 PNG 并写入 url("./assets/...") |
--no-preview | 跳过 preview.png（默认会生成） |
--work-dir | 保留工作目录便于再改 |
-o | 输出 zip（默认 .uploads/{name}-yyyyMMddHH.zip，避免覆盖冲突） |
成功后按「输出协议」回复即可。
1. 解析需求
name / displayName
主题词（海洋、极光、墨色…）
主色（未给则 --theme 启发式）
目标区域：main / sidebar / settings / filer / all
是否要位图（要 → --with-assets 或 gen_bg）
是否“只改设置”
明暗偏好（仍必须 light+dark）
输出路径（默认 .uploads/{name}-yyyyMMddHH.zip，已在 .gitignore）默认：合法英文短名 + 配方 B + 无位图 + 不改功能色 + zip 落到 .uploads/{name}-yyyyMMddHH.zip。
2. 选择配方
只提颜色/风格词 ────────► A minimal-accent
氛围/渐变/海洋/森林 ─────► B ocean-gradient
点名设置面板 / 参考 ddd ─► C settings-panel（建议 --with-assets）
整站完整主题 ───────────► D full-theme（建议 --with-assets）
高对比/无障碍 ──────────► E 强化文字边框，*-image:none
欢迎页留白/头像 ────────► F .welcome-view + main 背景| 配方 | 模板 | 重点 |
|---|---|---|
| A | minimal-accent | --accent* / 用户气泡 |
| B | ocean-gradient | 主区/侧栏 CSS 渐变 |
| C | settings-panel | --bg-settings-* + tabs/卡片半透明 |
| D | full-theme | 多区 image/overlay/surface + 设置透图 |
| E | minimal + extras | 高对比，禁用装饰图 |
| F | ocean + extras | 欢迎区布局（非正式槽位） |
3. 分步脚手架（需要细改时）
python3 scripts/scaffold_skin.py \
--name aurora --recipe c --theme aurora \
--display-name "极光设置" \
--out /tmp/aurora-skin \
--preview --with-assets --force手动补资源：
python3 scripts/gen_bg.py -o /tmp/aurora-skin/assets/settings-light.png --mode light --theme aurora
python3 scripts/gen_bg.py -o /tmp/aurora-skin/assets/settings-dark.png --mode dark --theme aurora
python3 scripts/gen_preview.py -o /tmp/aurora-skin/preview.png --theme aurora --label aurora配方 C 透图清单（必须同时满足）：
--bg-settings-image有结构（真图或强渐变，勿近纯色）- overlay 偏薄（light 约 0.18–0.35）
--bg-settings-surface: transparent--bg-settings半透明 rgba- 覆盖
.settings-tab.active/ 卡片，避免实色遮挡
4. 校验并打包
python3 scripts/validate_skin.py /tmp/aurora-skin
mkdir -p .uploads
# 不传 -o 时默认 .uploads/{name}-yyyyMMddHH.zip
python3 scripts/pack_skin.py /tmp/aurora-skinzip 必须扁平结构（根上直接 skin.json）。pack_skin.py 会跳过 assets/README.txt 等脚手架说明。
5. 回复用户（输出协议）
必须包含：
- Zip 路径（相对当前 workspace，供一键安装）
- 一键安装链接（优先，Web 端点一点即可装）
name/displayName- 覆盖区域
- 是否含位图
- 备用手动安装步骤
- 验收点（light/dark、目标区域、可读性）
默认落盘路径：.uploads/{name}-yyyyMMddHH.zip
- 与 Web 聊天附件统一目录一致，已在仓库
.gitignore，不污染项目根 - 文件名带本地时戳
yyyyMMddHH（到小时），避免同名覆盖；同小时再次生成可加--force或换-o - 打包前确保目录存在：
mkdir -p .uploads（脚本默认也会创建） - 用户明确要求其它路径时才改；安装链接
file=始终跟真实相对路径
一键安装链接（必须）：zip 落在当前工作区后，用 Markdown 链接输出。前端会把该链接渲染成醒目主按钮，并 POST 安装后自动启用：
[⬇️ 点击安装皮肤](/web/settings/skins/install?file={相对路径.zip})规则：
file为 相对 workspace 的路径，不要带./前缀，不要绝对路径- 例：默认产物
.uploads/aurora-2026071715.zip→file=.uploads/aurora-2026071715.zip - 链接文案必须醒目，推荐固定：
⬇️ 点击安装皮肤（或点击安装并启用皮肤）；不要用「下载」「详情」等弱文案 - 链接单独成段（上下各空一行），放在摘要之后、备用说明之前，方便扫读
- 前端会拦截该链接并
POST安装，成功后自动启用；不要只写纯文本路径而不给链接 - 若无法确定相对路径（极少见），才退回手动上传说明
已生成皮肤包：.uploads/aurora-2026071715.zip
- name: aurora
- 展示名: 极光
- 区域: settings 独立背景 + 全局强调色
- 资源: preview.png + assets/settings-*.png
[⬇️ 点击安装皮肤](/web/settings/skins/install?file=.uploads/aurora-2026071715.zip)
备用：设置 → 通用 → 皮肤选择 → 上传皮肤
请检查 light/dark 设置面板；若无变化：强制刷新，或先切默认再切回。Show full SKILL.md (170 more words)Show less
Settings Panel Checklist
背景图“看不见”时按序查：
- 图是否接近纯色？（要用
gen_bg.py或强渐变） --bg-settings-overlay是否过厚（≥0.6）？--bg-settings-surface是否仍是实色？--bg-settings是否不透明？.settings-body/ 卡片是否盖实色？url("./assets/...")与 zip 内路径是否一致？- 是否覆盖
.settings-tab.active？
Welcome Page Note
欢迎区在 .main-area 内，吃 --bg-main-*，无官方独立背景 token。scaffold/make --recipe f 会预置 .welcome-view 布局增强。
Color Heuristics
| 主题 | light accent | dark accent |
|---|---|---|
| ocean | #0b7ea4 | #3db8d9 |
| forest | #3f7d4e | #6bbf7a |
| aurora | #6d5efc | #a89bff |
| ink | #3f3f46 | #a1a1aa |
| warm | #d97706 | #fbbf24 |
| pink | #db2777 | #f472b6 |
| business | #4f6ef7 | #6b8aff |
脚手架 / make 可用 --theme 自动套用 accent / user-msg / thinking-dot。
Install / Runtime
| 项 | 值 |
|---|---|
| 默认 zip 路径 | .uploads/{name}-yyyyMMddHH.zip（与 Web 附件目录一致，gitignore；时戳防冲突） |
| 一键安装 | Markdown 链接 [⬇️ 点击安装皮肤](/web/settings/skins/install?file=.uploads/{name}-yyyyMMddHH.zip) → 前端渲染为按钮并 POST 安装启用 |
| 手动安装 | 设置 → 通用 → 皮肤选择 → 上传皮肤 |
| 安装目录 | ~/.soloncode/skins/{name}/ |
| 预置 | default / eyecare / contrast |
| 本地 CSS | /web/settings/skins/file?name={name}&file=skin.css（服务端改写相对 url） |
| 同名重装 | 覆盖 |
Self-Check Before Delivery
- 含
skin.json+skin.css - name 合法且非保留名
- CSS
data-skin== name（无残留模板 id） - light + dark 成对
- 有图则 overlay 薄；透图场景 surface/卡片半透明
- 无 js/html/svg/exe/sh
- 相对路径正确；预览用
preview.png - zip ≤ 8MB；资源 ≤ 2MB（css 除外）
- 通过
validate_skin.py - 已产出 zip（优先
make_skin.py/pack_skin.py，默认.uploads/{name}-yyyyMMddHH.zip） - 回复中含醒目一键安装链接：
[⬇️ 点击安装皮肤](/web/settings/skins/install?file=.uploads/…zip)（链接file=与真实路径一致）
Do Not
- 不要只输出 CSS 文本就结束（除非用户只要片段）
- 不要修改 soloncode-desktop
- 不要使用/覆盖预置名
- 不要假设欢迎页官方独立背景变量
- 不要用厚遮罩 + 弱对比图冒充“有背景”
- 不要把模板目录名直接当最终
name交付（除非用户明确要求） - 不要手写接近纯色的 PNG；用
gen_bg.py或纯 CSS 强渐变
© opensolon, 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 (scripts, references, assets) in soloncode-cli/release/skills/soloncode-skin-skill of opensolon/soloncode.
- SKILL.md
- assets/templates/README.md
- assets/templates/full-theme/skin.css
- assets/templates/full-theme/skin.json
- assets/templates/minimal-accent/skin.css
- assets/templates/minimal-accent/skin.json
- assets/templates/ocean-gradient/skin.css
- assets/templates/ocean-gradient/skin.json
- assets/templates/settings-panel/skin.css
- assets/templates/settings-panel/skin.json
- references/skin-spec.md
- scripts/gen_bg.py
- scripts/gen_preview.py
- … and 4 more
Open the folder on GitHubat commit f9b4ac5
Compare with similar skills
Soloncode Skin Skill 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 |
|---|---|---|---|---|---|---|
| Soloncode Skin Skill this skillopensolon/soloncode | 197 | — | ~1.9k | Automated safety check: Pass | MIT | |
| React Router Developmentremix-run/react-router | 57k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React UI State PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.6k | Automated safety check: Pass | None | |
| GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills | 16k | 4 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Svelte Core Best Practicesrilldata/rill | 2.9k | 4 repos | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Vuetify Playgroundvuetifyjs/vuetify | 41k | — | ~730 | Automated safety check: Pass | Custom licence |
Similar skills
React UI State Patterns
ChrisWiles/claude-code-showcase
Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.
GSAP in Vue, Nuxt and Svelte
greensock/gsap-skills
Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.
Svelte Core Best Practices
rilldata/rill
Rules for writing idiomatic Svelte 5 code: when to reach for runes like state, derived and effect, and how to handle props, attachments and bindings.
Vuetify Playground
vuetifyjs/vuetify
Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.
Tabler Astro Dev Server
tabler/tabler
Starts the right Tabler dev server, keeps it from clashing with builds and verifies changes in the browser before a page or component is handed back.
More from opensolon/soloncode
Solon Development Skill
opensolon/soloncode
Solon Java framework expert (NOT Spring). An agent skill from opensolon/soloncode.
Related
Works with
Categories
Questions about Soloncode Skin Skill
What does Soloncode Skin Skill do?
Generate installable SolonCode Web UI skin zip packages from natural-language design requests. Soloncode Skin Skill is an agent skill from opensolon/soloncode. Generate installable SolonCode Web UI skin zip packages from natural-language design requests.
When should I use Soloncode Skin Skill?
Soloncode Skin Skill fits situations like: the user asks to create/make/customize a skin; settings panel background; welcome-page look; accent color theme.
How do I install Soloncode Skin Skill in Claude Code?
Run `npx skills add opensolon/soloncode --skill soloncode-skin-skill -a claude-code`. Or copy the skill folder (soloncode-cli/release/skills/soloncode-skin-skill in opensolon/soloncode) into .claude/skills/soloncode-skin-skill in your project. Claude Code loads it when a task matches its description.
How do I install Soloncode Skin Skill in Codex?
Run `npx skills add opensolon/soloncode --skill soloncode-skin-skill -a codex`. Or copy the skill folder (soloncode-cli/release/skills/soloncode-skin-skill in opensolon/soloncode) into .agents/skills/soloncode-skin-skill in your project. Codex loads it when a task matches its description.
Can I use Soloncode Skin Skill 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 opensolon/soloncode --skill soloncode-skin-skill -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/soloncode-skin-skill, .gemini/skills/soloncode-skin-skill, .github/skills/soloncode-skin-skill and .opencode/skills/soloncode-skin-skill in your project.
What does Soloncode Skin Skill need to run?
Going by SKILL.md and its folder, Soloncode Skin Skill needs Python for the scripts in its folder and the command-line tools its instructions call (python3, pip and make). Our summary lists: Python 3.
Does Soloncode Skin Skill access the network?
SKILL.md contains no URLs. Its commands use pip, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Soloncode Skin Skill 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Soloncode Skin Skill use?
Soloncode Skin Skill 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 Soloncode Skin Skill use?
About 1.9k tokens (SKILL.md is roughly 7.6k 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 9.1k tokens, read only when the agent opens those files.
What are the alternatives to Soloncode Skin Skill?
Skills that share tags, products or a category with Soloncode Skin Skill: React Router Development (remix-run/react-router, 57k stars), React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars), GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars) and Svelte Core Best Practices (rilldata/rill, 2.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Soloncode Skin Skill?
opensolon (a GitHub organization) maintains it in opensolon/soloncode, which has 197 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on October 7, 2026.
Source: opensolon/soloncode on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.