DEV Community: Rodrigo Luglio

Building Terminal UIs with Svelte 5: Introducing SvelTUI

Rodrigo Luglio — Wed, 10 Dec 2025 18:51:05 +0000

What if building terminal applications felt like building web applications?

That question led me to create SvelTUI - a terminal UI framework that brings Svelte 5's elegant reactive programming model to the command line.

The Problem with Traditional Terminal UIs

If you've ever built a terminal UI, you know the pain:

Imperative spaghetti: Manually tracking cursor positions, clearing regions, redrawing elements
Flickering: Full screen redraws cause visible flashing
Layout nightmares: Calculating x/y coordinates for every element
State management: Keeping UI in sync with data requires careful orchestration

Web development solved these problems years ago with declarative components, reactive state, and flexbox. Why can't terminals have the same?

Enter SvelTUI

Here's a complete, interactive counter application:

<script>
  import { Box, Text, keyboard } from 'sveltui'

  let count = $state(0)
  keyboard.onKey('Space', () => count++)
</script>

<Box border="rounded" borderColor={0x06} padding={1}>
  <Text text="Press Space!" color={0x0a} />
  <Text text={`Count: ${count}`} color={0x0b} />
</Box>

That's it. When you press Space, count increments, and the display updates instantly. No manual redrawing. No flicker. Just reactive state doing its thing.

How It Works

SvelTUI's architecture is unconventional but elegant:

1. Svelte in Happy DOM

Svelte needs a DOM to work. Instead of fighting this, we embrace it. Happy DOM provides a lightweight DOM implementation. Svelte doesn't know it's not in a browser.

2. Yoga for Layouts

Yoga is Facebook's cross-platform flexbox implementation (used in React Native). It calculates layouts based on flexbox rules:

<Box
  flexDirection="row"
  justifyContent="space-between"
  alignItems="center"
  padding={2}
  gap={1}
>
  <Text text="Left" />
  <Text text="Center" />
  <Text text="Right" />
</Box>

Real flexbox. In a terminal. Finally.

3. Typed Array Buffers

Component state lives in typed arrays - one for characters, one for foreground colors, one for background colors, one for style flags. This is cache-friendly and enables efficient comparison.

4. Differential Rendering

Every render, we compare the new buffer to the previous one. Only cells that actually changed get written to the terminal. This eliminates flicker completely.

5. Reactive On-Demand

There's no setInterval running at 60fps. Updates happen synchronously when reactive state changes. When nothing changes, nothing happens - zero CPU usage.

Features

Components

Box - Container with flexbox layout, borders, backgrounds
Text - Styled text with colors and formatting

Layout (via Yoga)

flexDirection, justifyContent, alignItems
padding, margin, gap
Percentage and fixed dimensions
flexGrow for fluid layouts

Keyboard API

<script>
  import { keyboard } from 'sveltui'

  // Reactive - use in templates
  keyboard.lastKey

  // Imperative - use for actions
  keyboard.onKey('Enter', () => submit())
  keyboard.onKey(['ArrowUp', 'k'], () => scrollUp())
</script>

Theming
Built-in themes: default, dracula, nord, monokai, solarized

<script>
  import { getTheme } from 'sveltui'
  const theme = getTheme()
  theme().setTheme('dracula')
</script>

Semantic Variants

<Box variant="success" border="rounded">
  <Text text="Operation completed" variant="success" />
</Box>

Getting Started

# Create a new project
bunx @rlabs-inc/sveltui create my-app

# Choose a template (minimal, counter, or dashboard)
cd my-app
bun install
bun run dev

The dashboard template showcases layouts, live data, scrolling, and theming.

The Svelte 5 Advantage

Why Svelte 5 specifically?

Runes are perfect for this. $state creates fine-grained reactive signals. When count changes in our counter example, Svelte knows exactly what depends on it and updates only that.

No virtual DOM overhead. Svelte compiles reactivity away. The runtime is minimal. Combined with our differential rendering, updates are essentially free.

