ultra-ui

Ultra UI skill - combines Google's DESIGN.md spec (machine-readable design tokens) with the ui-ux-pro-max knowledge base (91 styles, 161 palettes, 73 font pairings, 161 products, 104 UX guidelines, 25 chart types). Generates lint-clean DESIGN.md files, validates token references and WCAG contrast, exports Tailwind/DTCG tokens, and diffs design systems version-over-version.

Zur Installation springen

Repository: InugamiDev/ultrathink-oss
Letzte Quellaktivität: 14. Mai 2026 um 13:24
Erkannte Sprache von SKILL.md: Englisch
Sterne: 43
Forks: 10

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/InugamiDev/ultrathink-oss --skill ultra-ui

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Datei-Explorer

83 Dateien

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

design-kit

Unified design foundations — design system architecture, tokens, component specs, visual principles, creative vision, figma integration, plus brand design system loader (66 real brands via DESIGN.md). Absorbs design, design-system, design-systems, design-principles, design-router, creative-vision, figma, design-md.

2026-05-14

preview

Render, summarize, and present markdown documents and structured content in multiple output modes

2026-05-14

ut-init

Initialize UltraThink capabilities in the current project directory

2026-05-14

Alle aus diesem Repository ansehen

ultra-ui

Ultra UI turns UI/UX research, product fit, style selection, palette selection, and font pairing into canonical DESIGN.md output. Treat DESIGN.md as the source of truth; generated Tailwind, CSS, or DTCG tokens are exports.

Decision Tree

What does the user need? | +- "Generate a DESIGN.md from scratch" | +- Has style/palette/font/product keywords -> lib/generate | +- Has a product brief only -> scripts/search.py --design-system, then lib/generate | +- Needs exact DESIGN.md schema -> references/design-md-format.md | +- "Validate a DESIGN.md" | +- Structural/token/WCAG lint -> lib/lint or lib/index validate | +- Needs rule explanations -> references/design-md-validation.md | +- Broken refs or contrast warnings -> fix tokens first, prose second | +- "Diff two DESIGN.md files" | +- Version-over-version review -> lib/diff | +- Regression found -> inspect removed/modified tokens and lint delta | +- "Convert DESIGN.md to Tailwind config" | +- Tailwind v3 JSON -> lib/export --format tailwind | +- Tailwind v4 CSS variables -> lib/export --format css-tailwind | +- W3C design tokens -> lib/export --format tokens | +- "Choose style / color / font / theme" | +- Full recommendation -> scripts/search.py "<query>" --design-system | +- Deep dive by domain -> scripts/search.py "<query>" --domain <domain> | +- Persist classic design-system docs -> scripts/search.py "<query>" --design-system --persist | +- "Build / design a page or component" | +- From scratch, wants durable tokens -> generate DESIGN.md first | +- From scratch, wants code -> use DESIGN.md tokens, then implement | +- Has a .pen file to edit -> stitch workflow, then extract DESIGN.md | +- Wants full pipeline -> inspire -> define DESIGN.md -> implement -> validate | +- "Review / audit existing UI" | +- Quick check -> Pre-Delivery Checklist | +- Token/system audit -> extract or write DESIGN.md, then lint | +- Accessibility audit -> WCAG notes + ux-guidelines search | +- "Fix / improve existing UI" | +- Broken or inconsistent -> normalize tokens into DESIGN.md | +- Boring or generic -> style/color/font search, then revise DESIGN.md | +- Pre-launch quality pass -> lint + checklist + responsive validation | +- "Match a real brand's style" | +- Brand reference exists -> design-kit/getdesign, then translate to DESIGN.md | +- Brand reference absent -> infer tokens, document rationale, lint | +- "Implement Stitch/Pencil design as code" +- Extract design DNA -> DESIGN.md tokens + prose +- Implement -> code from DESIGN.md, export Tailwind if useful

ultra-ui

Decision Tree

