skills.rest
massCodeIO
massCodeIOOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-foundations

Enforce massCode UI foundations for typography, renderer styling, and TailwindCSS v4 tokens.

6.9k|262|Updated Mar 29, 2022
Search Tags:#typography#consistency#ui-patterns#tailwind-v4#ui-tokens#ui-foundations#renderer-styling
One-click install
npx skills add https://github.com/massCodeIO/massCode --skill ui-foundations
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-foundations
Source: https://github.com/massCodeIO/massCode/tree/main/.agents/skills/ui-foundations
Command: npx skills add https://github.com/massCodeIO/massCode --skill ui-foundations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

massCode UI styling can drift across screens and components. This skill provides a centralized rule set to ensure typography, renderer styling, and token usage stay consistent.

Core Features & Use Cases

  • Establish a single typography system using a base text token for all text sizes and muted states.
  • Enforce semantic design tokens for colors, spacing, and radii, avoiding ad hoc palette classes.
  • Provide guidelines for typography, spacing rhythm, and component styling to maintain visual cohesion across new screens and existing UI.

Quick Start

Apply massCode UI foundation rules to ensure typography uses UiText and Tailwind v4 token semantics.

Frequently Asked Questions about ui-foundations

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

FAQPage Schema
How do I maintain consistent typography across UI components?▼

To maintain consistent typography, apply a centralized rule set using a base text token like UiText for all text sizes and muted states across new screens and components. This prevents visual drift by enforcing a single typography system.

What are semantic design tokens and when do I need them?▼

Semantic design tokens are centralized variables for colors, spacing, and radii that replace ad hoc palette classes. You need them when styling interfaces to enforce visual cohesion and avoid inconsistent, hardcoded values across components.

How to enforce TailwindCSS v4 token usage in new screens?▼

Enforce TailwindCSS v4 token usage by applying massCode UI foundation rules that mandate semantic tokens over raw palette classes, ensuring consistent spacing, radii, and shadow application across all new interfaces and documentation.

Does massCode UI foundations work without external dependencies?▼

Yes, massCode UI foundations operates without external dependencies. It provides a standalone rule set to define and enforce consistent UI patterns, renderer styling, and typography tokens directly within your workflow.

Why does my massCode UI styling drift across different screens?▼

UI styling drifts across screens when ad hoc palette classes and unmanaged spacing are used. Applying centralized UI foundation rules enforces semantic tokens and consistent typography, preventing visual inconsistencies from accumulating.

Related Skills

Explore More Design & Creative Skills→
cristianbc2004cristianbc2004

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo apps with NativeWind v5 and react-native-css.

Community
Intermediate
MonumentalSystemsMonumentalSystems
17

design-systems

Define design system principles, foundations, components, and token naming for consistent UI.

Official
Basic
AshesOfTheUndeadAshesOfTheUndead

default

Standardize UI component styling with centralized CSS variable tokens.

Community
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced