UI Design Intelligence

World-class UI/UX design intelligence — Tvastar v4.0. TRIGGER on: /design /preview /approved /apply /review /ship /component /heal /tokens /dark /a11y /cro /color /typography /motion /extract /storybook, build page, build component, landing page, hero section, dashboard, nav, card, animation, dark mode, layout, color palette, typography, redesign, make it look better, add animations, style this, improve UI, add polish, professional look, modern design, review my code, check before deploy, is this ready to ship.

5 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add DevvNirvana/tvastar-design-claude-code-skill --skill ui-design-intelligence

Manual install

git clone --depth 1 https://github.com/DevvNirvana/tvastar-design-claude-code-skill.git /tmp/tvastar-design-claude-code-skill
mkdir -p ~/.claude/skills
cp -r /tmp/tvastar-design-claude-code-skill/. ~/.claude/skills/ui-design-intelligence

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# UI Design Intelligence — Tvastar v4.0
**18 libraries · 24 styles · 86 lint rules · 14 intelligent slots · March 2026**

---

## The /design Workflow — 7 Steps (follow in exact order)

### Step 1 — Scan the stack
```bash
python3 .claude/skills/ui-design-intelligence/scripts/detect_stack.py
```
Detects: framework, Tailwind v3/v4, all 18 libraries (React Bits, Aceternity, Magic UI,
Tremor, Animata, Motion Primitives, Cult UI, Eldora UI, Kibo UI, Origin UI, etc.)

**READ NOW based on detection:**
- `has_react_bits: true` → read `references/react-bits-catalog.md`
- Any new 2026 lib detected → read `references/component-library-catalog.md`
- Next.js detected → read `references/nextjs-guidelines.md` (Next.js 15 + React 19)
- shadcn/tailwind detected → read `references/shadcn-tailwind-guidelines.md`
- Vue/Nuxt detected → read `references/vue-svelte-guidelines.md`

### Step 2 — Understand the request
Extract: **What** (page/component), **Aesthetic** (style keywords), **Constraints**, **Existing colors**.
Ask ONE clarifying question only if completely blocked. Never ask multiple questions.

### Step 3 — Live Research (always run)
**READ NOW:** `references/resources-blogs.md` — full search routing brain with 2026-updated sources.

Run at minimum 2 web searches:
```
1. "[product type] design inspiration 2026 site:dribbble.com"
2. "[aesthetic] UI site:godly.website OR site:awwwards.com"
3. (if new library needed) "[library name] component examples site:github.com"
```

Read the full skill on GitHub

Details

Skill name: ui-design-intelligence
Repository: DevvNirvana/tvastar-design-claude-code-skill
Repo updated: 13 April 2026

FAQ

What does the UI Design Intelligence skill do?

How do I install the UI Design Intelligence skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add DevvNirvana/tvastar-design-claude-code-skill --skill ui-design-intelligence. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is UI Design Intelligence popular?

It lives in DevvNirvana/tvastar-design-claude-code-skill, which has 5 GitHub stars and 0 forks.

Related skills

Visual Identity Designer

ali4o/visual-identity-designer

Build a professional, precise visual identity (brand identity) for a project, startup, or business — logo direction, color system, typography, application mockups — via a structured 9-stage agency workflow ending in two polished deliverables — a Brand Identity Guide and a Design Language System (built with the docx skill, in the user's chosen language). Trigger any time the user attaches, pastes, or describes a project idea/brief and asks for a "visual identity", "brand identity", "logo", "branding", "brand kit", "brand guide", "design language system", "هوية بصرية", or similar — even without

Frontend & Design

Project Steward

CheshireMew/project-steward

从项目过程与结果提炼治理方法并在明确要求时自我进化；按实施计划审计完成度，研究整理仓库，预防返工，沿根因修复跨层缺陷，治理架构、目录职责、用户链、UI/UX、文档、日志、环境与发布。Use for project-history learning/evolution; audit a plan or repository; understand or organize a codebase; inspect external-tool compatibility, durable operations, and project governance. Excludes isolated function, security, dependency, CI, or monitoring-only work.

Frontend & Design

Scrollytelling Brand Site

abdelrhman2007/scrollytelling-brand-site

Build an award-level, scroll-told company website with a story told through scroll, a WebGL "layer by layer" 3D print scene, pinned sections, per-service 3D models, a projects gallery, an About page, an optional .NET + SQL Server CMS with contact inbox and private QR contact cards, tuned to near-zero idle CPU/GPU and fully responsive. Use when the user asks for an amazing, premium, Awwwards-style, scrollytelling or 3D website for a company or brand, wants "a site like the Demo House of Prototyping site", or gives a company profile or deck to turn into an immersive site.

Frontend & DesignIn 1 list

Nasapunk Design

duanth/NASA-Punk-UI-SKILL

NASApunk retro-futurist frontend design system with a Starfield-inspired modern layer — NASA golden age (1960s–1980s) aesthetic evolved with Starfield's contemporary polish, for building or restyling web pages. Worn white baked-paint panels, gold Kapton insulation foil crinkle gradients, worm-style single-stroke red wordmark, Swiss grid typography (Helvetica + monospace stencil labels), technical documentation textures (rubber stamps, blueprint grids, hazard stripes, rivets, monospace spec tables, mission patches, doc-control bars) — plus Constellation-style four-color emblem stripes, soft-sha

Frontend & Design

Tastegate

stas4000/tastegate

Build or fix a frontend (landing page, marketing site, dashboard, app screen, component) so it looks designed, not AI-generated, and prove it in a real browser before calling it done. Picks a design direction first (taste), builds on a craft floor (impeccable-style rules), then runs scripts/gate.py, which renders the page at phone and desktop width and fails on overlapping text, sideways scroll, low contrast, tiny tap targets, AI purple gradients, gradient text, emoji icons, eyebrow labels, default fonts, three-equal-card grids and placeholder copy. Use for any UI build, redesign, polish or "m

Frontend & DesignIn 1 list

Logo to Stickers

huyanxius/logo-to-stickers

Turn a logo, brand mark, or existing IP into a consistent set of playful die-cut paper stickers. Use for brand character extensions, logo personification, website sticker assets, or sticker variations that need actual transparent images; not for redesigning the logo itself.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.