Kainiko943/beautiful-ui

# Beautiful UI

## Overview

Use this skill when the primary job is UI design quality. Do not jump straight into code. Inspect the product and repo, choose a visual direction, define a design-system core, design the key screens and states, adapt for the target platform, then verify the handoff.

## Workflow

1. Inspect the repo, product context, audience, and existing UI signals.
2. Define the visual direction before implementation.
3. Build the design-system core: color, type, spacing, surfaces, corners, borders, shadows, and motion.
4. Design the key screens and the important states.
5. Load the right platform adapter.
6. Produce implementation-facing handoff.

# Cinematic Web Experience

## Overview

Use this skill when the user wants the kind of web experience that looks impressive in a short demo: full-screen composition, premium art direction, motion, depth, and a strong first-viewport reveal. This is for demo-worthy cinematic web experiences, not ordinary dashboards or static pages.

Start with `beautiful-ui` for product intent and visual direction, then use this skill to turn the direction into an implementable web experience. Pair with `platform-web-ui` for browser behavior and `ui-verification` before completion.

## When To Trigger

- "Build something like this cinematic website."
- "Make a site that looks like a premium studio/portfolio."
- "Create a WebGL/Three.js landing page."
- "Make Claude build a wow-factor demo."

# Framework Shadcn Tailwind UI

## Overview

Use this adapter after `beautiful-ui` and `platform-web-ui` when implementation should land in a shadcn/ui + Tailwind codebase. Preserve the product-specific visual direction, then express it through local components, tokens, variants, and stateful composition.

## Current Setup Notes

As of April 26, 2026, shadcn/ui recommends `shadcn/create` or `shadcn@latest init -t [framework]` for supported frameworks, with existing-project setup handled through the official framework guide. Tailwind CSS v4 uses CSS-first configuration and `@import "tailwindcss"` in new installs. Verify official docs before giving exact setup commands in generated project work.

Official references:

- https://ui.shadcn.com/docs/installation
- https://ui.shadcn.com/docs/installation/next

# Platform Android UI

## Overview

Use this adapter when the design target is an Android app. Preserve the core design language while adapting for Android navigation, elevation, adaptive layouts, and state clarity.

## Rules

- Use Android navigation patterns intentionally.
- Let adaptive layout logic influence composition.
- Make loading, validation, and error states explicit.
- Let Material expectations inform behavior without flattening brand identity.
- Do not force iOS chrome onto Android flows.

# Platform iOS UI

## Overview

Use this adapter when the target is an iPhone or iPad experience. Keep the core visual direction, but adapt navigation, spacing, sheets, touch behavior, and motion for iOS expectations.

## Rules

- Respect safe areas, tab bars, navigation bars, and sheet presentation.
- Keep touch targets comfortable.
- Support Dynamic Type and reduced motion.
- Favor clear hierarchy over overloaded chrome.
- Use motion to support orientation, not decoration.

# Platform Web UI

## Overview

Use this adapter when the design target is a browser-based product. Preserve the visual direction from `beautiful-ui`, then adapt it for responsive layout, browser interaction, and web accessibility.

## Rules

- Design desktop and mobile layouts intentionally.
- Treat hover, focus, active, disabled, loading, validation, and empty states as first-class.
- Keep forms, tables, filters, and navigation feasible in HTML/CSS terms.
- Use semantic structure, keyboard navigation, visible focus, and contrast checks.
- Prefer implementation notes that can be verified in a browser.
- If the repo uses shadcn/ui or Tailwind CSS, load `framework-shadcn-tailwind-ui` and map visual decisions to local components, tokens, and variants.

# UI Verification

## Overview

Use this skill at the end of UI design work. Check that the output is visually coherent, covers important states, respects accessibility, and fits the intended platform.

## Checklist Areas

- Visual direction consistency
- Design-system coherence
- Screen and component hierarchy
- Accessibility and readability
- State coverage
- Platform fit