Design Undo/Redo Systems

CREATE comprehensive undo/redo systems with Command Pattern. Design state management for complex applications with canvas interactions, multiple stores, and user actions. Use when building new undo/redo functionality from scratch.

16 stars

Best use case

Design Undo/Redo Systems is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

CREATE comprehensive undo/redo systems with Command Pattern. Design state management for complex applications with canvas interactions, multiple stores, and user actions. Use when building new undo/redo functionality from scratch.

Teams using Design Undo/Redo Systems should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/design-undo-redo-systems/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/design/design-undo-redo-systems/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/design-undo-redo-systems/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How Design Undo/Redo Systems Compares

Feature / AgentDesign Undo/Redo SystemsStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

CREATE comprehensive undo/redo systems with Command Pattern. Design state management for complex applications with canvas interactions, multiple stores, and user actions. Use when building new undo/redo functionality from scratch.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Undo/Redo Systems Architecture

## Instructions

### Command Pattern Implementation
Always use the Command Pattern for undo/redo functionality:

```typescript
interface Command {
  execute(): void | Promise<void>
  undo(): void | Promise<void>
  getDescription(): string
  canExecute(): boolean
}

class OptimizedHistory {
  private undoStack: HistoryEntry[] = []
  private redoStack: HistoryEntry[] = []

  async execute(command: Command): Promise<void> {
    await command.execute()
    this.undoStack.push({ command, timestamp: Date.now() })
    this.redoStack = []
    this.optimizeMemory()
  }
}
```

### Application-Specific Commands
Create domain-specific commands for all mutable operations:

```typescript
// Task Management Commands
class CreateTaskCommand extends BaseCommand {
  constructor(private taskStore: any, private taskData: any) {
    super(`Create task: ${taskData.title}`)
  }

  async execute(): Promise<void> {
    this.generatedId = await this.taskStore.createTask(this.taskData)
  }

  async undo(): Promise<void> {
    if (this.generatedId) {
      await this.taskStore.deleteTask(this.generatedId)
    }
  }
}

// Canvas Interaction Commands
class MoveNodeCommand extends BaseCommand {
  constructor(
    private canvasStore: any,
    private nodeId: string,
    private fromPos: Position,
    private toPos: Position
  ) {
    super(`Move node ${nodeId}`)
  }

  async execute(): Promise<void> {
    await this.canvasStore.updateNodePosition(this.nodeId, this.toPos)
  }

  async undo(): Promise<void> {
    await this.canvasStore.updateNodePosition(this.nodeId, this.fromPos)
  }
}
```

### Key Requirements
- Always implement both `execute()` and `undo()` methods
- Use async/await for operations that might be slow
- Include descriptive messages for debugging
- Handle circular references in state serialization
- Implement memory management for large histories
- Use delta compression for performance optimization

### Common Patterns
- **Batch Commands**: Group related operations together
- **Checkpoint Commands**: Create application state snapshots
- **Delta Storage**: Store only changes, not full state
- **Memory Management**: Automatic cleanup and compression
- **Error Recovery**: Graceful handling of failed operations

This skill ensures robust, scalable undo/redo systems that maintain consistency across complex applications while optimizing performance and memory usage.

Related Skills

game-design

16
from diegosouzapw/awesome-omni-skill

Game design principles. GDD structure, balancing, player psychology, progression.

frontend-design

16
from diegosouzapw/awesome-omni-skill

Create distinctive, bold UI designs that avoid generic AI aesthetics. This skill should be used when users want frontend components with strong visual identity, creative typography, intentional color palettes, and production-grade animations - specifically to avoid the bland, safe, homogeneous "AI slop" that plagues most generated interfaces.

figma-design

16
from diegosouzapw/awesome-omni-skill

Access Figma designs, extract design systems, and retrieve component specifications. Use when implementing UI from Figma mockups, extracting design tokens, or analyzing design files.

faion-ui-designer

16
from diegosouzapw/awesome-omni-skill

UI design: wireframes, prototypes, design systems, visual design.

event-store-design

16
from diegosouzapw/awesome-omni-skill

Design and implement event stores for event-sourced systems. Use when building event sourcing infrastructure, choosing event store technologies, or implementing event persistence patterns.

detect-design

16
from diegosouzapw/awesome-omni-skill

Design system detection with drift findings and evidence blocks. Use when auditing design system consistency.

design_responsive

16
from diegosouzapw/awesome-omni-skill

Breakpoints, fluid typography, container queries ve modern CSS features.

design

16
from diegosouzapw/awesome-omni-skill

Design consistency and visual styling for the Svelte client UI. Use when creating or modifying visual elements, colors, typography, buttons, inputs, or cards.

design-system

16
from diegosouzapw/awesome-omni-skill

design system with Tailwind v4.0, accessibility patterns, and project-specific UI/UX rules. Use for all KKOOKK frontend development.

design-system-starter

16
from diegosouzapw/awesome-omni-skill

Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.

design-system-guard

16
from diegosouzapw/awesome-omni-skill

Validate UI screens against Lucid Labs design system rules. Use after implementing UI components to verify adherence to brand colors, typography, layout patterns, and service board logic.

design-strategy

16
from diegosouzapw/awesome-omni-skill

Strategic alignment of design initiatives with business goals using the TRACES framework. Use when (1) aligning design projects with corporate strategy, (2) identifying and mitigating external threats (Technical Debt, Regulatory, Audience, Competition, Economic, Substitute Technology), (3) assessing design maturity/capability, (4) structuring design teams for specific outcomes, (5) managing designer career growth, or (6) communicating design value (ROI, ESG, business outcomes) to senior leadership.