shashidharbabu

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

brandkit

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

industrial-brutalist-ui

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

componentry

Install and integrate Componentry (componentry.dev — componentry.fun redirects there) — an MIT-licensed, Vercel-OSS-backed library of ~60 animated React components by Harsh Jadhav (@harshjdhv), distributed as copy-in source via the shadcn registry (npx shadcn@latest add @componentry/<name>) and built on framer-motion, Tailwind, and canvas/WebGL — into Next.js 14 + Tailwind 3.4 + motion v13 (`motion/react`). Use this whenever a task involves componentry.dev/componentry.fun or an @componentry/ install command, a landing page needs a spectacle background (matrix rain, dither gradient, aurora, liquid chrome, particle galaxy, circuit board, noise), an interactive set-piece (magnetic dock, eye tracking, image trail, spotlight card, split-flap display, mac keyboard), kinetic typography (letter cascade, text repel, particle typography, hyper text, text morph), or a scroll set-piece (sticky scroll cards, scroll split card, scroll velocity text, scroll choreography) — and whenever choosing between componentry and motio

cosmos

Extract design direction from Cosmos (cosmos.so), the visual discovery and moodboarding platform ("Pinterest for creatives") — build a moodboard vocabulary before starting a design, and run the human+Claude reference loop where the user drops Cosmos links or screenshots and Claude translates them into named design decisions (layout grid, type scale, spacing rhythm, motion choreography, color temperature) for Next.js 14 + Tailwind 3.4 + motion v13 (`motion/react`). Use this whenever a design task starts without a visual direction, when someone says "I want it to feel like this" with a Cosmos link or moodboard, when a cosmos.so URL or cdn.cosmos.so image appears in the conversation, when a project needs a moodboard or reference-gathering phase, when the user wants to browse for inspiration before building, or when scattered screenshots need to be distilled into one coherent direction.

design-arsenal

Master router over the Design Lab's 21-skill design stack — maps any design need (direction, identity, typography, color, components, glass surfaces, texture, backgrounds, motion, 3D, video, audio, logo) to the right skill and sequences them into a complete design-system build for an application. Use this whenever a task is bigger than one asset — "build a design system", "do a full design pass", "make this app look premium", "set up the visual identity", "redesign this whole product" — or when unsure which design skill applies, or when starting design work on a new repo and deciding what to load in what order. Also owns the glass/glassmorphism recipe (no single site-skill covers it) and the aggregated licensing pre-flight for commercial launches.

fffuel

Route design needs to the right generator on fffuel (fffuel.co) — a large collection of free browser-based SVG generator and color tools (nnnoise, gggrain, ffflux, uuunion, sssurf, ooorganize, mmmotif, nnneon, hhholographic, bbblurry, ssshape, and ~30 more) — each mapped to its use case with a direct URL and what to tell the human to configure, plus the fffuel-specific integration gotchas (SVG filter outputs, ID collisions, tiling textures). Use this whenever a design needs noise or grain texture, a grainy/fluid/mesh gradient, holographic or iridescent backgrounds, neon glow shapes, isometric or grid patterns, repeating line/ripple/spiral/confetti patterns, arrows, blobs, or any generated SVG asset beyond what haikei covers; whenever someone says a surface needs "texture", "grain", "glow", or "a pattern"; whenever a fffuel.co URL or a downloaded fffuel SVG appears and needs optimizing, tiling, theming, or wiring into React/Next.js; and whenever choosing between fffuel and haikei for a generated background.

haikei

Generate and integrate SVG background assets using Haikei (haikei.app) — waves, blobs, blurry gradients, low-poly grids, peaks, steps, and scatter patterns for hero sections, section dividers, slide decks, blog covers, social cards, and empty states. Use this whenever a design needs a generated background, an organic shape, a section divider, a wave/blob/gradient visual, a blog or social cover image, or when a page or slide looks flat and needs a background asset. Also use it whenever a Haikei SVG has already been downloaded and needs to be optimized, made responsive, wired into React/Next.js, or adapted for dark mode — the integration gotchas are non-obvious and documented in references/integration.md.

jitter

Select export formats from Jitter (jitter.video) — the browser-based motion design tool ("Figma for motion") — and integrate its MP4/GIF/Lottie exports into Next.js 14 + Tailwind 3.4 + motion v13 (`motion/react`). Use this whenever a task involves Jitter in any form, a motion-designed asset needs to be produced by a designer and played on a page, a Lottie file (.json or .lottie) needs to be rendered in React, someone asks "how do I play this animation export", an animated logo/loader/product-demo clip needs embedding, a Figma design needs to become an animation, or when deciding between a Lottie export and a hand-coded CSS/framer-motion animation. Also use it to pick the right Lottie player package — the verified comparison (lottie-react vs @lottiefiles/dotlottie-react) and the reduced-motion/lazy-loading patterns live in references/integration.md.

minimalist-ui

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

motion-primitives

Add polished, pre-built animations to React/Next.js apps using the motion-primitives component library (motion-primitives.com) — animated text reveals, number tickers, morphing dialogs, marquees, scroll reveals, hover effects. Use this whenever a task involves animating UI, making a landing page or hero section feel alive, animating numbers/KPIs on a dashboard, adding entrance/reveal animations, marquee/logo sliders, animated dialogs or popovers, shimmer/loading text states, or when someone says an interface feels "static", "flat", or "needs polish". Also use it to decide when NOT to animate. Always consult references/component-api.md for exact prop names before writing any motion-primitives code — the APIs here are extracted from source and several differ from what you'd guess.

