Designs polished, non-generic UI for TanStack Start, React, and Tailwind v4 apps.
npx skills add https://github.com/scomofo/midi-stage2 --skill design-ui-scomofo
Please help me install this Agent Skill. Skill: design-ui Source: https://github.com/scomofo/midi-stage2/tree/main/.grok/skills/design-ui Command: npx skills add https://github.com/scomofo/midi-stage2 --skill design-ui-scomofo
@theme, banning raw hex and arbitrary values in JSX. - Quantified quality rubric: Enforces limits like 3-5 colors, 2 font families, 44px tap targets, mobile-first layouts, and contrast-safe foreground/background pairing. - Anti-slop rules and motion recipes: Blocks gradient blobs, emoji icons, and placeholder images, and provides tokenized animation patterns (modals, menus, number pop-ins, icon swaps) via shadcn/ui and Radix primitives. - Use Case: When restyling a game's start screen and HUD, apply the overlay guidance to build a readable DOM layer over the canvas with concentric radii, staggered text reveals, and reduced-motion-safe transitions. ## Quick Start Use the design-ui skill to redesign this landing page with proper design tokens, typography, and motion so it looks polished instead of generic.High-intent search queries and answers about installing and using this skill.
Define a design system first: put palette, radii, and fonts as CSS variables in Tailwind v4 @theme, then compose from tokens. Ban ad-hoc hex values, emoji icons, gradient filler, and placeholder images, and limit yourself to 3-5 colors and 2 font families.
Tailwind v4 is CSS-first, so declare tokens inside an @theme block in your stylesheet as CSS variables like --color-bg and --radius. Consume them as Tailwind utilities throughout components, keeping one source of truth instead of inline values.
Use CSS transitions for interactive state changes like hover, toggles, and open/close because they are interruptible and retarget mid-animation. Reserve keyframe animations for one-shot sequences such as enter animations or loading states.
Yes, shadcn/ui is the default component kit. Generate components into src/components/ui, style them through theme tokens rather than inline hex, and rely on Radix primitives with cva variants for accessible buttons, dialogs, dropdowns, and inputs.
Nested elements need concentric radii: the outer radius must equal the inner radius plus the padding between them. Using the same radius on a padded parent and child is one of the most common reasons interfaces feel off.
This skill governs only DOM and overlay UI such as start screens, HUDs, menus, and pause dialogs. Gameplay canvas rendering, WebGL scenes, and game logic are out of scope and belong to a dedicated game-building skill.
nthplusioConfigures and scaffolds shadcn/ui in React projects with Tailwind CSS v4.
PAISHU-AITest web applications with Playwright-style checks, accessibility tests, and responsive screenshots.
IgorGribowskyGuides building Unity screens, menus, and HUD with prefabs, focus navigation, and event-driven updates.
tiantangcao1980-webCreate responsive interfaces with Bootstrap 5 components and Sass theming.