By rshzrh
Slop-free UI generation skills for web (React + Tailwind + shadcn/ui), iOS (SwiftUI), and Android (Jetpack Compose + Material 3 Expressive).
npx claudepluginhub rshzrh/ui-design-skills --plugin ui-design-skillsGenerate slop-free Android UI in Jetpack Compose + Material 3 Expressive (Android 14+ / API 34+). Use whenever the user asks to build, design, scaffold, restyle, or improve a screen, component, activity, fragment, or any Android interface in Compose. Two phases — theme tokens first (with approval gate), then UI — both gated by a self-audit checklist that the model MUST run before claiming done.
Generate slop-free SwiftUI UI for iOS 17+ (iPhone and iPad). Use whenever the user asks to build, design, scaffold, restyle, or improve a SwiftUI screen, View, sheet, NavigationStack, tab, or any iOS interface. Greenfield mobile coverage — does not replace any existing skill. Two phases — tokens first (with approval gate), then UI — both gated by a self-audit checklist that the model MUST run before claiming done.
Generate slop-free UI for React + Tailwind + shadcn/ui. Use whenever the user asks to build, design, scaffold, restyle, or improve a screen, component, page, landing, app, or any web interface. Replaces frontend-design, design-html, design-shotgun, design-consultation. Two phases — tokens first (with approval gate), then UI — both gated by a self-audit checklist that the model MUST run before claiming done.
Three slop-free UI generation skills for Claude Code, covering web, iOS, and Android. Each skill replaces vague aesthetic instructions ("make it clean and modern") with named anchor recipes, design tokens, and a self-audit checklist the model must run before claiming done.
ui-web — React + Tailwind + shadcn/uiui-ios — SwiftUI (iOS 17+, iPhone + iPad)ui-android — Jetpack Compose + Material 3 Expressive (API 34+)All three use a two-phase workflow: tokens first (with approval gate), then UI, both gated by a ban-list of AI-slop patterns (purple→blue gradients, Inter-everywhere, 3-icon-card grids, "Lightning fast / Powered by AI" copy, glassmorphism by default, etc.).
From inside Claude Code:
/plugin marketplace add rshzrh/ui-design-skills
/plugin install ui-design-skills@ui-design-skills
Skills install under the ui-design-skills: namespace (ui-design-skills:ui-web, etc.) and update cleanly via /plugin update.
~/.claude/skills/)git clone https://github.com/rshzrh/ui-design-skills.git
cd ui-design-skills
./scripts/install.sh
The script symlinks each skill directory into ~/.claude/skills/, backing up any existing non-symlink copies to <name>.bak-<timestamp>. Idempotent and safe to re-run. With symlinks, git pull immediately updates your local skills.
ui-web — React + Tailwind + shadcn/uiGenerate slop-free UI for React + Tailwind + shadcn/ui. Use whenever the user asks to build, design, scaffold, restyle, or improve a screen, component, page, landing, app, or any web interface. Two phases — tokens first (with approval gate), then UI — both gated by a self-audit checklist.
ui-ios — SwiftUIGenerate slop-free SwiftUI UI for iOS 17+ (iPhone and iPad). Use whenever the user asks to build, design, scaffold, restyle, or improve a SwiftUI screen, View, sheet, NavigationStack, tab, or any iOS interface.
ui-android — Jetpack Compose + Material 3 ExpressiveGenerate slop-free Android UI in Jetpack Compose + Material 3 Expressive (Android 14+ / API 34+). Use whenever the user asks to build, design, scaffold, restyle, or improve a screen, component, activity, fragment, or any Android interface in Compose.
Each skill directory contains:
SKILL.md # entry point with workflow + frontmatter
anchors.md # named aesthetic recipes (the only vocabulary allowed)
ban-patterns.md # AI-slop patterns to detect and refuse
component-anatomy.md # structural rules per component type
copy-voice.md # banned buzzwords, tone guidance
icons-imagery.md # icon + imagery policy
motion.md # easing, duration, what to animate
verification.md # self-audit checklist (gate before "done")
templates/ # drop-in config (tailwind, eslint, DESIGN_RULES, etc.)
This repo is the source of truth. If you installed via scripts/install.sh, your local ~/.claude/skills/ui-* are symlinks into the repo, so edits take effect immediately — commit and push to publish.
# edit a skill
$EDITOR skills/ui-web/anchors.md
# it's already live locally (via symlink) — no reinstall needed
git add skills/ui-web/anchors.md
git commit -m "ui-web: add new anchor recipe"
git push
PRs welcome: new anchor recipes, additional ban patterns, tighter verification checklists.
MIT — see LICENSE.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Share bugs, ideas, or general feedback.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Frontend design skill for UI/UX implementation
Creative skill for generating algorithmic and generative art. Produces visual designs using mathematical patterns, fractals, and procedural generation.
Humanise text and remove AI writing patterns. Detects and fixes 24 AI tell-tales including inflated language, promotional tone, AI vocabulary, filler phrases, sycophantic tone, and formulaic structure.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). Proactively activates in projects with cacheComponents: true, providing patterns for 'use cache' directive, cacheLife(), cacheTag(), cache invalidation, and parameter permutation rendering.