designStack

Designer-first skill bundle for non-technical founders and designers building their own products. Helps capture a Design Bible, review screens, and ship changes in plain English. Use when the user says "/ds", "designStack", "what skills do I have", "help me get started with my design", or runs with no argument for an overview.

Captures or refreshes a project's Design Bible by reading local design tokens, asking a short brand interview, and writing rules that other designStack skills can reuse. Use when starting a project, capturing brand rules, refreshing a Design Bible after brand changes, or running '/ds-context'.

Commits the current project state to git with a plain-English description of what changed, creating a restore point before risky changes. Use when the user wants to save progress, create an undo point, checkpoint work, or runs '/ds-save'.

Creates a shareable preview link or walks a user through going live in plain English, including first-time deployment setup. Use when the user wants a preview link, wants to deploy for real, wants to go live, or runs '/ds-share'.

First-session onboarding wizard that gets a new project oriented, asks three quick questions, and runs the Design Bible setup flow inline. Use when the user is new to designStack, wants first-run setup, or runs '/ds-start'.

Upgrade designStack to the latest version. Detects the standard install path, runs the update script, shows what's new. Use when asked to "upgrade designStack", "update designStack", "/ds-upgrade", or "/ds-update". Triggers: /ds-upgrade, /ds-update, update designStack.

Audits one page for accessibility, grades it from A to D, and explains the blocking issues in plain English with annotations when visual tools are available. Use when the user wants an accessibility check on a specific page, needs a grade before sharing, or runs '/ds-a11y'.

Adds purposeful motion to existing interactions such as buttons, transitions, loading states, and entrances, guided by the Design Bible's vibe. Use when interactions feel too static, the user wants animation on existing UI, or runs '/ds-animate'.

Scans multiple pages against Design Bible rules and flags cross-page drift in colors, fonts, spacing, and component styles. Use when the user wants a sitewide consistency scan, suspects drift over time, or runs '/ds-brand'.

Improves the first-success moment and the empty or first-time state with subtle, on-brand details that make those moments feel memorable. Use when the user wants to improve emotional moments, success states, empty states, or runs '/ds-delight'.

Reviews one page or screen against Design Bible rules after a UI change and produces a plain-English visual QA report with annotations when available. Use when the user asks if one screen looks right, wants page-level visual QA, or runs '/ds-look'.

Captures side-by-side screenshots at phone (375px), tablet (768px), and desktop sizes and flags anything that's broken or hard to use on smaller screens. Use when the user wants to check mobile responsiveness on one page, preview on phone, or runs '/ds-mobile'.

Runs a final pre-launch release gate across 11 UI checks and produces a prioritized fix list before sharing. Use when the user wants a holistic launch review, asks if the product is ready to share, or runs '/ds-polish'.

Shows local designStack usage analytics such as run counts, recent history, and success rates. Requires analytics to be enabled. Use when the user explicitly asks for usage analytics or runs '/ds-stats'.

Internal maintainer helper for the Supabase backend that stores designStack analytics data. Not part of the public skill portfolio, not routed for end users, and only relevant when maintaining the analytics backend.

Diagnoses one broken feature or page in plain English before any code is touched, using screenshots when available. Use when something stopped working, the user does not know why, or runs '/ds-unstuck'.

Generates three distinct visual directions from feeling words or references, then writes the chosen direction into the Design Bible. Use when the user wants to choose or revise an aesthetic direction, describe how the product should feel, or runs '/ds-vibe'.