Phantom-Con-Artist/unparalleled-skillset

Agent skills for bespoke websites and app UI: product-derived direction, no generic AI templates, and a Playwright screenshot review loop. Installs into Claude Code, Codex, Cursor, Copilot, Gemini and more via npx

Summary

Unparalleled Skillset is a JavaScript monorepo containing two installable agent skills for designing product-specific websites and application interfaces. It combines design direction with a Playwright-based visual review loop, and includes Unparalleled Studio, an early browser-to-IDE workflow for inspecting pages and routing validated source changes to an existing coding agent. It is a set of workflows and guidance, not a component library.

What it is useful for

The unparalleled-website skill targets public websites, portfolios, landing pages, and product stories. It asks the agent to research the product, propose a product-specific direction, and build a representative HTML specimen for review before full development. The unparalleled-ui skill focuses on applications, dashboards, tables, forms, and settings, with emphasis on task clarity, complete states, semantic tokens, data density, and keyboard access.

The screenshot workflow is useful when visual quality needs evidence rather than subjective review. The documented capture script records five viewport widths and a reduced-motion rendering, then writes screenshots and a report.json. Its checks can flag issues such as pill-shaped controls, card groups, stock SaaS palettes, horizontal overflow, runtime errors, placeholder copy, and animation that ignores reduced-motion preferences. Those flags require review; they do not certify the finished interface.

Studio adds a more interactive loop. An engineer can run it against a local project, select an element, inspect computed styles, and send a targeted change request. The connected coding agent can read source files, claim a request, and submit an exact-match patch with file hashes. Multi-file patches, rollback, creation rules, and guarded undo are documented, while a reference workflow can capture an external page or component as inspiration, recreation, or redesign material.

How engineers can use it

Node.js 20 or newer is required. Install both skills for detected agents with:

npx github:Phantom-Con-Artist/unparalleled-skillset install all

Install only website or ui, add --global, or use --dry-run to preview the plan. The installer supports twelve agent environments, including Claude Code, Codex, Cursor, GitHub Copilot, and Gemini CLI. Start a new agent session after installation.

To explore Studio locally:

npm run studio:demo
npm run studio -- --root /absolute/path/to/site --port 4310

The agent can then use context, next, read, and patch through npm run studio:agent.

Important limitations remain. Studio’s source mapping is only a hint, stopped agents are not awakened, and the Vite adapter requires Vite to own a local HTTP server; static serving does not compile React, Next.js, or Nuxt. The capture command produces a separate rendering rather than an exact screenshot of the user’s tab, and several advanced features—including automatic component instrumentation, visual variants, cross-frame inspection, and 3D object picking—are not implemented.