4.8K Stars! A Set of Rules That Makes AI Write Frontend Code That "Looks Human-Written"

Getting AI to write frontend code is nothing new. But the problem is — the code AI produces always feels "a bit off": styles are misused, accessibility attributes are missing, animations stutter, metadata is incomplete, and Tailwind class names are thrown together carelessly. It's not that AI isn't capable; it's that no one told AI what "good" looks like.

Recently, a project called ui-skills has gone viral, hitting 4.8K Stars and appearing on GitHub Trending multiple times. It doesn't write code or generate components. It does just one thing — translates frontend development best practices into rules that AI can understand and execute.

1. The Biggest Problem with AI-Written Frontend Code Isn't "Can It Write?" — It's "Is It Written Correctly?"

If you've been using Cursor or Claude Code for frontend work lately, you've probably run into this:

You ask AI to write a login form. The code runs, and the functionality works. But when you look closely: h-screen is used inside a mobile scroll container — on some browsers, an extra scrollbar appears. Button clicks have no focus management, so keyboard users have no idea whether they clicked. Animations use width and height transitions, triggering reflow on every frame — on low-end devices, it turns into a slideshow. The page title and description aren't configured — sharing on social media shows a blank preview.

Functionality works. Experience is terrible.

This isn't an AI capability problem — it's that AI doesn't know what "good" means. Large models have seen millions of web pages, but they can't distinguish between "code that runs" and "engineering-grade code that holds up under scrutiny."

That's why ui-skills was born.

2. What Is ui-skills?

ui-skills is a collection of UI skills for design engineers, created by developer ibelick.

Its core goal is direct: turn the experiential constraints of interface implementation and review into rules that AI coding agents can understand and execute.

It's not a component library; it's a "rules layer" — you can think of it as an extremely detailed "Frontend Code Specification," but not a document for humans to read. It's an instruction set written specifically for AI to read and execute directly.

As of now, the project has earned over 4.8k Stars and has topped GitHub Trending multiple times.

3. What Problem Does It Solve?

Most people, when asking AI to write frontend code, just throw the requirement at it: "Write me a login page." AI generates code based on the "average quality" in its training data — it runs, but quality varies wildly.

Different developers have wildly different coding styles. Within the same team, A's component uses h-dvh, while B's component still uses h-screen; C's button uses AlertDialog for delete confirmation, while D's just deletes on onClick.

Maintenance costs stay high because no one set rules for AI.

That's exactly what ui-skills does: define what "good code looks like" as explicit rules, so AI reads the rules before writing code and self-checks after writing.

4. How Is It Different from Rules and Skills?

Many will ask: Isn't this just Cursor Rules? Isn't it just a Skill?

They're related, but not the same thing.

Concept	Role	Analogy
Cursor Rules	Project-level constraints — "Don't use any" "Use pnpm"	Company policies
General Skills	Operational guide for a domain — "How to handle PDFs"	Job operation manual
ui-skills	Frontend UI "quality standard" — "What counts as good code"	Industry ISO certification standard

ui-skills is more like an "ISO standard for frontend code." It's not constraints for a specific project, nor a guide for a specific task, but a universal, battle-tested set of UI development specifications.

And it follows the standard SKILL.md format, so it can be loaded and used by any AI agent that supports the skill protocol — Claude Code, Cursor, GitHub Copilot, OpenClaw, Windsurf, Cline, and more.

5. Four Core Skills: Covering the Full Frontend Development Chain

ui-skills provides four core skill modules covering the key links in frontend development:

1. baseline-ui: Unified Interface Baseline

This is the most fundamental skill, standardizing:

• How to use Tailwind CSS — how class names combine, how responsive variants are written
• Component primitive selection — use Radix UI / Base UI / React Aria instead of rolling your own
• General typography and layout specifications
• Standardized implementation of common UI patterns

2. fixing-accessibility: Audit and Fix Accessibility Issues

Accessibility (a11y) is the area AI most easily overlooks. This skill specifically addresses:

