SpecterSheet

Where AI, spreadsheets, and dark magic become one.

Comment

💡 Inspiration

Spreadsheets are powerful — but thinking in formulas isn’t how humans think.

We ask questions like: “Show me my biggest expenses.” But spreadsheets demand: =SORT(FILTER(A2:B100, B2:B100>500), 2, FALSE)

We wondered: What if a spreadsheet actually understood you? And since this was Kiroween… What if it was haunted?

So we built SpecterSheet, a Frankenstein experiment stitching together:

Spreadsheet logic

AI reasoning

Kiro’s spec-driven development

A ghostly UI aesthetic

We wrote 50 EARS-compliant requirements and 29 correctness properties before coding — ensuring this monster was spooky and scientifically sound.

👻 What It Does

SpecterSheet is an AI-powered, haunted spreadsheet that you operate using natural language.

Ask it for anything — budgets, dashboards, analyses — and a friendly ghost “possesses” the sheet and builds it for you.

🔮 Core Features 🗣️ Natural Language Commands

“Create a monthly budget tracker” → auto-tables + auto-formulas

📊 Smart Charts

AI recommends and generates charts based on your data

⚡ Macro Builder

Ghost-generated automation scripts

🏗️ App Builder

Convert sheets into small functional apps

🧠 Data Analyzer

One-click formula suggestions with explanations

👻 Ghost Effects

Cells fill with ethereal ghost-typing animations

🧪 How We Built It

SpecterSheet is a chimera built from six technologies:

🖥️ Frontend & Logic

React + TypeScript

Custom Formula Engine (SUM, AVERAGE, IF, etc.)

Tailwind CSS — emerald/purple haunted theme

🧠 AI Layer

Groq API (Llama 3.1 70B) for fast structured reasoning

MCP (Model Context Protocol) for consistent tool integration

🎨 Visuals & Motion

Recharts for graphs

Framer Motion for ghostly float + glow animations

🧬 How It Works

User writes a command

Llama 3.1 returns structured JSON

Our engine converts it into actions

Cells fill with ghost-typing animations

Formulas evaluate + dependent cells auto-update

It feels like the sheet is alive.

⚙️ Development Process (Powered by Kiro)

  1. Spec-Driven Development

50 EARS requirements

29 correctness properties

80+ implementation tasks

Architecture defined before coding

  1. Property-Based Testing (fast-check)

43 tests

100+ randomized iterations each

Full input-space coverage

Found bugs like:

tiny denormal floats

invalid cell references

circular dependencies

  1. Vibe Coding

350-line formula parser generated in a single Kiro session

Architecture-aware natural conversation with AI

  1. MCP Integration

Groq

File upload (CSV/Excel)

External data adapters

  1. Agent Hooks

Test-on-save

Build checks

Format-on-commit

  1. Steering Documents

Frankenstein theme guidelines

Formula syntax spec

Testing + quality requirements

🔥 Challenges 🧩 Formula Dependency Graphs

Building a dynamic DAG that updates downstream formulas correctly.

🧠 JSON Consistency

Ensuring AI-generated structured JSON never breaks the UI.

📈 Property Test Sensitivity

Small floats caused chaotic test failures — needed constrained generators.

🎨 Z-index Battles

Dropdowns kept showing behind the grid — CSS stacking horror.

🧵 Stitching the Monster

Six tech stacks, one coherent ghost aesthetic.

🏆 Accomplishments We’re Proud Of

Sub-second AI responses

Real formula evaluation (no shortcuts or fake logic)

Zero test failures across 43 property tests

Ghost animations that make UX feel magical

Production-ready architecture

A full Kiro showcase:

Specs

Properties

Testing

MCP

Hooks

Vibe coding

And most importantly: It actually works.

📚 What We Learned

LLMs + structured JSON = deterministic superpowers

Spreadsheets are harder than they look

Property-based testing finds bugs you didn’t know existed

Designing architecture first avoids endless refactors

Animations dramatically improve clarity and UX

🚀 What’s Next

Real-time collaboration

More formulas (VLOOKUP, COUNTIF, DATE, REGEX)

Voice commands

SQL/API data connectors

Mobile version

Predictive analytics & anomaly detection

App templates (“Budget ghost”, “Trend ghost”, etc.)

Built With

  • class-variance-authority
  • css3
  • eslint
  • fast-check
  • framer-motion
  • groq
  • html5
  • indexeddb
  • javascript
  • kiro
  • llama-3.1-70b
  • localstorage
  • lucide-icons
  • mcp
  • motion
  • next-themes
  • node.js
  • npm
  • postcss
  • prettier
  • radix-ui
  • react
  • react-grid-layout
  • recharts
  • tailwind-merge
  • tailwindcss
  • testing-library
  • typescript
  • vite
  • vitest
Share this project:

Updates