skills.rest
theadriann
theadriannCOMMUNITY
Explore all skills by this author →
𝕏@theadriannGitHub

frontend-builder

Automate React-based Electron frontend renderer setup with MobX stores and Factory tokens.

7|1|Updated Apr 11, 2026
Search Tags:#frontend#react#electron#tailwind#ui-components#mobx#factory-tokens
One-click install
npx skills add https://github.com/theadriann/oxox --skill frontend-builder-theadriann
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-builder
Source: https://github.com/theadriann/oxox/tree/main/.factory/skills/frontend-builder
Command: npx skills add https://github.com/theadriann/oxox --skill frontend-builder-theadriann

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill streamlines the creation and verification of a React-based Electron frontend renderer, consolidating component scaffolding, state management, and design-token based styling into a repeatable workflow.

Core Features & Use Cases

  • React UI components (sidebar, session list, transcript view, composer, command palette, context panel, status bar)
  • MobX stores (session store, UI store, transport store)
  • Tailwind CSS with Factory design tokens
  • shadcn/ui integration and restyling
  • Framer Motion animations
  • Virtualized scrolling (TanStack Virtual)
  • Rich markdown rendering
  • Keyboard navigation and accessibility
  • Empty states, error states, loading skeletons
  • Command palette (cmdk)

Quick Start

Use this skill to scaffold and validate a frontend renderer workflow with React components, MobX stores, and Factory tokens in the Electron app.

Frequently Asked Questions about frontend-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a React Electron frontend with MobX state management?▼

To build a React Electron frontend with MobX, you organize renderer code under src/renderer and configure session, UI, and transport stores. This skill automates that scaffolding while applying Factory design tokens and Tailwind CSS for styling.

What is the best way to integrate Tailwind design tokens and shadcn/ui in an Electron app?▼

The best way to integrate Tailwind design tokens and shadcn/ui in an Electron app is by applying Factory tokens to restyle components. This skill automates that restyling workflow and validates the integration within your React renderer.

Can I use TanStack Virtual and Framer Motion for React Electron UI components?▼

Yes, you can use TanStack Virtual for virtualized scrolling lists and Framer Motion for animations in React Electron UI components. This skill scaffolds these integrations for sidebar, transcript view, and command palette components.

How do I handle IPC text rendering in an Electron React renderer?▼

To handle IPC text rendering in an Electron React renderer, you pass text between main and renderer processes and validate it. This skill sets up IPC-based text handling with end-to-end validators for your desktop app.

Does this frontend builder skill support keyboard navigation and command palette components?▼

Yes, this frontend builder skill supports keyboard navigation, accessibility, and command palette components using cmdk. It scaffolds these UI elements alongside empty states, error states, and loading skeletons within the Electron renderer.

Related Skills

Explore More Software Engineering Skills→
YusufkotavomYusufkotavom

electron-development

Coordinate Electron app changes across renderer, main/preload, and embedded NestJS server.

Community
Intermediate
SayBGMSayBGM

moai-framework-electron

Develop Electron 33+ desktop apps with IPC, auto-updates, and packaging.

Community
Advanced
alaminmainalaminmain

mcp-builder

Build MCP servers that connect AI tools to external data sources.

Community
Basic
xkl2013xkl2013

react

Standardizes React component conventions within the LobeHub framework.

Community
Intermediate