skills.rest
Nerfherder16
Nerfherder16COMMUNITY
Explore all skills by this author →
GitHub

codevvos-component

Create CodeVV OS frontend components following project structure and TypeScript rules.

Updated Mar 12, 2026
Search Tags:#frontend#patterns#component#zustand#xterm#codevv-os#dockview
One-click install
npx skills add https://github.com/Nerfherder16/BrickLayer --skill codevvos-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: codevvos-component
Source: https://github.com/Nerfherder16/BrickLayer/tree/main/.claude/skills/codevvos-component
Command: npx skills add https://github.com/Nerfherder16/BrickLayer --skill codevvos-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create or modify a CodeVV OS frontend component. Enforces the project's component patterns: dockview panels, xterm terminal shells, CodeMirror editors, zustand state slices, Framer Motion animations. Use when building new UI panels, dock items, shell integrations, or editor extensions for codevvOS.

Core Features & Use Cases

  • Pattern-guided scaffolding for Dock items, Panels, Shells, Editors, Graphs, and Artifacts within the CodeVV OS frontend.
  • Ensures consistent state management with zustand slices and UI conventions (Tailwind, Dockview patterns, and motion).
  • Use Case: Build a new panel combining a dock item, an xterm terminal, and a zustand store slice for live state.

Quick Start

Create a new frontend component in the CodeVV OS project following the established patterns for panels, terminals, editors, and state slices.

Frequently Asked Questions about codevvos-component

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

FAQPage Schema
How do I scaffold a new panel with zustand state in a CodeVV OS frontend repository?▼

To scaffold a new panel with zustand state, apply the component skill to generate files following the src/components/Panels directory convention, enforcing TypeScript rules and Tailwind styling to ensure maintainable UI.

What is the best way to structure a CodeVV OS component combining dockview and xterm?▼

The best way to structure a combined dockview and xterm component is using the pattern-guided scaffolding for Shells and Panels, placing them in the correct src/components subdirectories to maintain project consistency.

Does the CodeVV OS component skill enforce TypeScript and Tailwind conventions?▼

Yes, the CodeVV OS component skill enforces TypeScript rules and Tailwind usage standards to ensure consistent, maintainable frontend UI components across the repository.

Can I use CodeMirror editor extensions with this frontend component pattern?▼

Yes, you can build CodeMirror editor extensions by placing them in the src/components/Editor directory, following the established component guidelines for pattern-guided scaffolding.

Why does my CodeVV OS component structure fail the directory convention checks?▼

Directory convention checks fail when components are not placed in the required src/components subdirectories such as Dock, Panels, Shell, or Editor, breaking the enforced project structure.

When do I need to use the optional Graph and Artifacts directories in CodeVV OS?▼

You use the optional Graph and Artifacts directories when building specialized UI components that require those specific pattern-guided scaffolding structures beyond the standard Dock, Panels, Shell, and Editor folders.

Related Skills

Explore More Software Engineering Skills→
Yukine5377Yukine5377

ba-frontend-code-gen

Generate React/TypeScript/Tailwind frontend code from Brand Guideline and System Design.

Community
Advanced
DYAI2025DYAI2025
3

artifacts-builder

Create React/TypeScript HTML artifacts with Tailwind CSS and shadcn/ui.

Community
Advanced
Aayush31-AiAayush31-Ai

framer-motion

Create animations and transitions in React applications using Framer Motion.

Community
Intermediate
Emz1998Emz1998
1

designing-components

Create reusable Tailwind CSS UI components with separate CSS files.

Community
Basic