# A Claude Code skill fixed my app's UI — here's what broke and how to use it yourself

> Source: <https://dev.to/tony_stark_h/a-claude-code-skill-fixed-my-apps-ui-heres-what-broke-and-how-to-use-it-yourself-1k0g>
> Published: 2026-08-17 12:03:47+00:00

My app worked. It just looked like three different apps stitched together.

**BrandMeld** (Flutter, AI brand generator) had grown screen by screen: some had plain `AppBar`

s, some had gradient heroes, settings was a gray `ListTile`

dump, spacing was random, and the "create brand" form asked for 8 fields before you could do anything. Every screen was *fine* in isolation and inconsistent as a whole.

Instead of hand-fixing 14 screens, I installed a **Claude Code skill** built for mobile UI/UX and pointed it at them. This post is the concrete before/after — the actual problems it fixed — plus how you install and use it.

**1. No shared header language.** Every screen reinvented its top bar. The skill replaced them with one full-width gradient header pattern (back button + actions merged in), so the app reads as one product.

**2. A settings screen that was a wall of gray rows.** Became iOS-style grouped cards with tinted icon badges — scannable in a glance.

**3. An 8-field create form.** Reworked to *name-only required*, with the rest behind an "Add more details" expander. Then it added a smart default I didn't ask for: pick a preset industry → target audience + keywords auto-fill (without overwriting anything you typed). Cognitive load dropped from "fill a form" to "type a name."

**4. A dead-end paywall.** "Your trial ended." → a card that lists **what you lose access to** (names, palettes, logos, brand guides, saved brands) with lock icons. Loss aversion instead of a shrug.

**5. Actual rendering bugs — caught from screenshots.** This surprised me. I'd send a screenshot and it diagnosed things code review misses:

`Clip.antiAlias`

on the same container),The screenshot *is* the debugger.

"Redesign this" gives you noise. The skill encodes a rubric the model follows every time:

60/30/10 color system

named patterns (floating stat strips, grouped cards, gradient headers)

That's the difference between one-off prettiness and a **consistent design system**.

A skill is just a folder with a `SKILL.md`

. Drop it in:

`.claude/skills/<name>/SKILL.md`

`~/.claude/skills/<name>/SKILL.md`

Clone the repo into that folder, restart Claude Code, done.

Point it at a screen:

"Redesign the settings screen. Apply the design principles."

Then iterate with screenshots:

"The avatar's hidden — fix it."

It keeps your logic/routing and rewrites the layout. You review UI, not re-test features.

The real lesson: **you can package any discipline into a skill.** A `SKILL.md`

is tiny:

```
markdown
---
name: my-skill
description: "What it does AND when to use it. This is how Claude decides to load it."
---

# Instructions
The rules/steps Claude should follow when this runs.

Encode your conventions — API patterns, test style, commit format — once, and get consistent output forever.

Takeaway

The win isn't "AI writes UI." It's that a rubric-in-a-file tura cohesive one in an afternoon, and caught rendering bugs fromscreenshots along the way.

Skill (clone + drop into .claude/skills/): https://github.com/ceorkm/mobile-app-ui-design

If you try it, send me a before/after — those are the fun ones.
```