# Storybook Published articles for Storybook. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Using Storybook Workbench to audit AI-generated UIs for dead components and accessibility bugs DevFeed: [Using Storybook Workbench to audit AI-generated UIs for dead components and accessibility bugs]() Original publisher: [Read original article]() Author: Travis Turner (richardturner@evilmartians.com) Published: 2026-07-08T00:00:00Z Content type: tutorial Language: en Sources: [Evil Martians]() Topics: [Storybook](), [Agent Skills](), [agentic-coding](), [AI-assisted coding](), [Accessibility](), [Design system]() Tags: [accessibility](), [agent-experience](), [agent-skills](), [agentic-coding](), [agentic-development](), [ai](), [bugs](), [design](), [design-engineering](), [design-for-devtools](), [design-system](), [dx](), [storybook]() ### AI overview The article presents Storybook Workbench, a bundle of Agent Skills that audits AI-generated web applications by rendering components as Storybook stories. It describes finding dead components, coexisting design systems, conditional component states, and accessibility bugs, based on an internal audit of an agent-coded app. ### Source excerpt Storybook Workbench is a bundle of Agent Skills that turn Storybook into an audit layer for AI-generated UIs: find dead components, design-system drift, and hidden accessibility bugs. ## 2 Martians, greenfield to MVP in 4 weeks: agentic coding on Rails DevFeed: [2 Martians, greenfield to MVP in 4 weeks: agentic coding on Rails]() Original publisher: [Read original article]() Author: Travis Turner (richardturner@evilmartians.com) Published: 2026-06-09T00:00:00Z Content type: article Language: en Sources: [Evil Martians]() Topics: [agentic-coding](), [Rails](), [coding](), [React](), [Storybook](), [Open Source](), [stripe]() Tags: [agentic](), [agentic-coding](), [ai](), [app](), [authentication](), [building](), [case-study](), [coding](), [designer](), [developer-marketing](), [developer-products](), [google-analytics](), [onboarding](), [open-source](), [payments](), [platform](), [product](), [product-development](), [production](), [prototype](), [rails](), [react](), [skills](), [storybook]() ### AI overview A designer and an engineer describe how they shipped Thicket, a production MVP, in four weeks using agentic coding with Rails, Inertia, React, and Storybook. They discuss their workflow, project-specific skills, user validation, and the resulting open-source practices. ### Source excerpt A designer and an engineer shipped a production MVP in four weeks on Rails + Inertia. In this post, we share our agentic coding stack, the skills we built, and why it clicked. ## An Experiment in Agent Orchestration at Mintlify DevFeed: [An Experiment in Agent Orchestration at Mintlify]() Original publisher: [Read original article]() Author: Kathryn Lawrence Published: 2026-02-03T00:00:00Z Content type: opinion Language: en Sources: [Mintlify Blog]() Topics: [agent orchestration](), [Claude](), [Claude Code](), [Development](), [React](), [Storybook](), [Tailwind CSS](), [monorepo]() Tags: [agent-orchestration](), [ai-agent](), [claude](), [claude-code](), [development](), [engineering](), [monorepo](), [react](), [storybook](), [tailwind]() ### AI overview Mintlify describes an experiment using agent orchestration and AI coding tools while migrating its internal component system. The article concludes that an army of Claude agents was still no match for one human collaborator, Dmytro. ### Source excerpt TL;DR: We tried agent orchestration, but an army of Claudes is still no match for one Dmytro. ## Improving Frontend Regression Testing with Chromatic DevFeed: [Improving Frontend Regression Testing with Chromatic]() Original publisher: [Read original article]() Author: Stephen De Vaux Published: 2026-01-30T01:00:49Z Content type: article Language: en Sources: [Kogan.com]() Topics: [Front end](), [Testing](), [Storybook](), [Remix](), [browser](), [ci](), [Automation](), [pull-requests](), [Developer experience](), [unit test]() Tags: [automation](), [browser](), [ci](), [developer-experience](), [frontend](), [pull-requests](), [regression](), [remix](), [storybook](), [testing](), [ui](), [unit-test](), [visual-regression-testing]() ### AI overview The article explains how Kogan integrated Chromatic into a Remix-based frontend testing workflow to detect visual regressions that traditional unit tests may miss. It describes Chromatic's Storybook integration, browser screenshots, baseline comparisons, CI workflow, and the differences between UI Review and Visual Tests. ### Source excerpt After recently migrating our frontend to Remix, we took the opportunity to reassess how we approach frontend testing, particularly regression testing. While we already had unit test coverage, we identified a gap when it came to validating UI changes. This is where Chromatic became a part of our frontend testing strategy. This post outlines why we introduced Chromatic and how it fits into a Remix-based workflow. Even when application functionality remains unchanged, subtle visual regressions can still be introduced. Changes to spacing, typography, layout, or component states can easily slip through without being caught by traditional tests. What we needed was a way to automatically detect meaningful UI changes while still fitting into our existing development workflow. At the same time, it was important to avoid introducing a fragile or high-maintenance testing setup, one that adds overhead without delivering proportional benefit. Our implementation with Chromatic attempts to balance automation, reliability, and developer experience as a practical addition rather than an extra burden. Why Chromatic? Chromatic provides visual regression testing on top of Storybook. Instead of testing components purely through assertions, Chromatic renders components in a real browser environment and captures screenshots. These are then compared against a known baseline to highlight visual changes. The key reasons we chose Chromatic were: Automated visual diffs that are easy to review Integration with Storybook, which we already use for component development CI-friendly workflow that fits well into pull requests Chromatic offers two closely related features for reviewing UI changes: UI Review and Visual Tests. While they have some overlap of functionality, they serve different purposes and are designed for different levels of enforcement. UI Review is enabled by default, whereas Visual Tests are an optional feature. UI Review generates snapshots that highlight differences against a bas ## Watch and Rebuild Storybook Dependencies with Nx DevFeed: [Watch and Rebuild Storybook Dependencies with Nx]() Original publisher: [Read original article]() Author: Juri Strumpflohner Published: 2025-10-29T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Storybook](), [Developer experience](), [monorepo](), [Vite](), [Library](), [configuration]() Tags: [build](), [commands](), [configuration](), [developer-experience](), [how-to](), [monorepo](), [nx](), [storybook](), [vite]() ### AI overview This tutorial explains how to use Nx workspace watching to automatically rebuild buildable library dependencies in a Storybook monorepo. It configures watch and dependency targets so Storybook's Vite HMR server detects changes and refreshes automatically. ### Source excerpt Learn how to set up automatic rebuilding of buildable library dependencies in your Storybook setup using Nx workspace watching for a seamless developer experience. ## Wise Tech Stack (2025 update) DevFeed: [Wise Tech Stack (2025 update)]() Original publisher: [Read original article]() Author: Milon James Published: 2025-02-12T13:34:08Z Content type: article Language: en Sources: [Wise Engineering - Medium]() Topics: [Development](), [Mobile](), [Web](), [Tuist](), [Storybook](), [Testing](), [build performance]() Tags: [build-times](), [caching](), [data](), [engineering](), [mobile](), [next-js](), [platform](), [storybook](), [swift](), [swift-package-manager](), [tech](), [tech-stack](), [testing](), [tuist](), [update](), [web](), [xcode](), [xcodegen]() ### AI overview Wise's 2025 technology update describes its web, iOS, and Android engineering stack, including Next.js-based web applications, Storybook visual testing, migration from Xcodegen to Tuist, adoption of Swift Package Manager, and Android development across a large Gradle repository. ### Source excerpt Wise Engineering As of the financial year 2025, Wise supports 15.6 million active customers, moving approximately GBP 36 billion across borders each quarter. Approximately 65% of our transfers arrive instantly, and our Wise Platform facilitates payments for banks, financial institutions and enterprises globally. This success is driven by our technology-first approach, robust architecture, and dedicated engineering teams. Photo by Randy Fath on UnsplashHow we work at Wise Wise has more than 850 engineers working across key global locations, organised into independent squads and tribes. These teams are empowered to innovate and make decisions independently, fostering transparency, trust, and collaboration. This article follows our Tech Stack 2022 to cover the most recent improvements in Wise's tech stack that enable us to achieve our mission of money without borders -- instant, convenient, transparent and eventually free. Moving money with WiseOur web and mobile applications Our web applications are built using CRAB (a Wise-specific abstraction on top of the popular Next.js framework) and comprises of 40 distinct apps, each handling specific product functions making deployments safer and more manageable. One of the biggest changes has been in our testing methodology. We've adopted Storybook for visualising individual React components during development. Storybook pairs really well with Chromatic which captures snapshots after each change and can highlight the visual differences in the component. These snapshots are very effective for catching visual regressions during code changes which helps us prevent bugs from reaching our customers. Wise mobile app: faster, smarter, and more efficient Our iOS engineers have upgraded our infrastructure by migrating 250+ Xcode modules from Xcodegen to Tuist and switching from Cocoapods to Swift Package Manager (SPM), unlocking improvements in caching for builds. The team also improved flexibility, reducing zero-change build times from 2 ## Avoiding Port Conflicts with Multiple Storybook Instances DevFeed: [Avoiding Port Conflicts with Multiple Storybook Instances]() Original publisher: [Read original article]() Author: Nicolas Beaussart Published: 2024-12-18T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Storybook](), [Tooling](), [Development]() Tags: [inference](), [monorepo](), [nx](), [port](), [storybook](), [tooling]() ### AI overview This tutorial explains how to use Nx task inference and the createNodes feature to generate Storybook targets with unique ports for projects in a monorepo. The approach is intended to prevent port conflicts when multiple Storybook instances run in parallel, including in CI environments. ### Source excerpt Use Nx's task inference to automatically assign unique ports to Storybook instances, preventing conflicts in your monorepo. ## Announcing SvelteKit 2 DevFeed: [Announcing SvelteKit 2]() Original publisher: [Read original article]() Author: The Svelte team Published: 2023-12-14T00:00:00Z Content type: release Language: en Sources: [Svelte blog]() Topics: [Svelte](), [Vite](), [Framework](), [Web Development](), [releases](), [Open Source]() Tags: [github](), [migration-guide](), [playwright](), [routing](), [storybook](), [svelte](), [threlte](), [upgrade](), [vite]() ### AI overview SvelteKit 2 is now available as an incremental release with Vite 5 support, improvements, shallow routing, and an automated migration path. The announcement also describes SvelteKit's growing ecosystem and related developer tooling. ### Source excerpt Version 2.0 of SvelteKit, the official framework for building apps with Svelte, is now available. It is an incremental release that adds support for the newly-released Vite 5 along with a bevy of small improvements and one much-requested feature. If you've been paying close attention to Svelte in recent months, you'll know that we've been hard at work on Svelte 5, which is possibly the most anticipated release in the project's history. Upgrading to SvelteKit 2 will smooth the path for Svelte 5 when it is released in 2024, and we encourage all users to upgrade when you get a chance. We recommend updating to the most recent 1.x release first, along with Svelte 4, in order to address any deprecation warnings. Then, upgrade to SvelteKit 2 by running the automated migration tool: npx svelte-migrate sveltekit-2 The migration guide has more details about what's new. Shallow routing Way back in the mists of time -- May, to be precise -- we teased a new feature that allows you to associate state with a history entry without causing navigation. It's very useful for creating modals that you can dismiss by swiping back, or pop-up views of routes you don't want to do a full navigation to. That feature is called shallow routing, and this week we finally dusted off the pull request and added it to the framework. We're excited to see what you use it for. One year of SvelteKit Today is the one year anniversary of SvelteKit's launch and we're excited to celebrate how far SvelteKit has come. SvelteKit has been quickly embraced by the web development community: Tweet from @flaviocopes In the past year, we've seen a number of open source projects like Storybook, Tailwind, and Playwright officially support SvelteKit as well as a number of commercial entities like Prismic, Sentry, and InLang. SvelteKit continues to benefit from the Svelte community, which has developed numerous great UI libraries like Skeleton, shadcn-svelte, Melt UI, Flowbite Svelte, daisyUI, and many more. And our first e ## Zed Weekly: #21 DevFeed: [Zed Weekly: #21]() Original publisher: [Read original article]() Author: Joseph Lyons Published: 2023-09-29T00:00:00Z Content type: article Language: en Sources: [Zed Industries - Blog]() Topics: [Development](), [Storybook](), [Prettier](), [Vim](), [ui]() Tags: [feature](), [improvements](), [storybook](), [ui-components](), [vim]() ### AI overview A weekly development update for Zed covering Prettier integration, improved language-server logs, a Storybook setup for rebuilding the UI, Vim mode updates, collaboration work, and dashboard chart optimization. ### Source excerpt Improving following in collaboration, polishing channels, and continuing to rebuild Zed's UI ## Nx 15.8 -- Rust Hasher, Nx Console for IntelliJ, Deno, Node and Storybook DevFeed: [Nx 15.8 -- Rust Hasher, Nx Console for IntelliJ, Deno, Node and Storybook]() Original publisher: [Read original article]() Author: Juri Strumpflohner Published: 2023-03-08T00:00:00Z Content type: release Language: en Sources: [Juri Strumpflohner]() Topics: [Rust](), [IntelliJ IDEA](), [Deno](), [Node.js](), [Storybook](), [ide]() Tags: [developer-experience](), [ide](), [intellij](), [node](), [nx](), [performance](), [release](), [rust](), [storybook]() ### AI overview Nx 15.8 introduces a Rust-based hasher enabled by default, IntelliJ support for Nx Console, Deno integration, enhanced Node.js features, and Storybook CSF3 support. The article reports faster hashing than Git in several tested repository scenarios, especially on Windows when not using WSL. ### Source excerpt Nx 15.8 brings Rust-based hasher, IntelliJ IDE support, Deno integration, enhanced Node.js features, and Storybook CSF3 support for improved performance. ## Nx 15.7 -- Node Support, Angular LTS, Lockfile Pruning DevFeed: [Nx 15.7 -- Node Support, Angular LTS, Lockfile Pruning]() Original publisher: [Read original article]() Author: Juri Strumpflohner Published: 2023-02-16T00:00:00Z Content type: release Language: en Sources: [Juri Strumpflohner]() Topics: [Node.js](), [Angular](), [backend-development](), [Parsing](), [Storybook]() Tags: [angular](), [developer-tooling](), [node](), [nx](), [parsing](), [release](), [storybook]() ### AI overview Nx 15.7 adds first-class Node.js support, including standalone Node server applications and integrations with ExpressJS, Fastify, and Koa. The release also includes detached Angular version support, enhanced lockfile parsing, and Storybook 7.0 beta integration. ### Source excerpt Nx 15.7 introduces first-class Node.js support, detached Angular version support, enhanced lockfile parsing, and Storybook 7.0 beta integration. ## Nx 14.2 Adds Angular v14 Support, Storybook 6.5, Improved Migrations, and Performance Gains DevFeed: [Nx 14.2 Adds Angular v14 Support, Storybook 6.5, Improved Migrations, and Performance Gains]() Original publisher: [Read original article]() Author: Juri Strumpflohner Published: 2022-06-09T00:00:00Z Content type: release Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Storybook](), [Angular CLI](), [configuration](), [Caching]() Tags: [angular](), [cli](), [cypress](), [eslint](), [improvements](), [jest](), [nx](), [release](), [speed](), [storybook](), [typescript](), [update]() ### AI overview Nx 14.2 adds Angular v14 support, upgrades Storybook to 6.5, improves Angular CLI migrations, updates TypeScript and Prettier, and includes performance and configuration improvements. ### Source excerpt Nx 14.2 brings Angular v14 support, Storybook 6.5, improved Angular CLI migrations, optional nx.json configuration, and significant performance gains. ## Publishing a Next.js app to Vercel with Nx DevFeed: [Publishing a Next.js app to Vercel with Nx]() Original publisher: [Read original article]() Published: 2021-09-14T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Next.js](), [Deployment](), [Vercel](), [web applications](), [Web Development]() Tags: [article](), [deployment](), [next](), [next-js](), [react](), [storybook](), [tailwindcss](), [vercel](), [web-app]() ### AI overview This tutorial explains how to deploy a Next.js app built in an Nx workspace. It covers exporting a statically rendered site as HTML, CSS, and JavaScript files for deployment on a static web server, and introduces Vercel as an option for using richer deployment features and future dynamic capabilities. ### Source excerpt Lorem ipsum dolor sit amet ## Use Cypress with Next.js and Nx to battle test your React Components DevFeed: [Use Cypress with Next.js and Nx to battle test your React Components]() Original publisher: [Read original article]() Published: 2021-08-18T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Cypress](), [Next.js](), [React](), [Storybook](), [test]() Tags: [cypress](), [next](), [next-js](), [react](), [storybook](), [tailwindcss](), [test]() ### AI overview This tutorial explains how to use Nx-generated Cypress end-to-end tests with a Next.js application to test React components. It discusses the automatically generated Cypress setup and writing high-level tests for the application. ### Source excerpt Lorem ipsum dolor sit amet ## Use Storybook with Tailwind in an Nx Workspace DevFeed: [Use Storybook with Tailwind in an Nx Workspace]() Original publisher: [Read original article]() Published: 2021-08-12T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Storybook](), [Tailwind CSS](), [Next.js](), [React](), [ui](), [web applications]() Tags: [components](), [next](), [next-js](), [react](), [storybook](), [tailwind](), [tailwindcss](), [ui](), [web-app]() ### AI overview This tutorial explains how to use Storybook with Tailwind in an Nx workspace for a Next.js application. It demonstrates generating a shared library for UI components and creating a topic-button React component for isolated development. ### Source excerpt Lorem ipsum dolor sit amet ## Using Nx Workspace generators to scaffold new blog posts DevFeed: [Using Nx Workspace generators to scaffold new blog posts]() Original publisher: [Read original article]() Published: 2021-07-28T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Code](), [Boilerplate](), [Next.js](), [React](), [Tailwind CSS](), [Storybook](), [Cypress](), [MDX](), [Markdown]() Tags: [code](), [consistency](), [cypress](), [developers](), [generators](), [markdown](), [mdx](), [next](), [next-js](), [react](), [storybook](), [tailwind](), [tailwindcss]() ### AI overview This tutorial explains how Nx Workspace generators can scaffold new blog drafts in a blog project built with Next.js and Nx. It introduces generators as a way to reduce repetitive setup work, improve naming and component consistency, and lower collaboration friction as projects scale. ### Source excerpt Lorem ipsum dolor sit amet ## Create a Next.js web app with Nx DevFeed: [Create a Next.js web app with Nx]() Original publisher: [Read original article]() Published: 2021-06-09T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Next.js](), [web applications](), [Web Development](), [Framework](), [Cypress](), [Storybook]() Tags: [architecture](), [css](), [cypress](), [framework](), [markdown](), [next](), [next-js](), [react](), [storybook](), [tailwind](), [tailwindcss](), [web-app]() ### AI overview A tutorial on creating a Next.js web application in an Nx workspace. It explains workspace anatomy, setup, application generation, and the separation of deployable apps from reusable libraries. ### Source excerpt Lorem ipsum dolor sit amet ## Screenshot testing with React and Storybook DevFeed: [Screenshot testing with React and Storybook]() Original publisher: [Read original article]() Author: Jesse Pinho Published: 2018-03-19T09:18:02Z Content type: tutorial Language: en Sources: [Bleeding Edge - Medium]() Topics: [screenshot-testing](), [Storybook](), [React](), [Testing](), [styled-components](), [Selenium]() Tags: [continuous-integration](), [react](), [screenshot-testing](), [selenium](), [storybook](), [styled-components](), [testing](), [visual-regression-testing]() ### AI overview The article explains why end-to-end UI tests can miss visual regressions and explores screenshot testing with React and Storybook to check component appearance across different states. ### Source excerpt Visual regression testing for fun, profit, and peace of mind Illustration by Marta Pucci A friend of mine recently related a scary story about the lack of automated visual regression testing where he works--a huge international tech firm that you've heard of and probably use. He'd added a CSS class to an element to hide it from the user. Unbeknownst to him, and despite using BEM-style naming for CSS classes, this class name was already being used for an important checkbox in the user settings screen of his company's web app. The result? Users could no longer change the setting represented by the checkbox, because it was invisible! I asked him why that hadn't been caught by automated tests. He explained that, although they did have end-to-end tests in place that went through the UI and tested its functionality, the tests didn't catch the bug. Selenium was still able to check the original checkbox via its selector, so its visibility had no effect on the outcome of the test. The only way this could have been caught is via visual regression testing -- or, as it is sometimes called, screenshot testing. 💅 Switching to styled-components I recalled this story recently while working on a sizable project at Clue: converting all of our "native" CSS to use styled-components. The new helloclue.com website consists of dozens of components. An article page, for example, contains at least ten different React components, all of which have accompanying CSS files. Converting all of this CSS to styled-components means there's an enormous risk of bugs exactly like the one my friend experienced. So before the project began, I investigated setting up screenshot testing for the site. 📕 Enter Storybook (Note: if you're already familiar with Storybook and @storybook/react, feel free to skip to the next section.) We use Storybook when developing simple presentational components. This way, we can test them in every possible state, without having to reproduce all the logic and so forth required t