skills.rest
webdevarif
webdevarifCOMMUNITY
Explore all skills by this author →
Website𝕏@webdevarifGitHub

neuro-webapp-design

Enforces dark-theme design system and Electron architecture rules for NeuroCode webapp development.

Updated Apr 18, 2026
Search Tags:#react#design system#next.js#tailwind css#electron#ipc#dark theme
One-click install
npx skills add https://github.com/webdevarif/claude-skills --skill neuro-webapp-design-webdevarif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neuro-webapp-design
Source: https://github.com/webdevarif/claude-skills/tree/main/neuro-webapp-design
Command: npx skills add https://github.com/webdevarif/claude-skills --skill neuro-webapp-design-webdevarif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a consistent Electron desktop IDE requires strict adherence to a design system and architecture rules; without enforcement, code drifts into inconsistent colors, insecure IPC patterns, and memory leaks. ## Core Features & Use Cases - Design System Enforcement: Mandates a fixed GitHub Dark-inspired color palette, typography scale, spacing system, and component patterns (buttons, pills, inputs, scrollbars) with no deviation allowed. - Architecture Guardrails: Defines Electron main/renderer process structure, IPC channel conventions, Zustand store patterns, and React 19 best practices. - Security & Performance Rules: Enforces contextIsolation, contextBridge whitelisting, IPC input validation, effect cleanup, and xterm.js lifecycle management. - Use Case: When adding a new settings panel to the NeuroCode IDE, the Skill ensures you use the correct background tokens (#161b22), 8px border radius, Zustand selectors, and proper IPC invoke patterns instead of sendSync. ## Quick Start Ask the AI to create a new sidebar component for the NeuroCode webapp following the design system, and it will apply the correct colors, spacing, and component conventions automatically.

Frequently Asked Questions about neuro-webapp-design

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

FAQPage Schema
How do I style components in an Electron Next.js app with a dark theme?▼

Use CSS custom properties defined in a Tailwind CSS 4 @theme block in globals.css, with tokens like --color-bg-primary (#0d1117) for backgrounds and --color-text-primary (#e6edf3) for text. Combine global classes, inline styles, and minimal Tailwind utilities in a hybrid approach.

What IPC pattern should I use between Electron main and renderer processes?▼

Use ipcMain.handle with ipcRenderer.invoke for request-response operations, ipcMain.on with ipcRenderer.send for fire-and-forget events, and webContents.send for streaming pushes. Never use sendSync, and only expose whitelisted functions through contextBridge.

Does xterm.js work with Next.js server-side rendering?▼

No, xterm.js has no SSR support and must be loaded via dynamic import with await import('xterm'). Always dispose Terminal instances on unmount and use FitAddon with ResizeObserver for sizing.

Why does my Electron app leak memory with terminals and listeners?▼

Leaks occur when IPC listeners, ResizeObservers, and xterm.js instances are not cleaned up. Always return a cleanup function from useEffect that removes listeners, disconnects observers, disposes terminals, and kills PTY processes.

What webPreferences are required for Electron security?▼

Set contextIsolation: true, nodeIntegration: false, sandbox: true, and webSecurity: true. Never expose raw ipcRenderer, validate all IPC inputs in the main process, and store API keys with the safeStorage API rather than in plaintext.

Related Skills

Explore More Software Engineering Skills→
Coverage-CreativesCoverage-Creatives

Next.js Project Setup

Initialize and configure Next.js projects with App Router, TypeScript, and Tailwind CSS.

Official
Intermediate
bradtaylorsfbradtaylorsf
8

electron-build-config

Automate Electron build and packaging with esbuild and electron-builder.

Community
Advanced
AI-SafeterAI-Safeter
10

electron-development

Set up secure Electron app architecture with preload-mediated IPC.

Community
Advanced
PAISHU-AIPAISHU-AI

tauri

Develop cross-platform desktop applications with Tauri and Rust.

Community
Intermediate