{"slug": "a-claude-code-skill-fixed-my-app-s-ui-here-s-what-broke-and-how-to-use-it", "title": "A Claude Code skill fixed my app's UI — here's what broke and how to use it yourself", "summary": "A developer used a Claude Code skill to fix UI inconsistencies across 14 screens of BrandMeld, a Flutter-based AI brand generator. The skill replaced varied headers with a unified gradient pattern, converted a gray settings wall into grouped cards, simplified an 8-field form to name-only with smart defaults, and redesigned a paywall to emphasize loss aversion. It also caught rendering bugs from screenshots, demonstrating that a rubric-in-a-file can enforce a consistent design system.", "body_md": "My app worked. It just looked like three different apps stitched together.\n\n**BrandMeld** (Flutter, AI brand generator) had grown screen by screen: some had plain `AppBar`\n\ns, some had gradient heroes, settings was a gray `ListTile`\n\ndump, 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.\n\nInstead 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.\n\n**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.\n\n**2. A settings screen that was a wall of gray rows.** Became iOS-style grouped cards with tinted icon badges — scannable in a glance.\n\n**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.\"\n\n**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.\n\n**5. Actual rendering bugs — caught from screenshots.** This surprised me. I'd send a screenshot and it diagnosed things code review misses:\n\n`Clip.antiAlias`\n\non the same container),The screenshot *is* the debugger.\n\n\"Redesign this\" gives you noise. The skill encodes a rubric the model follows every time:\n\n60/30/10 color system\n\nnamed patterns (floating stat strips, grouped cards, gradient headers)\n\nThat's the difference between one-off prettiness and a **consistent design system**.\n\nA skill is just a folder with a `SKILL.md`\n\n. Drop it in:\n\n`.claude/skills/<name>/SKILL.md`\n\n`~/.claude/skills/<name>/SKILL.md`\n\nClone the repo into that folder, restart Claude Code, done.\n\nPoint it at a screen:\n\n\"Redesign the settings screen. Apply the design principles.\"\n\nThen iterate with screenshots:\n\n\"The avatar's hidden — fix it.\"\n\nIt keeps your logic/routing and rewrites the layout. You review UI, not re-test features.\n\nThe real lesson: **you can package any discipline into a skill.** A `SKILL.md`\n\nis tiny:\n\n```\nmarkdown\n---\nname: my-skill\ndescription: \"What it does AND when to use it. This is how Claude decides to load it.\"\n---\n\n# Instructions\nThe rules/steps Claude should follow when this runs.\n\nEncode your conventions — API patterns, test style, commit format — once, and get consistent output forever.\n\nTakeaway\n\nThe 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.\n\nSkill (clone + drop into .claude/skills/): https://github.com/ceorkm/mobile-app-ui-design\n\nIf you try it, send me a before/after — those are the fun ones.\n```\n\n", "url": "https://wpnews.pro/news/a-claude-code-skill-fixed-my-app-s-ui-here-s-what-broke-and-how-to-use-it", "canonical_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_at": "2026-08-17 12:03:47+00:00", "updated_at": "2026-08-17 12:13:02.503712+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "generative-ai"], "entities": ["Claude Code", "BrandMeld", "Flutter", "GitHub"], "alternates": {"html": "https://wpnews.pro/news/a-claude-code-skill-fixed-my-app-s-ui-here-s-what-broke-and-how-to-use-it", "markdown": "https://wpnews.pro/news/a-claude-code-skill-fixed-my-app-s-ui-here-s-what-broke-and-how-to-use-it.md", "text": "https://wpnews.pro/news/a-claude-code-skill-fixed-my-app-s-ui-here-s-what-broke-and-how-to-use-it.txt", "jsonld": "https://wpnews.pro/news/a-claude-code-skill-fixed-my-app-s-ui-here-s-what-broke-and-how-to-use-it.jsonld"}}