skills.rest
hekivo
hekivoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

superpowers-sage:building

Implement plan-driven Sage/Acorn components with code, tests, and visual verification.

13|Updated Mar 19, 2026
Search Tags:#TDD#design system#WordPress#visual verification#Sage#Acorn#Lando
One-click install
npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-building-hekivo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: superpowers-sage:building
Source: https://github.com/hekivo/superpowers-sage/tree/main/skills/building
Command: npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-building-hekivo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the guesswork and rework of implementing Sage/Acorn features by forcing a plan-first workflow, rigorous verification, and design-system gating before code is committed.

Core Features & Use Cases

  • Plan-driven implementation: Loads component strategy and decisions from plan directories (plan.md, architecture.md, content-model.md, components/), then implements each component in order.
  • Design-system safety gate: Verifies design tokens and a visually validated /kitchensink before implementing any block, invoking /sage-design-system and pausing until validated.
  • Extraction-backed specs + visual verification: Pre-fetches design references to disk, structures them into section specs via design-extractor, builds with lando, and confirms visual match using visual-verifier against reference images.
  • TDD + commit hygiene + incremental delivery: Runs Sage-focused TDD expectations, handles cache flushing and production build, performs scoped commits (branch+atomic commit for Lando), pushes updates, and suggests review/PR steps.

Quick Start

Ask your AI assistant to run the skill with your plan path, for example: "Use superpowers-sage:building with docs/plans/<active-plan>/".

Frequently Asked Questions about superpowers-sage:building

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement Sage and Acorn features with visual verification against design references?▼

Sage feature delivery can be plan-driven by loading metadata from docs/plans directories, extracting design context per component, scaffolding blocks, and verifying visual matching against reference images after each build.

What is a plan-driven workflow for building WordPress components with TDD?▼

A plan-driven workflow loads component strategy and decisions from plan directories, runs Sage-focused TDD expectations, handles cache flushing and production builds, then performs scoped commits with branch and atomic commit handling.

Do I need a design-system token and /kitchensink validation before building Sage blocks?▼

Yes, design-system tokens and a visually validated /kitchensink must be verified before implementing any block, invoking the sage-design-system and pausing until validation is confirmed.

How do I handle Lando cache flushing and theme-build errors during Acorn development?▼

Lando flush and theme-build errors are handled during the build process by running cache flushing, executing production builds, and managing scoped commits with branch and atomic commit logic for Lando.

Can I use design-extractor specs to scaffold Sage components from disk-persisted references?▼

Yes, design references are pre-fetched to disk and structured into section specs via design-extractor, which then scaffolds required blocks and confirms visual match using visual-verifier against the reference images.

What are the limitations of image-based visual verification for arbitrary Tailwind drift?▼

Image-based visual verification checks for drift and arbitrary Tailwind classes after building, but requires design-system token gating and /kitchensink validation to pass before any component implementation begins.

Related Skills

Explore More Software Engineering Skills→
codigodoleocodigodoleo
13

superpowers-sage:building

Automate plan-driven feature implementation for Sage/Acorn projects.

Official
Advanced
rkz91rkz91
264

gsd-ship

Push a feature branch, create a pull request with an auto-generated body, and track merge status.

Community
Advanced
KajabiKajabi
26

sage-design-review

Enforce Sage design-system discipline on SCSS, tokens, and classnames.

Official
Intermediate
codigodoleocodigodoleo
13

superpowers-sage:architecting

Define Sage/Acorn feature architecture with ADRs, data flows, and component boundaries.

Official
Advanced