feat(ui-designer): replace open-design vendored prototypes with first-party preview app

.opencode/skills/impeccable-design-polish/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: impeccable-design-polish
+description: |
+  Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.
+triggers:
+  - "impeccable"
+  - "design polish"
+  - "polish page"
+  - "anti ai polish"
+  - "critique design"
+  - "animate page"
+  - "harden ui"
+  - "live review"
+  - "反 AI 味"
+od:
+  mode: prototype
+  surface: web
+  platform: desktop
+  category: creative-direction
+  upstream: "https://github.com/pbakaus/impeccable"
+  preview:
+    type: html
+  design_system:
+    requires: true
+  craft:
+    requires:
+      - typography
+      - color
+      - anti-ai-slop
+      - animation-discipline
+      - accessibility-baseline
+  example_prompt: |
+    Use impeccable-design-polish on the current HTML artifact: audit visual hierarchy, remove AI tells, tighten copy, add restrained motion, and harden responsive/accessibility issues.
+---
+
+# Impeccable Design Polish
+
+Use this skill as the post-generation pass for an existing design. It should not restart the project from scratch; it should make the current artifact sharper, more usable, and closer to something a designer would ship.
+
+## Follow-Up Modes
+
+- **Audit**: identify the highest-impact issues in hierarchy, spacing, color, type, interaction states, responsiveness, and accessibility.
+- **Critique**: explain what feels generic, overdesigned, underdesigned, or inconsistent.
+- **Polish**: directly edit the artifact to improve the top issues while preserving the user's intent.
+- **Animate**: add restrained, useful motion only where it improves feedback or storytelling.
+- **Harden**: repair mobile overflow, text clipping, contrast problems, missing states, broken links, and fragile layout assumptions.
+- **Live**: prepare the artifact for presentation or sharing, including final visual QA and clear next actions.
+
+## Operating Rules
+
+1. Inspect the current HTML/page before editing. Do not guess from the prompt alone.
+2. Keep the existing content, brand, and scenario unless the user explicitly asks to change them.
+3. Prefer a few decisive fixes over broad cosmetic churn.
+4. Remove common AI tells:
+   - purple-blue glow gradients with no product reason
+   - generic 3-card feature rows
+   - oversized rounded cards everywhere
+   - empty marketing adjectives
+   - inconsistent spacing and type scale
+   - decorative effects that do not support comprehension
+5. Preserve accessibility: focus states, contrast, semantic controls, readable text, and reduced-motion fallbacks.
+6. Finish with the artifact in a better runnable state, not just a critique list.
+
+## Best Pairings
+
+- Pair with `design-taste-frontend` or `gpt-taste` for stronger anti-slop redesign work.
+- Pair with `emilkowalski-motion` or GSAP skills for motion-specific polish.
+- Pair with image/video skills when the artifact needs real visual assets rather than CSS-only decoration.

.opencode/skills/impeccable-design-polish/THEMIS_NOTES.md

@@ -0,0 +1,21 @@
+# Themis Notes — impeccable-design-polish
+
+## Provenance
+
+- Upstream: https://github.com/nexu-io/open-design/tree/main/skills/impeccable-design-polish
+- Originally inspired by https://github.com/pbakaus/impeccable
+- Vendored into Themis on 2026-06-26 as part of the [`2026-06-26-ui-designer-app`](../../../docs/specs/2026-06-26-ui-designer-app/) spec.
+
+## How Themis uses this skill
+
+Use this skill after authoring a prototype via the [`themis-ui-prototype`](../themis-ui-prototype/) skill. The audit/critique/polish modes apply directly to prototype HTML files in `apps/web/ui-designer/src/prototypes/`.
+
+The "remove common AI tells" rules align with the [`docs/design-system/tokens.md`](../../../docs/design-system/tokens.md) and [`docs/design-system/recipes.md`](../../../docs/design-system/recipes.md) contracts. The Themis token set already excludes purple-blue glow gradients and decorative effects, so the polish pass is mostly about tightening copy and verifying motion + accessibility.
+
+## Upstream version
+
+This is the upstream `SKILL.md` content as fetched on 2026-06-26 from the `main` branch of `nexu-io/open-design`. To upgrade, diff against the upstream and copy the new `SKILL.md` into this folder.
+
+## Local modifications
+
+None. The upstream content ships verbatim. If a Themis-specific divergence is needed, capture it here instead of editing the `SKILL.md` directly.

