Inspiration
Every new web project starts with the same boilerplate: layout, navigation, theming, a place to store data. I wanted a "skeleton crew" — the smallest reusable foundation that already contains all of that, so a new app is just new content and logic on top of a proven base.
What it does
Skeleton Crew is a dependency-free static web app skeleton plus two working example apps built on it:
- The skeleton itself (/skeleton): responsive layout with mobile hamburger navigation, a light/dark theme system built on CSS custom properties (persisted in localStorage), a mock sign-in (display name only, stored locally), and a small data layer that wraps localStorage with getAll / get / set / add / update / remove plus import/export helpers.
- Habit Tracker (/app-habit-tracker): add habits, check in for today, mark-all, streak calculation from completion history, delete, and JSON export.
- Shop Inventory (/app-inventory): product CRUD with quantity steppers, live search by name, total items / total value statistics, low-stock status badges, and CSV export.
- Landing page (/index.html) tying the three parts together.
Everything runs as plain static files — open it in a browser and it works. No npm, no bundler, no backend.
How I built it
The project was built spec-first with Kiro CLI (Kiro's agentic command-line interface), running in a Debian environment on an Android phone via Termux. I started from a spec in .kiro/specs/skeleton-crew/ (requirements, design, and a task list), then implemented it in phases: the skeleton core first (theme manager, mock auth, data layer), then the two example apps on top of it, then the landing page and documentation. All data lives in localStorage under a shared skeleton- prefix, so the apps demonstrate how independent tools can share one foundation.
Challenges
The whole build ran on a phone, which meant working around mobile constraints: long AI sessions had to be split into small, verifiable steps, and network handoffs between the terminal and the browser repeatedly broke authentication flows until the workflow was adjusted to keep the terminal in the foreground during auth. The interesting design challenge was keeping the skeleton genuinely reusable — shared CSS variables and a generic data layer — without leaking app-specific logic into it.
What I learned
Spec-driven development with an AI agent works well even in a constrained environment if tasks are decomposed into small pieces with clear acceptance checks. I also learned how far vanilla web platform features (CSS variables, localStorage, semantic HTML) go without any framework.
What's next
More example apps on the same skeleton (notes, expense tracker), an optional sync layer, and a small generator script that scaffolds a new app folder from the skeleton.
Built With
- css
- github
- html
- javascript
- kiro
- pages
