igun997

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.

Conversational interview to gather site requirements. Asks language, branding, purpose, and tone — then suggests theme presets or accepts images. Use when /orchestrator:start kicks off a run.

Build orchestrator projects with the same shape/craft/polish/audit flow used by pi-orchestrator. Use during building phase only.

Deploy orchestrator output with Cloudflare after confirmation, preserving pi-orchestrator deploy behavior.

Extract specs from two reference images and collect required answers before confirmation. Use for extracting/questioning phases in this repository.

Keep Cursor-native orchestration aligned with pi-orchestrator phases and state files. Use when running image-to-site flow in this repository.

Execute tasks with pre/post drift checks and verification gates. Use after sdlc-plan to implement with accuracy guarantees.

Configure SDLC model tiers. Interactive TUI via /sdlc-choose, quick switch via /sdlc-tier.

Final verification against spec with full evidence chain. Use after sdlc-execute to confirm feature is complete.

Break specs into ordered tasks with acceptance criteria. Use after sdlc-spec to create executable task breakdown.

Create feature specs through collaborative brainstorming. Use when starting new features, writing requirements, or defining acceptance criteria.

Generate images via 9Router /v1/images/generations using OpenAI / Gemini Imagen / DALL-E / FLUX / MiniMax / SDWebUI / ComfyUI / Codex models. Use when the user wants to create, generate, draw, or render an image, picture, or text-to-image (txt2img).

Entry point for 9Router — local/remote AI gateway with OpenAI-compatible REST for chat, image, TTS, embeddings, web search, web fetch. Use when the user mentions 9Router, NINEROUTER_URL, or wants AI without writing provider boilerplate. This skill covers setup + indexes capability skills; fetch the relevant capability SKILL.md from the URLs below when needed.

Fetch URL → markdown / text / HTML via 9Router /v1/web/fetch using Firecrawl / Jina Reader / Tavily Extract / Exa Contents. Use when the user wants to scrape a webpage, extract URL content, read article, or convert a URL to markdown.

Web search via 9Router /v1/search using Tavily / Exa / Brave / Serper / SearXNG / Google PSE / Linkup / SearchAPI / You.com / Perplexity. Use when the user wants to search the web, look up information, find articles, or query a search engine.

Use when recreating observed motion from authorized capture evidence.

Use when rebuilding reusable frontend components from authorized design evidence.

Use when capturing an authorized public website into safe visual evidence.

Use when validating local rebuild visual and browser evidence.

Create animated API/flow/architecture diagram videos (MP4 with sound) or silent Instagram-style carousels, driven over MCP. Use when the user wants to visualize or explain a system, API flow, pipeline, sequence, or architecture as an animated video, reel, or carousel — e.g. "animate our login flow", "make a diagram video of how gRPC works", "show the checkout pipeline as an Instagram reel". Nodes are services/steps, edges are connections, and glowing pulses travel the edges to simulate data flow.

Build, extend, and render pages with the svelte-page-builder package — a Svelte 5 drag-and-drop Studio editor plus an isomorphic (SSR/SSG/CSR) runtime renderer. Use when integrating the page builder, registering custom components or fields, binding components to premade data queries, configuring save/publish, wiring image upload, or rendering saved documents in SvelteKit.