smileemir

Consistent Web UI — AI skill for Claude Code

AI community

Agent Skill that makes AI-built websites look like one consistent, professional product: one theme source, shared components, honest content, accessible layouts and balanced motion.

How to install Consistent Web UI

This entry records only its repository, not the path inside it, so there is no exact command to give. Open smileemir/consistent-web-ui and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Consistent Web UI does

Agent Skill that makes AI-built websites look like one consistent, professional product: one theme source, shared components, honest content, accessible layouts and balanced motion.

Alternatives in AI

Guizang Ppt Skill — AI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts 24.9k ★
Skill Seekers Roadmap — Transform Skill Seekers into the easiest way to create Claude AI skills from any knowledge source - documentat 11.1k ★
Bot On Anything — A large model-based chatbot builder that can quickly integrate AI models (including ChatGPT, Claude, Gemini) i 4.2k ★

README

Consistent Web UI

[![tests](https://github.com/smileemir/consistent-web-ui/actions/workflows/tests.yml/badge.svg)](https://github.com/smileemir/consistent-web-ui/actions/workflows/tests.yml) [![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![Agent Skills](https://img.shields.io/badge/Agent%20Skills-compatible-23483F.svg)](https://agentskills.io)

**An Agent Skill that makes AI-built websites look like one product, not twenty prompts.**

![A new shop built by the skill from an empty folder, on desktop in the light theme and on a phone in the dark theme](docs/images/new-shop-home.png)

*A new shop built from an empty folder: one theme source, light and dark themes, and yellow owner placeholders where real facts are still missing.*

AI coding assistants often design each page as if nobody had seen the others: three button styles, five greys, spacing picked at random, a dark mode that breaks half the site, invented "only 3 left!" badges. Consistent Web UI gives the assistant a method instead of a mood board:

one theme source;
shared roles for colour, spacing, type, layers and motion;
reusable components with every state designed;
real data only;
verification on an actually rendered page.

It works in any assistant that supports the open Agent Skills format, and with any frontend stack.

What it does

Audits existing sites before touching them. It inventories every route template, theme source, token gap and inconsistency, then writes one Markdown report. You pick what to change, and it changes one approved page at a time.
Stays in its lane. Frontend only. Backend, database, API, payment and permission changes need your separate approval. Existing buttons keep doing exactly what they did.
Builds new sites on one theme source. It fills in a design contract with you and starts from a semantic token file with light/dark themes, a layer (z-index) scale and motion roles, or from your framework's own theme (T