AI Agent Skills

Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.

Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.

Review UI code for web interface guidelines, UX quality, accessibility, and interaction design best practices.

Translate Figma designs into production-ready UI code with close visual fidelity and component-level detail.

Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without cla…

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.

Use Playwright to interact with and test local web applications, capture screenshots, debug UI behavior, and inspect browser logs.

React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.

Automate a real browser from the terminal for navigation, form filling, snapshots, screenshots, extraction, and UI-flow debugging.

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene,…

Required reading whenever any chart_* tool is available. Teaches the one-tool embedding contract (call chart_render → live chart appears in chat AND a downloadable PNG l…