vibekiller

VibeKiller

Kills the vibecoded look. A Claude Code skill that stops your app from looking like a weekend prototype and makes it look like a well-funded company shipped it.

You know the look it kills: a pastel palette themed to whatever the app is about, grey text on grey backgrounds, one font weight everywhere, a hand-rolled tab bar, no empty state, and animations that ease instead of spring. It works. It looks cheap.

Everything in this skill is taken from apps that ship to hundreds of millions of people — ChatGPT, X, and Apple's first-party apps — plus Apple's Human Interface Guidelines for type, spacing, dimensions, corner radius, animation, and accessibility.

Claude Code writes a short design spec before touching any code, then implements it in React Native/Expo or SwiftUI against a fixed set of rules.

What it enforces

Strict monochrome. Pure #000000 and #FFFFFF backgrounds regardless of what the app is about. A recipe app gets no warm greens; a finance app gets no trust-blue. One grey (#1C1C1E / #F2F2F7) is permitted for grouped list cards and text input fields. Full-width primary buttons are inverted fills, like X's Post button. The accent color appears on the floating action button, active tab indicators, links, and toggle on-states — nowhere else.

Full-brightness text. Body text, titles, and button labels are pure white or pure black — never grey. Grey is confined to timestamps, metadata, and placeholders, and never exceeds about a third of the text on screen. Weight carries hierarchy: Bold and Semibold for titles, Regular for body, and never Light or Thin. Washed-out grey text is the number one reason an app reads as cheap.

Apple's dimensions. San Francisco only, the iOS type scale with 17pt body, the 4/8pt spacing grid, 44pt minimum touch targets, and continuous corner radii from a fixed table — straight from the Human Interface Guidelines.

System components over custom ones. TabView and NativeTabs rather than hand-rolled tab bars — you get the iOS 26 Liquid Glass capsule with the morphing pill for free, and the classic bar on iOS 18 for free. Every custom reimplementation costs the glass, the fallback, and the accessibility behavior.

Liquid Glass on chrome only. Nav bars, tab bars, sliders, and sheets. Never behind body text, never stacked, always with a defined fallback below iOS 26.

Apple's animation rules. Springs rather than easing curves, every animation interruptible and reversible, gesture-driven motion continuing from release velocity, system navigation transitions rather than custom ones, SF Symbol morphs, and haptics fired at animation start. Reduce Motion and Reduce Transparency treated as correctness requirements, not polish.

The things that get forgotten. A Light / Dark / System appearance switcher in settings. Loading, empty, and error states on every list. App Store requirements on auth and paywall screens that cause real rejections — Sign in with Apple, a visible close button, Restore Purchases.

Structure

vibekiller/
├── SKILL.md                            # workflow, the three laws, final checklist
└── references/
    ├── primitives.md                   # color, type, spacing, radius, touch targets, states
    ├── motion.md                       # animation rules, transitions, haptics
    ├── liquid-glass.md                 # iOS 26 glass + fallback ladder
    ├── ai-chat.md                       # chat and assistant patterns
    ├── social-feed.md                   # feeds, timelines, infinite scroll
    ├── ios-native.md                    # settings, forms, standard app chrome
    └── auth-onboarding-paywall.md       # sign-in, onboarding, subscription screens

Claude Code loads SKILL.md plus only the references relevant to what it's building.

Install

Clone into your personal skills directory:

git clone https://github.com/UsernameDenzy/vibekiller.git ~/.claude/skills/vibekiller

Or, for a single project, into .claude/skills/ at the project root so it's versioned with the code and shared with anyone who clones the repo.

Start a new Claude Code session and it's picked up automatically.

Use

There's nothing to invoke. Ask for UI work and it fires:

build the chat screen
add a settings page with notification toggles
make the feed load more posts when you scroll

It first asks whether you want the full app design or just a few test screens. Test screens get sensible defaults and no interview; a full app gets one round of branding questions (name, accent color, icon, tone, platforms) before the spec.

If no design spec appears before the code, the skill didn't trigger. That's the fastest way to tell.

Requirements

Liquid Glass needs iOS 26 and Xcode 26. Everything degrades gracefully below that — system components automatically, custom surfaces via .ultraThinMaterial (iOS 15+).

React Native projects want expo-router native tabs, expo-glass-effect, react-native-reanimated, @shopify/flash-list, react-native-keyboard-controller, expo-symbols, and expo-haptics. Glass requires a development build; it does not work in Expo Go.

License

MIT

Support

If you liked VibeKiller, I'd appreciate any support — you can buy me a coffee.