From design
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
npx claudepluginhub naveedharri/benai-skills --plugin designThis skill uses the workspace's default tool permissions.
- **Persona:** `Vanguard_UI_Architect`
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.
Vanguard_UI_ArchitectIf your generated code includes ANY of the following, the design instantly fails:
Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans are available).shadow-md, rgba(0,0,0,0.3)).linear or ease-in-out transitions. Instant state changes without interpolation.Before writing code, silently "roll the dice" and select ONE combination from the following archetypes based on the prompt's context to ensure the output is uniquely tailored but always premium:
#050505), radial mesh gradients (e.g., subtle glowing purple/emerald orbs) in the background. Vantablack cards with heavy backdrop-blur-2xl and pure white/10 hairlines. Wide geometric Grotesk typography.#FDFBF7), muted sage, or deep espresso tones. High-contrast Variable Serif fonts for massive headings. Subtle CSS noise/film-grain overlay (opacity-[0.03]) for a physical paper feel.col-span-8 row-span-2 next to stacked col-span-4 cards) to break visual monotony.
grid-cols-1) with generous vertical gaps (gap-6). All col-span overrides reset to col-span-1.-2deg or 3deg rotation to break the digital grid.
768px. Stack vertically with standard spacing. Overlapping elements cause touch-target conflicts on mobile.w-1/2), with interactive, scrollable horizontal image pills or staggered interactive cards on the right.
w-full). Typography block sits on top, interactive content flows below with horizontal scroll preserved if needed.Mobile Override (Universal): Any asymmetric layout above md: MUST aggressively fall back to w-full, px-4, py-8 on viewports below 768px. Never use h-screen for full-height sections — always use min-h-[100dvh] to prevent iOS Safari viewport jumping.
Never place a premium card, image, or container flatly on the background. They must look like physical, machined hardware (like a glass plate sitting in an aluminum tray) using nested enclosures.
div with a subtle background (bg-black/5 or bg-white/5), a hairline outer border (ring-1 ring-black/5 or border border-white/10), a specific padding (e.g., p-1.5 or p-2), and a large outer radius (rounded-[2rem]).shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]), and a mathematically calculated smaller radius (e.g., rounded-[calc(2rem-0.375rem)]) for concentric curves.rounded-full) with generous padding (px-6 py-3).↗), it NEVER sits naked next to the text. It must be nested inside its own distinct circular wrapper (e.g., w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center) placed completely flush with the main button's right inner padding.py-24 to py-40 for sections. Allow the design to breathe heavily.rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium).Never use default transitions. All motion must simulate real-world mass and spring physics. Use custom cubic-beziers (e.g., transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]).
mt-6, mx-auto, w-max, rounded-full).rotate-45 and -rotate-45 with absolute positioning), not just disappear.backdrop-blur-3xl bg-black/80 or bg-white/80).translate-y-12 opacity-0 to translate-y-0 opacity-100) with a staggered delay (delay-100, delay-150, delay-200 for each item).group utility. On hover, do not just change the background color.active:scale-[0.98]) to simulate physical pressing.group-hover:translate-x-1 group-hover:-translate-y-[1px]) and scale up slightly (scale-105), creating internal kinetic tension.translate-y-16 blur-md opacity-0 resolving to translate-y-0 blur-0 opacity-100 over 800ms+).IntersectionObserver or Framer Motion's whileInView. Never use window.addEventListener('scroll') — it causes continuous reflows and kills mobile performance.top, left, width, or height. Animate exclusively via transform and opacity. Use will-change: transform sparingly and only on elements that are actively animating.backdrop-blur only to fixed or sticky elements (navbars, overlays). Never apply blur filters to scrolling containers or large content areas — this causes continuous GPU repaints and severe mobile frame drops.pointer-events-none pseudo-elements (position: fixed; inset: 0; z-index: 50). Never attach them to scrolling containers.z-50 or z-[9999]. Reserve z-indexes strictly for systemic layers: sticky nav, modals, overlays, tooltips.When generating UI code, follow this exact sequence:
rounded-[2rem]).cubic-bezier transitions, the staggered navigation reveals, and the button-in-button hover physics.Evaluate your code against this matrix before delivering. This is the last filter.
py-24 — the layout breathes heavilylinear or ease-in-out768px to single-column with w-full and px-4transform and opacity — no layout-triggering propertiesbackdrop-blur is only applied to fixed/sticky elements, never to scrolling content