LMS dashboards: class and client
The class dashboard, from brief to production: 16 metrics audited, roles and empty states for 4 breakpoints, in Angular with Skeletor. Plus the client dashboard widgets: metrics, NPS, hours and skills.
Hi, I'm Tomás Fernández
From brief to pixel,
from pixel to system.
Frontend & UX/UI engineer with 22 years of experience, specialised in design systems. I work in depth with Angular, Vue, Lit and React, and I take complete features from the Node API to the interface. I'm the main developer behind Skeletor, Game Strategies' design system, and I work with Claude every day.
IN 30 SECONDS
- Profile
- Senior frontend and UX/UI, with a full stack background
- Specialty
- Design systems and micro-frontends
- Main stack
- Angular · Vue · Lit · React · Node
- Location
- Madrid · remote preferred, hybrid also possible
- Languages
- Spanish (native) · English (intermediate)
- Now
- Game Strategies, since 2017
22
years building interfaces
~15
apps use Skeletor
4
frameworks in production: Angular, Vue, Lit, React
52
private Game Strategies repositories with my code
01 — CASE STUDIES
Featured case studies
Five projects that show how I work: design systems, product, games and AI. The code belongs to Game Strategies and lives in private repositories, so here you'll see screenshots, decisions and results.
Skeletor, Game Strategies' design system
Web components and design tokens used by around 15 applications in Angular, Vue, React and Lit. It grew out of my 2014 SASS framework and keeps evolving.
LitDesign tokensStorybookAccessibilitynpm
Read the case study →
AI roleplay
A tool to create, measure and test voice roleplays with avatars: interfaces and components of the admin panel, and the game UI.
Learner campus and Mentor, its AI guide
The portal where learners find and play their courses: design, layout and styles. Inside lives Mentor, the Lit AI guide that recommends courses and talks by voice or text.
Serious games: a gamified interface
Menus, HUD, rewards and game screens for ADA, TKS and MARS, and the UI of Pacific and Merchants, on the GAT engine.
Read the case study →Lit micro-frontends
Pieces that plug into Admin, LMS and the campus as web components.
- My Account
The account area in Admin and LMS: company data, plan and subscription, profile and administrators. From the Node API to the interface, with Playwright tests.
- Roleplay
A panel to create and measure AI roleplays: creation wizard, modules and indicators.
- Mentor
The campus AI guide: it recommends courses and talks by voice or text.
- Reports
Report viewer that any application can embed.
02 — WHAT I DO
What I bring to a team
Frontend and UX/UI
Clear, accessible interfaces in Angular, Vue, Lit and React. I define the product with briefs and build it myself.
See it in: Class dashboard →Design systems and web components
The system around 15 apps are built on: Lit components, tokens, Storybook and npm publishing.
See it in: Skeletor →Full stack and micro-frontends
Micro-frontends that fit into any stack, and complete features from the Node API to the interface. That code lives in private Game Strategies repos: LMS, campus, course editor and micro-frontends.
See it in: My Account →AI in the product and in the process
I design interfaces for AI products and use Claude in depth in my work: Fable, Opus, Claude Code and Claude Design.
See it in: Roleplay and Mentor →03 — STACK
Four frameworks, years in production
Not just tried out: I've shipped them to production.
Angular
LMS admin app (2,000 commits), migration from Angular 7 to 22, web components integration.
Vue
Learner campus with PWA and RTL, authoring tool and report viewer.
Lit
Skeletor and micro-frontends: My Account, Roleplay, Mentor and reports.
React
Gamified interface of the serious games ADA, TKS and MARS (plus UI for Pacific and Merchants), and part of the 3D roleplay UI (React 19).
TypeScript · JavaScriptNode · Express · NestJSSASS · modern CSSStorybookPlaywright · VitestGitHub · npmWebpack · ViteClaude: Fable, Opus, Code, Design
04 — TRAINING
What I teach and how I work
Courses I've taught
Design systems with LitElementGame Strategies
Micro-frontend architectureGame Strategies
UX and product definitionGame Strategies
SASS + Kit + PreprosHCD · course with its own 5-module website
FlexboxInternal workshop
How I work
- 1Components before pages. Whatever repeats becomes a system.
- 2Clean, simple code. I'm obsessive about tidiness: clear names, small pieces and the simplest architecture that solves each feature well.
- 3Standards first, frameworks second. That's why Skeletor works in any stack.
- 4UX decides the shape. One main task per view; every element earns its place.
- 5For every device and every person. Accessibility since building AA portals in 2005.
- 6AI, part of the team. Briefs, design and code with Claude, with my own judgement at every step.
05 — CAREER
22 years, five stages
Game Strategies (formerly Gamelearn)
Frontend and UX/UI with a full stack background: design system, LMS, campus, gamified serious games, micro-frontends and AI.
HCD
UI developer for Orange, BBVA, Banco Popular, Santander and IBM. Internal trainer.
Freelance
A content management system in .NET, WordPress themes and responsive websites.
Ximetrix
Accessible AA and AAA portals: 060.es, University of Seville, Muface, Casa Real.
Vector Software
See the full CV →
Alhambra project for Banco Santander.
06 — ARCHIVE
Archive 2005 — 2016
Shall we talk about your next product?
I'm looking for a team where I can bring frontend, UX/UI and design systems.