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.
Modern CSS techniques that replace breakpoint ladders, wrapper elements and scripts.
Install Good CSS
$ npx skills add vojtaholik/good-css --skill good-css -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install vojtaholik/good-css good-css --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/vojtaholik/good-css.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/good-css .claude/skills/good-css && 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 "good-css" agent skill from https://github.com/vojtaholik/good-css/tree/main/skills/good-css into .claude/skills/good-css/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "good-css", 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/vojtaholik/good-css/tree/main/skills/good-cssType 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 vojtaholik/good-css --skill good-css -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install vojtaholik/good-css good-css --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vojtaholik/good-css.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/good-css .agents/skills/good-css && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "good-css" agent skill from https://github.com/vojtaholik/good-css/tree/main/skills/good-css into .agents/skills/good-css/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "good-css", 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 vojtaholik/good-css --skill good-css -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install vojtaholik/good-css good-css --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vojtaholik/good-css.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/good-css .cursor/skills/good-css && 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 "good-css" agent skill from https://github.com/vojtaholik/good-css/tree/main/skills/good-css into .cursor/skills/good-css/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "good-css", 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/vojtaholik/good-css.git --path skills/good-css--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 vojtaholik/good-css --skill good-css -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install vojtaholik/good-css good-css --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vojtaholik/good-css.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/good-css .gemini/skills/good-css && 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 "good-css" agent skill from https://github.com/vojtaholik/good-css/tree/main/skills/good-css into .gemini/skills/good-css/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "good-css", 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 vojtaholik/good-css good-cssInstalls 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 vojtaholik/good-css --skill good-css -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/vojtaholik/good-css.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/good-css .github/skills/good-css && 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 "good-css" agent skill from https://github.com/vojtaholik/good-css/tree/main/skills/good-css into .github/skills/good-css/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "good-css", 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 vojtaholik/good-css --skill good-css -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install vojtaholik/good-css good-css --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vojtaholik/good-css.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/good-css .opencode/skills/good-css && 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 "good-css" agent skill from https://github.com/vojtaholik/good-css/tree/main/skills/good-css into .opencode/skills/good-css/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "good-css", 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
good-css- GitHub stars
- 218
- Token cost
- ~1.2k tokens
- SKILL.md length
- 689 words
- Files
- 9 (incl. references)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Modern CSS techniques that replace breakpoint ladders, wrapper elements and scripts.
- Review styles in any form
- SKILL.md covers In all CSS, Read the entry before you write, Left out on purpose and Browser support, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Including plain CSS
What it does
Good CSS is an agent skill from vojtaholik/good-css. Modern CSS techniques that replace breakpoint ladders, wrapper elements and scripts. Use whenever you write, edit or review styles in any form, including plain CSS, Tailwind classes, StyleX, CSS-in-JS and inline styles, and whenever you build or restyle a page or component, even if the user never mentions CSS.
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `references/foundations.md`, `references/interaction.md` and `references/layout.md`).
It sits in Frontend & Design, covering CSS and styling and Responsive design. It works with Tailwind CSS. The repository describes itself as: Opinionated modern CSS techniques, packaged as an agent skill, each with a live specimen. The licence is MIT.
When your agent uses it
- Review styles in any form
- Including plain CSS
- Tailwind classes
- CSS-in-JS and inline styles
Example prompts
- “/good-css”
What it can do on your machine
Read from SKILL.md and the folder at commit 8db0b73. 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
Good CSS loads about 1.2k tokens when it runs, and up to ~14k if it reads all its reference files. Until then it costs about 80 tokens; SKILL.md has 689 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 vojtaholik/good-css at commit 8db0b73, republished under its MIT licence (© vojtaholik). 689 words, ~1,197 tokens.
Download SKILL.mdSave it as
.claude/skills/good-css/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.- name
- good-css
- description
- Modern CSS techniques that replace breakpoint ladders, wrapper elements and scripts. Use whenever you write, edit or review styles in any form, including plain CSS, Tailwind classes, StyleX, CSS-in-JS and inline styles, and whenever you build or restyle a page or component, even if the user never mentions CSS.
Good CSS
One declaration that adapts on its own beats a set of breakpoints, and a CSS feature beats a script. Use JavaScript only where it makes a result nicer that already works without it.
Each technique is a set of properties and values, so it works in any authoring system. Class names in the examples are placeholders. Write the declarations in what the project already uses, whether that is a stylesheet, Tailwind utilities or StyleX objects. Where that system has no shorthand for a declaration, write it the long way, as a Tailwind arbitrary property or a rule in the project's CSS file. Do not swap the technique for a breakpoint.
In all CSS
These need no file.
- Write
inlineandblockproperties in place of left, right, top and bottom. Tailwind has them too, as inmbs-,pe-andinset-bs-, so never writemt-,pr-ortop-. The block ones need Tailwind 4.2. Below it, write them as arbitrary properties, as in[margin-block-start:theme(spacing.4)]. - Write colors in
oklch(), withnoneas the hue of a gray, white or black. Derive a hover, tint or transparent version withcolor-mix(in oklch, …). - Put sizes that grow with the screen in one
clamp()token. - Put every
:hoverrule inside@media (hover: hover) and (pointer: fine). - Style focus with
:focus-visibleandoutline. Never writeoutline: none. - Give everything pressable an
:activestate. - Put a transition that moves or scales something inside
@media (prefers-reduced-motion: no-preference). Name its properties, neverall, and never useease-in. - Cut off overflow with
overflow: clip. Keephiddenfor an element a script scrolls.
Read the entry before you write
Each file holds entries with the CSS and its rules. The rules are the conditions the CSS needs to work, so keep all of them. Read only the files whose row matches what you are about to write. One component matches two or three, and a whole page matches most of them.
| Read | Before you write |
|---|---|
references/foundations.md | a reset or base stylesheet, a set of color tokens, dark mode, a type or spacing scale |
references/layout.md | a page container or wrapper, a grid of cards, cards whose parts line up, a sidebar, a component placed in slots of different widths, overlapping layers, centered content that can overflow |
references/spacing-and-shape.md | spacing between sections, elements stacked one above another, one item pushed to the far end of a row or column, nested rounded corners |
references/text-and-media.md | text or images that come from a user or a CMS, such as names, titles, excerpts, thumbnails, avatars and embeds, an icon next to a label, a label that looks off-center, numbers in a column |
references/interaction.md | the focus, hover and press states of a button, link, input or card, a small tap target, a clickable card, form validation, a textarea, a parent styled by what it contains, page scroll locked behind a modal |
references/motion.md | easing and duration tokens, one state change that drives several values, a shadow that changes on hover, a transition between pages, the indicator under an active tab |
references/show-and-hide.md | a dialog, popover, dropdown menu or accordion |
references/scroll-and-viewport.md | a carousel, a row that may overflow, a modal body, chat list or drawer that scrolls between a header and a footer, in-page links under a sticky header, an app shell on desktop or on a phone |
Show full SKILL.md (142 more words)Show less
Left out on purpose
Never add text-box trim on *, text-rendering: optimizeLegibility, or a reset that puts display: contents or one shared grid cell on every element. references/foundations.md has the reasons.
Browser support
Most entries end with a Support: line. This skill sets no browser floor. Weigh the line against the browsers the project targets, and tell the user when something you used is missing from one of them.
Motion
Whether something should animate, the design or review of motion, springs, gestures and drag, and checks on a real phone belong to Emil Kowalski's skills animate, review-animations, improve-animations, find-animation-opportunities and mobile-native. When they are installed, use them for those jobs, and where one disagrees with a value here, use its value. When they are not, use the entries as written and add no motion beyond what an entry or the task calls for.
© vojtaholik, 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 8 other files (references) in skills/good-css of vojtaholik/good-css.
- SKILL.md
- references/foundations.md
- references/interaction.md
- references/layout.md
- references/motion.md
- references/scroll-and-viewport.md
- references/show-and-hide.md
- references/spacing-and-shape.md
- references/text-and-media.md
Open the folder on GitHubat commit 8db0b73
Compare with similar skills
Good CSS 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 |
|---|---|---|---|---|---|---|
| Good CSS this skillvojtaholik/good-css | 218 | — | ~1.2k | Automated safety check: Pass | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Tailwind CSS Patternsever-works/ever-works | 162 | 3 repos | ~1.6k | Automated safety check: Notes | AGPL-3.0 | |
| Using Ouds Web Version Major MinorOrange-OpenSource/Orange-Boosted-Bootstrap | 222 | — | ~4.2k | Automated safety check: Pass | MIT | |
| Tailwindcss Developmentcachethq/core | 230 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Tailwindcss DevelopmentOpenLitterMap/openlittermap-web | 134 | — | ~713 | Automated safety check: Pass | MIT |
Similar skills
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.
Using Ouds Web Version Major Minor
Orange-OpenSource/Orange-Boosted-Bootstrap
Provides comprehensive knowledge of the OUDS Web library (Orange Unified Design System for Web), a Bootstrap-based CSS/JS framework for building Orange-branded web interfaces.
Tailwindcss Development
cachethq/core
A skill your agent uses for Cachet Tailwind CSS and UI styling: Blade utility classes, public status-page components, Filament dashboard theme work, responsive layout, dark mode, spacing…
Tailwindcss Development
OpenLitterMap/openlittermap-web
Styles applications using Tailwind CSS v3 utilities. An agent skill from OpenLitterMap/openlittermap-web.
Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
Related
Works with
Categories
Questions about Good CSS
What does Good CSS do?
Modern CSS techniques that replace breakpoint ladders, wrapper elements and scripts. Good CSS is an agent skill from vojtaholik/good-css. Modern CSS techniques that replace breakpoint ladders, wrapper elements and scripts.
When should I use Good CSS?
Good CSS fits situations like: review styles in any form; including plain CSS; tailwind classes; CSS-in-JS and inline styles.
How do I install Good CSS in Claude Code?
Run `npx skills add vojtaholik/good-css --skill good-css -a claude-code`. Or copy the skill folder (skills/good-css in vojtaholik/good-css) into .claude/skills/good-css in your project. Claude Code loads it when a task matches its description.
How do I install Good CSS in Codex?
Run `npx skills add vojtaholik/good-css --skill good-css -a codex`. Or copy the skill folder (skills/good-css in vojtaholik/good-css) into .agents/skills/good-css in your project. Codex loads it when a task matches its description.
Can I use Good CSS 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 vojtaholik/good-css --skill good-css -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/good-css, .gemini/skills/good-css, .github/skills/good-css and .opencode/skills/good-css in your project.
What does Good CSS need to run?
SKILL.md names no scripts, command-line tools or credentials: Good CSS is instructions for the agent only.
Does Good CSS 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 Good CSS 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 Good CSS use?
Good CSS 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 Good CSS use?
About 1.2k tokens (SKILL.md is roughly 4.8k 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 13k tokens, read only when the agent opens those files.
What are the alternatives to Good CSS?
Skills that share tags, products or a category with Good CSS: UI Styling (Ohh-889/skyroc, 795 stars), Tailwind CSS Patterns (ever-works/ever-works, 162 stars), Using Ouds Web Version Major Minor (Orange-OpenSource/Orange-Boosted-Bootstrap, 222 stars) and Tailwindcss Development (cachethq/core, 230 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Good CSS?
vojtaholik (a GitHub user) maintains it in vojtaholik/good-css, which has 218 GitHub stars. The repository was last updated on October 8, 2026.
Source: vojtaholik/good-css on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.