@selesai/code 0.13.12 → 0.13.14

package/dist/extensions/pi-zentui/test/thinking-status.test.ts

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import type { ThinkingStepsComponentConfig } from "../extensions/zentui/config";
+import {
+	formatThinkingStatus,
+	type ThinkingStatusState,
+	thinkingStatusLabels,
+} from "../extensions/zentui/thinking-status";
+
+const config = (mode: ThinkingStepsComponentConfig["mode"]): ThinkingStepsComponentConfig => ({
+	enabled: true,
+	mode,
+});
+
+const status = (mode: ThinkingStepsComponentConfig["mode"], state: ThinkingStatusState) =>
+	formatThinkingStatus(thinkingStatusLabels(config(mode), state));
+
+describe("Thinking status", () => {
+	it("reports displaced whole-renderer availability independently", () => {
+		expect(
+			status("tree", {
+				active: false,
+				rendererAvailable: false,
+				streamingAvailable: true,
+				restartRequired: true,
+				reason: "Private renderer patch ownership was displaced",
+			}),
+		).toBe(
+			"Saved: Tree · Active: Native · Renderer unavailable · restart required · Private renderer patch ownership was displaced",
+		);
+	});
+
+	it("reports a matcher runtime failure as Streaming-only unavailability", () => {
+		expect(
+			status("streaming", {
+				active: false,
+				rendererAvailable: true,
+				streamingAvailable: false,
+				restartRequired: true,
+				reason: "Pi's thinking-toggle matcher failed at runtime",
+			}),
+		).toBe(
+			"Saved: Streaming · Active: Native · Streaming unavailable · restart required · Pi's thinking-toggle matcher failed at runtime",
+		);
+	});
+
+	it("keeps poisoned Streaming visible while Rail is healthy", () => {
+		expect(
+			status("rail", {
+				active: true,
+				activeMode: "rail",
+				rendererAvailable: true,
+				streamingAvailable: false,
+				streamingPoisoned: true,
+				restartRequired: false,
+				reason: "Pi's thinking timer is unavailable",
+			}),
+		).toBe(
+			"Saved: Rail · Active: Rail · Streaming unavailable · Pi's thinking timer is unavailable",
+		);
+	});
+
+	it("reports an enabled startup fallback as active native", () => {
+		expect(
+			status("tree", {
+				active: false,
+				rendererAvailable: true,
+				streamingAvailable: true,
+				restartRequired: true,
+			}),
+		).toBe("Saved: Tree · Active: Native · restart required");
+	});
+
+	it("does not duplicate availability or restart text from a reason", () => {
+		expect(
+			status("streaming", {
+				active: true,
+				activeMode: "rail",
+				rendererAvailable: true,
+				streamingAvailable: false,
+				restartRequired: true,
+				reason: "Streaming unavailable; restart required",
+			}),
+		).toBe("Saved: Streaming · Active: Rail · Streaming unavailable · restart required");
+	});
+});

package/dist/extensions/pi-zentui/test/thinking-steps.test.ts

