githubJul 30, 2026

Stacked sessions and pull requests in the GitHub Copilot app (opens in new tab)

GitHub Copilot’s stacked sessions let developers split large, dependent changes into smaller pull requests while preserving their order. Cassidy Williams demonstrates this by modernizing a decade-old React application, recovering from an incorrect branch choice, and then starting a separate `react-bootstrap` replacement on top of the styling work. The approach made a difficult modernization more manageable and reduced the temptation to create an unwieldy “everything” pull request. ## Modernizing a Legacy Application - Williams’ personal dashboard had accumulated outdated dependencies and patterns: - React 15 - Less - An old version of `react-bootstrap` - Updating the application manually had previously seemed too time-consuming. - She used the GitHub Copilot app to plan a frontend modernization focused on: - Replacing Less with Tailwind or vanilla CSS - Improving accessibility and responsiveness - Modernizing dependencies - Cleaning up links, inputs, labels, wrapping, and container widths - Claude Opus 4.8 helped formulate the plan, while GPT-5.5 provided a review. - The initial attempt failed because the work began from the wrong branch. ## Recovering from the Wrong Branch - Williams discovered that an old `dev` branch already contained partial modernization work and was the version she actively used. - The new session had incorrectly branched from `main`, creating compatibility problems. - Rather than discard the work, she asked Copilot to: - Close the incorrect pull request - Start a fresh session from `dev` - Port the styling and accessibility changes onto that branch - Copilot handled the branch and pull request transition, preserving useful decisions from the failed attempt. ## Investigating Legacy Warnings - Testing exposed warnings involving: - `findDOMNode` - `componentWillReceiveProps` - The outdated code was largely coming from `react-bootstrap`, not Williams’ own application code. - She used Plan mode to compare upgrading or migrating existing components with removing the library. - Copilot recommended replacing `react-bootstrap` entirely. ## Stacking Dependent Sessions - Replacing `react-bootstrap` represented substantial scope beyond the current styling work. - Williams chose to submit the existing work first, then create a second session branched from it. - The new session would: - Build on the completed styling changes - Replace `react-bootstrap` - Produce a separate pull request - Eventually merge into `dev` after the first pull request - This structure keeps each change easier to review and test while maintaining the dependency between them. The practical recommendation is to use stacked sessions for large, related modernization efforts: isolate coherent tasks into separate pull requests, branch later work from earlier changes, and avoid allowing AI-assisted development to turn every improvement into one oversized change.

tailwind-cssreactaccessibilitytypescript+4

githubApr 15, 2026

Build a personal organization command center with GitHub Copilot CLI (opens in new tab)

Brittany Ellich built a personal organization command center to reduce the friction of switching between numerous apps. Using GitHub Copilot for planning and implementation, she created a working first version in one day. Her experience suggests that AI-assisted development makes it easier to turn everyday frustrations into practical, customized tools. ## The Problem: Digital Fragmentation - Brittany wanted to consolidate information scattered across roughly a dozen applications. - Her goal was a calm, visual workspace suited to her learning style and the way she organizes information. - The project became a personal command center for bringing disparate work and productivity tools together. ## Planning and Building with AI - Brittany uses a “plan-then-implement” workflow. - During planning, Copilot interviews her about requirements and behavior until they form a sufficiently detailed plan. - Copilot then implements the system based on that plan, reducing guesswork and making development smoother. - The first version was completed in a single day alongside her normal work. ## Her Development Workflow - She uses VS Code Agent Mode for synchronous work, generally running up to two non-competing agent workflows. - She uses Copilot Cloud Agent for asynchronous, well-scoped tasks such as bug fixes and technical-debt cleanup. - This division lets her focus personally on work requiring close oversight while agents handle lower-risk background tasks. ## Technology Stack - **Electron** for the cross-platform desktop application. - **React** for the interface, components, and state management. - **Vite** for development tooling and hot module replacement. - **Tailwind CSS** for styling. - **WorkIQ MCP and CLI** for accessing Microsoft 365 data, including calendar information. - The application also uses ElevenLabs for its voice assistant. Although Brittany had wanted to build an Electron app, she learned relatively little about Electron because Agent Mode handled most of the implementation. She later simplified the repository manually to make it suitable for public release, noting that agents tend to add code more readily than remove it. ## Getting Started The project is available as the open-source `command-center-lite` repository. Running it requires Node.js 18 or later, GitHub Copilot CLI for WorkIQ setup, a Microsoft 365 account for calendar synchronization, and an ElevenLabs account for voice features. The broader recommendation is to start building solutions for small, personal problems. AI tools can accelerate both learning and implementation, making experimentation with unfamiliar technologies far more accessible.

