good-css skill
A skill gives an agent modern CSS techniques: one declaration instead of piles of breakpoints, and a CSS feature before a script.
- 403 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill only adds CSS guidance to the agent context.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/good-cssDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill only adds CSS guidance to the agent context.
This is third-party code. Review the repository files before installing.
What it does
good-css teaches an agent to write CSS in the spirit of the list's author. Instead of a set of breakpoints the agent takes one declaration that adapts to width on its own, and for interactivity it looks for a CSS feature before writing a script. Techniques are described as properties and values, so they fit plain CSS, Tailwind and StyleX. The list lives in `PRACTICES.md`: each technique states when to use it, the code, why it works and where it came from. The good-css.com site runs every technique as a live specimen. The `skills/good-css` folder holds the same list cut down to what an agent needs, plus the `SKILL.md` it reads when working with CSS.
Who it is for. Front-end developers and designers who edit layout together with an agent and want fewer breakpoints and scripts.
Good fit when
- An agent outputs a responsive page with a dozen media queries and a simpler result is wanted.
- You need to check whether a small script can be replaced by a CSS feature.
- The project uses Tailwind or StyleX and the techniques must work without changing tools.
- A team needs one list of CSS practices read by both people and agents.
Not a fit when
- The project must support very old browsers.
- A ready component set is needed rather than CSS techniques.
- The team's code style differs from the list author's opinion.
Example request
Rewrite this page's CSS with the good-css skill: drop extra media queries and replace scripts where CSS is enough.Limitations
The list voices the author's opinion and does not claim universal rules; new techniques and disputed points arrive through issues. Some techniques rely on recent CSS features, so support depends on your users' browsers and needs checking. Install the skill one way only: two copies make the agent read the rules twice. Pull requests are accepted only for fixes, and new techniques start with an issue..
How to disable. Delete the `skills/good-css` folder from `.claude/skills/` or `.agents/skills/`. Disable the plugin with `claude plugin uninstall good-css`.
FAQ
How do I install it?
Pick one route: `npx skills@latest add vojtaholik/good-css` for any agent with the Agent Skills format, or the Claude Code plugin through `claude plugin marketplace add vojtaholik/good-css`.
Does it fit Tailwind?
Yes. Every technique is written as properties and values, so it works in plain CSS, Tailwind, StyleX and other systems.
Where can I see the techniques?
In `PRACTICES.md` for people and on good-css.com, where each technique runs as a live specimen.
How does the agent version differ?
Files in `skills/good-css/references` are generated from `PRACTICES.md` and drop the "why it works" blocks and credits.
Should I install it both ways?
No, pick one route. Two installs give the agent the skill twice.
Discussion
No questions or reviews yet.
Related
SkillsA skill of ready CSS transitions for web interfaces: modals, dropdowns, toasts, loaders and dozens of other animations with matching rules
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Swiss Design Skill
swiss-design-skill
A skill that gives the agent a Swiss style on Tailwind: 12-column grid, IBM Plex Sans, a single accent and generous whitespace.
A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
A skill that edits UI inside live code with no extra dependencies: components, sections, pages and RTL with Arabic for your stack
README in short
One list is published in three forms: a list for people, live specimens on a site and a skill for agents. The skill is generated from the list, so it does not drift.