Updated 3mo ago
by Jason904
ui-skill-lab
AI-driven UI development skill pipeline — test lab for Codex skills covering PRD-to-pixel workflow
142 GitHub stars (142)
| Period | New stars |
|---|---|
| Sep 27 | 0 |
| Sep 28 | 0 |
| Sep 29 | 0 |
| Sep 30 | 0 |
| Oct 1 | 0 |
| Oct 2 | 0 |
| Oct 3 | 0 |
| Oct 4 | 0 |
| Oct 5 | 0 |
| Oct 6 | 0 |
| Oct 7 | 0 |
| Oct 8 | 0 |
| Oct 9 | 0 |
| Oct 10 | 0 |
| Oct 11 | 0 |
| Oct 12 | 0 |
| Oct 13 | 0 |
| Oct 14 | −4 |
| Oct 15 | +1 |
| Oct 16 | +1 |
- 15 skills (15 skills found in its SKILL.md files)
- 9 forks (9 forks)
- 3mo ago last update (Last updated 3mo ago)
Install
Skills CLI
npx skills add Jason904/ui-skill-lab
Asks which skills and agents to install. Just one: npx skills add Jason904/ui-skill-lab --skill design-system-governor — add -g for every project.
Claude Code
git clone https://github.com/Jason904/ui-skill-labcp -r "ui-skill-lab/skills/design-system-governor" ~/.claude/skills/
Copies the design-system-governor skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add Jason904/ui-skill-lab
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
design-system-governor
This skill should be used after visual-spec-review passes and before OpenSpec UI update or frontend implementation. It expands screenshot-derived visual specs into a production design system by adding interaction states, responsive behavior, accessibility rules, UX checklist, and implementation constraints without overriding UI type, layout paradigm, component tree, rejected assumptions, or asset…
skills/design-system-governor/SKILL.md on GitHub (opens in a new tab) -
image2-prompt-pack
This skill should be used when the user asks to convert a PRD, OpenSpec change, or product idea into a structured GPT Image 2 UI prompt pack for generating high-fidelity flat UI reference images. It produces prompt materials, UI type decisions, variants, negative prompts, and reference selection checklists, not frontend code.
skills/image2-prompt-pack/SKILL.md on GitHub (opens in a new tab) -
spec-compliance-review
This skill should be used after Codex implements a UI change and before visual acceptance review. It audits source code against project-specific visual specs, design tokens, component tree, design-system rules, OpenSpec implementation strategy, UI type, layout paradigm, and asset strategy. It reports violations without redesigning or modifying code.
skills/spec-compliance-review/SKILL.md on GitHub (opens in a new tab) -
ui-ux-pro-max-skill
Use for UI/UX design intelligence in Codex: planning, building, reviewing, improving, or implementing web/mobile interfaces, landing pages, dashboards, design systems, components, accessibility, color palettes, typography, spacing, motion, charts, responsive layouts, and stack-specific frontend guidance. Provides searchable UI/UX Pro Max data with product patterns, 67 UI styles, 161 color palette…
skills/ui-ux-pro-max-skill/SKILL.md on GitHub (opens in a new tab) -
visual-acceptance-review
This skill should be used after spec-compliance-review and before visual-diff-fix. It captures or analyzes actual browser screenshots and compares them against the reference design, responsive spec, visual tokens, layout spec, component tree, UI type, layout paradigm, and asset strategy. It outputs structured visual diff reports and fix-tasks without modifying code.
skills/visual-acceptance-review/SKILL.md on GitHub (opens in a new tab) -
visual-diff-fix
This skill should be used after visual-acceptance-review has generated fix-tasks.json. It applies precise visual fixes from structured diff tasks, preserves source-of-truth contracts, avoids redesign and unrelated refactors, validates each batch, and outputs resolved fix task reports.
skills/visual-diff-fix/SKILL.md on GitHub (opens in a new tab) -
visual-spec-review
This skill should be used after visual-to-spec has produced 03_visual_spec/ and before design-system-governor or frontend implementation begins. It independently reviews extracted visual specs against the reference screenshot, UI type, layout paradigm, visible-element evidence, rejected assumptions, and asset strategy, catching hallucinations, inconsistencies, and implementation blockers.
skills/visual-spec-review/SKILL.md on GitHub (opens in a new tab) -
visual-to-spec
Use when a user provides a reference UI screenshot and asks to extract visual specs, generate design tokens, create a component tree, or produce a frontend implementation contract, including dashboards, landing pages, mobile screens, image-led UIs, panorama scenes, 3D exhibit UIs, and screenshot-to-spec tasks.
skills/visual-to-spec/SKILL.md on GitHub (opens in a new tab) -
ckm:banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, du…
skills/ui-ux-pro-max-skill/.claude/skills/banner-design/SKILL.md on GitHub (opens in a new tab) -
ckm:brand
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
skills/ui-ux-pro-max-skill/.claude/skills/brand/SKILL.md on GitHub (opens in a new tab) -
ckm:design-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
skills/ui-ux-pro-max-skill/.claude/skills/design-system/SKILL.md on GitHub (opens in a new tab) -
ckm:design
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, bu…
skills/ui-ux-pro-max-skill/.claude/skills/design/SKILL.md on GitHub (opens in a new tab) -
ckm:slides
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
skills/ui-ux-pro-max-skill/.claude/skills/slides/SKILL.md on GitHub (opens in a new tab) -
ckm:ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating vi…
skills/ui-ux-pro-max-skill/.claude/skills/ui-styling/SKILL.md on GitHub (opens in a new tab) -
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. P…
skills/ui-ux-pro-max-skill/.claude/skills/ui-ux-pro-max/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.
Similar skills
-
ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod…
-
reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries.
-
ui-ux-pro-max-skillby nextlevelbuilder An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
-
graphifyby Graphify-Labs Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Curs…
-
agent-skillsby addyosmani Production-grade engineering skills for AI coding agents.
-
paperclipby paperclipai The open-source app everyone uses to manage agents at work