DEV Community: James Gabriele

Made a Spooky Study Tool!

James Gabriele — Thu, 04 Dec 2025 19:33:05 +0000

I wanted a study tool that was completely free. No paywalls, no limits on features, no "upgrade to pro" popups. So I built DeepTerm an open-source app that turns PDFs into cards and reviewers using AI or add it manually.

This is the story of how I built it from scratch using Kiro, from the first design to the final deployment.

Why I Built This

My girlfriend needed a reviewer maker for her studies. Every tool we tried either had limits or wanted money for basic features. Gizmo has generation limits. Other tools are clunky or expensive.

I thought: why not build one myself and make it free for everyone?

What DeepTerm Does

You upload a PDF or paste text. The AI extracts key terms and definitions automatically. Then you can study with:

Flashcards with flip animations and spaced repetition
Learn mode that tracks your progress through stages
Match game for memorization practice
Practice tests based on what you mastered

Cards move through stages: new, learning, review, mastered. This is spaced repetition - it helps you remember things longer.

But the real magic is in the gamification: XP system, achievements, Pomodoro timer, ambient sounds, export features, and a spooky Halloween theme with a flashlight study mode.

Planning and Design in Figma

I started by sketching the user flow. Upload PDF → AI generates cards → Study modes → Track progress. Simple.

Then I designed the UI in Figma. I wanted it clean but fun. Two themes: normal (light and warm) and spooky (dark purple Halloween vibes).

The key screens I designed:

Landing page with hero section and features
Dashboard with materials list
Learn mode with progress tracking

Setting Up the Foundation with Kiro

I opened Kiro and started a new Next.js project. But first, I created steering rules to optimize my workflow:

# My Custom Steering Rules
- Do not make markdown files unless asked
- Use controlPwshProcess instead of executePwsh for all commands
- Read multiple files in parallel with readMultipleFiles
- Follow Next.js 16 App Router patterns
- Use TypeScript strict mode
- Mobile-first responsive design

These rules made Kiro much faster and more accurate. The parallel file reading alone saved time.

Then I set up the tech stack:

Next.js 16 with App Router
TypeScript in strict mode
Tailwind CSS for styling
Supabase for database and auth
Google Gemini for AI generation
Zustand for state management

Kiro helped me configure everything. It created the folder structure, set up TypeScript configs, and installed all dependencies.

Converting Figma to Code with MCP

This is where Figma MCP became a game changer. I uploaded my Figma designs to Kiro and said "convert this to code."

Kiro analyzed the design and generated:

Landing page with hero section, features grid, and footer
Responsive layout with Tailwind classes
Component structure following my steering rules
TypeScript interfaces for props

What would have taken me hours of manual work happened in minutes. The generated code was clean, responsive, and followed best practices.

I did this for each major page:

Landing page
Dashboard layout
Flashcard interface
Study modes
Pomodoro timer
Settings pages

Each time, Kiro converted the Figma design to near pixel-perfect React components.

I spent extra time on the spooky theme. Dark backgrounds, purple accents, Halloween-inspired text. The flashlight effect was just a crazy idea I com up with - a dark overlay with a radial gradient following the cursor.

Database Schema and Supabase Setup

I needed to store users, materials, flashcards, and progress data. I let Kiro designed the database schema.

Setting up Supabase was tricky at first. I struggled with SQL functions. That's when I installed Supabase Powers in Kiro.

Instantly, Kiro understood my schema. It helped me:

Create SQL functions for rate limiting
Debug complex queries

What took me hours of trial and error before was fixed in minutes with Supabase Powers.

AI Integration with Google Gemini

The core feature is AI generation. Users upload PDFs, and Gemini extracts flashcards or reviewer content.

I set up multiple API keys for rotation to handle rate limits. Kiro helped me build:

// API route for flashcard generation
export async function POST(request: NextRequest) {
  // 1. Parse PDF or text input
  // 2. Check user rate limits (10/day)
  // 3. Call Gemini with structured prompts
  // 4. Parse AI response into cards
  // 5. Save to database
  // 6. Return formatted response
}

The tricky part was prompt engineering. I needed Gemini to return consistent JSON with terms and definitions. Vibe mode helped me iterate on prompts until the output was reliable.

