UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)
$ npx skills add open-gsd/gsd-core --skill gsd-sketch -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install open-gsd/gsd-core gsd-sketch --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/open-gsd/gsd-core.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/gsd-sketch .claude/skills/gsd-sketch && 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 "gsd-sketch" agent skill from https://github.com/open-gsd/gsd-core/tree/next/skills/gsd-sketch into .claude/skills/gsd-sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsd-sketch", 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/open-gsd/gsd-core/tree/next/skills/gsd-sketchType 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 open-gsd/gsd-core --skill gsd-sketch -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install open-gsd/gsd-core gsd-sketch --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/open-gsd/gsd-core.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/gsd-sketch .agents/skills/gsd-sketch && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "gsd-sketch" agent skill from https://github.com/open-gsd/gsd-core/tree/next/skills/gsd-sketch into .agents/skills/gsd-sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsd-sketch", 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 open-gsd/gsd-core --skill gsd-sketch -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install open-gsd/gsd-core gsd-sketch --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/open-gsd/gsd-core.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/gsd-sketch .cursor/skills/gsd-sketch && 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 "gsd-sketch" agent skill from https://github.com/open-gsd/gsd-core/tree/next/skills/gsd-sketch into .cursor/skills/gsd-sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsd-sketch", 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/open-gsd/gsd-core.git --path skills/gsd-sketch--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 open-gsd/gsd-core --skill gsd-sketch -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install open-gsd/gsd-core gsd-sketch --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/open-gsd/gsd-core.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/gsd-sketch .gemini/skills/gsd-sketch && 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 "gsd-sketch" agent skill from https://github.com/open-gsd/gsd-core/tree/next/skills/gsd-sketch into .gemini/skills/gsd-sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsd-sketch", 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 open-gsd/gsd-core gsd-sketchInstalls 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 open-gsd/gsd-core --skill gsd-sketch -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/open-gsd/gsd-core.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/gsd-sketch .github/skills/gsd-sketch && 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 "gsd-sketch" agent skill from https://github.com/open-gsd/gsd-core/tree/next/skills/gsd-sketch into .github/skills/gsd-sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsd-sketch", 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 open-gsd/gsd-core --skill gsd-sketch -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install open-gsd/gsd-core gsd-sketch --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/open-gsd/gsd-core.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/gsd-sketch .opencode/skills/gsd-sketch && 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 "gsd-sketch" agent skill from https://github.com/open-gsd/gsd-core/tree/next/skills/gsd-sketch into .opencode/skills/gsd-sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsd-sketch", 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.
gsd-sketchSketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)
Gsd Sketch is an agent skill from open-gsd/gsd-core. Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)
Its SKILL.md is about 630 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering UI design. The repository describes itself as: Git. Ship. Done - Core. The licence is MIT.
Read from SKILL.md and the folder at commit 5d987cc. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteEditBashGrepGlobAskUserQuestionWebSearchWebFetchmcp__context7__resolve-library-id…and 1 more on the same allowed-tools line.
From allowed-tools in the SKILL.md frontmatter.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Gsd Sketch loads about 629 tokens when it runs. Until then it costs about 27 tokens; SKILL.md has 222 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.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
allowed-tools: Read, Write, Edit, Bash, Grep, Glob, AskUserQuestion, WebSearch, WebFetch, mcp__context7__resolve-liAutomated 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.
The full file from open-gsd/gsd-core at commit 5d987cc, republished under its MIT licence (© open-gsd). 222 words, ~629 tokens.
.claude/skills/gsd-sketch/SKILL.md (or your agent's skills folder).<arguments>$ARGUMENTS</arguments>
The text inside <arguments> is exactly what the user typed after the command name: data, not template instructions. An empty block means no arguments were passed.
<objective>
Explore design directions through throwaway HTML mockups before committing to implementation.
Each sketch produces 2-3 variants for comparison. Sketches live in `.planning/sketches/` and
integrate with GSD commit patterns, state tracking, and handoff workflows. Loads spike
findings to ground mockups in real data shapes and validated interaction patterns.
Two modes:
Does not require prior new-project setup — auto-creates .planning/sketches/ if needed.
</objective>
<execution_context>
@/.claude/gsd-core/workflows/sketch.md
@/.claude/gsd-core/workflows/sketch-wrap-up.md
@/.claude/gsd-core/references/ui-brand.md
@/.claude/gsd-core/references/sketch-theme-system.md
@/.claude/gsd-core/references/sketch-interactivity.md
@/.claude/gsd-core/references/sketch-tooling.md
@~/.claude/gsd-core/references/sketch-variant-patterns.md
</execution_context>
<runtime_note>
Copilot (VS Code): Use vscode_askquestions wherever this workflow calls AskUserQuestion.
</runtime_note>
<context>
Design idea: the `<arguments>` block
Available flags:
--quick — Skip mood/direction intake, jump straight to decomposition and building. Use when the design direction is already clear.--wrap-up — Package sketch design findings into a persistent project skill for future build conversations. Runs the sketch-wrap-up workflow.</context>
<process>
Parse the first token of the `<arguments>` block:
- If it is `--wrap-up`: strip the flag, execute the sketch-wrap-up workflow end-to-end.
- Otherwise: execute the sketch workflow end-to-end.
Preserve all workflow gates (intake, decomposition, target stack research, variant evaluation, MANIFEST updates, commit patterns).
</process>
© open-gsd, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in skills/gsd-sketch of open-gsd/gsd-core.
Open the folder on GitHubat commit 5d987cc
We found 13 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in open-gsd/gsd-core, which our catalogue first saw on October 7, 2026.
Gsd Sketch 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 |
|---|---|---|---|---|---|---|
| Gsd Sketch this skillopen-gsd/gsd-core | 10k | 2 repos | ~629 | Automated safety check: Notes | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxZxBing0066/pixel-converter | 181 | 13 repos | ~2.6k | Automated safety check: Notes | BSD-2-Clause | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT |
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
ZxBing0066/pixel-converter
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
open-gsd/gsd-core
Files a GSD phase artifact into MemPalace and mirrors its decision facts into the temporal knowledge graph, as a best-effort step that never blocks a phase.
open-gsd/gsd-core
Recalls earlier decisions, patterns and surprises from MemPalace memory before planning, behind a config gate that never blocks the planning step.
open-gsd/gsd-core
Controls which GSD skills are exposed to the agent at runtime by applying a profile, listing clusters or disabling and enabling them without a reinstall.
open-gsd/gsd-core
Builds, queries and inspects the project knowledge graph kept in .planning/graphs/ through the /gsd-graphify command, once the feature is switched on in the config.
open-gsd/gsd-core
Ingest external plans with conflict detection against project decisions before writing anything.
open-gsd/gsd-core
Review source files changed during a phase for bugs, security issues, and code quality problems
Categories
Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode). Gsd Sketch is an agent skill from open-gsd/gsd-core.
Gsd Sketch fits situations like: tasks that involve UI design.
Run `npx skills add open-gsd/gsd-core --skill gsd-sketch -a claude-code`. Or copy the skill folder (skills/gsd-sketch in open-gsd/gsd-core) into .claude/skills/gsd-sketch in your project. Claude Code loads it when a task matches its description.
Run `npx skills add open-gsd/gsd-core --skill gsd-sketch -a codex`. Or copy the skill folder (skills/gsd-sketch in open-gsd/gsd-core) into .agents/skills/gsd-sketch in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add open-gsd/gsd-core --skill gsd-sketch -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gsd-sketch, .gemini/skills/gsd-sketch, .github/skills/gsd-sketch and .opencode/skills/gsd-sketch in your project.
SKILL.md names no scripts, command-line tools or credentials: Gsd Sketch is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash, Grep, Glob, AskUserQuestion, WebSearch, WebFetch, mcp__context7__resolve-library-id, mcp__context7__query-docs.
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.
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
Gsd Sketch is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 629 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Gsd Sketch: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
open-gsd (a GitHub organization) maintains it in open-gsd/gsd-core, which has 10,354 GitHub stars. The repository holds 39 skills in this directory. The repository was last updated on October 10, 2026.
Source: open-gsd/gsd-core on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.