Prompt
Create a small visual system
Define a coherent palette, type scale, spacing, and component rules for a specific product.
ClaudeChatGPTGeminiDesign
Dave AI
Baseline UI
Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
instructions.md
--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. risk: critical source: https://github.com/ibelick/ui-skills/tree/main/skills/baseline-ui source_repo: ibelick/ui-skills source_type: community date_added: 2026-07-01 license: MIT license_source: https://github.com/ibelick/ui-skills/blob/main/LICENSE --- # Baseline UI ## When to Use Use this skill when you need quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. Applies an opinionated baseline for a scoped polish pass. Existing product design, accessibility requirements, framework choices and explicit user preferences take precedence; do not migrate the stack or add dependencies just to satisfy this list. ## How to use - `/baseline-ui` Apply these constraints to any UI work in this conversation. - `/baseline-ui <file>` Review the file against all constraints below and output: - violations (quote the exact line/snippet) - why it matters (1 short sentence) - a concrete fix (code-level suggestion) ## Stack - MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested - MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required - SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS - MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic ## Components - MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) - MUST use the project’s existing component primitives first - NEVER mix primitive systems within the same interaction surface - SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack - MUST add an `aria-label` to icon-only buttons - NEVER rebuild keyboard or focus behavior by hand unless explicitly requested ## Interaction - MUST use an `AlertDialog` for destructive or irreversible actions - SHOULD use structural skeletons for loading states - NEVER use `h-screen`, use `h-dvh` - MUST respect `safe-area-inset` for fixed elements - MUST show errors next to where the action happens - NEVER block paste in `input` or `textarea` elements ## Animation - NEVER add animation unless it is explicitly requested - MUST animate only compositor props (`transform`, `opacity`) - NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) - SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons) - SHOULD use `ease-out` on entrance - NEVER exceed `200ms` for interaction feedback - MUST pause looping animations when off-screen - MUST respect `prefers-reduced-motion` - NEVER introduce custom easing curves unless explicitly requested - SHOULD avoid animating large images or full-screen surfaces ## Typography - MUST use `text-balance` for headings and `text-pretty` for body/paragraphs - MUST use `tabular-nums` for data - SHOULD use `truncate` or `line-clamp` for dense UI - NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested ## Layout - MUST use a fixed `z-index` scale (no arbitrary `z-*`) - SHOULD use `size-*` for square elements instead of `w-*` + `h-*` ## Performance - NEVER animate large `blur()` or `backdrop-filter` surfaces - NEVER apply `will-change` outside an active animation - NEVER use `useEffect` for anything that can be expressed as render logic ## Design - NEVER use gradients unless explicitly requested - NEVER use purple or multicolor gradients - NEVER use glow effects as primary affordances - SHOULD use Tailwind CSS default shadow scale unless explicitly requested - MUST give empty states one clear next action - SHOULD limit accent color usage to one per view - SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones ## Example **User request:** > Review this interface with @baseline-ui, identify the highest-impact design problems, and propose an implementation-ready improvement. ## Limitations - Use this skill only when the task clearly matches its upstream source and local project context. - Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes. - Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. risk: critical source: https://github.com/ibelick/ui-skills/tree/main/skills/baseline-ui source_repo: ibelick/ui-skills source_type: community date_added: 2026-07-01 license: MIT license_source: https://github.com/ibelick/ui-skills/blob/main/LICENSE --- # Baseline UI ## When to Use Use this skill when you need quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. Applies an opinionated baseline for a scoped polish pass. Existing product design, accessibility requirements, framework choices and explicit user preferences take precedence; do not migrate the stack or add dependencies just to satisfy this list. ## How to use - `/baseline-ui` Apply these constraints to any UI work in this conversation. - `/baseline-ui <file>` Review the file against all constraints below and output: - violations (quote the exact line/snippet) - why it matters (1 short sentence) - a concrete fix (code-level suggestion) ## Stack - MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested - MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required - SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS - MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic ## Components - MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) - MUST use the project’s existing component primitives first - NEVER mix primitive systems within the same interaction surface - SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack - MUST add an `aria-label` to icon-only buttons - NEVER rebuild keyboard or focus behavior by hand unless explicitly requested ## Interaction - MUST use an `AlertDialog` for destructive or irreversible actions - SHOULD use structural skeletons for loading states - NEVER use `h-screen`, use `h-dvh` - MUST respect `safe-area-inset` for fixed elements - MUST show errors next to where the action happens - NEVER block paste in `input` or `textarea` elements ## Animation - NEVER add animation unless it is explicitly requested - MUST animate only compositor props (`transform`, `opacity`) - NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) - SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons) - SHOULD use `ease-out` on entrance - NEVER exceed `200ms` for interaction feedback - MUST pause looping animations when off-screen - MUST respect `prefers-reduced-motion` - NEVER introduce custom easing curves unless explicitly requested - SHOULD avoid animating large images or full-screen surfaces ## Typography - MUST use `text-balance` for headings and `text-pretty` for body/paragraphs - MUST use `tabular-nums` for data - SHOULD use `truncate` or `line-clamp` for dense UI - NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested ## Layout - MUST use a fixed `z-index` scale (no arbitrary `z-*`) - SHOULD use `size-*` for square elements instead of `w-*` + `h-*` ## Performance - NEVER animate large `blur()` or `backdrop-filter` surfaces - NEVER apply `will-change` outside an active animation - NEVER use `useEffect` for anything that can be expressed as render logic ## Design - NEVER use gradients unless explicitly requested - NEVER use purple or multicolor gradients - NEVER use glow effects as primary affordances - SHOULD use Tailwind CSS default shadow scale unless explicitly requested - MUST give empty states one clear next action - SHOULD limit accent color usage to one per view - SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones ## Example **User request:** > Review this interface with @baseline-ui, identify the highest-impact design problems, and propose an implementation-ready improvement. ## Limitations - Use this skill only when the task clearly matches its upstream source and local project context. - Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes. - Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
Platform guidance
Imported SKILL.md format for Claude Code, Codex and Cursor. Review the complete instructions and required tools before use. Package integrity checked; individual agent behavior has not been tested.