Skills Explorer (AI)

Skills Explorer

Traditional resumes don’t capture what product designers can do.

I built Skills Explorer to demonstrate real product craft through an interactive word-search game designed, built, and shipped using AI coding agents.

Work With Me

Launch App

The Product:

A playful way to explore my skills, built to experiment with sound design, micro-interactions, and AI-assisted coding.

Responsive Design

Dedicated UX for desktop (mouse) and mobile (touch) with device-specific optimizations.

Canvas-Based Interactions

Hint system with pulsing animations, confetti celebrations, and visual feedback rendered on HTML5 Canvas.

Adaptive Sound Engine

Web Audio API synthesis that responds to interactions with harmonic progressions and elastic audio feedback.

Game Mechanics

Custom word placement, selection detection, and progress tracking — all coded from scratch with no external game libraries.

Think | Design | Build

AI Product Design:

AI is changing how we design and build digital products and what is possible.

More: AI Design

The Micro App: Skills Explorer

The Design Challenge
I needed to create an experience that was both fun and functional — showcasing technical capabilities while staying accessible to non-technical audiences like HR managers and startup founders. The game had to work flawlessly across devices, provide instant feedback, and feel polished at every interaction point
The Build Approach
I built Skills Explorer using AI-assisted development with Claude.ai and Cursor IDE. Instead of relying on game engines or UI libraries, I coded every mechanic from scratch — from the word placement algorithm to the audio synthesis system. This project was also a way to understand how agentic coding assistants behave and how to collaborate with them effectively.

This hands-on approach let me fine-tune details such as elastic sound behavior, canvas-based hint animations, touch gesture detection, and dedicated UX for both desktop and mobile.

Technical stack: React 19, Next.js 15, TypeScript, and Tailwind CSS, with custom implementations for game logic, Web Audio API synthesis, and Canvas API rendering.
The Result
Skills Explorer shows how design and code generation are converging into a unified workflow. Building self-contained micro apps with no external libraries is a powerful way to learn, experiment, and explore what AI-assisted development makes possible.

This project reflects my focus on AI integration and design leadership — exploring how we can build digital products faster by combining design expertise with agentic coding tools.

Explore the micro app: juan-skills-explorer.vercel.app

Select your artifacts:

AI Design Product Video

Explore the Micro app:

Open Micro App

What are Micro Apps?

Micro-apps are compact applications that I design and build to explore how AI and agentic coding are transforming product design. They are lightweight, interactive, and creative experiences built through a unified design-and-code workflow that turns ideas into products faster.