Development on Fernando Ruiz

Claude Code Skills: The Professional Layer Most Users Ignore

Thu, 19 Mar 2026 00:00:00 +0000

You’re already in Claude Code. You know the basics. You’ve seen what it can do. But every new session starts the same way: you spend the first five minutes re-explaining your context, re-typing the prompts you’ve written a hundred times, and re-establishing the ground rules before any real work gets done.

That friction isn’t a Claude problem. It’s an infrastructure problem. And the fix is a feature most users walk right past: Skills.

Vibe Coding: What AI Won't Tell You Before Building Your First App

Sun, 15 Mar 2026 00:00:00 +0000

There’s a conversation happening thousands of times a day around the world. It goes something like this:

“Hey Claude, I need you to build me a YouTube-like application but without bugs.”

And the [[AI]] responds happily, generates code, and the user thinks they’ve just hired an engineering team for $20 a month. Three weeks later, the application has 47 bugs, nobody knows why login fails on Tuesdays, and the creator can’t change a button color without breaking the payment system.

Spec-Driven Development: The End of Amateur Vibe Coding and the Dawn of Systems Engineering for UX

Tue, 10 Mar 2026 00:00:00 +0000

The concept of [[Vibe Coding]] is appealing. You write in natural language, AI spits out code, and you have a prototype in minutes. It works perfectly for a 100-line script. Try scaling that to a real product, and the system collapses.

I sat down with Ryan Edge to break down exactly how he’s using [[AI]] agents to build complex software. The consensus is clear: relying on chat interfaces to code has a glass ceiling. You lose context, the AI hallucinates, overwrites existing logic, and you end up doing manual work to correct a robot.

ARIA vs. Semantic HTML: The Golden Rule

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Semantic HTML uses the browser’s native tags (such as <button>, <input>, <nav>) which already come with built-in accessibility and behavior. ARIA (Accessible Rich Internet Applications) is a set of attributes added to the code to “patch” or explain custom elements that the browser doesn’t understand by default.

The First Rule of ARIA

If there is one thing every designer and developer should remember, it is the First Rule of ARIA:

Breakpoint vs. Container Queries: Component-Based Design

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Breakpoints (Media Queries) change the design based on the total width of the device screen (Viewport). Container Queries change the design based on the space available to the component within its parent container.

The Paradigm Shift in Product Design

For the last decade, we have designed “screens”: mobile, tablet, and desktop. However, in a modern design system, we design components that live in different places. The same “Product Card” component can appear in a 3-column grid on the home page, or in a single narrow column in a sidebar.

Component API Design: Predictability and Flexibility

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Designing a Component API consists of defining a clear entry contract (props) and behavior for elements in a design system, with the goal that they are easy to use, predictable, and maintainable for both designers and developers.

What Makes a Good Component API?

A component is not just a visual piece; it is a unit of functional logic. A well-designed API must clearly answer these three fundamental premises:

Component Prop Organization: Structure and Hierarchy

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Prop Organization consists of structuring and prioritizing a component’s properties so its use is intuitive and predictable. This reduces the cognitive load of designers in Figma and developers in code, facilitating the creation of consistent interfaces.

Why does Prop order matter?

Imagine a complex component (e.g., an Input with a label, icon, error message, and help text). If the configuration properties are disorganized, the design system user (the designer or developer) will waste time looking for how to change the icon color or text size.

Designing for Perceived Performance: Faster Than Light

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Perceived Performance is the time a user feels it takes for a system to respond, regardless of the actual speed (milliseconds) of the connection or processor. In product design, perception is reality.

Why does Perceived Performance matter?

We can have the best-optimized application in the world, but if the user stares at a blank screen for 2 seconds, they will think the app is slow.

On the contrary, an app that takes the same 2 seconds but shows a Skeleton Screen, a loading bar with a smooth animation, or interesting context messages will be perceived as much faster and more pleasant.

Focus Management: Navigation without a Mouse

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Focus Management is the control of which interface element is selected at any given time to interact with it. It is the backbone of navigation for keyboard users (who press Tab), screen readers, and anyone not using a mouse.

Why the Designer Must Manage Focus?

Imagine walking into a dark room with only a flashlight. The area your flashlight illuminates is “the focus.” If you move the flashlight and, suddenly, the light disappears or jumps to the next room without sense, you’ll feel lost and frustrated.

Foundations of the Accessibility Tree: How Machines See

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The Accessibility Tree is a data structure generated by the browser (based on the DOM) that contains only the information relevant to assistive technologies (such as screen readers or voice dictation). It is not visual; it is a translation of your design into names, roles, states, and values.

Why the Designer should know the Accessibility Tree?

