DEV Community: Dooa Ansaari

React 18 and Claude Code Animations Project

Dooa Ansaari — Fri, 23 Oct 2026 19:45:50 +0000

I created 10 loader animations using Claude code and Opus 5.5. It was wild to see my imagination coming to life within seconds. The new Anthropic model Opus 5.5 is really good at animations. The project is meant to have fun with animations and try new ideas with AI.

The result is react-loaders: 10 loaders, zero dependencies, each one a folder you can copy into your app.

🎬 A few of them

Glow Dust: the button dissolves into ~1,100 particles that drift through a "wind" field. Move your finger through it and the dust swirls around you. At the end, it all gathers into a glowing ✓.

Shooting Star: the button becomes a star and launches. A meteor shower follows (swipe to fling your own), then a constellation draws a ✓.

Cat & Mouse: a mouse escapes from the button, a cat chases it for three laps… then pounces. Gotcha!

The others: Glow Shore (bioluminescent waves you can touch), Heartbeat, Fireworks, Savanna Sunset, Flower Bloom, Thunderstorm and Coin Rush (a tiny retro platformer).

✨ Try it

👉 github.com/dooa-ansari/react-loaders

👉 Test it live

Run it locally with npm install && npm run dev, swipe through the cards, and play with the interactive ones. Glow Dust on a phone is weirdly relaxing.

I Built a Claude Skill That Turns a Boring Resume Into an Animated Web Page

Dooa Ansaari — Fri, 16 Oct 2026 20:11:02 +0000

I wanted to try something really fun for generating online profiles and websites; mostly, I wanted it to be customised for each person and have some personality.

So I built a small Claude skill that takes a normal resume (or a LinkedIn PDF) and turns it into an animated, interactive one-page profile.

In this post, I'll show you what it does, how it works under the hood, and how you can try it yourself in about two minutes.

Here's what it looks like

The demo uses a fictional person, so no real data was harmed in the making of this GIF. 😄

What the skill builds

Here's what ends up on the page:

An animated avatar that blinks, types, waves and shows little speech bubbles. You can pick the hairstyle, colors, glasses and so on.
Your career as game levels. Each job is a level, with a "LEVEL UP!" pop and the skill you unlocked there.
Achievement counters and "why hire me" cards, each one tied to something real from your CV.
A character sheet with a small animated "happy place" scene and some personality perks.
Your GitHub projects shown as an interactive graph of projects and technologies.

And the output is just one HTML file. No framework, no build step. You can drop it on GitHub Pages, and you're done.

How it works (the simple version)

When you ask Claude to make an animated resume, the skill walks through four steps:

It asks for your resume. PDF, DOCX, plain text, or a LinkedIn "Save to PDF" export all work. You can also share your GitHub username.
It asks a few quick questions, like which theme you want, what your avatar should look like, your favourite colours, your hobbies, and the role you're aiming for.

That's the whole trick. Claude does the reading and the interviewing, and a plain Python script does the building.

Here's roughly how the skill folder is laid out:

skills/animated-resume/
├── SKILL.md                    # the instructions Claude follows
├── assets/template.html        # the animated page
├── assets/example-profile.json # a full fictional example
├── references/schema.md        # every profile.json field
└── scripts/build.py            # profile.json → index.html

Try it yourself

If you use Claude Code, installing it takes two commands:

/plugin marketplace add dooa-ansari/animated-resume-claude-skill
/plugin install animated-resume@animated-resume

Then just ask:

Make me an animated resume from my CV.

If you use the Claude app (claude.ai or desktop), download animated-resume-skill.zip from the repo and upload it under Settings → Capabilities → Skills.

Putting it online

Since the result is a single HTML file, hosting it is easy:

Put index.html in a GitHub repo.
Go to Settings → Pages → Deploy from a branch and pick main / (root).
Your page goes live at https://<your-username>.github.io/<repo>/. Now you have a link you can put on your LinkedIn or in your email signature.

Wrapping up

The code is open source under the MIT license, so feel free to use it, fork it, or borrow ideas for your own skill:

👉 github.com/dooa-ansari/animated-resume-claude-skill

Learning AI as a software developer

Dooa Ansaari — Wed, 07 Oct 2026 17:14:56 +0000

I've been writing software for years – 10 years now – starting with the blue screen of Turbo C, Android, React and now AI. Assisted AI development is not an issue, but applied AI, LLM integrations, RAG, tuning, etc., seem like a whole different world to me.

I ask myself this question every day, and a lot of times, do I need to learn all of this? Am I afraid of being left behind or being archived like an old library? Anyways, I'm finding time to build small things on AI.

I have recently started to learn the concepts of RAG, embeddings and LLM integrations. I came across GraphRAG as well, which seemed like an awesome idea.

GraphRAG was actually more interesting and surprising for me, trying to understand how link traversal works and how indexing happens.

To really see the process, I built GraphRAG Chats, an open-source React Flow app. You draw a graph by hand, prepare it for search, ask it a question, and watch which nodes and relationships the answer came from.

1. GraphRAG

RAG (retrieval-augmented generation) means the AI looks things up in your data before it answers. Plain RAG finds text chunks that are similar to the question.

GraphRAG adds relationships. Your data lives in a graph database such as Neo4j, as nodes. Neo4j can also store embeddings in a vector index, so one database handles both parts: finding the right starting node by meaning and then following its relationships.

2. Embeddings

What are embeddings? Numbers. A list of a few hundred or a few thousand of them.

What do the numbers mean? They capture the meaning of a piece of text. Texts with a similar meaning get similar numbers, so you can measure how close two meanings are.

Where does the text come from? From your own data. You turn each piece of data into a plain, human-readable sentence first, for example, "Ben is a person. Backend engineer," and send that text to an embedding model.

3. Process Step by Step

Preparing the data (done once):

Create the graph and define all your relationships properly.
Save it to a graph database (Neo4j in my case).
Turn each node into readable text.
Send that text to an embedding model, and store the embedding on each node in Neo4j's vector index.

Answering a question (done every time):

Turn the question into an embedding with the same model.
Use vector search to find the nodes whose embeddings are closest to the question. These are the starting points.
Traverse the graph from those nodes to collect their relationships and neighbours.
Send the question plus everything found to an LLM, which writes the answer.

Step 8 is the "generation" in retrieval-augmented generation. The LLM only writes the answer; the graph decides what facts it gets to see.

Most of this turned out to be skills I already had as a developer: modelling data, calling APIs, storing things in a database, and debugging when the result is wrong. The new part is a handful of concepts, and they click much faster when you can see them happen.

I would recommend that other developers as well learn by building and do not hesitate to make mistakes. AI transformation is a difficult time, but let's go through it by keeping up with it.

GitHub Project
Course Link