design-lock-enforcer

Audit SOCELLE-WEB for Pearl Mineral V2 design lock violations.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/BruceTyndall/socelle-global --skill design-lock-enforcer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-lock-enforcer
Source: https://github.com/BruceTyndall/socelle-global/tree/main/.agents/skills/design-lock-enforcer
Command: npx skills add https://github.com/BruceTyndall/socelle-global --skill design-lock-enforcer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures adherence to the Pearl Mineral V2 design system by automatically checking for violations in color usage, typography, glass effects, border radius, and component patterns.

Core Features & Use Cases

  • Color Lock Verification: Audits hex values against the defined doctrine.
  • Typography Audit: Checks font family usage and flags serif fonts on public pages.
  • Glass Effect Pattern Check: Identifies backdrop-blur and bg-opacity patterns.
  • Border Radius Consistency: Lists unique border-radius values used in components.
  • Use Case: Before merging a new feature, run this Skill to guarantee all new UI elements align with the established design guidelines, preventing visual inconsistencies.

Quick Start

Run the design lock enforcer skill to audit the SOCELLE-WEB project for design system violations.

Frequently Asked Questions about design-lock-enforcer

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

FAQPage Schema
How do I audit my frontend for design system violations before merging?

Run a design lock enforcement audit to automatically check color usage, typography, glass effects, and border radius consistency against established guidelines, preventing visual inconsistencies before merging new UI features.

What is a design lock enforcement check for frontend components?

A design lock enforcement check automatically verifies that component hex values, glass effects, spacing scale, and border radius align with the defined design system doctrine, preventing visual inconsistencies across the project.

How do I check border radius consistency and spacing scale usage in my project?

Run the enforcement audit to list unique border-radius values used in components and verify they match the established design system spacing scale, ensuring consistent component patterns across the project.

Can I use this to verify glass effect patterns like backdrop-blur and bg-opacity?

Yes, the glass effect pattern check identifies backdrop-blur and bg-opacity usage to verify they conform to the design system doctrine, ensuring consistent glass effects across components.

Does the design system audit flag serif fonts on public pages?

Yes, the typography audit checks font family usage and specifically flags serif fonts on public pages to ensure adherence to the design system's typography guidelines.

What are the limitations of automated design lock enforcement for UI components?

Automated design lock enforcement focuses on specific hex values, glass effects, border radius, and spacing scale, meaning it may not catch subjective visual inconsistencies or design issues outside these defined component patterns.