skills.rest
sathish2k
sathish2kCOMMUNITY
Explore all skills by this author →
GitHub

ui-principles

Enforce UI guardrails and Material 3 Liquid Glass design in Astro/SolidJS monorepo screens.

Updated Feb 8, 2026
Search Tags:#ui#performance#consistency#frontend#design system#components
One-click install
npx skills add https://github.com/sathish2k/formanywhere --skill ui-principles-sathish2k
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-principles
Source: https://github.com/sathish2k/formanywhere/tree/main/.agent/skills/ui-principles
Command: npx skills add https://github.com/sathish2k/formanywhere --skill ui-principles-sathish2k

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures all UI development within the FormAnywhere monorepo adheres to strict design principles, component usage, and performance standards, preventing inconsistencies and maintaining a high-quality user experience.

Core Features & Use Cases

  • Single Source of Truth: Enforces packages/ui as the sole location for UI elements.
  • Design System Adherence: Mandates the use of Material 3 Liquid Glass design tokens and styling.
  • Performance Optimization: Prioritizes lightweight, high-performance UI development.
  • Use Case: When developing a new feature that requires custom buttons or input fields, this Skill guides the developer to create or use existing components from packages/ui and apply the correct styling and performance considerations.

Quick Start

Follow the UI guardrails and design principles for any UI work in this monorepo.

Frequently Asked Questions about ui-principles

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

FAQPage Schema
How do I enforce UI consistency across frontend components in a monorepo?▼

To enforce UI consistency, route all UI elements through a single source of truth like `packages/ui` and mandate Material 3 Liquid Glass design tokens. This ensures all frontend components share identical styling and performance standards.

What is the best way to maintain design system adherence in an Astro and SolidJS application?▼

Maintain design system adherence by consuming shared UI components from a centralized `packages/ui` directory and applying Material 3 Liquid Glass styling. This prevents visual drift across Astro and SolidJS screens and panels.

How do I optimize frontend performance when building new UI controls and interactions?▼

Optimize frontend performance by adhering to performance-first constraints and keeping reusable logic in `packages/shared`. This ensures UI controls and interactions remain lightweight and high-performing across the application.

Can I create custom UI components outside of the designated packages directory?▼

No, all UI elements must reside in `packages/ui` and be consumed from there. This architectural constraint ensures consistent Material 3 Liquid Glass design and prevents performance degradation from scattered, custom-built components.

When do I need to use Material 3 Liquid Glass design tokens for form builder panels?▼

You must use Material 3 Liquid Glass design tokens whenever developing UI for form builder screens, panels, controls, or interactions. This enforces visual consistency and performance standards across the entire monorepo.

Related Skills

Explore More Design & Creative Skills→
pohlai88pohlai88

pnpm-workspace

Define pnpm-workspace.yaml and link local packages with the workspace protocol.

Community
Intermediate
lqSky7lqSky7

Liquid Glass — Apple's New Material Design System

Implement Apple's Liquid Glass material with SwiftUI glassEffect and scrollEdgeEffect modifiers.

Community
Advanced
vrcmsvrcms
1

liquid-glass-design

Implements the iOS 26 Liquid Glass design system for SwiftUI, UIKit, and WidgetKit components.

Community
Intermediate
leocostaleocosta
4

frontend-patterns

Standardize React, Next.js, and Vue frontend architecture with centralized component and data flow guidelines.

Community
Intermediate