Grimoire Skeleton

Grimoire Skeleton is a Kiro-native framework that spawns diverse production apps from one elegant foundation. Define your entities once, get complete apps with auth, CRUD, and three spooky themes.

Comment

Inspiration

Every new project starts the same way: auth setup, CRUD operations, form validation, theming... We wanted to break this cycle. What if you could define your data model once and have an entire production app materialize? That's Grimoire Skeleton—a framework designed to be built with AI, not just by developers.

The spooky theme? We believe developer tools should spark joy. If we're going to spend hours coding, why not make it fun?

What We Learned

  1. Spec-driven development is a game-changer for complex systems. Our entity generator required precision—vibe coding alone would have introduced subtle bugs. Breaking it into 15 small tasks let Kiro nail each piece.

  2. Vibe coding excels at creative work. Describing "a card with neon glow that glitches on hover like a cursed arcade cabinet" produced better results than any spec could.

  3. The right abstraction matters. Our entity config system means adding a new app takes minutes:

$$\text{New App} = \text{Entity Config} + \text{Theme Selection} + \text{Deploy}$$

  1. MCP integration eliminates context-switching. Setting up Appwrite collections without leaving Kiro kept us in flow state.

How We Built It

We used a hybrid approach:

  • Specs (30%): Core systems—entity generator, theme engine, auth flow, form builder
  • Vibe coding (70%): UI components, animations, styling, quick iterations

The architecture follows a clear separation:

  • /core - Reusable components and utilities
  • /modules - Domain-specific features
  • /theme - Three spooky skins with CSS variables
  • /config - Declarative entity definitions

From one entity config, the system generates: TypeScript types, list pages, forms, detail views, and API routes.

Challenges

  1. Theme consistency across generated components - Solved with CSS variables and a strict design token system
  2. Making specs granular enough - Too broad = Kiro gets confused. Too narrow = tedious. Found the sweet spot at ~15 tasks per feature.
  3. Balancing flexibility vs. convention - The skeleton needed to be opinionated enough to be useful, but flexible enough for different apps
  4. WCAG accessibility with dark themes - All three themes maintain AA contrast ratios despite the spooky aesthetic

Built With

Share this project:

Updates