iblai-vibe-designlisted
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Falls back to the ibl.ai BRAND.md design system when the project has none. Not for backend-only or non-UI tasks.
iblai/vibe · ★ 15 · Web & Frontend · score 79
Install: claude install-skill iblai/vibe
# /iblai-vibe-design
Builds and refines shippable frontend interfaces for ibl.ai apps: real working code, decisive design calls, and craft that holds up under inspection.
[BRAND.md](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/BRAND.md)
is the **default** design system (colors, typography, spacing, radius, shadows,
component style). When the project already carries its own design system
(a v0 export, a custom theme, a partner-branded shell, a `DESIGN.md`/`PRODUCT.md`),
**defer to that instead**. See [ibl.ai design defaults](#iblai-vibe-design-defaults-brandmd-fallback) below.
## Setup
> **Project-scoped skill.** Scripts are invoked by the relative path
> `node .claude/skills/iblai-vibe-design/scripts/<x>.mjs`, resolved against the
> project root (cwd). The skill must live at
> `<project>/.claude/skills/iblai-vibe-design/` (the `skills/` → `.claude/skills/`
> symlink that vibe sets up at install). A user-global
> (`~/.claude/skills/`) or plugin install will not resolve these paths —
> install per-project. Script state (`.impeccable/`, `live/`, `critique/`)
> is also written under the project root by design.
Run all three before touching design work or editing files:
1. Pull project context (PRODUCT.md / DESIGN.md) with the loader script.
2. Determine the register, then open its matching reference (brand.md or product.md).
3. **When the user invoked a sub-command (`craft`, `shape`, `audit`, ...), open that command's reference file as well.** Not optional: