Dmitry Sheiko's Web Development Blog

AI

Chaining Claude Code Skills for Web Design: 3 Runs Compared

One skill with a one-line prompt, the same skill with my design preferences, and finally a chain of five skills. What each run produced, what it cost in tokens and which one I shipped.

· 36 min read

AI

Migrating Legacy Apps to Next.js with Claude Code

Over the past year I migrated a handful of legacy projects to Next.js with Claude Code. Along the way I settled on a workflow that keeps working: two agent spec files for architecture and admin UI conventions, one migration prompt, then a Playwright and pixel-diff loop to eliminate the visual regressions left after the first pass.

Design Patterns

React Design Patterns: A Practical Reference

Six patterns that keep showing up in React code: Composition, Custom Hooks, Provider, Compound Components, Server/Client separation and Suspense. Each comes with an everyday analogy, a short code sample and a diagram, plus the catches worth knowing about.

AI

Claude Code Beyond the Basics: Skills, Rules, and Agents

Claude Code refactors components, writes tests, reviews diffs and upgrades dependencies with almost no setup. It gets far more reliable once it knows how your project works. Permissions, CLAUDE.md, rules, commands, skills and agents, with working examples.

Software Architecture

Must-Know Web Development Concepts in 2026

Frameworks change every few years. Clean code, SOLID, layered and hexagonal architecture, caching, stateless design, rendering strategies, HTTP, CORS, the browser rendering pipeline and database basics stay. A walk through the concepts I'd expect any web developer to know in 2026.

React

A Global Custom 404 Page for Route Groups in Next.js

With route groups and separate layouts, unmatched URLs in Next.js fall back to the default 404 page instead of your own. Why that happens, what doesn't work, and how the experimental globalNotFound option fixes it, including reusing a route group's layout on the global 404.

React

Tables and Modals in Next.js 16: Preserving State

Data tables with edit modals in Next.js 16 that keep their state: an optional catch-all route, intercepting routes, and the layout plus dynamic route setup I ended up with, which preserves pagination and filters and still gives every record its own URL.

Testing & QA

Optimizing End-to-End Testing with Playwright

E2E tests are easy to write and hard to keep fast and reliable. How I structure Playwright tests with fixtures, test login flows and data tables, check responsive layouts and visual regressions, and set a Lighthouse performance budget.

React

Next.js 15 Tutorial: Full-Stack App with Ant Design

A records management app built step by step with Next.js 15, Ant Design 5 and React Query 5: layouts, an optional catch-all route, a parallel route for the edit modal, route handlers, and server-side prefetching with hydration. Plus the workarounds Ant Design needs to play along with Server Components.

Software DesignReact

Refactoring Legacy React: From OOP to Functional

When React Hooks arrived in 2019, migrating a large class-based codebase to functional components looked impractical. A few tricks made it workable: composition instead of inheritance, useImperativeHandle for imperative APIs, and function-based customization in place of subclassing.