As designers, we often focus on the Visual DOM (colors, shapes, positions). However, for blind or visually impaired users, your design is only what the Accessibility Tree says it is.

Intrinsic Layout Decisions: Content vs. Boxes

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Intrinsic Layout Decisions are design rules that define how interface elements are positioned and scaled based on the needs of their own content (such as text width or image size) rather than being forced by an external grid (Layout Grid).

Why Intrinsic Layout is the best option for dynamic products?

Historically, we designed websites with 12-column grids. It’s a safe and predictable system, but fragile. If a username is too long, the grid design breaks or text is cut off.

Intrinsic Sizing Behavior in UI

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Intrinsic Sizing is a design behavior where an element’s dimensions (width or height) are determined by its own content (letters, images, icons) rather than being forced by an external container with fixed measurements.

What is Intrinsic Sizing?

Imagine you want to put shirts in a suitcase.

Extrinsic Sizing: The suitcase has a fixed size of 50x40 cm. No matter if you put in 1 shirt or 20, the suitcase measures the same.
Intrinsic Sizing: The suitcase is made of elastic fabric and adjusts exactly to the volume of the shirts you put in. If you put in one shirt, it’s small; if you put in 20, it stretches.

In UI, this means a button doesn’t measure “200px,” but rather Text Width + Lateral Paddings. If the text changes from “OK” to “Unsubscribe,” the button widens automatically.

Latency Budgets in UX: Response Times

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Latency Budget is the maximum time allowed (in milliseconds) for a user action to produce a visible response in the interface. It is not a technical metric; it is a design commitment to ensure experience fluidity.

Why the Designer should establish Latency Budgets?

Often, designers create complex flows and heavy interactions without considering the technical cost. If an opening animation of a menu takes 500ms and the server another 1000ms to return data, the user will feel the application is a heavy boat.

Layout Decisions: Grid vs. Intrinsic

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Layout Grids are predefined grids that force elements to follow a rigid structure of specific columns and distances. Intrinsic Layout is an approach where the size and position of elements depend on their content and internal relationship, without relying on an external grid.

The Modern Layout Dilemma

In the web of the early 2010s, everything was based on 12-column grids. Today, thanks to the capabilities of Figma (Auto Layout) and modern browsers (Flexbox/CSS Grid), design is becoming more fluid and less dependent on these fixed structures. The key question is: When should we force the grid and when should we let content rule the space?

Loading States: The Indulgent Wait in UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Loading State is the visual or audible information shown to the user while the system processes an action (e.g., loading data from a server, uploading a file, or performing a search). Good loading design eliminates the fear of a “frozen system.”

Why Loading States are Critical

The moment a user clicks a button and waits for a response is the time of greatest vulnerability and potential frustration. Without a clear loading state, the user doesn’t know if:

Offline-First Flows: Designing for Disconnection

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The Offline-First strategy is a design and development approach that assumes the user will have an intermittent or null internet connection at some point. Instead of treating “Offline” as an error state, it is treated as a fundamental feature of the product. The goal is for the application to always keep working.

The Challenge of Modern Product Applications

Most traditional web apps (like Jira or Gmail) usually break or show a Chrome dinosaur when Wifi is cut. In advanced digital product design, such as Notion, Figma, or Linear, this is no longer acceptable.

Optimistic Updates and Rollback UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Optimistic Updates are an interaction design technique where the user interface updates immediately after an action (such as giving a “Like” or sending a message), assuming the server will process the request successfully, without waiting for its actual response. Rollback is the process of reversing that visual change if the request ends up failing.

The Secret of Speed in Modern Apps

Imagine you press the “Like” button on Instagram. If the heart icon didn’t turn red until the server returned an “OK,” the application would feel slow and heavy.

Responsive Scaling Strategies: Liquid UI

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Responsive Scaling Strategies define how interface elements behave when available space changes. It’s not just about resizing boxes, but deciding which elements grow, which stack, which disappear, and which maintain their original size to ensure usability on any device.

The Challenge of Infinite Screens

Today, we design for a 30mm smartwatch (Apple Watch) and a 49-inch curved monitor. We cannot design a screen for every width. We need a Scaling Strategy that is liquid and resilient.

Skeleton VS Optimistic UI: Loading Strategies

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Skeleton Screens are gray placeholders that mimic the final structure of the page while data is loading. Optimistic UI is a technique that shows the result of an action immediately, assuming the server will respond successfully.

The Art of Waiting: Perceived Performance

In modern product design, speed is not just a matter of real milliseconds (latency), but of how the user feels the system is responding. Both techniques seek to reduce user anxiety during loading, but they are applied at different points in the flow.

