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

constituicao-ui-aware

Enforce Constitution UI v2 hierarchy and screen patterns for Inertia React/TSX files.

Updated May 14, 2024
Search Tags:#anti-patterns#multi-tenant#design system#ui guidelines#react tsx#inertia pages#screen patterns
One-click install
npx skills add https://github.com/wagnerra23/oimpresso.com --skill constituicao-ui-aware
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: constituicao-ui-aware
Source: https://github.com/wagnerra23/oimpresso.com/tree/main/.claude/skills/constituicao-ui-aware
Command: npx skills add https://github.com/wagnerra23/oimpresso.com --skill constituicao-ui-aware

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents UI code from drifting away from the project’s canonical design framework by forcing developers to re-check the correct UI hierarchy, the applicable screen pattern, and the pre-merge anti-pattern rules before editing or writing UI files.

Core Features & Use Cases

  • Always-on UI guardrails: Activates when editing or creating Inertia Pages, shared TSX components, or cockpit/inertia CSS to reduce accidental divergence from the design system.
  • Constitution UI v2 4-layer hierarchy enforcement: Reminds the agent to follow Fundações→Shell→PT→Módulo and resolves conflicts by stating that lower layers win.
  • Pattern selection by file intent: Guides correct usage of PT-01 for Index pages and the drawer 760 approach for cadastral Edit/Create screens when PT-02..PT-05 are not yet documented.
  • Anti-padrões PRE-MERGE-UI checklist: Highlights key violations like hardcoded colors, reinvented components, missing multi-tenant storage prefix, wrong icon set, and copy language issues.

Quick Start

Use the skill when you are about to edit a file like resources/js/Pages/<Modulo>/Index.tsx or resources/js/Components/shared/**/*.tsx and you need to align the change with the Constitution UI v2, the correct PT template, and the PRE-MERGE-UI anti-pattern rules.

Frequently Asked Questions about constituicao-ui-aware

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

FAQPage Schema
How do I enforce a design system hierarchy when editing React TSX components?▼

To enforce a design system hierarchy, the Skill applies the Constitution UI v2 four-layer model (Fundações→Shell→PT→Módulo) to React TSX components, resolving conflicts by ensuring lower layers win over higher ones.

What is the correct screen pattern for building Inertia Index pages?▼

The correct screen pattern for Inertia Index pages is PT-01, which the Skill automatically identifies and applies when you are editing or creating files within your Inertia Pages directory.

How do I avoid hardcoded colors and component reinvention in a multi-tenant UI?▼

To avoid hardcoded colors and component reinvention in a multi-tenant UI, the Skill checks your code against a PRE-MERGE-UI anti-pattern checklist, blocking non-canonical components and enforcing proper storage prefixes.

Can I use a drawer pattern for cadastral Edit and Create screens?▼

Yes, you can use the drawer 760 approach for cadastral Edit and Create screens. The Skill directs you to use this pattern when PT-02 through PT-05 are not yet documented.

What are common UI anti-patterns to check before merging Inertia CSS changes?▼

Common UI anti-patterns to check before merging Inertia CSS changes include hardcoded colors, reinvented shared components, missing multi-tenant storage prefixes, wrong icon sets, and copy language issues.

Why does my shared TSX component violate the UI guidelines?▼

Your shared TSX component likely violates UI guidelines by reinventing a canonical component or bypassing the Constitution UI v2 hierarchy. The Skill intercepts these edits to ensure alignment with the established design system.

Related Skills

Explore More Design & Creative Skills→
moham7drezamoham7dreza
1

inertia-react-development

Build Inertia v2 React applications with Link, Form, useForm, and router.

Community
Advanced
tanujsutariatanujsutaria
1

design-system-auditor

Audit SwiftUI views for hardcoded colors, spacing, and typography.

Community
Basic
marquesfelipmarquesfelip

tenant-file-isolation

Design tenant-level file namespace isolation in multi-tenant SaaS object storage.

Community
Advanced
suhwansuhwan

component-builder

Generate reusable React TSX UI components with CSS from design-system references.

Community
Advanced