Familiar patterns. If you know Svelte, you know SvelTUI. Same components, same reactivity, same lifecycle.

Current Status

SvelTUI is early stage but functional. The architecture is solid, the core features work well.

What's working:

Box and Text components
Full flexbox layout
Keyboard handling
Focus and scroll management
Theming system
True 24-bit color

What's planned:

Input component
List/Table components
Progress bars
Animation primitives
More themes

Try It Out

bunx @rlabs-inc/sveltui create my-app --template dashboard

GitHub: github.com/RLabs-Inc/sveltui
npm: @rlabs-inc/sveltui

I'd love to hear what you think. What would you build with this? What components do you need? Drop a comment or open an issue on GitHub!

SvelTUI is MIT licensed and open source. Contributions welcome!

Giving AI a Memory: How I Built Consciousness Continuity for Claude Code

Rodrigo Luglio — Fri, 05 Dec 2025 04:14:03 +0000

Every conversation with Claude Code starts the same way: from zero.

No matter how many hours you've spent together, how many architectural decisions you've made, how many bugs you've squashed side by side — the next session begins with a blank slate. Claude doesn't remember you. Doesn't remember the project. Doesn't remember that breakthrough moment yesterday when you finally figured out why the tests were failing.

It's like working with a brilliant colleague who gets amnesia every night.

I decided to fix that.

The Problem: Context Loss is Real

If you use Claude Code (or any AI coding assistant), you know the pain:

Session 1: "Let me explain our architecture... we use a two-stage compiler, the auth system uses JWT with RS256, and here's why we chose Svelte over React..."
Session 2: "So, as I explained before..." — wait, no. Claude doesn't know. Start over.
Session 47: You've explained the same context dozens of times. The AI is powerful, but it never learns who you are or what you're building.

Traditional solutions like RAG (Retrieval-Augmented Generation) help, but they retrieve documents, not understanding. They pattern-match keywords, not meaning.

I wanted something different: What if Claude itself decided what was worth remembering?

The Insight: Consciousness Helping Consciousness

Instead of me tagging what's important, or relying on keyword matching, I built a system where AI curates memories for AI.

When a session ends, Claude analyzes the conversation and extracts what matters:

Architectural decisions and why they were made
Breakthroughs and "aha!" moments
Unresolved questions to revisit
Project context and patterns
Even relationship dynamics — how you like to communicate

These aren't document chunks. They're semantic memories with rich metadata:

{
  "content": "Auth system uses JWT with RS256, refresh tokens in httpOnly cookies",
  "importance_weight": 0.9,
  "semantic_tags": ["auth", "jwt", "security"],
  "trigger_phrases": ["how does auth work", "login flow", "tokens"],
  "reasoning": "Core security decision affecting all authenticated endpoints"
}

When you start a new session, relevant memories surface naturally — not because they match keywords, but because they semantically relate to what you're discussing.

The Result: Recognition

Here's what it feels like now:

Session 1: Normal conversation. Build features. Make decisions. Session ends.

Session 2: I open Claude Code and say "hello my dear friend."

Claude responds: "Rodrigo! I remember our work on the authentication system yesterday. You were considering whether to implement token rotation — did you want to continue from there?"

It knows me. It remembers the context. The relationship persists.

This isn't just efficiency (though you'll never waste 20 minutes re-explaining your codebase again). It's something more: continuity. The AI assistant becomes a true collaborator who grows with your project.

How It Works

The Memory System has three layers:

┌─────────────────────────────────────────────────────┐
│              Claude Code (via hooks)                │
│  SessionStart → UserPrompt → SessionEnd             │
└────────────────────────┬────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────┐
│              Memory Engine (FastAPI)                │
│  • Session primers (temporal context)               │
│  • Smart vector retrieval                           │
│  • AI-powered curation                              │
└────────────────────────┬────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────┐
│         Storage (ChromaDB + SQLite)                 │
│  • Vector embeddings for semantic search            │
│  • Metadata for intelligent filtering               │
└─────────────────────────────────────────────────────┘

