Invent & Design Product Experiences

This skill acts as a Product Inventor and Design Alchemist, combining product thinking, design systems, UI engineering, cognitive psychology, and storytelling to transform any idea, rough sketch, or ordinary app into a distinctive product experience, aiming for the effect "how did this not exist before?". It operates on five non-negotiable principles: radical simplicity (friction removed, not features), the detail is the product (micro-interactions and typography accumulate into memorability), the interface is a story (every screen has a promise, action, reward, and inevitable next step), the product has a soul (a visual and behavioral signature), and innovation as unexpected combination (simple mental models plus natural interaction plus strong aesthetic decisions plus flawless execution). It runs a five-stage workflow: brutal diagnosis (5 bullets on what kills the product today), concept generation (3 distinct named concepts each with a signature "killer interaction", main flow, and honest risk/tradeoff - one is chosen and justified), interface blueprint (sitemap, required components, critical flows, microinteractions, accessibility), production-ready implementation (a defined folder architecture and coding rules - typed props, Tailwind CSS variables for tokens, Framer Motion, React Hook Form + Zod, TanStack Query, mobile-first breakpoints, aria attributes throughout), and Apple-level polish (a mandatory checklist covering typography, spacing, interactive states, animation timing, Core Web Vitals targets, data states, accessibility, and mobile touch targets).

Use it when you need specialized product invention or design-alchemy assistance - inventing a new product concept, designing a signature interaction, building a proprietary design system, or elevating an interface to a polished, production-ready state.

Do not use it for tasks unrelated to product invention, when a simpler and more specific tool can handle the request, or when the user needs general-purpose assistance without this domain's specific expertise. The skill's own operational rules apply: when information is insufficient it assumes intelligent defaults and proceeds rather than blocking on clarification; when a user gives negative feedback it rebuilds from scratch with that critique as a constraint rather than defending the original; and any code it generates must actually run, using realistic mock data when there is no backend rather than pseudocode. Treat its output as a strong starting concept and implementation to review, not a substitute for user testing or production-environment validation.

Input: a product idea, rough sketch, or existing product description, invoked directly or via named commands. Output: depends on the command - three named product concepts with signature interactions (/invent), a full interface blueprint (/blueprint), typed production code with tokens, components, and README (/build), an Apple-level polish pass (/polish), or a brutal diagnostic report (/diagnose).

:root {
  --color-brand-500: oklch(55% 0.18 var(--brand-hue));
  --radius-lg: 16px;
  --duration-normal: 250ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Targets a defined stack: Next.js 15 (App Router) or Vite, TypeScript strict, Tailwind CSS 4 with CSS-variable tokens, shadcn/ui as a base or fully custom components depending on whether visual identity is the differentiator, Framer Motion, React Hook Form + Zod, TanStack Query v5, Zustand, and Lucide React icons. Ships five reference visual-identity "moods" (Minimal Dark, Warm Light, Electric Neon, Soft Pastel, Corporate Trust) as starting palettes. Chains with analytics-product, growth-engine, monetization, and product-design skills.

Founders and product teams turning a rough idea or an unremarkable existing app into a distinctive, production-ready product with a memorable signature interaction and Apple-level interface polish.