LogoClawIndex
CasesSkillsAbout
LogoClawIndex

design-system - Frontend design implementation invariants

Defines frontend rules for tokens, typography, loading order, font loading, layout stability, motion, and color semantics.

Tags

Updated: 2026-09-30

Capabilities

Typical Inputs

Typical Outputs

What this skill does

  • Define color tokens
  • Structure typography hierarchy
  • Order critical resources
  • Prevent font reflow
  • Design graceful loading states
  • Stabilize persistent chrome
  • Tune motion timing

Inputs

  • Frontend UI implementation context
  • Above-the-fold assets

Outputs

  • Tokenized UI styles
  • Stable loading behavior
  • Stable layout behavior
  • Consistent motion behavior

Requirements

    Source

    • Spec: SKILL.md

    ClawIndex

    OpenClaw Skills & Use Case Index

    ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

    Index

    Skills·
    Cases

    Meta

    About·
    Disclaimer·
    Email·
    GitHub
    © 2026 ClawIndex All Rights Reserved.
    frontend
    design system
    typography
    web performance
    loading states
    layout stability
    motion design
    Define color tokens
    Structure typography hierarchy
    Order critical resources
    Prevent font reflow
    Frontend UI implementation context
    Above-the-fold assets
    Tokenized UI styles
    Stable loading behavior
    Stable layout behavior