GhostUI-React UI library built with Kiro

GhostUI is a Halloween-inspired React component library built with Kiro, featuring animated spooky, haunted, and gooey UI elements.

Comment

GhostUI — A Halloween-Themed Animated React Component Library

🎃 Inspiration

As a solo developer, I’ve always wanted to build a UI system that feels alive — something atmospheric, cinematic, and filled with personality. Most modern UI libraries are clean and minimal… but none embrace the spooky, the haunted, or the gooey.

When I saw the Kiroween Hackathon theme, it clicked immediately:

  • What if a UI library fully embraced Halloween aesthetics?
  • Dripping goo, glowing runes, drifting fog, spectral animations, and cinematic transitions?
  • And what if I used Kiro not just as a tool, but as a true development partner?

GhostUI was my answer — a fully animated, theme-driven React component library powered by Kiro’s agentic development model.

👻 What GhostUI Is

GhostUI is a Halloween-inspired React component library featuring:

  • Spooky: Ghostly fades, fog, ectoplasm
  • Haunted: Runes, occult shapes, cursed motions
  • Gooey: Slime physics, drips, blob interactions

The library includes 24+ production-ready components, each engineered with:

  • SVG filters (gooey, blur, dripping)
  • Framer Motion physics
  • Tailwind CSS theming
  • SSR-safe logic for Next.js
  • TypeScript typings
  • Animated transitions
  • Dark cinematic visuals

I also built:

  • A demo app showcasing real usage
  • A documentation site
  • A fully packaged NPM library
  • A monorepo powered by Kiro’s specs and hooks

🧠 How I Used Kiro in the Project

Kiro wasn’t just a helper — it acted as a co-engineer, shaping the architecture, automating workflows, and enforcing consistency across the entire system.

🌀 1. Vibe Coding — Fast Creative Exploration

I used vibe coding to explore ideas conversationally:

  • “What would a haunted drawer look like?”
  • “Give me gooey variants of this component.”
  • “Explain how to animate dripping slime using SVG filters.”

Kiro helped me brainstorm dozens of spooky components — loaders, backgrounds, transitions, toggles, cards, fog systems, etc.

Most impressive outcome: The Ectoplasm Page Transition — a multi-layer gooey wipe animation — came entirely from iterative vibe coding before becoming a formal spec.

📘 2. Spec-Driven Development — From Idea to Implementation

Once the concepts were solid, I used .kiro/specs to define:

  • Phase 1 — Requirements: Props & states, behavior & accessibility, SSR strategy, interaction rules.
  • Phase 2 — Design: Tailwind token usage, SVG filters (gooey, blur, liquify), haunted shapes (coffins, runes, webs, spells), motion sequences & easing curves.
  • Phase 3 — Actionable Tasks: File creation, component scaffolding, documentation steps, tests & edge cases.

This made every component consistent and production-ready.

⚙️ 3. Agent Hooks — Automated File Scaffolding

I created a GhostUI-Boilerplate Hook, which triggers whenever a new component file is created. The hook automatically injects:

  • "use client" when required
  • Import templates (clsx, tailwind-merge, motion)
  • Props interface
  • Component skeleton
  • Accessibility reminders
  • Display name
  • Starter Tailwind classes

This eliminated repetitive setup and ensured architectural consistency across all 31+ components.

📜 4. Steering Docs — Defining the GhostUI Universe

The /kiro/steering.md document defined the constraints Kiro must always follow:

Design Rules

  • Prefer irregular shapes, not rectangles
  • Every interactive state must animate
  • Spooky/Haunted/Gooey themes drive color & effects
  • Glow is allowed and encouraged
  • Fog should be subtle, never overwhelming

Technical Rules

  • Client components must include 'use client'
  • Ensure SSR safety for all server-rendered components
  • Use Tailwind + SVG filters consistently
  • Prefer Framer Motion for physics-based animations

Naming Rules

  • PascalCase components
  • Consistent prop naming
  • Theme variants respected

Steering made Kiro operate like a dedicated GhostUI engineer rather than a generic model.

🧪 What I Learned

  1. AI-assisted UI design is incredibly powerful Gooey filters, dripping SVGs, rune pulses, fog layers — complex animations became easier using Kiro.

  2. Specs turn AI into a deterministic builder Moving from vibe → spec mode created predictable, repeatable results.

  3. Hooks eliminate boilerplate and allow scaling I was able to build a large component library as a solo dev by automating repetitive tasks.

  4. A themed design system requires intentional visual rules Steering ensured consistency across spooky, haunted, and gooey aesthetics.

  5. Publishing and deploying a UI library is a serious engineering task I learned a lot about monorepos, npm packaging, SSR boundaries, and documentation workflows.

Built With

Share this project:

Updates