Builder Skill Suite

Two production-ready agent skills packaged as one portfolio-grade skill suite: technical visual explainers + presentation-first slide generation.

This project is intentionally structured to show product judgment, systems thinking, and execution quality in the builder era where product, UX, and engineering merge.

What It Does

This repository ships two complementary skills:

1. visual-explainer — turns complex technical artifacts into high-quality HTML visual outputs (diagrams, diff reviews, plan reviews, recaps, and tables).
2. frontend-slides — creates animation-rich, viewport-safe HTML presentations, including PPT/PPTX conversion workflows.

It also includes a shared reference core (_shared/references/slide-core.md) to reduce duplication while preserving clear boundaries between the two skills.

Product Decisions That Matter

1. Keep skills separate, not merged. The obvious approach was one mega-skill. That would increase trigger ambiguity and blur audience intent. We kept two focused skills and added explicit handoff rules in both SKILL files.

2. Share primitives, not workflows. The naive approach was to unify all slide logic. Instead, only stable shared primitives moved to _shared/references/slide-core.md (viewport fit + responsive token policy). High-variance flows (PPT conversion, style discovery, diff-review analysis) remain skill-specific.

3. Codify routing with test cases. Rather than relying on memory, routing boundaries were formalized in a shared handoff test file so regressions can be caught early.

4. Preserve style conflict intentionally. frontend-slides keeps expressive options like Neon Cyber, while visual-explainer keeps strict anti-slop style constraints for technical artifacts. This is deliberate audience fit, not inconsistency.

How It Works

user intent -> handoff matrix -> selected skill
                        |
                        +-> shared slide-core primitives (when slide output is involved)

• visual-explainer ships 7 command workflows: /generate-web-diagram, /generate-visual-plan, /generate-slides, /diff-review, /plan-review, /project-recap, /fact-check.
• frontend-slides stays dedicated to new decks, guided style exploration, enhancement flows, and PPT conversion.

Results

• 2 specialized skills with clear boundaries instead of one overloaded skill.
• 1 shared slide-core reference that removes duplicated baseline rules while keeping product intent separate.
• 6 cross-skill routing/style regression scenarios documented to save debugging cycles and reduce routing drift over time.
• 0 command-surface regressions in visual-explainer after integration.

The practical outcome: less maintenance duplication without sacrificing trigger precision or output quality.

Setup & Usage

Quick Start

git clone https://github.com/Sukrit-bit/builder-skill-suite.git
cd builder-skill-suite

Install either/both skill folders into your agent skill location as needed.

Daily Workflow

1. Use visual-explainer for technical explainability, reviews, and system visuals.
2. Use frontend-slides for deck creation/PPT conversion.
3. Use _shared/references/handoff-test-cases.md whenever routing or style rules are updated.

What's Next

• Add CI validation for handoff and style-regression checks.
• Add per-skill release notes and semantic version tags.
• Add sample outputs folder for faster public scanning by investors/builders.
• Add a light benchmark rubric (clarity, completeness, aesthetic quality) to evaluate output quality across models.

Built With

Claude Code + Codex + Markdown/HTML/CSS skill architecture.

AI tooling generated and accelerated implementation; product framing, scope boundaries, and integration decisions were directed by the builder.

---

See PRD.md for decision rationale and product framing.

See TECHNICAL.md for engineering tradeoffs and implementation details.

See ATTRIBUTION.md for upstream provenance and licensing.