Skill Claude CodeCodex
TidyFactor Design track — code-native UI design lifecycle engine (Figma alternative). Supports all 7 stages of UI design (Discovery, Foundation, Architecture, Components, Motion, Quality, Delivery) with zero per-page CSS/JS and zero build step. Pluggable CSS foundations (Native, Tailwind utility-first, daisyUI…
Command Codex
One or two sentences: what this command extracts/organizes, and why it's its own command rather than folded into another one.
Command Codex
Runtime entry point for generating AI media, removing image backgrounds, and optimizing image payloads.
Command Codex
Runtime entry point for auditing prototype compliance and structural integrity (read-only by default).
Command Codex
Runtime entry point for creating, extracting, or evolving brand.json v2. Part of the Foundation lifecycle phase.
Command Codex
Runtime entry point for establishing design context before any build begins. Part of the Discovery lifecycle phase.
Command Codex
Runtime entry point for reverse-engineering an external website reference into a clean, code-native prototype design system.
Command Codex
Runtime entry point for authoring shared component classes in components.css and generating an 8-state demo preview.
Command Codex
Dashboards are structurally different from marketing pages (persistent navigation shell, data-density, empty/loading/error states are core to the experience, not edge cases) — kept as its own command so those differences get deliberate handling instead of the marketing-page template stretched to fit.
Command Codex
Always the last command: verify the prototype actually behaves correctly and package it for a client presentation or a developer handoff, with zero build step required either way.
Command Codex
Turns a folder of independent pages into a navigable prototype a client can click through unassisted — the feature that makes this a genuine Figma "present mode" alternative rather than a pile of static mockups.
Command Codex
Runtime entry point for generating clean, developer-ready design system specifications, token maps, component state matrices, and implementation guidelines. Part of the Delivery & Handoff lifecycle phase.
Command Codex
Arabic support is a first-class capability of this skill, not a translation pass bolted on at the end — this command carries conventions drawn directly from prior production work, not generic RTL guidance. Run this as a real step in every project, even English-only ones, so the decision is explicit.
Command Codex
Runtime entry point for starting a brand-new interactive prototype from scratch.
Command Codex
Runtime entry point for selecting and applying specialized surface layout blueprints. Part of the Architecture lifecycle phase.
Command Codex
Runtime entry point for configuring global motion tokens, scroll-reveals, and micro-delight interactions in motion.js and interactions.js.
Command Codex
Runtime entry point for selecting, customizing, and auditing Navigation (N1–N9) and Footer (Ft1–Ft8) components. Part of the Architecture lifecycle phase.
Command Codex
The recurring loop this whole skill exists to support: add another page to the prototype without any risk of visual drift, however large the site grows. This is the command most likely to run dozens of times on one project — its discipline matters more than any other command's.
Command Codex
Extract dominant brand colors, background tones, accent highlights, and WCAG 2.1 AA contrast compliance scores from reference images, logos, or hero screenshots using the built-in Python tool scripts/extractpalette.py. Automatically updates brand.json and appends CSS custom properties to design-system/tokens.css.
Command Codex
Runtime entry point for checking asset performance budgets, script preconnects, and load optimization. Part of the Quality & Audit lifecycle phase.
Command Codex
Runtime entry point for unifying a drifted prototype under one design system.
Command Codex
Force a named, justified aesthetic choice before any token or component exists — the single biggest lever against a prototype defaulting to generic AI-generated design patterns (see memory/01-design-schools.md for the calibration list of overused defaults to actively avoid unless the brief asks for them specifically).
Command Codex
This is what separates an "interactive prototype" from a picture of a website — the difference the whole positioning of this skill depends on. Kept as its own command because states are easy to skip under time pressure and easy to audit for once isolated.
Command Codex
Runtime entry point for extracting design DNA from a live URL, screenshot, or reference site. Part of the Discovery lifecycle phase.