From magic-ui-ux
Manages the .ui-ux/ persistence folder. Handles initialization, reading, and writing of design tokens, project state, and screen references. Every command MUST read from .ui-ux/ before any design operation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/magic-ui-ux:persistenceThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
`.ui-ux/` is the **single source of truth** for all design operations. It persists design tokens (JSON), screen IDs, project state, branding guidelines, and UX briefs across sessions. Every command reads from it before generating, and writes back after completing.
.ui-ux/ is the single source of truth for all design operations. It persists design tokens (JSON), screen IDs, project state, branding guidelines, and UX briefs across sessions. Every command reads from it before generating, and writes back after completing.
.ui-ux/
tokens.json # Design system tokens (colors, typography, spacing, patterns)
state.json # Project state (screens, pages, Stitch IDs, status)
branding.md # Human-readable design system description
briefs/ # UX briefs per page ({page}-ux-brief.md)
references/ # Reference screenshots and assets
When .ui-ux/ does not exist, initialize it:
Create the directory structure:
mkdir -p .ui-ux/briefs .ui-ux/references
Create state.json with initial values:
{
"projectName": "<ask user>",
"niche": "<ask user>",
"createdAt": "<ISO 8601 timestamp>",
"updatedAt": "<ISO 8601 timestamp>",
"screens": [],
"pages": [],
"deviceType": null,
"brandingComplete": false,
"animationSpecs": [],
"scrollVideoSpecs": [],
"imageSpecs": []
}
Do NOT create tokens.json yet -- that comes from the /branding command (Phase 2).
Do NOT create branding.md yet -- that also comes from /branding.
Before any design command executes:
.ui-ux/ exists. If not, run initialization (above).state.json for current project status (pages designed, screens generated, branding state).tokens.json if it exists (indicates branding is complete -- design tokens are available).branding.md if it exists (human-readable design system for context).If tokens.json does not exist and the command requires design tokens (e.g., /design), prompt the user to run /branding first.
After any design command completes:
state.json with new screen IDs, page statuses, and updatedAt timestamp.tokens.json during design operations -- only /branding writes tokens.briefs/{page}-ux-brief.md.references/ when reverse-engineering designs.Design tokens and project state are validated against JSON Schema (draft-07):
schemas/tokens.json -- defines colors (primary, secondary, CTA, background, text, semantic), typography (heading, body, accent with Google Fonts), spacing, UI style, industry, and component patterns.schemas/state.json -- defines project name, niche, timestamps, Stitch project reference, screens array, pages array with status tracking, branding completion flag, animation specs, and scroll-video specs."Always read
.ui-ux/before generating. Never design blind."
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub flyingwebie/skills --plugin magic-ui-ux