name	ultra-ui
description	Ultra UI skill - combines Google's DESIGN.md spec (machine-readable design tokens) with the ui-ux-pro-max knowledge base (91 styles, 161 palettes, 73 font pairings, 161 products, 104 UX guidelines, 25 chart types). Generates lint-clean DESIGN.md files, validates token references and WCAG contrast, exports Tailwind/DTCG tokens, and diffs design systems version-over-version.
layer	domain
category	design
triggers	["/design-pipeline","/ui-pipeline","SaaS dashboard","UI review","UX improvement","WCAG compliance","accessibility audit","add styles","admin panel","ai design","award-winning","beautify","build UI","build a dashboard","build a form","build a landing page","build component","color scheme","complex layout","component design","create a website","create dialog","create screen","create table","create the UI for","create ui","css variables","dark mode","design a","design a component","design a page","design card","design from scratch","design guidelines","design modal","design navigation","design review","design screen","design sidebar","design system","design this screen","design to code","design with stitch","elevate ui","fix ui","generate design","generate ui","improve ui","interface design","landing page design","looks bad","looks ugly","make a page","make it look better","make it look good","make it pretty","mockup","needs polish","pen file","pencil design","pixel perfect","polish the ui","premium UI","professional design","redesign","responsive design","shadcn","stitch","style component","style it","style this","tailwind","theme","ui","ui components","ui design","ui guidelines","user interface","web design","wireframe to code","DESIGN.md","design tokens","design.md","design lint","design diff","tailwind tokens","design token export"]

name	ultra-ui
description	Ultra UI skill - combines Google's DESIGN.md spec (machine-readable design tokens) with the ui-ux-pro-max knowledge base (91 styles, 161 palettes, 73 font pairings, 161 products, 104 UX guidelines, 25 chart types). Generates lint-clean DESIGN.md files, validates token references and WCAG contrast, exports Tailwind/DTCG tokens, and diffs design systems version-over-version.
layer	domain
category	design
triggers	["/design-pipeline","/ui-pipeline","SaaS dashboard","UI review","UX improvement","WCAG compliance","accessibility audit","add styles","admin panel","ai design","award-winning","beautify","build UI","build a dashboard","build a form","build a landing page","build component","color scheme","complex layout","component design","create a website","create dialog","create screen","create table","create the UI for","create ui","css variables","dark mode","design a","design a component","design a page","design card","design from scratch","design guidelines","design modal","design navigation","design review","design screen","design sidebar","design system","design this screen","design to code","design with stitch","elevate ui","fix ui","generate design","generate ui","improve ui","interface design","landing page design","looks bad","looks ugly","make a page","make it look better","make it look good","make it pretty","mockup","needs polish","pen file","pencil design","pixel perfect","polish the ui","premium UI","professional design","redesign","responsive design","shadcn","stitch","style component","style it","style this","tailwind","theme","ui","ui components","ui design","ui guidelines","user interface","web design","wireframe to code","DESIGN.md","design tokens","design.md","design lint","design diff","tailwind tokens","design token export"]

Token Group	Shape	Notes
`version`	string	Optional; upstream alpha uses `alpha`.
`name`	string	Human-readable design system name.
`description`	string	Optional summary.
`colors`	map of token to hex color	Values must be sRGB hex strings such as `"#2563EB"`.
`typography`	map of token to typography object	Supports `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`, `fontFeature`, `fontVariation`.
`rounded`	map of scale token to dimension	Use `none`, `sm`, `md`, `lg`, `xl`, `full` unless a domain needs more.
`spacing`	map of scale token to dimension or number	Use 4px/8px-derived rhythm.
`components`	map of component token to property tokens	Use references for `backgroundColor`, `textColor`, `typography`, `rounded`, `padding`, `size`, `height`, `width`.

Order	Section	When To Include
1	`## Overview`	Always; product fit, personality, density, audience.
2	`## Colors`	Always when colors exist; explain role and contrast.
3	`## Typography`	Always when typography exists; explain hierarchy and loading.
4	`## Layout`	Grid, spacing, breakpoints, safe areas.
5	`## Elevation & Depth`	Shadows, borders, tonal layering, blur policy.
6	`## Shapes`	Radius scale and shape language.
7	`## Components`	Buttons, cards, forms, nav, states.
8	`## Do's and Don'ts`	Guardrails and anti-patterns.