tailwind-cssreactmcpgithub-copilot-cli+3

figmaApr 10, 2024

Codegen Plugins (And Other Tips) for Automating Design to Code | Figma Blog (opens in new tab)

Codegen in Figma’s Dev Mode is intended as a starting point for design implementation, not a complete replacement for developer judgment. Figma provides built-in snippets, while custom plugins extend code generation for different frameworks, languages, and team conventions. The post highlights several tools that can accelerate design-to-code workflows across web and mobile projects. ## Codegen as a Design-to-Development Starting Point - Codegen automatically generates code from defined design rules or specifications. - Figma argues that generated code should augment—not automate away—the design and development process. - Dev Mode creates code snippets for selected canvas objects in the inspect panel. - Users can choose different programming languages and measurement units. - Teams with mature design systems can build custom codegen plugins to match their conventions. ## Anima: Customizable React and HTML Generation - Exports Figma components into React or HTML with CSS, SCSS, or Tailwind. - Produces interactive, responsive, and maintainable snippets. - Detects repeated components to reduce duplication. - Learns team conventions from added code snippets. - Supports prompts for animations and style-specific adjustments directly in Dev Mode. ## Builder: AI and Code Components - Generates React, Svelte, and HTML using AI. - Can incorporate a team’s existing code components to better align design and implementation. - Allows users to refine output conversationally and train it to match their coding style. - Automatically adapts designs for responsiveness. - Provides a separate web interface for experimenting with generated code outside Figma. ## Figma to Code: Open-Source Multi-Platform Output - Converts designs into responsive web or mobile code. - Supports HTML, Tailwind, Flutter, and SwiftUI. - Lets users preview Tailwind output and copy it into their code editor. - Is available as a free, open-source Figma Community plugin. ## Locofy.ai: Interactive Web and Mobile Code - Generates code for components and full screens in React, HTML/CSS, Next.js, Gatsby, and Vue. - Supports design optimizations such as auto layout and frame grouping. - Adds interactivity through semantic HTML tags, libraries, and actions. - Produces responsive layouts, reusable components, props, and human-readable class names. - Enables teams to share prototypes, bind data, and export code or Storybook files. - Supports direct GitHub synchronization with automatic merging and conflict resolution. The practical recommendation is to use codegen to reach a useful first draft faster, then have designers and developers refine the output against the project’s design system, architecture, and coding standards.

tailwind-cssfigmareactdesign-to-code+3

figmaMar 29, 2021

Behind the scenes of creating the official Figma kit for Tailwind UI | Figma Blog (opens in new tab)

Tailwind Labs created an official Figma kit to meet strong customer demand for Tailwind UI designs. Building it required translating more than 400 responsive code components into over 1,400 Figma components and 10,000 elements, with the final code serving as the pixel-perfect reference. The project showed that a production design kit needs rigorous structure, naming, responsive modeling, and reusable variants—not just visual accuracy. ## Building a Design File as a Product - Unlike exploratory product files, a commercial design kit is itself the final deliverable. - Every decision affects usability, including: - Layer names - Component structure - Page organization - Variant behavior - The team used the finished HTML and Tailwind CSS components as the standard the Figma files needed to match. ## Consistent Layer Naming - Consistent names allow Figma overrides to persist when users swap component instances or variants. - For example, a button’s text layer was always named “Text,” allowing customized text to carry over when changing button sizes. - This becomes especially valuable in complex components containing icons, headings, paragraphs, and links. ## Mirroring HTML Structure in Figma - Auto Layout, layout grids, and constraints let Figma layers approximate HTML structure and browser layout behavior. - Matching design and code architecture helps designers and developers share an understanding of what layouts can support. - It also exposes recurring implementation patterns, such as responsive padding and centered max-width containers, which developers can turn into reusable layout utilities. ## Using Variants to Simplify Components - Instead of maintaining dozens of separate components, the team combined options into configurable variants. - A single Badge component could cover type, size, theme, and optional secondary elements. - Variant properties were named consistently with code component properties, using terms such as: - Type - Size - Theme - Position - Breakpoint - State - Variants made components more discoverable and reduced duplication. - The completed kit contained 1,430 components averaging seven variants each; without variants, it would have exceeded 10,000 components. ## Scale and Quality Control - Over several months, the team built and rebuilt more than 1,400 components and 10,000 distinct elements. - The project emphasized detailed auditing and pixel-level consistency, although the provided article excerpt ends before describing that process. The main recommendation is to treat a shared Figma kit like a carefully engineered product: align it closely with the codebase, establish naming and structural conventions early, and use variants to keep a large responsive system manageable.

tailwind-cssfigmadesign-systemscss+3