Absolute Development Workflow Engine

To prevent regressions, absolute-prune categorizes removals into three waves based on risk. Static analysis tools can miss dynamic references (DI, reflection, dynamic imports), so follow this hierarchy:

Safety Rule: Anything in Wave 3, or anything a tool flags that you cannot prove is dead, must be confirmed with a human or deferred. Never auto-remove these.

To ensure stability, absolute-upgrade organizes updates into three distinct waves based on the semantic versioning (semver) jump type:

For major bumps, the skill identifies breaking changes (via CHANGELOG or release notes), inventories affected call sites, and performs the necessary code migrations in the same wave to ensure the project remains functional.

Optimize selectors while maintaining specificity:

• Over-qualified selectors: Drop tag qualifiers (e.g., ul.nav $\rightarrow$ .nav or div.card $\rightarrow$ .card) if the class is unique and the tag is not needed for specificity or disambiguation.
• Descendant chains: Avoid shortening chains like .card .body .title to .card-title unless it is guaranteed not to change which elements match. If unsure, flag the chain instead of changing it.
• Specificity Warning: Never lower specificity if another rule relies on that higher specificity to win.

The .absolute-work/board.md file serves as the single source of truth for an Absolute Work run. It is a local, machine-parseable, and human-readable file that tracks the state of a project, enabling features like session resumption, auditing, and handoff.

File Location: {project-root}/.absolute-work/board.md

Directory Structure:

• .absolute-work/board.md: The active main board.
• .absolute-work/archive/board-{timestamp}.md: Completed or superseded boards.

Persistence Strategy: Users decide during the intake phase if the .absolute-work/ directory should be:

• Git-tracked: Provides an audit trail and allows resuming work across different machines.
• Gitignored: Keeps the work state strictly local to the current environment.

{project-root}/.absolute-work/
├── board.md
└── archive/
    └── board-1717400000.md

Select the appropriate pattern based on your use case:

To ensure usability on touch devices, follow these guidelines:

• Minimum size: 44x44px (Apple HIG) or 48x48px (Material Design).
• Spacing: Maintain at least 8px between interactive targets.
• Thumb zone: Place primary actions in the bottom 1/3 of the screen, as this area is easiest to reach.

For simpler UIs, you can build hierarchy using weight and color instead of multiple font sizes. Pick a base size (14px or 16px) and only increase size for page titles or hero headings.

Hierarchy via weight/color:

• Heading: 16px + weight: 700 + white color
• Secondary: 16px + weight: 400 + 60% opacity/gray
• Link: 16px + weight: 500 + brand color

:root {
  --text-sm: 0.875rem;   /* 14px - when you need smaller */
  --text-base: 1rem;     /* 16px - default everything */
  --text-lg: 1.125rem;   /* 18px - titles, emphasis */
  --text-display: 1.5rem; /* 24px+ - page titles only */
}

When a button is in a loading state:

1. Maintain Width: Replace text with a spinner but keep the button the same width (use min-width) to prevent layout shifts.
2. Disable Interaction: Set disabled and disable pointer events.
3. Spinner Sizing: Use 16px for sm/md and 20px for lg.
4. Pattern: Keep the original label visible, add the spinner to the left, and hide the icon if one was present.

<!-- Default -->
<button class="btn-primary">
  <SaveIcon size={16} />
  Save changes
</button>

<!-- Loading -->
<button class="btn-primary" disabled>
  <Spinner size={16} />
  Save changes
</button>