# Development ## Pages - [Claude Code Skills: The Professional Layer Most Users Ignore](https://www.fernandoux.com/blog/en/claude-code-skills-the-professional-layer-most-users-ignore/) — 2026-03-19 You already use Claude Code. But if you're still typing the same prompts session after session, you're burning time on infrastructure instead of work. Here's how to build the system that professionals run on. - [Vibe Coding: What AI Won't Tell You Before Building Your First App](https://www.fernandoux.com/blog/en/vibe-coding-what-ai-wont-tell-you-before-building-your-first-app/) — 2026-03-15 Before asking AI to build 'a flawless YouTube clone', read this. A survival manual for designers and creatives who want to build real products with AI without destroying themselves in the process. - [Spec-Driven Development: The End of Amateur Vibe Coding and the Dawn of Systems Engineering for UX](https://www.fernandoux.com/blog/en/spec-driven-development-the-end-of-amateur-vibe-coding-and-the-beginning-of-systems-engineering-for-ux/) — 2026-03-10 The perfect framework for a product designer to do wonders with vibe coding tools - [ARIA vs. Semantic HTML: The Golden Rule](https://www.fernandoux.com/en/wiki/concepts/aria-vs-semantics/) Understand the difference between native semantic HTML and ARIA attributes, and learn why the first rule of accessibility is to not use ARIA if a native alternative exists. - [Breakpoint vs. Container Queries: Component-Based Design](https://www.fernandoux.com/en/wiki/concepts/breakpoint-vs-container-queries/) Learn the difference between designing for screen width (Breakpoints) and designing for container width (Container Queries), and how this revolutionizes component design. - [Component API Design: Predictability and Flexibility](https://www.fernandoux.com/en/wiki/techniques/component-api-design/) Learn to design robust and consistent component APIs that facilitate handoff between design and development, reducing errors and accelerating product construction. - [Component Prop Organization: Structure and Hierarchy](https://www.fernandoux.com/en/wiki/techniques/component-props-organization/) Learn to organize and prioritize your components' properties (props) to create a more intuitive user experience for the designers and developers consuming your design system. - [Designing for Perceived Performance: Faster Than Light](https://www.fernandoux.com/en/wiki/concepts/perceived-performance-design/) Learn how design can make your application feel faster than it really is, using cognitive psychology techniques and visual tricks. - [Focus Management: Navigation without a Mouse](https://www.fernandoux.com/en/wiki/techniques/focus-management/) Learn to design and manage navigation focus in your digital product to ensure a smooth experience for keyboard users, screen readers, and assistive technology. - [Foundations of the Accessibility Tree: How Machines See](https://www.fernandoux.com/en/wiki/concepts/accessibility-tree/) Learn what the Accessibility Tree is and why it is the foundation of how screen readers and other assistive technologies interpret your interface design. - [Intrinsic Layout Decisions: Content vs. Boxes](https://www.fernandoux.com/en/wiki/techniques/intrinsic-layout-decisions/) Learn to make design decisions based on intrinsic logic to create layouts that intelligently adapt to content without relying on rigid grids. - [Intrinsic Sizing Behavior in UI](https://www.fernandoux.com/en/wiki/concepts/intrinsic-sizing/) Learn how intrinsic sizing works in digital interface design to create components that intelligently adapt to their real content. - [Latency Budgets in UX: Response Times](https://www.fernandoux.com/en/wiki/strategy/interaction-latency-budgets/) Learn to define and manage latency budgets in your digital product to ensure user interactions feel instantaneous and reactive. - [Layout Decisions: Grid vs. Intrinsic](https://www.fernandoux.com/en/wiki/techniques/layout-grid-vs-intrinsic/) Learn to choose between a grid-based design (Grid) and a content-based design (Intrinsic) to create fluid and modern digital layouts. - [Loading States: The Indulgent Wait in UX](https://www.fernandoux.com/en/wiki/techniques/loading-states/) Learn to design loading states that reduce user anxiety, communicate system progress, and improve the perceived speed of your digital product. - [Offline-First Flows: Designing for Disconnection](https://www.fernandoux.com/en/wiki/strategy/offline-first-flows/) Learn how to design applications that work offline by default, radically improving the user experience in any connectivity circumstance. - [Optimistic Updates and Rollback UX](https://www.fernandoux.com/en/wiki/techniques/optimistic-updates-rollback/) Learn to design optimistic updates so your application feels instantaneous to the user, and how to manage network failures with elegant rollback experiences. - [Responsive Scaling Strategies: Liquid UI](https://www.fernandoux.com/en/wiki/techniques/responsive-scaling-strategies/) Learn to choose and apply different responsive scaling strategies so your components and layouts adapt fluidly to any screen size. - [Skeleton VS Optimistic UI: Loading Strategies](https://www.fernandoux.com/en/wiki/concepts/skeleton-vs-optimistic-ui/) Learn the difference between Skeleton Screens and Optimistic UI, and how to choose the best loading strategy to improve the perceived performance of your digital product. - [Status Awareness in UI](https://www.fernandoux.com/en/wiki/concepts/status-awareness/) Learn to design interfaces that keep the user always informed about the current state of the system and each component to reduce uncertainty and errors. - [Storybook](https://www.fernandoux.com/en/wiki/tools/storybook/) Learn what Storybook is and how this development tool lets you build, test, and document UI components in isolation, creating a common language between design and development. - [Tab Order Strategy: The Keyboard User's Path](https://www.fernandoux.com/en/wiki/strategy/tab-order-strategy/) Learn how to design and specify a consistent and efficient Tab Order to ensure your product is easy to navigate for keyboard and assistive technology users. - [The Command Pattern in Product Design](https://www.fernandoux.com/en/wiki/concepts/command-pattern/) Move from designing static screens to designing dynamic flows based on encapsulated actions through the Command Pattern, the technical foundation of modern and collaborative interfaces. - [Token Aliasing and Inheritance Strategy](https://www.fernandoux.com/en/wiki/techniques/token-aliasing-inheritance/) Learn to implement a design token aliasing and inheritance strategy to create highly flexible, maintainable systems prepared for multiple themes. - [Token Architecture (Global vs. Semantic vs. Component)](https://www.fernandoux.com/en/wiki/concepts/token-architecture/) Discover how to structure a robust design token architecture using the three-layer model (Global, Semantic, and Component) to create scalable and maintainable design systems. - [Token Parity Across Multiple Platforms](https://www.fernandoux.com/en/wiki/concepts/token-parity/) Learn how to achieve design token parity across Web, iOS, and Android to ensure a consistent brand experience and accelerate multiplatform development. - [Visual Hierarchy VS DOM Hierarchy: Accessibility](https://www.fernandoux.com/en/wiki/concepts/visual-vs-dom-hierarchy/) Learn the difference between what the user sees and what the browser reads, and how to align visual hierarchy with the DOM for flawless accessibility in your product. --- Source: https://www.fernandoux.com/tags/development/