skills.rest
yusifeng
yusifengCOMMUNITY
Explore all skills by this author →
GitHub

formax-web-style-system

Apply token-based desktop web styling to harmonize frontend visuals.

192|7|Updated Dec 30, 2025
Search Tags:#layout#frontend#tokens#design-system#visual-consistency#web-ui
One-click install
npx skills add https://github.com/yusifeng/formax --skill formax-web-style-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: formax-web-style-system
Source: https://github.com/yusifeng/formax/tree/main/.codex/skills/formax-web-style-system
Command: npx skills add https://github.com/yusifeng/formax --skill formax-web-style-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Use for all frontend and web UI tasks by default to apply a business-agnostic desktop web visual style system with medium-strength guardrails; if an existing design system is present, follow it first and use this skill only as a style harmonizer.

Core Features & Use Cases

  • Applies token-based styling to web UIs for desktop-grade aesthetics.
  • Harmonizes spacing rhythm, tone, and state clarity when integrating with existing design systems.
  • Use Case: apply the system across a brand-agnostic admin dashboard to achieve visual coherence without reshaping product UX.

Quick Start

Apply this style system by default to your frontend tasks to start harmonizing visuals.

Frequently Asked Questions about formax-web-style-system

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

FAQPage Schema
How do I harmonize web UI visuals when integrating with an existing design system?▼

To harmonize web UI visuals, apply a business-agnostic desktop web style system that enforces token blueprints, spacing rhythm, and state clarity while deferring to your existing design system's core rules.

What is token-based styling for frontend layouts?▼

Token-based styling applies predefined design tokens to frontend layouts, enforcing visual consistency and spacing rhythm across web UI components without requiring hard-coded pixel values.

Can I use this style system for a brand-agnostic admin dashboard?▼

Yes, you can apply this style system across a brand-agnostic admin dashboard to achieve desktop-grade visual coherence and enforce component tone requirements without reshaping the product UX.

Do I need an existing design system to apply these layout patterns?▼

No, you do not need an existing design system; you can apply this style system by default to all frontend tasks, but if one exists, follow it first and use this skill only as a style harmonizer.

When should I not use a business-agnostic web UI style system?▼

You should avoid using a business-agnostic web UI style system when your project requires highly custom, brand-specific visual interactions that conflict with medium-strength guardrails and standard layout patterns.

Related Skills

Explore More Design & Creative Skills→
majiayu000majiayu000
12

sage-architecture

Define modular boundaries and naming conventions for Sage applications.

Community
Basic
AngelP17AngelP17
1

tailwind-design-system

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

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
docaohieu2808docaohieu2808

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

Community
Advanced