UI Styling

Reviewed 2026-10-14codingPrompt / Rule# tailwind # shadcn-ui # dark-mode # responsive # ui

Companion skill from the UI UX Pro Max repo for shadcn/ui components, Tailwind CSS styling, dark mode, theming and canvas visuals.

Security Reviewed

Two local Python helpers: one runs npx shadcn add (no shell), one writes a Tailwind config; no HTTP client or API keys.

Install UI Styling in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent

Install the "UI Styling" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/ui-styling.md (source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-styling).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Download the repository
```
git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill /tmp/ui-ux-pro-max-skill
```
The skill lives in .claude/skills/ui-styling (about 5.7 MB because of the fonts).
2. Copy the skill into this project (workspace skill)
```
mkdir -p .agents/skills && cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/ui-styling .agents/skills/
```
Run from your project root. Antigravity then reads .agents/skills/ui-styling/SKILL.md.
3. Or install it for all projects (global skill)
```
mkdir -p ~/.gemini/config/skills && cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/ui-styling ~/.gemini/config/skills/
```
Use this instead of the previous step. For the Antigravity CLI the global folder is ~/.gemini/antigravity-cli/skills/.
4. Check that Antigravity sees it
Antigravity 2.0 app: start a new conversation and ask "What skills do you have?" (the app has no /skills command). Antigravity CLI: run /skills; in a session that was already open, run /skills reload first. ui-styling is listed.

Alternative documented in the README: npm install -g ui-ux-pro-max-cli, then uipro init --ai antigravity; it installs ui-ux-pro-max plus the 6 sub-skills (including ui-styling) into .agents/skills/. Needs Node.js 18+ and Python 3.10+; no API keys.

Using Claude Code, Cursor or Codex? See other assistants below.

What is UI Styling?

UI Styling is a companion skill for React developers who want an agent to build interfaces with shadcn/ui, Tailwind CSS, dark mode and theming. It adds reference guides, two small Python helpers and a set of fonts for canvas poster designs.

How to use UI Styling?

In a React project (Next.js, Vite, Remix or Astro) ask for a component or layout in plain words; the agent uses the guides and can run shadcn_add.py to add components. To set up Tailwind from scratch, tailwind_config_gen.py writes a tailwind.config file.

Key features of UI Styling

✓We counted at 477bcb2: 98 files, 5,761,582 bytes; 54 TTF fonts are 5,412,104 bytes of that (94%), with 27 OFL license texts
✓We counted: 7 reference guides (shadcn components, theming, accessibility; Tailwind utilities, responsive, customization; canvas design) and SKILL.md of 336 lines
✓We counted: 2 helper scripts (shadcn_add.py, tailwind_config_gen.py), 2 test files, and committed coverage artifacts (scripts/.coverage, tests/coverage-ui.json)
✓We counted: shadcn_add.py falls back to a pinned shadcn@2.3.0 when your package.json has no shadcn dependency; the official shadcn skill always uses @latest
✓Same repo as ui-ux-pro-max; README says the uipro CLI installs it with the other sub-skills

When to use UI Styling

1Responsive pricing or dashboard sections with shadcn/ui cards
2Dark mode and theme variables
3Tailwind config for a new project

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure UI Styling in your development environment.

Step 1: Claude Code: pluginclaude

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Documented in the repo README. The plugin manifest points at ./.claude/skills/, so ui-styling arrives together with ui-ux-pro-max.

Step 2: Cursor: uipro CLIcursor

npm install -g ui-ux-pro-max-cli && uipro init --ai cursor

Documented in the README for the CLI (also --global for ~/.cursor/skills/); the CLI copies the sub-skills next to ui-ux-pro-max.

Usage Example & Verification

Prompt / Request Example

1) Our example: "Use ui-styling to build a responsive pricing section with shadcn/ui cards, Tailwind, and dark mode support."
-> The agent follows the guides: shadcn Card components, mobile-first Tailwind grid, theme variables for dark mode, and adds missing components with npx shadcn.

2) Our example: "Add button, card and dialog to this project with the ui-styling helper script, dry run first."
-> It runs python scripts/shadcn_add.py with the dry-run option, which only prints the npx shadcn add command.

3) Our example: "Generate a Tailwind config with a brand color palette and Inter font."
-> It runs tailwind_config_gen.py, which writes tailwind.config and refuses to replace an existing one unless --force is given.

Security Review

Static review

Reviewed Date

2026-10-14

Audited Ref / Commit

477bcb28c9812b385cb51a4605ddf30d7b2266e2

Reviewer

antigravityskills.org (static code review)

Two local Python helpers: one runs npx shadcn add (no shell), one writes a Tailwind config; no HTTP client or API keys.

Full review: scope, findings, risks

Audit Scope:nextlevelbuilder/ui-ux-pro-max-skill at 477bcb2, re-read on 2026-10-14 against HEAD 7246805 (2026-10-12): the ui-styling folder is unchanged (last commit de5f12b, 2026-09-19). Read SKILL.md, both scripts, requirements.txt, LICENSE.txt and the file list; fonts counted, not opened.

Key Findings:Instructions, references, two stdlib-only Python helpers, tests and font files. One helper starts npx shadcn (network via npm) and one writes a Tailwind config; no HTTP client, no API keys.

Identified Operational Risks & Permissions:Low. shadcn_add.py downloads the shadcn package through npx, and may use the pinned fallback version 2.3.0 if your package.json lacks shadcn.

Static review at 477bcb2 (folder unchanged at HEAD 7246805). scripts/shadcn_add.py builds ["npx", "shadcn@<version>", "add", ...components] and runs it with subprocess.run (no shell) in the project root; the version comes from your package.json or a pinned fallback of 2.3.0, and a dry-run option only prints the command. scripts/tailwind_config_gen.py writes a tailwind.config file with Path.write_text and refuses to create or replace one when any tailwind.config.* exists unless --force is passed. scripts/requirements.txt says there are no runtime Python dependencies (pytest packages are for tests only). tests/ use subprocess and mocks for testing only. No HTTP clients, environment secrets or API keys in the scripts. SKILL.md links to ui.shadcn.com/llms.txt and tailwindcss.com/docs as references. canvas-fonts/ holds 54 TTF files with 27 OFL texts.

Operational Notes & Known Limitations

Known Limitations

•Overlaps with the official shadcn skill (our page); its examples use space-y-* and dark: color classes that the official skill's rules advise against
•Needs Node.js 18+ for npx shadcn and Python 3.10+ for the helpers (scripts/requirements.txt); requirements.txt still mentions the old npx shadcn-ui@latest name
•The folder LICENSE.txt is Apache 2.0 while SKILL.md frontmatter says MIT; check both before redistributing
•The repo README documents Antigravity only for the uipro CLI, not for this folder alone

Frequently Asked Questions

Is the UI Styling skill safe?

In our static review of commit 477bcb2 its two scripts are local: shadcn_add.py runs npx shadcn@<version> add with subprocess.run (no shell; dry-run prints only), and tailwind_config_gen.py writes a tailwind.config file and refuses to replace one unless you pass --force. No API keys.

How do I install UI Styling in Antigravity?

Clone nextlevelbuilder/ui-ux-pro-max-skill, copy .claude/skills/ui-styling into .agents/skills/ (or ~/.gemini/config/skills/), then ask "What skills do you have?" (CLI: /skills). uipro init --ai antigravity also installs it.

UI Styling or the official shadcn skill?

The official shadcn skill is project-aware and CLI-driven. UI Styling is broader (Tailwind utilities, responsive, theming, canvas posters) but its examples use space-y-* and dark: classes. Use the official one for shadcn components.

Which frameworks does it target?

SKILL.md lists React-based frameworks: Next.js, Vite, Remix and Astro.

Supported Platforms

antigravityclaudecursorgemini

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More coding skills #tailwind #shadcn-ui #dark-mode #responsive Use cases

Related Skills

💻

shadcn/ui

@shadcn-ui

Official shadcn/ui skill: project-aware rules for adding, searching, composing and styling shadcn components via the shadcn CLI.

Tested in AntigravityStatic reviewinstalls packagesnetwork accesswrites files

shadcn-uireact

🎨

UI/UX Pro Max

@nextlevelbuilder

Comprehensive UI/UX design intelligence skill for AI coding assistants. Injects structured design tokens, color theory, typography scales, accessibility guidelines, and component patterns into Claude Code, Cursor, and Windsurf.

Tested in AntigravityStatic reviewinstalls packagesnetwork accesswrites files

mediaui

💻