I also added a reviewer maker that organizes content into categories with color coding. Different extraction modes: full definitions, sentence summaries, or just keywords.

Study Modes and Spaced Repetition

Each study mode needed different logic:

Flashcards: Simple flip animation with next/previous navigation. Cards show term first, flip to definition.

Learn Mode: Adaptive algorithm that shows cards based on mastery level. New cards appear more often, mastered cards less often.

Match Game: Drag and drop interface matching terms to definitions. Timer and scoring system.

Practice Test: Mixed question types based on card difficulty. Multiple choice, fill-in-the-blank, true/false.

The spaced repetition algorithm was complex. Cards have states (new, learning, review, mastered) and intervals that increase based on how well you know them.

Kiro helped me implement the spaced repetition algorithm. It tracks when to show each card next based on your performance.

The Spooky Theme and Flashlight Effect

This was the fun part. I wanted something unique that no other study app had.

The spooky theme was straightforward - dark backgrounds, purple colors, Halloween-inspired text throughout the UI.

But the flashlight effect was tricky. I needed:

Dark overlay covering the entire screen
Radial gradient that follows mouse/touch
Smooth animation without performance issues
Works on mobile and desktop

The result is mystical! Turn on spooky mode and flashlight effect, and you study in complete darkness with only a circle of light around your cursor while studying. It's surprisingly immersive.

Gamification and Productivity Features

I added XP and achievements to make studying more engaging:

Earn XP for completing cards, study sessions, streaks
Level up from Novice to Grandmaster
Unlock achievements for milestones
Track study streaks and statistics

The Pomodoro timer was another major feature:

Customizable work/break intervals
Task list with reminders
Ambient sounds (rain, cafe, nature)
Background image upload on local storage
Fullscreen focus mode

Kiro Vibe Mode helped me build the timer logic with proper state management. The notification system works across the entire app.

Export and Sharing Features

Users wanted to export their materials and share them with classmates.

Export features:

PDF generation with jsPDF (two-column layout)
DOCX export with proper formatting
Clean, printable designs

Sharing system:

Generate unique share codes
Public pages that don't require login
Copy-to-library feature for shared materials
Privacy controls (active/inactive links)

The sharing logic was complex because of security. I needed public access without exposing private data. Supabase RLS policies handled this perfectly.

Testing and Optimization

I used Vitest for testing and fast-check for property-based tests. Kiro helped me set up automated testing with hooks:

Run tests after every code change
Check builds before deployment
Lint code automatically
Property-based testing for edge cases

The hooks saved me time because tests ran in the background. I got instant feedback if something broke.

Performance optimization:

Server components where possible
Dynamic imports for heavy features
Image optimization with WebP
Lazy loading for non-critical components

The Results

DeepTerm launched with all features working:

AI-powered flashcard and reviewer maker
Four study modes with spaced repetition
Spooky theme with flashlight effect
Pomodoro timer and productivity features
Export and sharing capabilities
Gamification with XP and achievements

The app is completely free and open source. No limits, no paywalls, no "upgrade to pro" nonsense.

What I Learned About Kiro and MCP

This project taught me how powerful Kiro can be with the right setup:

Figma MCP: Converting designs to code saved me days of work. What used to be tedious manual translation became instant generation.

Supabase Powers: Database debugging that used to take hours was fixed in minutes. Kiro understood my schema and wrote perfect SQL.

Context7 MCP: Access to up-to-date documentation was crucial for Next.js 16 features that weren't in the training data.

Custom Steering Rules: Small optimizations like parallel file reading and background processes made a huge difference in speed.

Agent Hooks: Automated testing and builds meant I could focus on features instead of manual tasks.

Try It Yourself

DeepTerm is live at Deepterm. Upload a PDF and see the AI generate flashcards in seconds. Try the spooky theme and flashlight mode - it's surprisingly fun to study in the dark.

The code is on GitHub if you want to host your own version or contribute features.

Building this taught me that with the right tools (Kiro + MCP + Hooks), you can build anything. The only limit is your imagination.

kiro

Building an MCP Server That Solves Every Developer's Rules Management Problem

James Gabriele — Thu, 28 Aug 2025 21:16:54 +0000

The Problem Every Developer Knows Too Well

You're working on a project in Cursor, following your carefully crafted coding rules and style guides. Everything is perfect. Then you switch to another AI IDE or CLI, and... your workspace is suddenly cluttered with duplicate .md files.

