mirror of
https://github.com/sickn33/antigravity-awesome-skills.git
synced 2026-04-25 17:25:12 +02:00
ef285b5c97
* fix: stabilize validation and tests on Windows * test: add Windows smoke coverage for skill activation * refactor: make setup_web script CommonJS * fix: repair aegisops-ai frontmatter * docs: add when-to-use guidance to core skills * docs: add when-to-use guidance to Apify skills * docs: add when-to-use guidance to Google and Expo skills * docs: add when-to-use guidance to Makepad skills * docs: add when-to-use guidance to git workflow skills * docs: add when-to-use guidance to fp-ts skills * docs: add when-to-use guidance to Three.js skills * docs: add when-to-use guidance to n8n skills * docs: add when-to-use guidance to health analysis skills * docs: add when-to-use guidance to writing and review skills * meta: sync generated catalog metadata * docs: add when-to-use guidance to Robius skills * docs: add when-to-use guidance to review and workflow skills * docs: add when-to-use guidance to science and data skills * docs: add when-to-use guidance to tooling and automation skills * docs: add when-to-use guidance to remaining skills * fix: gate bundle helper execution in Windows activation * chore: drop generated artifacts from contributor PR * docs(maintenance): Record PR 457 sweep Document the open issue triage, PR supersedence decision, local verification, and source-only cleanup that prepared PR #457 for re-running CI. --------- Co-authored-by: sickn33 <sickn33@users.noreply.github.com>
94 lines
3.8 KiB
Markdown
94 lines
3.8 KiB
Markdown
---
|
||
name: baseline-ui
|
||
description: Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
|
||
risk: unknown
|
||
source: community
|
||
---
|
||
|
||
# Baseline UI
|
||
|
||
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
|
||
|
||
## When to Use
|
||
|
||
- You are building or reviewing Tailwind-based UI and want a strict baseline for accessibility, motion, typography, and layout.
|
||
- The task is to prevent generic or sloppy AI-generated interface decisions before they spread through the codebase.
|
||
- You need concrete UI constraints to apply to a file review or an ongoing frontend implementation.
|
||
|
||
## 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
|
||
- SHOULD 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
|