.opencode/skills/login-flow/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: login-flow
+description: Mobile login and authentication flow screens
+od:
+  mode: prototype
+  platform: mobile
+triggers:
+  - login
+  - sign in
+  - 注册登录
+  - 登录注册
+  - 手机号登录
+  - 验证码登录
+  - 密码登录
+---
+
+# Login Flow Skill
+
+A skill for generating mobile-first login and authentication screens. Use this when the user wants a sign-in experience for a mobile app, including phone + SMS verification, password-based login, and social SSO options.
+
+## Workflow
+
+1. **Read reference files first** (see below)
+2. **Clarify auth method**: phone/SMS, password, or social SSO
+3. **Checklist gate** — verify P0 items before emitting `<artifact>`
+4. **Build the HTML prototype** with proper states (default, loading, error)
+5. **Wrap in `<artifact>` tag** referencing the output file
+
+## Side Files
+
+- `references/checklist.md` — P0/P1 acceptance criteria
+
+## Output
+
+A single standalone HTML file implementing the login screen with:
+- Labels above inputs (never placeholder-only)
+- Password field with show/hide toggle
+- Social SSO buttons with SVG icons
+- Error states below fields
+- Loading spinner in primary CTA
+- Touch targets minimum 44px
+
+## Mobile-First Constraints
+
+- Viewport: 375px wide (iPhone standard)
+- No horizontal scroll
+- Safe area insets for notched devices
+- Input keyboards: `tel` for phone, `password` for password fields

.opencode/skills/login-flow/THEMIS_NOTES.md

@@ -0,0 +1,24 @@
+# Themis Notes — login-flow
+
+## Provenance
+
+- Upstream: https://github.com/nexu-io/open-design/tree/main/skills/login-flow
+- Vendored into Themis on 2026-06-26 as part of the [`2026-06-26-ui-designer-app`](../../../docs/specs/2026-06-26-ui-designer-app/) spec.
+
+## How Themis uses this skill
+
+Pair this skill with [`themis-ui-prototype`](../themis-ui-prototype/) to author auth-related prototype screens (sign-in, sign-up, recover-password, reset-password, OTP). The mobile-first constraints here align with Themis's first-mobile mandate.
+
+When composing the prototype:
+
+- Use the Themis Catalyst Tailwind v4 token set from [`/docs/design-system/tokens.md`](../../../docs/design-system/tokens.md).
+- Follow the auth chrome recipe in [`/docs/design-system/recipes.md`](../../../docs/design-system/recipes.md) for layout rhythm.
+- The seed prototype `apps/web/ui-designer/src/prototypes/app-auth-shell.html` is the canonical example.
+
+## Upstream version
+
+This is the upstream `SKILL.md` content as fetched on 2026-06-26 from the `main` branch of `nexu-io/open-design`. To upgrade, diff against the upstream and copy the new `SKILL.md` and `references/checklist.md` into this folder.
+
+## Local modifications
+
+None. The upstream content ships verbatim.

.opencode/skills/login-flow/references/checklist.md

@@ -0,0 +1,19 @@
+# Login Flow Checklist
+
+P0 (must pass before emitting artifact):
+
+- [ ] Labels above inputs, never placeholder-only
+- [ ] Password field has show/hide toggle
+- [ ] Social buttons use SVG icons, not emoji
+- [ ] Touch targets are minimum 44px
+- [ ] Error states show red text below the field
+- [ ] Primary CTA button has hover/active states
+- [ ] No placeholder text like "example@email.com" without indication
+
+P1 (should pass):
+
+- [ ] Loading spinner in button during submission
+- [ ] "Forgot password" link present
+- [ ] "Don't have an account" link present
+- [ ] Country picker for phone input (if phone auth)
+- [ ] Input focus state uses brand color