skills.rest
wagnerra23
wagnerra23COMMUNITY
Explore all skills by this author →
GitHub

cockpit-runbook

Generate and validate Cockpit RUNBOOK documentation for oimpresso ERP screens.

Updated May 14, 2024
Search Tags:#documentation#react#design system#audit#runbook#inertia#ui standards
One-click install
npx skills add https://github.com/wagnerra23/oimpresso.com --skill cockpit-runbook
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cockpit-runbook
Source: https://github.com/wagnerra23/oimpresso.com/tree/main/.claude/skills/cockpit-runbook
Command: npx skills add https://github.com/wagnerra23/oimpresso.com --skill cockpit-runbook

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A skill reduz o retrabalho para documentar e padronizar telas do ERP no padrão Chat Cockpit, garantindo runbooks consistentes e audits técnicos com score para orientar correções.

Core Features & Use Cases

  • Geração (Generate): cria RUNBOOK detalhado de uma tela ou módulo no formato canônico, incluindo objetivo, pré-condições, passo-a-passo, tokens CSS, estados visuais, responsividade, atalhos, contrato de componentes e checklist de DoD.
  • Auditoria (Audit): audita uma tela existente contra as regras do Cockpit/Design System, apontando violações por arquivo:linha e oferecendo score 0–100 para priorização.
  • Comparação (Compare): compara duas implementações de telas similares (audit por score em cada uma) e entrega recomendação de refactor por dimensões (tokens, atalhos, persistência, componentes shared, real-time, acessibilidade e responsividade).
  • Refresh (Refresh): atualiza o runbook quando ele estiver desatualizado, preservando seções que não precisam mudar.

Quick Start

Solicite ao assistente: "Gere o runbook da tela Pages/Copiloto/Cockpit.tsx no padrão cockpit-runbook" e você receberá o arquivo em memory/requisitos/<Mod>/RUNBOOK-<tela>.md com as 11 seções obrigatórias.

Frequently Asked Questions about cockpit-runbook

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

FAQPage Schema
How do I generate a standard runbook for a React screen?▼

To generate a runbook for a React screen, request documentation for the specific page file. The Skill outputs a markdown file with 11 mandatory sections, including objective, step-by-step logic, CSS tokens, and a DoD checklist, saved under memory/requisitos/<Mod>/RUNBOOK-<tela>.md.

What is a UI design system audit and how does it score React components?▼

A UI design system audit evaluates existing React components against canonical standards. It identifies violations by file and line number, then calculates a 0–100 score to prioritize refactor tasks across dimensions like tokens, shortcuts, and responsiveness.

Can I compare two similar React implementations to find design inconsistencies?▼

Yes, you can compare two similar React implementations. The audit runs on both screens to generate scores and delivers refactor recommendations across dimensions like shared components, real-time features, accessibility, and CSS tokens.

Does this tool work with Inertia.js and React for ERP documentation?▼

Yes, it works with Inertia.js and React. It validates and generates documentation for ERP screens built with React/Inertia, enforcing required structures, PT-BR output, canonical CSS tokens, and mandatory checklists.

How do I update an outdated runbook without losing existing sections?▼

To update an outdated runbook, use the refresh function. It updates the documentation while preserving sections that do not require changes, ensuring the file remains current with the latest Cockpit design system standards.

Related Skills

Explore More Software Engineering Skills→
wagnerra23wagnerra23

mwart-process

Enforce the 5-phase MWART Blade-to-Inertia/React migration workflow for oimpresso screens.

Community
Advanced
spartDevspartDev
6

Design System Violation Detector

Detect design-system violations in React components against DESIGN_GUIDELINES.md.

Community
Advanced
shakhovskiya-createshakhovskiya-create

design-md

Creates a DESIGN.md with machine-readable frontmatter and exports tokens to Tailwind or CSS variables.

Community
Advanced
89jobrien89jobrien
4

web-accessibility

Audit web content for WCAG 2.1/2.2 conformance and accessibility issues.

Community
Advanced