cabal-ui-cloning-kit

A distilled, typed playbook for cloning UI designs at top-1% fidelity. It packages the methodology that separates a 90% clone (structure right) from a 99% clone (the feeling right): brand-energy motion profiles, the typography-matching map, spacing personalities, illustration zones, the Functionality Contract, the recurring-weakness catalog, and the pre/post-build checklists.

It ships two ways:

• A library — import the methodology as typed data and use it in your own tooling.
• A Claude skill — SKILL.md makes it loadable as a skill that guides UI-cloning work.

Zero runtime dependencies. (Node is only needed for the references file-reading helpers; the rest is pure data.)

Install

npm install cabal-ui-cloning-kit

Use as a library

import {
  getMotionProfile,
  FONT_MATCHES,
  FUNCTIONALITY_CONTRACT,
  WEAKNESSES,
  PRE_BUILD_CHECKLIST,
  POST_BUILD_AUDIT,
  readReferenceGuide,
} from "cabal-ui-cloning-kit";

// Motion that matches the brand instead of flattening it
getMotionProfile("luxury");
// → { energy: "luxury", character: "Slow, languid, deliberate",
//     easing: "cubic-bezier(0.4, 0, 0.2, 1)", duration: "0.8-1.2s" }

// Enforce that every interactive element produces a result
for (const row of FUNCTIONALITY_CONTRACT) {
  console.log(`${row.element} → ${row.mustDo}`);
}

// Pull the full long-form guide when you want the whole argument
const guide = readReferenceGuide("excellence");

What's exported

| Export | What it is | |---|---| | MOTION_PROFILES, getMotionProfile, MOTION_VOCABULARY | Brand energy → easing/duration; ways past the default five animations | | FONT_MATCHES, FONT_GAP_ESCAPES | Original feel → Google Font + CSS compensation | | SPACING_PROFILES, getSpacingProfile | Airy / dense / asymmetric / overlapping handling | | ILLUSTRATION_ZONES, ZONE_B_WORKAROUNDS, IMAGE_SLOT_TYPES, STOCK_IMAGE_RULES | Where SVG/illustration succeeds vs. fails, and the workarounds | | FUNCTIONALITY_CONTRACT, INTERACTION_CHAIN_RULE, APP_UI_RULES | No dead-end interactivity; app-UI discipline | | WEAKNESSES, getWeakness | The recurring-failure catalog with fixes | | PRE_BUILD_CHECKLIST, POST_BUILD_AUDIT, MINDSET | Run before / after every build | | readReferenceGuide, readExampleClone, REFERENCES_DIR, EXAMPLES_DIR | Accessors for the bundled guides and example clones |

Use as a Claude skill

The package root contains a SKILL.md with the full workflow. Point your skill loader at the package directory (or copy SKILL.md + references/ into your skills folder) to have the methodology drive UI-cloning tasks directly.

Bundled assets

• references/ui-cloning-excellence.md — the weakness catalog, font map, surface recipes, and checklists in full prose.
• references/vibe-interpretation.md — functionality-is-not-decoration, taste = restraint + coherence, the no-stock strategy, and app-UI lessons.
• examples/ — worked example clones (promox, dinolab, dont-board-me).

Develop

npm install
npm run build   # tsc -> dist/

License

MIT