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.
Guides visual design and polish for the Aholo Viewer website and Playground, staying inside the existing Astro site and scoped CSS layers with a restrained technical tone.
Install Aholo Viewer Frontend Design
$ npx skills add manycoretech/aholo-viewer --skill frontend-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install manycoretech/aholo-viewer frontend-design --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/manycoretech/aholo-viewer.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/frontend-design .claude/skills/frontend-design && 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 "frontend-design" agent skill from https://github.com/manycoretech/aholo-viewer/tree/master/.codex/skills/frontend-design into .claude/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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/manycoretech/aholo-viewer/tree/master/.codex/skills/frontend-designType 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 manycoretech/aholo-viewer --skill frontend-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install manycoretech/aholo-viewer frontend-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/manycoretech/aholo-viewer.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.codex/skills/frontend-design .agents/skills/frontend-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-design" agent skill from https://github.com/manycoretech/aholo-viewer/tree/master/.codex/skills/frontend-design into .agents/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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 manycoretech/aholo-viewer --skill frontend-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install manycoretech/aholo-viewer frontend-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/manycoretech/aholo-viewer.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.codex/skills/frontend-design .cursor/skills/frontend-design && 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 "frontend-design" agent skill from https://github.com/manycoretech/aholo-viewer/tree/master/.codex/skills/frontend-design into .cursor/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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/manycoretech/aholo-viewer.git --path .codex/skills/frontend-design--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 manycoretech/aholo-viewer --skill frontend-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install manycoretech/aholo-viewer frontend-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/manycoretech/aholo-viewer.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.codex/skills/frontend-design .gemini/skills/frontend-design && 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 "frontend-design" agent skill from https://github.com/manycoretech/aholo-viewer/tree/master/.codex/skills/frontend-design into .gemini/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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 manycoretech/aholo-viewer frontend-designInstalls 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 manycoretech/aholo-viewer --skill frontend-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/manycoretech/aholo-viewer.git skills-src && mkdir -p .github/skills && cp -r skills-src/.codex/skills/frontend-design .github/skills/frontend-design && 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 "frontend-design" agent skill from https://github.com/manycoretech/aholo-viewer/tree/master/.codex/skills/frontend-design into .github/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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 manycoretech/aholo-viewer --skill frontend-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install manycoretech/aholo-viewer frontend-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/manycoretech/aholo-viewer.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.codex/skills/frontend-design .opencode/skills/frontend-design && 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 "frontend-design" agent skill from https://github.com/manycoretech/aholo-viewer/tree/master/.codex/skills/frontend-design into .opencode/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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
frontend-design- GitHub stars
- 1.1k
- Token cost
- ~348 tokens
- SKILL.md length
- 134 words
- Files
- 3
- Skills in repo
- 7
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Guides visual design and polish for the Aholo Viewer website and Playground, staying inside the existing Astro site and scoped CSS layers with a restrained technical tone.
- Styling an Astro page or component in the Aholo Viewer website
- SKILL.md covers Direction, Rules and Validate
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Refining the Playground interface without breaking its CSS layers
What it does
This repository-local skill sets the direction for the Aholo Viewer site, a high-performance 3DGS renderer for web applications. The audience is frontend engineers, SDK documentation readers and people evaluating the product demo, and the tone is simple, refined, spacious, comfortable, technical and tool-like. Generic AI aesthetics, broad marketing visuals and overdecorated layouts are ruled out.
Rules keep work inside the existing style layers: `theme.css`, `global.css`, `site.css`, `home.css`, `examples.css`, `docs.css` and `playground.css`, with feature-specific selectors kept out of `global.css`. Color, type, spacing and motion stay restrained, marketing-style landing sections appear only on request, nothing may overlap on mobile or desktop, and compact controls use icons at a stable size. Changes are validated with `pnpm.cmd check:website`.
When your agent uses it
- Styling an Astro page or component in the Aholo Viewer website
- Refining the Playground interface without breaking its CSS layers
- Reviewing a frontend change for responsive layout and visual consistency
Example prompts
- “Polish the examples page layout so the cards and canvas never overlap on mobile.”
- “Restyle the docs sidebar to match the site's restrained look.”
- “Review the playground panel changes for design consistency and run check:website.”
Requirements
- The Aholo Viewer repository with its Astro website
- pnpm to run the website check
What it can do on your machine
Read from SKILL.md and the folder at commit 964dc18. 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 (its code samples are bash).
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
Aholo Viewer Frontend Design loads about 348 tokens when it runs. Until then it costs about 63 tokens; SKILL.md has 134 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 manycoretech/aholo-viewer at commit 964dc18, republished under its Apache-2.0 licence (© manycoretech). 134 words, ~348 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-design/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- frontend-design
- description
- Design and polish Aholo Viewer frontend interfaces with production-grade visual quality. Use for website UI direction, Astro page/component styling, responsive layout, visual refinement, and frontend design reviews in this repository.
Frontend Design
Use this local skill for Aholo Viewer website and Playground visual design. Keep implementation consistent with the existing Astro site and scoped CSS architecture.
Direction
- Audience: frontend engineers, SDK docs readers, and product-demo evaluators.
- Product: high-performance 3DGS rendering for web applications.
- Tone: simple, refined, spacious, comfortable, technical, and tool-like.
- Avoid generic AI aesthetics, broad marketing visuals, and overdecorated layouts.
Rules
- Respect existing style layers:
theme.css,global.css,site.css,home.css,examples.css,docs.css,playground.css. - Keep feature-specific selectors out of
global.css. - Use restrained color, typography, spacing, and motion that fit SDK documentation and technical tooling.
- Do not make marketing-style landing sections unless the user explicitly asks.
- Ensure text, controls, canvas surfaces, and panels do not overlap on mobile or desktop.
- Use icons for compact controls when available, and keep repeated tool UI stable in size.
Validate
pnpm.cmd check:website© manycoretech, Apache-2.0. 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 2 other files in .codex/skills/frontend-design of manycoretech/aholo-viewer.
- SKILL.md
- LICENSE.txt
- agents/openai.yaml
Open the folder on GitHubat commit 964dc18
Compare with similar skills
Aholo Viewer Frontend Design 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 |
|---|---|---|---|---|---|---|
| Aholo Viewer Frontend Design this skillmanycoretech/aholo-viewer | 1.1k | — | ~348 | Automated safety check: Pass | Apache-2.0 | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Refero Designreferodesign/refero_skill | 292 | — | ~5.3k | Automated safety check: Pass | MIT | |
| GlideSrivarsanK/Glide | 125 | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| Frontend Design Principlespretend1111/claude-desktop-app | 494 | 1 repos | ~824 | Automated safety check: Pass | Custom licence | |
| Ultimate UINeverSight/learn-skills.dev | 216 | 1 repos | ~4k | Automated safety check: Pass | MIT |
Similar skills
Refero Design
referodesign/refero_skill
Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling, design systems, components, responsive…
Glide
SrivarsanK/Glide
Authoritative guide and toolset for AI agents to operate, configure, and visually design applications using Glide (@srivarsank/glide).
Frontend Design Principles
pretend1111/claude-desktop-app
Gives practical design rules for polished HTML, CSS and JavaScript interfaces and browser games, covering spacing, type, color, components, motion and responsive breakpoints.
Ultimate UI
NeverSight/learn-skills.dev
A skill your agent uses when building user interfaces that need to look polished, modern, and intentional - not like AI-generated slop.
Frontend Design
seb1n/awesome-ai-agent-skills
Design and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support.
More from manycoretech/aholo-viewer
Aholo Viewer Example Content
manycoretech/aholo-viewer
Owns the paired JSON metadata and TypeScript runner files that define the Aholo Viewer's example and Playground content.
Aholo Site Owner
manycoretech/aholo-viewer
Owns the Aholo Viewer Astro website shell and Playground integration, covering routes, layouts, i18n copy and scoped CSS, while leaving the renderer and example content to other skills.
Aholo Viewer Integration
manycoretech/aholo-viewer
Guides building browser apps with the @manycore/aholo-viewer npm package to render 3D Gaussian Splatting and mesh content from TypeScript.
Aholo Viewer Docs
manycoretech/aholo-viewer
Guides writing and maintaining Aholo Viewer documentation: README, AGENTS.md, architecture notes, bilingual manual pages and AI collaboration guides.
Aholo Viewer Monorepo Routing
manycoretech/aholo-viewer
Coordinate Aholo Viewer monorepo work. Use for cross-module tasks, workspace scripts, generated docs/build flow, validation routing, cleanup boundaries, or…
Aholo Renderer Package Rules
manycoretech/aholo-viewer
Work on the @manycore/aholo-viewer package. Use only when the user explicitly asks for renderer source, package build, public exports, JSDoc/API docs…
Related
Categories
Questions about Aholo Viewer Frontend Design
What does Aholo Viewer Frontend Design do?
Guides visual design and polish for the Aholo Viewer website and Playground, staying inside the existing Astro site and scoped CSS layers with a restrained technical tone. This repository-local skill sets the direction for the Aholo Viewer site, a high-performance 3DGS renderer for web applications. The audience is frontend engineers, SDK documentation readers and people evaluating the product demo, and the tone is simple, refined, spacious, comfortable, technical and tool-like.
When should I use Aholo Viewer Frontend Design?
Aholo Viewer Frontend Design fits situations like: styling an Astro page or component in the Aholo Viewer website; refining the Playground interface without breaking its CSS layers; reviewing a frontend change for responsive layout and visual consistency.
How do I install Aholo Viewer Frontend Design in Claude Code?
Run `npx skills add manycoretech/aholo-viewer --skill frontend-design -a claude-code`. Or copy the skill folder (.codex/skills/frontend-design in manycoretech/aholo-viewer) into .claude/skills/frontend-design in your project. Claude Code loads it when a task matches its description.
How do I install Aholo Viewer Frontend Design in Codex?
Run `npx skills add manycoretech/aholo-viewer --skill frontend-design -a codex`. Or copy the skill folder (.codex/skills/frontend-design in manycoretech/aholo-viewer) into .agents/skills/frontend-design in your project. Codex loads it when a task matches its description.
Can I use Aholo Viewer Frontend Design 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 manycoretech/aholo-viewer --skill frontend-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-design, .gemini/skills/frontend-design, .github/skills/frontend-design and .opencode/skills/frontend-design in your project.
What does Aholo Viewer Frontend Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Aholo Viewer Frontend Design is instructions for the agent only. Our summary lists: The Aholo Viewer repository with its Astro website; pnpm to run the website check.
Does Aholo Viewer Frontend Design 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 Aholo Viewer Frontend Design 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 Aholo Viewer Frontend Design use?
Aholo Viewer Frontend Design is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Aholo Viewer Frontend Design use?
About 348 tokens (SKILL.md is roughly 1.4k 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 Aholo Viewer Frontend Design?
Skills that share tags, products or a category with Aholo Viewer Frontend Design: UI Styling (Ohh-889/skyroc, 795 stars), Refero Design (referodesign/refero_skill, 292 stars), Glide (SrivarsanK/Glide, 125 stars) and Frontend Design Principles (pretend1111/claude-desktop-app, 494 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Aholo Viewer Frontend Design?
manycoretech (a GitHub organization) maintains it in manycoretech/aholo-viewer, which has 1,085 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on September 24, 2026.
Source: manycoretech/aholo-viewer on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.