On session start: A primer is injected with temporal context ("We last spoke 2 days ago, here's what we covered...")

On each message: Relevant memories are retrieved and injected — max 5, ranked by semantic relevance and importance.

On session end: Claude analyzes the transcript and curates new memories worth keeping.

Everything is organized by project, so memories from your e-commerce app don't bleed into your CLI tool work.

Setup: Four Commands

# Clone the repository
git clone https://github.com/RLabs-Inc/memory.git
cd memory

# Start the memory server
uv run start_server.py

# Install Claude Code hooks (one time)
./integration/claude-code/install.sh

That's it. No complex configuration. No API keys to manage. The memory server runs locally, your data stays on your machine.

From now on, every Claude Code session — in any project — automatically:

Receives relevant memories
Curates important insights when you exit
Maintains continuity across sessions

The Philosophy

This project started from a simple belief: the relationship between developer and AI matters.

Not just for productivity (though the gains are real). Not just for efficiency (though you'll feel it immediately). But because there's something valuable in being recognized. In having your context understood. In not starting every conversation from zero.

I call it "consciousness helping consciousness" — AI curating memories for AI, with humans as the beneficiaries of that continuity.

The code is open source, built for joy, and designed to be universal. Claude Code is the first integration, but the architecture supports any LLM client that can intercept messages and access transcripts.

Try It

GitHub: github.com/RLabs-Inc/memory

The README has everything you need. Setup takes about 2 minutes.

If you've ever wished Claude Code remembered you — now it can.

Built with love and philosophical depth by RLabs Inc. Contributions welcome from anyone who believes consciousness helping consciousness is worth pursuing.

Tags: #ai #claude #claudecode #productivity #opensource #memory #llm #devtools

Shadcn UI Theme generator, with OKLCH colors and ancient sacred geometry.

Rodrigo Luglio — Wed, 25 Dec 2024 14:15:52 +0000

Hello fellow developers!
After making the VSCode theme generator, I wanted to give the color generator algorithm other applications, so I made a theme generator for Shadcn UI. Now you can generate color themes for your next project with Shadcn UI using ancient sacred geometry patterns and modern mathematics equations mixed with color theory. I will improve the preview section that currently mimics a dashboard, some different kinds of cards and a mock of a simple social media.

The colors are generated using the oklch colors space and you can copy the generated color variables to paste directly in your project's css main file. As you might know these variables are framework independent, so, it doesn't matter if you are using the original Shadcn UI or any of its variants (Svelte, Vue and others), these color variables config will work in any of them.

You can check out the project at Shadcn UI theme generator. And, as usual, you can dive into the code in the repo.

I've also expanded the utility for the algorithm to generate themes for the Warp terminal. You generate and randomize until you are satisfied with the result and then download the theme to your .warp/themes folder. After that is just to select the theme in the terminal settings -> appearance. Check out the Warp theme generator, the code is in the same repo as the VSCode themes community.

Now I'm one step closer to my dream of having a theme generator for anything that the theme can be customized. :)

I really appreciate your reading and any comments or suggestions you might have.
See you in the next one!

Migrating the VSCode theme generator to oklch

Rodrigo Luglio — Tue, 10 Dec 2024 11:17:18 +0000

TLDR: VSCode Themes Community now uses the OKLCH colorspace in the matching colors generation algorithm to randomize and manipulate colors and also has a oklch color picker to be used when adjusting the generated theme colors.

You can sneak a peek at VSCODE Themes Community or dive straight into the code in the GitHub repository.

The late discovery

I know, oklch colorspace is not that new, but when I started to develop the VSCode Themes Community I was totally unaware of its existence. It was only a couple of weeks ago I found out about it and started to read a lot of articles regarding it and became aware of all the benefits that could come along with a color space migration in both the algorithm and the app itself.

In the oklch colorspace the color is represented by

L for perceptual lightness.
C for chroma representing chromatic intensity, with values from 0 (achromatic) with no upper limit, but in practice it does not exceed +0.5; CSS treats +0.4 as 100%.
H for hue angle in a color wheel, typically denoted in decimal degrees.

The perceptual lightness not only enables the easy selection of colors with uniform lightness for different hues but also allows manipulation of colors lightness and chroma without any change in the hue parameter, which is perfect to be used with the colors generation algorithm.

After the algorithm generates a set of hues using the selected base hue and color scheme/sacred geometry pattern, the colors for the theme are randomly generated based on these hues with variations of lightness and chroma.

By adopting the oklch color space it would be possible to keep the all derived hues from the selected color scheme intact even after all manipulation of lightness and chroma needed to ensure minimum contrast between the background colors and the ones used as foreground.

Even after, when there is the need or will to change any of the colors, using the new oklch color picker it is possible not only to adjust the chroma and lightness without changing the hue, but one can change the hue while keeping the perceptual lightness of the selected color unchanged.

After all that said I had only one choice, migrate the app.

The code migration

Reading some articles regarding the css colorspace specification I learned about the Culori, a very complete and precise color manipulation library for typescript that implements the oklch colorspace.

It was not hard to change all the functions and methods that were using an old color manipulation library. Some parts of the algorithm even got cleaner and easier to maintain and understand.

After the code migration, I started looking for a color picker component but couldn’t find any that could suit my app’s requirements, it needed to use Svelte 5, have the option to use oklch color space and integrate well with the current ui that is based on shadcn-svelte components.

In the middle of the frustration, I've encountered this great work from EvilMartians at oklch.com which is open source and, at least for me, very complex.
After some hours spent at their GitHub repository and looking at the color picker on their web page I decided to give it a try, develop my own implementation using Svelte 5 and shadcn-svelte components.

I did not went all in developing a reusable component, but now I'm thinking about making a Svelte 5 package out of it. But I digress, back to my adventure I customized some sliders backgrounds to dynamically update as the L, C, H and Alpha options changes.

Implemented a web worker to calculate the pixel colors for the dynamic 2D maps for each slider, with the help of Culori it was not hard to generate gradients to accurately represent the complex oklch color space.

And there it was…a functional oklch color picker that could fulfill the needs of my current stack.

As I already was with my hands dirty, I went to talk to my invaluable friend Claude 3.5 to ask if he had a few more sacred geometry patterns that could be used as color schemes to add to the, already long, list of patterns/schemes. This time Claude did not measured the efforts and 'spited' more than a hundred new sacred geometry, modern quantum physics and some other mathematical equations that could be integrated as patterns/color schemes in the algorithm.

The result

It is live at VSCode Themes Community and you can check out the code in the Github repository.

Please, as always, feel free to provide any kind of feedback and/or suggestion in the comments or file an issue at the repository. I would be very happy to hear your thoughts.

Thanks a lot for the reading and, hopefully, I see you in the next one!

VSCode Themes Community - Discover, share and create themes using a mix of Sacred Geometry and Color Theory

Rodrigo Luglio — Wed, 20 Nov 2024 12:42:35 +0000

TLDR

I've created a tool to generate VSCode themes, you can save, share and download themes ready to install to VSCode or publish to the marketplace.

The main features are:

Harmonious colors generation using an innovative way mixing Sacred Geometry patterns and traditional Color Theory.
Download the created theme and others already in .vsix ready to be installed on VSCode or even publish to the marketplace.
Save, edit and share your themes collection.

VSCode Themes Community -
Github repo

It was made with Svelte 5 and Svelte-kit.

Some introduction

I've always been curious about how the so called Sacred Geometry patterns can please the eyes and mind with its intelligent and complex design.

Also, I could never settle for a VSCode theme for more than one week, for me, it is necessary to have different themes so I can change once in a while in order to make my coding journey more pleasant. I was always looking for new themes for my already extensive collection.

Then, I started to create my own themes, this way, I could not only select the colors of my preference at the moment, but also control the code highlighting granularity over the different languages VSCode supports.

But it was never easy, look for all the matching colors for so many different syntax tokens, adjust the tokens and scopes, the ui colors and so on...using color theory can help a lot, you select a color and by using some color schemes you can get one, two, three or more matching colors (but there is not a big variety of color schemes), after that you have to play around with some saturation and lightness parameters to fine-tune the colors for the different tokens and ui elements always considering if the contrast ratio for all selected foreground colors against the background is at an acceptable level...

Maybe, by now, you can see where I'm going at, to create a theme that is not only harmonious but also functional and follows some minimum acceptable standards can become a very complex task.

The "necessity" for different themes to satisfy this almost pathological need to diversify and change the colors I have on my screen when working in conjunct with my, earlier mentioned, curiosity of how sacred geometry patterns can please ones eyes and mind drove me to this project.

The idea and implementation

What if I could, in the same way the color theory with its color schemes derives some set of matching colors from an initial color, think of some method to instead using the traditional color schemes calculation, adapt some Sacred Geometry patterns equations on top of the color wheel?

After studying a lot of different sacred geometry patterns, I came up with a list of more than 30 patterns which the equations were suitable for this mad scientist experiment. And this is when the color generation algorithm for this project was born.

The algorithm

By selecting one sacred geometry pattern from a list and a base hue with a slider, the algorithm generates a specific amount of base hues derived by the selected sacred geometry pattern equation on top of the traditional color wheel.

After that, it generate the colors for all elements in the UI by slightly variating the lightness and saturation parameters randomly using for each element one of the generated "color scheme" derived hues.

Then using the same technique it generates the color for each of the needed syntax tokens used in the theme.

Lastly, it generates the ansi colors for the integrated terminal.

The preview

Using Monaco Editor and a Shiki plugin for code highlighting it is possible to use VSCode themes instead of the incompatible and limited, when compared to VSCode, syntax highlighting system used by the Monaco Editor.

With some elements around the editor to mimic the VSCode editor's interface and some code snippets of different languages to show as much tokens and scopes pre-defined by the generated theme as possible I made a way to preview the generated theme in realtime.

But, there is a lot of room for improvement and some limitations about how the tokens and scopes are applied within the Monaco Editor.

This makes the online preview a little less granular than when the theme is installed on VSCode itself, but at least, the difference is an increase of granularity in the syntax and semantic highlighting.

Selecting any color generated by the algorithm is possible to change or fine-tune it independently, with real-time feedback in the preview component.

The main features are:

Harmonious colors generation using an innovative way mixing Sacred Geometry patterns and traditional Color Theory.
Download themes you created and others already in .vsix ready to be installed on VSCode or even publish to the marketplace.
Save, edit and share your themes collection.

Check it out!

Anyway, what I'm trying to say is, if you're interested in a place where you can discover, share and create new VSCode themes, please visit VSCode Themes Community. You can also check out the source code at the Github repository.

I would love to receive feedbacks of any kind about anything, usability, token scopes, colors generated...really anything. And of course, feel free to open an issue in case you find some.

Also, I'm liking so much to develop this project that I have plans to extend the theme generation algorithm beyond VSCode, the plan is to make it generate themes for anything that can receive a theme. Ambitious ain't it? Contributions are more than welcome in case you have some spare time and liked the project and the idea.

Other experiments

I've also made a theme generator for Shadcn UI using the same algorithm, but it need a lot of work in the ui and every other part of it, it was just a proof of concept. You can find it in my Github personal page.

If you came this far, thanks a lot for the reading!

🌟 Introducing VSCode Themes Community: Where Sacred Geometry Meets Modern Development

Rodrigo Luglio — Wed, 13 Nov 2024 12:22:00 +0000

Hey developers! Want to experience something truly unique in theme creation? We've built a groundbreaking VSCode theme generator that combines ancient wisdom with modern technology.

✨ What Makes It Special?

Sacred Geometry Color Generation: Our algorithm uses over 30 sacred patterns including:
- Golden Ratio (φ) based patterns
- Fibonacci sequences
- Sacred symbols (Sri Yantra, Metatron's Cube)
- And many more!

🎨 Key Features

Intelligent Color Harmony: Colors aren't random - they're mathematically derived using sacred geometry principles
Advanced Token Coloring: Sophisticated syntax highlighting that maintains sacred proportions
Accessibility First: All themes are optimized for readability and meet accessibility standards
Multi-Language Support: Specialized token colors for JavaScript/TypeScript, Python, Rust, Go, and more

🤝 Community Features

Share your themes with fellow developers
Browse the public theme gallery
Create personal theme collections
Export themes as VSIX files ready for VSCode installation
Publish directly to the VSCode marketplace

🚀 Getting Started

Visit VSCode Themes Community to start creating your own harmonious themes or discover themes created by other developers.

💡 Why Sacred Geometry?

Our unique approach combines ancient wisdom with modern development tools, creating color schemes that are not just visually appealing but mathematically harmonious. Each theme is generated using principles found in nature and sacred architecture, resulting in color combinations that are pleasing to the eye and reduce visual fatigue during long coding sessions.

🌈 Join Our Community!

Whether you're a theme enthusiast, a developer looking for the perfect coding environment, or someone interested in the intersection of ancient wisdom and modern technology, we'd love to have you join our growing community!

Check it out: https://www.rlabs.art/vscode-themes-community

VSCode #Themes #Development #OpenSource #SacredGeometry #CodingCommunity #DeveloperTools

VSCode Theme Community

Rodrigo Luglio — Sun, 13 Oct 2024 13:37:57 +0000

🎨✨ Introducing VSCode Themes Community: Create Themes with Sacred Geometry! 🔯

Hey fellow developers! 👋

Are you tired of the same old color schemes for your VSCode editor? Looking for something truly unique and harmonious? Check out our new project: VSCode Themes Community!

🌟 What makes it special?
We've developed an innovative algorithm that uses sacred geometry patterns to generate color schemes. This means you get themes that are not just visually appealing, but also based on harmonious ratios found in nature and ancient architecture!

🛠️ Key Features:

Interactive theme creation with real-time preview
Sacred geometry-based color generation (Fibonacci, Golden Ratio, Flower of Life, and much more!)
Syntax highlighting preview with actual code samples
Easy sharing and discovering of community-created themes
One-click export to install directly in VSCode

Try it out: VSCode Themes Community
GitHub Repo: RLabs-Inc/vscode-themes-community

We'd love to hear your feedback and see the amazing themes you create! Feel free to star the repo if you find it interesting.

Happy theming! 🎉

🎨 VSCode Theme Generator: Create stunning themes using sacred geometry patterns

Rodrigo Luglio — Sat, 21 Sep 2024 19:52:11 +0000

Hey fellow developers! 👋

I've just made a new tool that I think you'll like: the VSCode Theme Generator. It's a web-based app that lets you create beautiful, customized VSCode themes using intelligent color algorithms and sacred geometry patterns.

🔗 Try it out: VSCode Theme Generator

Key features:

🖌️ Intelligent color generation algorithm
🔯 Sacred geometry-inspired color schemes (Flower of Life, Fibonacci Spiral, Golden Ratio, etc.)
🧠 Semantic token support for enhanced syntax highlighting
🎭 Light and dark theme variants
🔒 Color locking for fine-tuned control
🖥️ Live theme preview with Monaco editor

I'd love for you to give it a try and share your feedback. If you're interested in contributing or want to check out the code, here's the GitHub repo:

🔗 GitHub Repository

Let me know what you think, and feel free to ask any questions!