This exact frustration led me to build the Agent Rules MCP Server - a solution that lets you store all your coding rules in GitHub and fetch them on-demand, no matter which AI tool you're using.

What I Built: Agent Rules MCP Server

The Agent Rules MCP Server transforms how developers handle coding standards by:

Centralized Storage: Keep all coding rules in one GitHub repository
On-Demand Access: Pull specific rules without cluttering your workspace
Multi-Format Support: Works with .md, .mdc, .chatmode.md, .prompt.md, and .instructions.md
Smart Fallbacks: Automatically switches to direct raw GitHub user content access when API limits are reached.
Zero Config: Works immediately with any public repos - no GitHub token required

The server provides two core MCP tools:

get_rules: Fetch rules for specific rules (e.g. react, security, typescript, etc.)
list_rules: Browse all available rule topics with descriptions

Try It Yourself

The Agent Rules MCP Server is available on NPM and works with any MCP-compatible AI tool. Check out the GitHub repository for setup instructions and example configurations.

The Architecture

Built with modern TypeScript and these key technologies:

MCP TypeScript SDK: For seamless AI tool integration
GitHub API: For reliable file access with smart fallbacks
Node.js

The server implements intelligent caching and concurrent request handling, with automatic fallbacks to raw GitHub URLs when API limits are reached.

Overcoming Challenges

The MCP Schema Compatibility Issue

The biggest hurdle was discovering that MCP has strict JSON Schema limitations. My server worked perfectly with other IDEs but failed when connecting to Kiro. Through feedback, we identified and solved the schema compatibility issues, redesigning complex validation patterns.

GitHub API Rate Limiting

Rather than forcing users to manage API tokens, I built a smart fallback system that seamlessly switches to direct GitHub raw github content file access when rate limits are hit. This makes the tool accessible to everyone without needing for Github token.

What This Means for Developers

No More Rules Duplication: One source of development rules for all your AI IDEs or CLIs
Cross-Tool Compatibility: Use the same rules in Cursor, Copilot, Kiro, Windsurf, or any MCP-compatible AI tool
Zero Maintenance: Rules live in GitHub where they belong, not scattered across local files

The Kiro Advantage: AI-Powered Development

What made this project special wasn't just the end result - it was how I built it using Kiro's Specs features. Here's how Kiro transformed my development process:

1. Specs-Driven Development

I spent over an hour using Kiro's Specs feature to plan everything before writing a single line of code. It was a collaborative architecture design session with Kiro:

Defined the exact problem and solution approach
Specified technical requirements (TypeScript, Node, MCP SDK, GitHub API)
Mapped out tool functionality and error handling strategies
Created a PRD that Kiro will follow

The result? When Kiro generated code, it perfectly matched our planned architecture. No confusion, no scope creep, just clean implementation.

2. Steering Rules for Consistency

Kiro's steering system kept coding standards consistent throughout the project. Instead of repeatedly explaining my preferences, I set up steering rules that automatically guided every code generation session.

3. Kiro as a Debugging Partner

The most impressive moment came when my MCP server wouldn't connect to Kiro itself due to JSON Schema compatibility issues. I simply copied the error messages and described the problem. Kiro immediately identified that MCP doesn't support complex schema features like oneOf and anyOf, then rewrote my parameter schemas to use simpler patterns - saving me time.

4. Give new instructions while its running

This hidden feature I discovered while using Kiro is that you can give it new instructions by giving it new steering file while its working. Just make a .md file containing feedback, tasks, clarifications, etc., then add it to the steering files. Kiro will detect it and follow it as it works. By doing this, you can reduce many problems Kiro produces while operating or when you forgot to add more information to your prompt.

Key Takeaways for AI-Assisted Development

Working with Kiro taught me that the future of coding isn't about AI replacing developers - it's about true collaboration:

Plan First: Use specs to align on goals before coding
Set Standards: Steering rules eliminate repetitive explanations
Debug Together: AI can solve complex technical problems faster than solo research
Stay Focused: One conversation, one specific goal at a time

What coding standards do you struggle to keep consistent across projects? How do you currently manage rules across different AI tools? Share your experiences in the comments below!

kiro #ai #mcp #productivity