UI-stack – Claude skill that enforces design system on AI-generated UI

Name: UI-stack – Claude skill that enforces design system on AI-generated UI
Availability: InStock
Author: rashoodkhan

by rashoodkhan·Mar 19, 2026·2 points·1 comment

Visit Project View on HN

AI Analysis

●MidSlickShip It

Yet another Claude skill for UI consistency when Cursor rules already do this.

Strengths

•Modular file structure lets you update colors.md without regenerating entire system
•Browser config dashboard outputs tailored skill files instead of generic prompts
•Covers 5-state interactions and accessibility rules most AI UI generators ignore

Weaknesses

•Just structured markdown files — no actual enforcement mechanism beyond prompting
•Locked to Claude Code ecosystem when Cursor and Windsurf have similar features

Post Description

The problem with AI-generated frontend code is that without constraints, every generation picks different spacing, colors, and patterns. The 50th component looks nothing like the first. ui-stack is a Claude Code skill — a set of structured reference files that Claude reads when building UI.

It's built for Next.js + Tailwind + Shadcn but the principles are framework-agnostic. What's interesting about the "skill" approach vs. a system prompt: the reference is modular and file-based, so you can update one file (say, colors.md) and the change propagates everywhere. There's also a browser-based config dashboard so you can customize your brand palette and font before the skill activates. Would love feedback — especially from anyone who's tried to enforce design consistency across a large Claude Code project.