Status Awareness in UI

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Status Awareness (State Awareness) is an interface’s ability to clearly and continuously communicate what is happening in the system, at what step of the process the user is, and what the current condition of each component is (e.g., if a button is pressed, if data is loading, or if there is an error).

Why the User Needs Status Awareness?

As human beings, we hate uncertainty. In the physical world, if you flip a switch and the light doesn’t turn on, you know there’s a fault because the switch physically changed position. In the digital world, if a user clicks a button and nothing happens visually in the first few milliseconds, the user will click the button 5 more times, generating server errors and frustration.

Storybook

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Storybook is an open-source development tool for building, testing, and documenting UI components in isolation. It allows developers to create components in a “sandbox” environment outside the main application, making it easy to visualize all their states and collaborate with designers.

What Is Storybook?

Imagine you are building a car with LEGO pieces. Storybook is like a workshop where you can build and test each piece separately before assembling the car. You can build the engine (a complex component) and test it on its own, or you can build a simple wheel (a button) and see all its available colors and sizes, all without needing the complete car chassis.

Tab Order Strategy: The Keyboard User's Path

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Tab Order is the exact sequence in which a keyboard user (pressing Tab and Shift + Tab) traverses an interface’s interactive elements. A good tabbing strategy ensures that the user doesn’t get lost, doesn’t have to perform unnecessary clicks, and can complete their tasks quickly and logically.

Why the Designer Should Decide the Tab Order?

Although tab order is usually an automatic consequence of the order in the HTML code (the DOM), visual design can be much more complex. As designers, we sometimes create layouts with columns, grids, or floating elements that don’t follow a pure linear order.

The Command Pattern in Product Design

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The Command Pattern is a software design pattern that encapsulates a user request or action as an independent object. In the world of product design, this allows us to treat each action (delete, move, edit, change color) as an entity that can be stored, undone, redone, and synchronized across multiple users.

Why the Designer Should Know the Command Pattern?

Traditionally, design focused on the final state of screens (the fixed photo). However, modern products (like Figma, Notion, or Google Docs) focus on the actions that lead from one state to another. The Command Pattern is the technical language that makes these transitions possible.

Token Aliasing and Inheritance Strategy

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Token Aliasing consists of defining a token that refers to another token instead of a raw value (like a hexadecimal or pixels). Inheritance is the logical structure that allows design decisions to flow from the most general to the most specific, ensuring consistency and total flexibility in the system.

What is Token Aliasing?

Imagine you want to buy a car in “Sporty Color”.

Raw Value: Red #FF0000
Primitive Token (Global): brand-red -> #FF0000
Semantic Token (Alias): color-background-cta -> brand-red

In this example, color-background-cta is an alias of brand-red. If tomorrow you decide that your brand’s sporty color is Orange, you only have to change the alias reference to brand-orange, and automatically all the call-to-action (CTA) buttons in your product will update. Without aliasing, you would have had to manually search for setiap instance of the color red and change it.

Token Architecture (Global vs. Semantic vs. Component)

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Design token architecture is the logical structure that organizes design decisions (colors, typography, spacing) into layers of abstraction. A well-designed model allows you to change the appearance of an entire product in minutes, ensuring consistency and scalability between design and code.

What is Token Architecture?

Imagine you are building a city. You don’t want to have to paint every brick of every house individually. Instead, you define a “palette of materials” (global tokens), decide that all public buildings will be “institutional color” (semantic tokens), and finally apply that color to the “town hall main door” (component tokens).

Token Parity Across Multiple Platforms

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Token parity ensures that design decisions are translated identically and accurately across different platforms (Web, iOS, Android, Desktop) using a single source system. This eliminates visual inconsistencies and significantly reduces QA effort.

The Challenge of Platform Fragmentation

Each technological ecosystem handles styles (colors, fonts, shadows) uniquely. If a designer chooses a “Primary Blue,” they face:

Web: CSS/SCSS files (rem, px, hex, hsl, rgb).
iOS: Swift/SwiftUI files (Points, UIColor, Asset Catalogs, JSON).
Android: Resource XML or Jetpack Compose (dp, sp, hex ARGB).

Without a parity strategy, the same color may look slightly different or have a different name on each platform, breaking brand consistency and causing confusion among development teams.

Visual Hierarchy VS DOM Hierarchy: Accessibility

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Visual Hierarchy is the order in which a user sees and processes information on a screen based on size, color, position, and contrast. DOM Hierarchy (Document Object Model) is the order in which HTML code structures and reads that same information. Aligning both is the key to accessibility and SEO.

Why the Designer Should Know the DOM Hierarchy

As designers, we often “draw” elements on the Figma canvas without worrying about their internal order. However, for a Screen Reader or Keyboard user, your design is not an image; it is a sequential list of elements.