Skills
.Work. You
Rest

screen-builder

Community

Build consistent, high-quality UI screens.

Software Engineering#frontend#react#design system#next.js#component library#ui development#screen building
Authorcmbays
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the process of building user interface screens by providing a consistent design system, reusable patterns, and a clear workflow, ensuring high quality and adherence to standards.

Core Features & Use Cases

  • Guided Screen Development: Follows a structured workflow from preflight checks to verification.
  • Component Reusability: Leverages existing primitives and shared feature components.
  • Design System Enforcement: Adheres to defined spacing, typography, and color guidelines.
  • Use Case: When tasked with building a new "Jobs List" screen, this Skill guides you through selecting the right template, implementing components according to design tokens, and verifying against quality and cross-link checklists.

Quick Start

Use the screen-builder skill to create a new data-table-screen.tsx template for a list page.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: screen-builder
Download link: https://github.com/cmbays/mokumo/archive/main.zip#screen-builder

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.