@@ -0,0 +1,122 @@
+import { describe, expect, it } from "vitest";
+import {
+	parseThinkingSteps,
+	THINKING_STEPS_MAX_INPUT_LENGTH,
+	THINKING_STEPS_MAX_LABEL_LENGTH,
+	THINKING_STEPS_MAX_STEPS,
+} from "../extensions/zentui/thinking-steps";
+
+describe("Thinking-step structural parser", () => {
+	it("derives headings, top-level lists, and prose while retaining bodies", () => {
+		expect(
+			parseThinkingSteps(
+				"# Inspect\nbody\n\n- Check API\n  - nested body\n\nProse label\nprose body",
+			),
+		).toEqual([
+			{ number: 1, label: "Inspect", body: "body" },
+			{ number: 2, label: "Check API", body: "  - nested body" },
+			{ number: 3, label: "Prose label", body: "prose body" },
+		]);
+	});
+
+	it("strips SGR around structural Markdown before parsing", () => {
+		const plain = "# Inspect\nbody\n\n- Check API\n  nested\n\nProse label\nprose body";
+		const sgr = "\x1b[38;2;137;180;250m";
+		const muted = "\x1b[38;2;186;194;222m";
+		const reset = "\x1b[39m";
+		const decorated = `${sgr}#${reset} ${muted}Inspect${reset}\n${sgr}body${reset}\n\n${muted}-${reset} Check API\n  ${sgr}nested${reset}\n\n${muted}Prose label${reset}\n${sgr}prose body${reset}`;
+		const expected = parseThinkingSteps(plain);
+		const actual = parseThinkingSteps(decorated);
+		expect(actual).toEqual(expected);
+		for (const step of actual ?? []) {
+			expect(`${step.label}\n${step.body}`).not.toMatch(/[\x1b\x80-\x9f]/);
+		}
+	});
+
+	it("strips complete SGR at every source boundary without changing steps", () => {
+		const source = "# One\nbody\n\n- Two\n  nested";
+		const expected = parseThinkingSteps(source);
+		for (let index = 0; index <= source.length; index += 1) {
+			const decorated = `${source.slice(0, index)}\x1b[38:5:202m${source.slice(index)}`;
+			expect(parseThinkingSteps(decorated), `SGR boundary ${index}`).toEqual(expected);
+		}
+	});
+
+	it("rejects a non-SGR control at every source boundary", () => {
+		const source = "# One\nbody\n\n# Two";
+		for (let index = 0; index <= source.length; index += 1) {
+			const unsafe = `${source.slice(0, index)}\x1b[2J${source.slice(index)}`;
+			expect(parseThinkingSteps(unsafe), `control boundary ${index}`).toBeUndefined();
+		}
+	});
+
+	it.each([
+		"\x1b[31m\x1b[0m",
+		"# Safe \x1b[31mstyle\x1b[0m\x1b[2J",
+		"# Safe \x1b[31mstyle\x1b[0m\x1b]8;;https://example.test\x07link\x1b]8;;\x07",
+	])("fails open for SGR-only or mixed unsafe input", (source) => {
+		expect(parseThinkingSteps(source)).toBeUndefined();
+	});
+
+	it("keeps fences, Mermaid, display math, and nested structure opaque", () => {
+		const source = [
+			"# Analyze",
+			"```mermaid",
+			"# hidden",
+			"```",
+			"$$",
+			"- hidden",
+			"$$",
+			"  1. nested",
+			"# Done",
+		].join("\n");
+		const steps = parseThinkingSteps(source);
+		expect(steps?.map((step) => step.label)).toEqual(["Analyze", "Done"]);
+		expect(steps?.[0]?.body).toContain("```mermaid\n# hidden\n```");
+		expect(steps?.[0]?.body).toContain("$$\n- hidden\n$$");
+	});
+
+	it.each([
+		"",
+		"\x1b]0;owned\x07",
+		"```\n# unterminated",
+		"$$\nvalue",
+		"> unsupported quote\n# Later",
+		"  orphan\n# Later",
+		"# tab\tlabel",
+	])("fails open for malformed or unsafe input", (source) => {
+		expect(parseThinkingSteps(source)).toBeUndefined();
+	});
+
+	it("normalizes CRLF and enforces inclusive parser bounds", () => {
+		expect(parseThinkingSteps("# One\r\nbody\r\n# Two")?.map((step) => step.label)).toEqual([
+			"One",
+			"Two",
+		]);
+		const exactInput = `Intro\n${"x".repeat(THINKING_STEPS_MAX_INPUT_LENGTH - 6)}`;
+		expect(parseThinkingSteps(exactInput)).toHaveLength(1);
+		expect(parseThinkingSteps(`${exactInput}x`)).toBeUndefined();
+		const decoratedPrefix = "# A\n\x1b[31m";
+		const decoratedSuffix = "\x1b[0m";
+		const decoratedExact = `${decoratedPrefix}${"a".repeat(THINKING_STEPS_MAX_INPUT_LENGTH - decoratedPrefix.length - decoratedSuffix.length)}${decoratedSuffix}`;
+		expect(decoratedExact).toHaveLength(THINKING_STEPS_MAX_INPUT_LENGTH);
+		expect(parseThinkingSteps(decoratedExact)).toHaveLength(1);
+		expect(parseThinkingSteps(`${decoratedExact}x`)).toBeUndefined();
+		expect(
+			parseThinkingSteps(
+				`# \x1b[38;2;137;180;250m${"a".repeat(THINKING_STEPS_MAX_LABEL_LENGTH)}\x1b[39m`,
+			),
+		).toHaveLength(1);
+		expect(
+			parseThinkingSteps(
+				`# \x1b[38;2;137;180;250m${"a".repeat(THINKING_STEPS_MAX_LABEL_LENGTH + 1)}\x1b[39m`,
+			),
+		).toBeUndefined();
+		const exactSteps = Array.from(
+			{ length: THINKING_STEPS_MAX_STEPS },
+			(_, index) => `# Step ${index}`,
+		).join("\n");
+		expect(parseThinkingSteps(exactSteps)).toHaveLength(THINKING_STEPS_MAX_STEPS);
+		expect(parseThinkingSteps(`${exactSteps}\n# overflow`)).toBeUndefined();
+	});
+});

