Tag: ui-development
Implementing Keyboard Shortcuts in LobeHub
A technical guide for registering and managing keyboard shortcuts within the LobeHub framework. It covers updating enums, configuring key combinations, and organising i18n translations and custom hooks.
Production-Grade Frontend Design and UI Generation
This skill generates distinctive, production-grade frontend interfaces by first establishing a bold aesthetic direction and conceptual purpose. It outputs meticulously refined, functional code (React, HTML/CSS, etc.) that avoids generic AI …
Memoire Design Tooling for UI Development
Memoire provides a local design evidence layer for Codex tasks, ensuring adherence to Atomic Design principles, shadcn/ui, and Tailwind CSS. It facilitates design audits, research synthesis, and component specification generation before cod…
Guide to Implementing Hotkeys in LobeHub
This guide details the structured process for adding, scoping, and registering custom keyboard shortcuts within the application. Developers must update the hotkey enum, register key combinations in the central configuration, and expose the …
Collaborative Headed Browser Session
An interactive skill for collaborative UI development using a headed Playwright Chromium session. It enables agents to drive a visible browser, allowing users to provide real-time visual feedback while the agent performs navigation, interac…
Generate distinctive, production-grade frontend interfaces
This skill generates highly polished, production-grade frontend interfaces by committing to a distinct aesthetic vision, moving beyond generic AI outputs. It meticulously handles complex details like typography, motion, and spatial composit…
Create fully interactive client-side feature prototypes
This skill generates a fully interactive, client-side prototype for a specified feature unit. It uses mocked APIs and existing design system components, ensuring the resulting code is runnable and testable before full implementation.
Build interactive user interfaces with React
This skill enables the development of robust, accessible user interfaces using modern frameworks like React and Next.js. It covers component design, state management, and ensuring high client-side performance using TypeScript.
Visual React Component Editor Workflow
A workflow for implementing React components from screenshots using a split-panel editor with live preview. It leverages Playwright MCP to facilitate visual verification against design specifications.
Visual React Component Editor Workflow
An iterative workflow for implementing React components by comparing reference screenshots against a live preview in a split-panel editor. It leverages the sdt CLI and Playwright to facilitate visual alignment between specifications and liv…
Visual React Component Editor Workflow
A workflow for implementing React components from screenshots using a split-panel editor with live preview. It leverages the sdd CLI and Playwright MCP to facilitate visual iteration and component verification.