Ticket-to-Code-AI-Companion

Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks, creative frontend design, UI code review, component reviews, responsive design checks, theme testing, and creating memorable UI. DO NOT USE FOR: Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, or non-frontend code.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, or applications — including VS Code webview panels, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI. Generates creative, polished code that avoids generic AI aesthetics. Triggers on requests to "design", "style", "beautify", "make it look better", or build any UI component.

TypeScript patterns for VS Code extension development — strict typing, discriminated unions for message passing, generic caching, error handling hierarchies, and esbuild/tsconfig setup. Use when writing TypeScript code in a VS Code extension, designing message protocol types, setting up tsconfig for dual extension+webview builds, or solving TypeScript-specific extension issues. Triggers on TypeScript compile errors, type narrowing questions, or tsconfig questions in an extension project.

Expert-level guidance for VS Code extension development covering WebView panels, Content Security Policy, postMessage bridge, Language Server Protocol, performance optimization, security checklist, and Marketplace publishing requirements. Use when implementing WebViews, designing extension architecture, building sidebar panels, debugging CSP issues, or preparing extensions for production. Triggers on mentions of VS Code API, SidebarProvider, WebviewPanel, CSP, postMessage, vsce publish, or extension performance.

Use when developing VS Code extensions — covers extension architecture, package.json manifest, activation events, command registration, language support, LSP integration, SecretStorage, and packaging/publishing. Trigger when the user asks about VS Code extension structure, contributes points, activation, vsce, or adding commands/views.

Complete guide for packaging, testing, and publishing VS Code extensions to the Marketplace. Covers vsce commands, publisher setup, .vscodeignore, versioning strategy, pre-publish validation, CHANGELOG.md, icon requirements, and CI/CD with GitHub Actions. Use when preparing a VS Code extension for release, bumping versions, setting up automated publishing, or troubleshooting vsce errors. Triggers on mentions of vsce, Marketplace, publisher, VSIX, publishing, or version bump.

Patterns for building React-based VS Code webview panels and sidebars. Covers the postMessage bridge, state persistence, VS Code Webview UI Toolkit components, dark/light theme tokens, and the Vite build setup for webviews. Use when building or modifying the webview (React) side of a VS Code extension, styling components to match VS Code theme, wiring up message handlers, or configuring Vite for the webview bundle. Triggers on mentions of WebviewView, acquireVsCodeApi, postMessage, vscode CSS variables, or webview React.

Build sophisticated multi-component React UIs using React 18, TypeScript, Vite, Tailwind CSS, and shadcn/ui components. Use when creating complex webview panels, dashboards, data visualization UIs, or self-contained HTML artifacts. Covers the full workflow from scaffolding to bundling. Triggers on requests to build a React component with Tailwind, use shadcn/ui, create a dashboard, or produce a polished multi-component UI.

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. Use when testing VS Code webview panels, React UIs built with Vite, or any local web application. Triggers on requests to test the UI, verify frontend behavior, take screenshots, or automate browser interactions.