• Missing or misused ARIA labels
• Focus management for keyboard navigation
• Correct labeling of form elements
• Use of semantic HTML

3. fixing-metadata: Check and Complete Page Metadata

SEO and social sharing metadata configuration:

• Page title and description
• Open Graph tags (og:title, og:description, og:image)
• Twitter Card configuration
• Structured data

4. fixing-motion-performance: Optimize Animation Performance

Animation is another area where AI easily stumbles:

• Only use transform and opacity for animations (GPU-accelerated, no reflow triggered)
• Prohibit animating properties that trigger reflow, like width, height, top, left
• Performance optimization for scroll-linked animations
• Prevention of layout jank

Additionally, there's an improve-ui skill for continuously improving UI quality.

6. Rules Are Executable, Not Vague Suggestions

The biggest difference between ui-skills and other specification documents: its rules are executable.

Ordinary spec documents say: "Pay attention to performance" "Care about accessibility" "Ensure code quality." AI reads them as if it read nothing — it doesn't know how to execute.

ui-skills' rules look like this:

• ✅ Animations must only use transform and opacity properties
• ❌ Prohibit using h-screen; use h-dvh instead
• ✅ Destructive actions must use AlertDialog for confirmation
• ✅ Fixed elements must respect safe-area-inset
• ✅ Form elements must have correct ARIA attributes and keyboard navigation support

Every rule is explicit, binary, and AI can directly judge "right or wrong."

7. Review Output: Not "You're Wrong," but "Here's an Issue, Suggested Fix"

When ui-skills reviews code, it outputs a structured audit report, listing item by item:

• Critical Violations: Severe violations, must fix
• Warnings: Warnings, recommended to fix
• ✅ Passed items

Each item includes:

• Location and content of the violating code
• Why it's a problem (impact explanation)
• Specific code-level fix suggestion

This output format is ideal for:

• Centralized checks before PR submission
• Team code reviews
• Quality gatekeeper during new hire onboarding

8. How to Use? Three Steps to Get Started

ui-skills offers multiple ways to use it. The simplest is to run it directly with npx:

npx ui-skills start

This launches an interactive interface where you select the current task type, and it automatically loads the corresponding skill set.

Other common commands:

npx ui-skills categories              # View all skill categories
npx ui-skills list --category motion   # List skills in a specific category
npx ui-skills get baseline-ui          # Get the full context of a specific skill

If you want to install skills into your project:

npx ui-skills init

This installs into the project and registers commands in supported tools.

You can also install a single skill:

npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

Or install manually:

curl -o SKILL.md https://github.com/ibelick/ui-skills/raw/main/SKILL.md

9. Use Cases: Who Needs It Most?

Scenario 1: Developers using AI for frontend but always feeling the quality is unstable. Install ui-skills, and AI-generated code will automatically follow the rules, significantly improving output quality.

Scenario 2: Teams where multiple people use AI to write code but styles are inconsistent. ui-skills can serve as the team's "AI code standard," ensuring consistent code style from everyone (and every AI).

Scenario 3: Doing Code Review but tired of repeating the same comments every time. Let ui-skills run an audit first, filtering out basic issues, so humans only need to focus on architecture and business logic.

Scenario 4: Projects with accessibility, performance, and SEO requirements but a team lacking experience. ui-skills is like having a "frontend quality expert" sitting next to you, checking your code anytime.

Final Thoughts

In frontend development in 2026, AI writing code is no longer the problem. The problem has become "What's the quality of the AI-written code?"

ui-skills solves exactly this — turning the definition of "good code" from human experience into rules AI can execute.

It's not about giving up Code Review, but about spending your Code Review time on more valuable things — architecture design, business understanding, user experience — instead of pointing out "missing aria-label here" or "used h-screen there" over and over again.

Rules are executable, suggestions are concrete, output is structured.

If you're using AI for frontend, ui-skills is worth a try.

GitHub: https://github.com/ibelick/ui-skills Website: https://ui-skills.com

Let's discuss in the comments: What quality issues do you encounter most often when using AI for frontend? Do you think this "rules layer" approach can solve them?