Domain	Count	File	Example Keywords
Styles	91	`data/styles.csv`	glassmorphism, minimalism, bento grid, spatial design, calm UI
Color palettes	161	`data/colors.csv`	SaaS, ecommerce, healthcare, beauty, fintech
Font pairings	73	`data/typography.csv`	elegant, playful, professional, modern
Product types	161	`data/products.csv`	SaaS, e-commerce, portfolio, healthcare
UX guidelines	104	`data/ux-guidelines.csv`	animation, accessibility, view transitions, APCA, popover
Chart types	25	`data/charts.csv`	trend, comparison, timeline, funnel, pie
Google Fonts	1,923	`data/google-fonts.csv`	sans serif, monospace, japanese, variable
Icons	105	`data/icons.csv`	action icons, navigation icons, status icons
Landing patterns	34	`data/landing.csv`	hero, social proof, conversion, pricing
App interface rules	30	`data/app-interface.csv`	layout, state, interaction, accessibility
React performance	44	`data/react-performance.csv`	memoization, suspense, hydration, bundle
Stacks	16	`data/stacks/*.csv`	angular, astro, flutter, html-tailwind, jetpack-compose, laravel, nextjs, nuxt-ui, nuxtjs, react-native, react, shadcn, svelte, swiftui, threejs, vue

ultra-ui

Installationsoptionen

Quelldateien prüfen

ultra-ui

Decision Tree

ultra-ui

Decision Tree

Canonical DESIGN.md Format

Token Schema

Section Order

Data Assets

Quick Start

Generate From A Brief

Validate Existing DESIGN.md

Diff Two Versions

CLI Search Workflow

Token Reference Resolution Rules

WCAG Contrast Notes

Pre-Delivery Checklist

DESIGN.md

Visual Quality

Interaction And Accessibility

Responsive

References Index

Attribution

Reference	Read When
`references/design-md-spec.md`	Need the normative DESIGN.md schema and consumer behavior.
`references/design-md-format.md`	Need to write or repair DESIGN.md structure.
`references/design-md-validation.md`	Need lint rule meanings, WCAG notes, or diff review guidance.
`references/ux-laws.md`	Need UX laws, heuristics, and Gestalt principles.
`references/design-languages.md`	Need a named design language or style direction.
`references/color-systems.md`	Need OKLCH, semantic tokens, dark mode, or accessible palette strategy.
`references/themes.md`	Need ready-made theme palettes and exact hex values.
`references/component-patterns.md`	Need button/card/input/form implementation patterns.
`references/stitch-workflow.md`	Need Stitch or Pencil MCP design workflows.
`references/font-pairings.md`	Need curated type pairing options.
`references/design-systems.md`	Need examples from established design systems.
`references/composition-rules.md`	Need visual hierarchy, grid, balance, and composition rules.
`references/illustration-backends.md`	Need custom illustration generation backends.
`references/modern-techniques.md`	Need modern CSS, animation, token, APCA, or platform techniques.
`references/modern-patterns.md`	Need bento, kinetic, AI chat, command palette, or spatial UI patterns.
`references/operator-console-style.md`	Need dense control-plane/operator-console aesthetics.
`references/ui-styling/shadcn-components.md`	Need shadcn/ui component usage.
`references/ui-styling/shadcn-theming.md`	Need shadcn theme and CSS variable guidance.
`references/ui-styling/shadcn-accessibility.md`	Need shadcn ARIA, focus, and keyboard patterns.
`references/ui-styling/tailwind-utilities.md`	Need Tailwind utility class guidance.
`references/ui-styling/tailwind-responsive.md`	Need responsive Tailwind and container query patterns.
`references/ui-styling/tailwind-customization.md`	Need Tailwind theme customization and plugins.
`references/ui-styling/canvas-design-system.md`	Need canvas-based visual design philosophy.

ultra-ui

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

ultra-ui

Decision Tree

Mehr aus diesem Repository

ultra-ui

Decision Tree

Canonical DESIGN.md Format

Token Schema

Section Order

Data Assets

Quick Start

Generate From A Brief

Validate Existing DESIGN.md

Diff Two Versions

CLI Search Workflow

Token Reference Resolution Rules

WCAG Contrast Notes

Pre-Delivery Checklist

DESIGN.md

Visual Quality

Interaction And Accessibility

Responsive

References Index

Attribution