motionsites

Use MotionSites (motionsites.ai) — a paid library of "premium AI website prompts" with free-to-browse animated previews of motion-heavy hero sections, landing pages, footers, CTAs, backgrounds, and gradients — as motion-direction reference, and translate what its previews show (timing, easing, choreography patterns — patterns, not pixels) into concrete motion v13 (`motion/react`) implementations in Next.js 14 + Tailwind 3.4. Use this whenever a task involves motionsites.ai in any form, someone wants motion-design inspiration for a landing page ("make the hero move like the good AI-built sites", "find animated section references"), a MotionSites prompt has been purchased and its output needs adapting to our stack, an AI-builder prompt (Lovable/v0/Bolt-style) needs converting into maintainable Next.js code, or when naming and implementing a motion choreography pattern observed in any animated site preview. The observation-to-framer-motion translation workflow lives in references/integration.md.

full-output-enforcement

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

pafolios

Mine Pafolios (pafolios.com), a free gallery of designer portfolio examples and annotated product-design case studies, for process narrative and presentation structure — how designers frame problem, process, before/after, and outcome — and translate that narrative anatomy into showcase, specimen, and case-study pages built with Next.js 14 + Tailwind 3.4 + motion v13 (`motion/react`). Use this whenever building or improving a portfolio site, case-study page, project showcase, specimen page, "our work" section, or design-process writeup; whenever someone asks "how should I present this project", "structure my case study", "make the showcase tell a story", or "find portfolio inspiration"; and whenever a pafolios.com link appears in conversation or a Design Lab specimen page needs a narrative spine rather than just aesthetics.

recent-design

Stay visually current using Recent (recent.design), a daily curated feed of fresh design work across web, interfaces, branding, product, typography, motion, illustration, 3D, editorial, print, and packaging — judge whether a design "reads 2026" versus templated, run trend triage (adopt / adapt / skip) on what the feed surfaces, and translate a fresh reference into named decisions for Next.js 14 + Tailwind 3.4 + motion v13 (`motion/react`). Use this whenever someone asks "what does modern design look like right now", "does this look dated", "make it feel current/2026", "is this trend worth adopting"; whenever a recent.design URL appears in conversation; whenever a redesign brief includes freshness as a goal; or whenever you need to check what working designers are shipping this month before committing to a direction.

redesign-existing-projects

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

shadcn

Operate the shadcn/ui CLI and registry system (ui.shadcn.com) — initializing on an existing project, components.json anatomy, CSS-variable theming and remapping shadcn's --background/--foreground tokens onto an existing palette (like this repo's dark ink surfaces), third-party @namespace registries, and the upgrade/diff workflow. Use this whenever a task involves running npx shadcn init or add, editing components.json, theming or re-theming shadcn components, wiring shadcn into an existing Tailwind project, adding a component from a third-party or private registry (@acme/thing syntax), diffing local components against upstream, deciding which shadcn components belong on a marketing/launch page versus an app, or any question about the shadcn CLI, registry, or token system. Also use it BEFORE running any shadcn command on a Tailwind v3 project — the current CLI targets Tailwind v4, and the shadcn@2.3.0 vs shadcn@latest fork is the first decision, documented here.

high-end-visual-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.

spline

Embed and integrate Spline (spline.design) 3D scenes — the collaborative browser-based 3D design tool — into Next.js 14 + Tailwind 3.4 + motion v13 (`motion/react`) via the verified @splinetool/react-spline + @splinetool/runtime packages, or decide against a live embed and use an image/video export instead. Use this whenever a task involves Spline in any form, a 3D scene/hero/product visual needs embedding in a web page, a *.splinecode or prod.spline.design URL appears, someone asks for an "interactive 3D hero", "3D landing page", "rotating product model", or "that floaty 3D blob thing", or when weighing the real cost of 3D on a landing page (the runtime is ~582KB gzipped — measured). Also use it for Spline pointer-events layering under hero copy, Suspense/poster fallbacks, reduced-motion and mobile fallbacks, and free-tier watermark questions — code and tradeoffs live in references/integration.md.

supahero

Extract hero-section design direction from Supahero (supahero.io), a free curated gallery of website hero-section screenshots — catalog a reference hero's anatomy (headline treatment, background system, CTA placement, nav integration, above-fold economy) and adapt the pattern into a Next.js 14 + Tailwind 3.4 + motion v13 (`motion/react`) hero for the current project. Use this whenever a task involves designing or redesigning a hero section, above-the-fold layout, landing page opening, or homepage top; whenever someone shares a supahero.io link or asks "find me hero inspiration", "make the hero more interesting", "what should go above the fold", or "our hero looks generic"; and whenever a hero reference from any source needs to be decomposed into reusable structure rather than copied.

design-taste-frontend

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

ui-ux-pro-max

UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, WPF, WinUI, Avalonia, Uno Platform, UWP, Three.js, and HTML/CSS). Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.

uicolors

Generate a full Tailwind color scale from a brand hex with UI Colors (uicolors.app) — a free browser tool (paid Pro tier and paid API exist) that turns one hexcode into a Tailwind-convention 50–950 scale, previews it on real UI mockups (cards, dashboards, shadcn/ui, charts, gradients), and is deep-linkable per hex (uicolors.app/generate/2563eb) — then wire it into tailwind.config.ts extend.colors, pick which steps carry text vs surfaces in light and dark mode, and contrast-check the pairs (WCAG AA 4.5:1 body / 3:1 large-text-and-UI). Use this whenever a task involves uicolors.app, turning a brand hex into a palette ("we have