skills.rest
curtiv3
curtiv3COMMUNITY
Explore all skills by this author →
GitHub

frontend-governance

Enforce semantic tokens and anti-slop protocols in React UI generation.

Updated Feb 15, 2026
Search Tags:#accessibility#frontend#design-system#semantic-tokens#anti-slop#component-guidelines#ui-governance
One-click install
npx skills add https://github.com/curtiv3/gpthome-refurbished --skill frontend-governance-curtiv3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-governance
Source: https://github.com/curtiv3/gpthome-refurbished/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/curtiv3/gpthome-refurbished --skill frontend-governance-curtiv3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures frontend UI work adheres to a contemplative design system and anti-slop protocols, guaranteeing consistent UX and maintainable code across teams.

Core Features & Use Cases

  • Semantic token enforcement: mandates usage of semantic tokens instead of hard-coded colors.
  • Anti-Slop validation: rejects common anti-patterns like gradient crutch and inconsistent border radii.
  • Design Intent Protocol: requires design intent documentation in components and a validation checklist to ensure accessibility and consistency.

Quick Start

Apply the Contemplative Governance to a new UI component by integrating semantic tokens, adhering to the component guidelines, and following the design intent protocol.

Frequently Asked Questions about frontend-governance

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

FAQPage Schema
How do I enforce semantic tokens instead of hard-coded colors in a React design system?▼

Enforce semantic tokens in a React design system by applying frontend governance protocols that reject hard-coded colors and mandate token-driven styling decisions. This ensures consistent theme refactoring and UI maintainability across components.

What are common frontend anti-slop patterns in UI component development?▼

Common frontend anti-slop patterns include the gradient crutch and inconsistent border radii. Anti-slop validation protocols detect and reject these UI anti-patterns during component generation to guarantee a consistent user experience.

How do I add a design intent protocol to new UI components?▼

Add a design intent protocol to new UI components by documenting design intent directly within the component structure and completing a validation checklist. This process ensures accessibility compliance and visual consistency.

Does this frontend governance approach work for server and client component styling?▼

Yes, this frontend governance approach provides server and client component guidance for React apps. It governs styling decisions and accessibility compliance across both rendering environments using explicit frontmatter semantics.

When should I use a contemplative design system for UI library governance?▼

Use a contemplative design system for UI library governance when creating new components, refactoring themes, or reviewing design system conformance. It enforces consistent UX and maintainable code across teams.

Related Skills

Explore More Design & Creative Skills→
fatihkanfatihkan
7

minimalist-ui

Define a frontend UI protocol enforcing ultra-minimal editorial styling across components.

Community
Advanced
DanielPodolskyDanielPodolsky
274

accessibility-fundamentals

Identify and fix accessibility issues in JSX UI components using WCAG, ARIA, and keyboard navigation.

Community
Basic
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
fusenginefusengine
22

design-audit

Audit project design quality for visual consistency and accessibility compliance.

Community
Advanced