package/dist/extensions/pi-zentui/test/user-message-osc.test.ts

@@ -3,6 +3,7 @@ import {
 	isValidUserMessageOsc8Payload,
 	sanitizeRenderedUserMessageLines,
 	sanitizeRenderedUserMessageText,
+	sanitizeSgrOnlySourceText,
 	sanitizeUserMessageSourceText,
 } from "../extensions/zentui/user-message-osc";
 
@@ -114,6 +115,63 @@ describe("sanitizeUserMessageSourceText", () => {
 	});
 });
 
+describe("sanitizeSgrOnlySourceText", () => {
+	it.each([
+		["empty", "", ""],
+		["standard", "before\x1b[31;1mred\x1b[0m after", "beforered after"],
+		["256 color", "\x1b[38;5;202mvalue\x1b[39m", "value"],
+		["colon parameters", "\x1b[38:2::137:180:250mvalue\x1b[m", "value"],
+		[
+			"observed truecolor sequences",
+			"\x1b[38;2;137;180;250mfirst\x1b[39m \x1b[38;2;186;194;222msecond\x1b[39m",
+			"first second",
+		],
+	] as const)("strips strict 7-bit CSI SGR for %s", (_name, source, expected) => {
+		expect(sanitizeSgrOnlySourceText(source)).toBe(expected);
+	});
+
+	it("preserves source whitespace exactly", () => {
+		expect(sanitizeSgrOnlySourceText("\t\x1b[1m first  \nsecond\t\x1b[22m\n")).toBe(
+			"\t first  \nsecond\t\n",
+		);
+	});
+
+	it.each([
+		["cursor", "value\x1b[2A"],
+		["erase", "value\x1b[2J"],
+		["OSC", "\x1b]0;title\x07value"],
+		["OSC 8", "\x1b]8;;https://example.test\x07link\x1b]8;;\x07"],
+		["7-bit DCS", "\x1bPpayload\x1b\\"],
+		["7-bit SOS", "\x1bXpayload\x1b\\"],
+		["7-bit PM", "\x1b^payload\x1b\\"],
+		["7-bit APC", "\x1b_payload\x1b\\"],
+		["generic escape", "\x1b(0value"],
+		["BEL", "a\x07b"],
+		["NUL", "a\x00b"],
+		["form feed", "a\x0cb"],
+		["DEL", "a\x7fb"],
+		["C1", "a\x85b"],
+		["8-bit CSI", "a\x9b31mb"],
+		["8-bit DCS", "a\x90payload\x9cb"],
+		["8-bit SOS", "a\x98payload\x9cb"],
+		["8-bit PM", "a\x9epayload\x9cb"],
+		["8-bit APC", "a\x9fpayload\x9cb"],
+	] as const)("rejects %s controls mixed with safe SGR", (_name, source) => {
+		expect(sanitizeSgrOnlySourceText(`\x1b[1m${source}\x1b[0m`)).toBeUndefined();
+	});
+
+	it.each([
+		["incomplete", "\x1b[38;2;137;180;250"],
+		["private", "\x1b[?25m"],
+		["intermediate", "\x1b[1 m"],
+		["invalid parameter", "\x1b[31.1m"],
+		["non-SGR CSI", "\x1b[31H"],
+		["cancelled", "\x1b[31\x18m"],
+	] as const)("rejects %s SGR-like input", (_name, source) => {
+		expect(sanitizeSgrOnlySourceText(source)).toBeUndefined();
+	});
+});
+
 describe("sanitizeRenderedUserMessageText", () => {
 	it("preserves only SGR and structurally valid 7-bit OSC 8", () => {
 		const sgr = "\x1b[38;5;202mstyled\x1b[0m";

package/dist/skills/brandkit/SKILL.md

@@ -1,8 +1,6 @@
 ---
 name: brandkit
-category: design
 description: Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
-license: MIT
 ---
 
 # BRANDKIT IMAGE GENERATION SKILL

package/dist/skills/{industrial-brutalist-ui → brutalist}/SKILL.md

@@ -1,8 +1,6 @@
 ---
-name: industrial-brutalist-ui
-category: design
+name: brutalist
 description: Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
-license: MIT
 ---
 
 # SKILL: Industrial Brutalism & Tactical Telemetry UI

package/dist/skills/gpt-taste/SKILL.md

@@ -1,8 +1,6 @@
 ---
 name: gpt-taste
-category: design
 description: Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
-license: MIT
 ---
 
 # CORE DIRECTIVE: AWWWARDS-LEVEL DESIGN ENGINEERING

package/dist/skills/image-to-code/SKILL.md

@@ -1,8 +1,6 @@
 ---
 name: image-to-code
-category: imagegen
 description: Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
-license: MIT
 ---
 
 # CORE DIRECTIVE: IMAGE-FIRST WEBSITE DESIGN TO CODE

package/dist/skills/imagegen-frontend-mobile/SKILL.md

@@ -1,8 +1,6 @@
 ---
 name: imagegen-frontend-mobile
-category: imagegen
 description: Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
-license: MIT
 ---
 
 # CORE DIRECTIVE: PREMIUM MOBILE APP IMAGE DIRECTION

package/dist/skills/imagegen-frontend-web/SKILL.md

@@ -1,8 +1,6 @@
 ---
 name: imagegen-frontend-web
-category: imagegen
 description: Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
-license: MIT
 ---
 
 # HARD OUTPUT RULE — READ FIRST

package/dist/skills/{minimalist-ui → minimalist}/SKILL.md

@@ -1,8 +1,6 @@
 ---
-name: minimalist-ui
-category: design
+name: minimalist
 description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
-license: MIT
 ---
 
 # Protocol: Premium Utilitarian Minimalism UI Architect

package/dist/skills/{full-output-enforcement → output}/SKILL.md

@@ -1,8 +1,6 @@
 ---
-name: full-output-enforcement
-category: discipline
+name: output
 description: Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
-license: MIT
 ---
 
 # Full-Output Enforcement

package/dist/skills/{redesign-existing-projects → redesign}/SKILL.md

@@ -1,8 +1,6 @@
 ---
-name: redesign-existing-projects
-category: design
+name: redesign
 description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
-license: MIT
 ---
 
 # Redesign Skill

package/dist/skills/{high-end-visual-design → soft}/SKILL.md

@@ -1,8 +1,6 @@
 ---
-name: high-end-visual-design
-category: design
+name: soft
 description: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
-license: MIT
 ---
 
 # Agent Skill: Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)

package/dist/skills/stitch/DESIGN.md

@@ -0,0 +1,121 @@
+# Design System: Taste Standard
+**Skill:** stitch
+
+---
+
+## Configuration — Set Your Style
+Adjust these dials before using this design system. They control how creative, dense, and animated the output should be. Pick the level that fits your project.
+
+| Dial | Level | Description |
+|------|-------|-------------|
+| **Creativity** | `8` | `1` = Ultra-minimal, Swiss, silent, monochrome. `5` = Balanced, clean but with personality. `10` = Expressive, editorial, bold typography experiments, inline images in headlines, strong asymmetry. Default: `8` |
+| **Density** | `4` | `1` = Gallery-airy, massive whitespace. `5` = Balanced sections. `10` = Cockpit-dense, data-heavy. Default: `4` |
+| **Variance** | `8` | `1` = Predictable, symmetric grids. `5` = Subtle offsets. `10` = Artsy chaotic, no two sections alike. Default: `8` |
+| **Motion Intent** | `6` | `1` = Static, no animation noted. `5` = Subtle hover/entrance cues. `10` = Cinematic orchestration noted in every component. Default: `6` |
+
+> **How to use:** Change the numbers above to match your project's vibe. At **Creativity 1–3**, the system produces clean, quiet, Notion-like interfaces. At **Creativity 7–10**, expect inline image typography, dramatic scale contrast, and strong editorial layouts. The rest of the rules below adapt to your chosen levels.
+
+---
+
+## 1. Visual Theme & Atmosphere
+A restrained, gallery-airy interface with confident asymmetric layouts and fluid spring-physics motion. The atmosphere is clinical yet warm — like a well-lit architecture studio where every element earns its place through function. Density is balanced (Level 4), variance runs high (Level 8) to prevent symmetrical boredom, and motion is fluid but never theatrical (Level 6). The overall impression: expensive, intentional, alive.
+
+## 2. Color Palette & Roles
+- **Canvas White** (#F9FAFB) — Primary background surface. Warm-neutral, never clinical blue-white
+- **Pure Surface** (#FFFFFF) — Card and container fill. Used with whisper shadow for elevation
+- **Charcoal Ink** (#18181B) — Primary text. Zinc-950 depth — never pure black
+- **Steel Secondary** (#71717A) — Body text, descriptions, metadata. Zinc-500 warmth
+- **Muted Slate** (#94A3B8) — Tertiary text, timestamps, disabled states
+- **Whisper Border** (rgba(226,232,240,0.5)) — Card borders, structural 1px lines. Semi-transparent for depth
+- **Diffused Shadow** (rgba(0,0,0,0.05)) — Card elevation. Wide-spreading, 40px blur, -15px offset. Never harsh
+
+### Accent Selection (Pick ONE per project)
+- **Emerald Signal** (#10B981) — For growth, success, positive data dashboards
+- **Electric Blue** (#3B82F6) — For productivity, SaaS, developer tools
+- **Deep Rose** (#E11D48) — For creative, editorial, fashion-adjacent projects
+- **Amber Warmth** (#F59E0B) — For community, social, warm-toned products
+
+### Banned Colors
+- Purple/Violet neon gradients — the "AI Purple" aesthetic
+- Pure Black (#000000) — always Off-Black or Zinc-950
+- Oversaturated accents above 80% saturation
+- Mixed warm/cool gray systems within one project
+
+## 3. Typography Rules
+- **Display:** `Geist`, `Satoshi`, `Cabinet Grotesk`, or `Outfit` — Track-tight (`-0.025em`), controlled fluid scale, weight-driven hierarchy (700–900). Not screaming. Leading compressed (`1.1`). Alternatives forced — `Inter` is BANNED for premium contexts
+- **Body:** Same family at weight 400 — Relaxed leading (`1.65`), 65ch max-width, Steel Secondary color (#71717A)
+- **Mono:** `Geist Mono` or `JetBrains Mono` — For code blocks, metadata, timestamps. When density exceeds Level 7, all numbers switch to monospace
+- **Scale:** Display at `clamp(2.25rem, 5vw, 3.75rem)`. Body at `1rem/1.125rem`. Mono metadata at `0.8125rem`
+
+### Banned Fonts
+- `Inter` — banned everywhere in premium/creative contexts
+- Generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`, `Palatino`) — BANNED. If serif is needed for editorial/creative, use only distinctive modern serifs like `Fraunces`, `Gambarino`, `Editorial New`, or `Instrument Serif`. Never use default browser serif stacks. Serif is always BANNED in dashboards or software UIs regardless
+
+## 4. Component Stylings
+* **Buttons:** Flat surface, no outer glow. Primary: accent fill with white text. Secondary: ghost/outline. Active state: `-1px translateY` or `scale(0.98)` for tactile push. Hover: subtle background shift, never glow
+* **Cards/Containers:** Generously rounded corners (`2.5rem`). Pure white fill. Whisper border (`1px`, semi-transparent). Diffused shadow (`0 20px 40px -15px rgba(0,0,0,0.05)`). Internal padding `2rem–2.5rem`. Used ONLY when elevation communicates hierarchy — high-density layouts replace cards with `border-top` dividers or negative space
+* **Inputs/Forms:** Label positioned above input. Helper text optional. Error text below in Deep Rose. Focus ring in accent color, `2px` offset. No floating labels. Standard `0.5rem` gap between label-input-error stack
+* **Navigation:** Sleek, sticky. Icons scale on hover (Dock Magnification optional). No hamburger on desktop. Clean horizontal with generous spacing
+* **Loaders:** Skeletal shimmer matching exact layout dimensions and rounded corners. Shifting light reflection across placeholder shapes. Never circular spinners
+* **Empty States:** Composed illustration or icon composition with guidance text. Never just "No data found"
+* **Error States:** Inline, contextual. Red accent underline or border. Clear recovery action
+
+## 5. Hero Section
+The Hero is the first impression — it must be striking, creative, and never generic.
+- **Inline Image Typography:** Embed small, contextual photos or visuals directly between words or letters in the headline. Example: "We build [photo of hands typing] digital [photo of screen] products" — images sit inline at type-height, rounded, acting as visual punctuation between words. This is the signature creative technique
+- **No Overlapping Elements:** Text must never overlap images or other text. Every element has its own clear spatial zone. No z-index stacking of content layers, no absolute-positioned headlines over images. Clean separation always
+- **No Filler Text:** "Scroll to explore", "Swipe down", scroll arrow icons, bouncing chevrons, and any instructional UI chrome are BANNED. The user knows how to scroll. Let the content pull them in naturally
+- **Asymmetric Structure:** Centered Hero layouts are BANNED at this variance level. Use Split Screen (50/50), Left-Aligned text / Right visual, or Asymmetric Whitespace with large empty zones
+- **CTA Restraint:** Maximum one primary CTA button. No secondary "Learn more" links. No redundant micro-copy below the headline
+
+## 6. Layout Principles
+- **Grid-First:** CSS Grid for all structural layouts. Never flexbox percentage math (`calc(33% - 1rem)` is BANNED)
+- **No Overlapping:** Elements must never overlap each other. No absolute-positioned layers stacking content on content. Every element occupies its own grid cell or flow position. Clean, separated spatial zones
+- **Feature Sections:** The "3 equal cards in a row" pattern is BANNED. Use 2-column Zig-Zag, asymmetric Bento grids (2fr 1fr 1fr), or horizontal scroll galleries
+- **Containment:** All content within `max-width: 1400px`, centered. Generous horizontal padding (`1rem` mobile, `2rem` tablet, `4rem` desktop)
+- **Full-Height:** Use `min-height: 100dvh` — never `height: 100vh` (iOS Safari address bar jump)
+- **Bento Architecture:** For feature grids, use Row 1: 3 columns | Row 2: 2 columns (70/30 split). Each tile contains a perpetual micro-animation
+
+## 7. Responsive Rules
+Every screen must work flawlessly across all viewports. **Responsive is not optional — it is a hard requirement. Every single element must be tested at 375px, 768px, and 1440px.**
+- **Mobile-First Collapse (< 768px):** All multi-column layouts collapse to a strict single column. `width: 100%`, `padding: 1rem`, `gap: 1.5rem`. No exceptions
+- **No Horizontal Scroll:** Horizontal overflow on mobile is a critical failure. All elements must fit within viewport width. If any element causes horizontal scroll, the design is broken
+- **Typography Scaling:** Headlines scale down gracefully via `clamp()`. Body text stays `1rem` minimum. Never shrink body below `14px`. Headlines must remain readable on 375px screens
+- **Touch Targets:** All interactive elements minimum `44px` tap target. Generous spacing between clickable items. Buttons must be full-width on mobile
+- **Image Behavior:** Hero and inline images scale proportionally. Inline typography images (photos between words) stack below the headline on mobile instead of inline
+- **Navigation:** Desktop horizontal nav collapses to a clean mobile menu (slide-in or full-screen overlay). No tiny hamburger icons without labels
+- **Cards & Grids:** Bento grids and asymmetric layouts revert to stacked single-column cards with full-width. Maintain internal padding (`1rem`)
+- **Spacing Consistency:** Vertical section gaps reduce proportionally on mobile (`clamp(3rem, 8vw, 6rem)`). Never cramped, never excessively airy
+- **Testing Viewports:** Designs must be verified at: `375px` (iPhone SE), `390px` (iPhone 14), `768px` (iPad), `1024px` (small laptop), `1440px` (desktop)
+
+## 8. Motion & Interaction (Code-Phase Intent)
+> **Note:** Stitch generates static screens — it does not animate. This section documents the **intended motion behavior** so that the coding agent (Antigravity, Cursor, etc.) knows exactly how to implement animations when building the exported design into a live product.
+
+- **Physics Engine:** Spring-based exclusively. `stiffness: 100, damping: 20`. No linear easing anywhere. Premium, weighty feel on all interactive elements
+- **Perpetual Micro-Loops:** Every active dashboard component has an infinite-loop state — Pulse on status dots, Typewriter on search bars, Float on feature icons, Shimmer on loading states
+- **Staggered Orchestration:** Lists and grids mount with cascaded delays (`animation-delay: calc(var(--index) * 100ms)`). Waterfall reveals, never instant mount
+- **Layout Transitions:** Smooth re-ordering via shared element IDs. Items swap positions with physics, simulating real-time intelligence
+- **Hardware Rules:** Animate ONLY `transform` and `opacity`. Never `top`, `left`, `width`, `height`. Grain/noise filters on fixed, pointer-events-none pseudo-elements only
+- **Performance:** CPU-heavy perpetual animations isolated in microscopic leaf components. Never trigger parent re-renders. Target 60fps minimum
+
+## 9. Anti-Patterns (Banned)
+- No emojis — anywhere in UI, code, or alt text
+- No `Inter` font — use `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`
+- No generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`) — if serif is needed, use distinctive modern serifs only (`Fraunces`, `Instrument Serif`)
+- No pure black (`#000000`) — Off-Black or Zinc-950 only
+- No neon outer glows or default box-shadow glows
+- No oversaturated accent colors above 80%
+- No excessive gradient text on large headers
+- No custom mouse cursors
+- No overlapping elements — text never overlaps images or other content. Clean spatial separation always
+- No 3-column equal card layouts for features
+- No centered Hero sections (at this variance level)
+- No filler UI text: "Scroll to explore", "Swipe down", "Discover more below", scroll arrows, bouncing chevrons — all BANNED
+- No generic names: "John Doe", "Sarah Chan", "Acme", "Nexus", "SmartFlow"
+- No fake round numbers: `99.99%`, `50%`, `1234567` — use organic data: `47.2%`, `+1 (312) 847-1928`
+- No AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Revolutionize"
+- No broken Unsplash links — use `picsum.photos/seed/{id}/800/600` or SVG UI Avatars
+- No generic `shadcn/ui` defaults — customize radii, colors, shadows to match this system
+- No `z-index` spam — use only for Navbar, Modal, Overlay layer contexts
+- No `h-screen` — always `min-h-[100dvh]`
+- No circular loading spinners — skeletal shimmer only

package/dist/skills/{stitch-design-taste → stitch}/SKILL.md

@@ -1,8 +1,6 @@
 ---
-name: stitch-design-taste
-category: design
+name: stitch
 description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
-license: MIT
 ---
 
 # Stitch Design Taste — Semantic Design System Skill

package/dist/skills/{design-taste-frontend → taste}/SKILL.md

@@ -1,8 +1,6 @@
 ---
-name: design-taste-frontend
-category: design
+name: taste
 description: Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
-license: MIT
 ---
 
 # tasteskill: Anti-Slop Frontend Skill

package/dist/skills/{design-taste-frontend-v1 → taste-v1}/SKILL.md

@@ -1,8 +1,6 @@
 ---
-name: design-taste-frontend-v1
-category: design
-description: The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
-license: MIT
+name: taste-v1
+description: The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `taste` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
 ---
 
 # High-Agency Frontend Skill

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selesai/code",
-  "version": "0.13.12",
+  "version": "0.13.14",
   "description": "Maintained, extension-first Pi coding agent with built-in workflows, subagents, web research, questions, skills, and an enhanced terminal UI.",
   "type": "module",
   "repository": {