Skills
.Work. You
Rest

cradle-design-system

Community

Cradle visual language — precise, high-contrast, spring-physics animation.

Design & Creative#design system#web design#ui components#tailwindcss#cradle
Authorwibus-wee
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive design system for the Cradle application, ensuring consistency and predictability across all UI components.

Core Features & Use Cases

  • Tokens: Defines CSS custom properties for colors, fonts, spacing, and more.
  • Cheatsheet: A quick reference for design decisions and invariants.
  • References: Detailed documentation on tokens, compositions, anti-patterns, and mockup-to-React handoff.
  • Components: Pre-built UI components for common use cases like buttons, inputs, modals, and more.
  • Use Case: When developing the Cradle application, use this Skill to maintain consistency in the UI and leverage pre-built components for faster development.

Quick Start

Start by reviewing the CHEATSHEET.md file to understand the design principles and invariants before building your components.

Dependency Matrix

Required Modules

None required

Components

scriptsreferencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: cradle-design-system
Download link: https://github.com/wibus-wee/cradle-app/archive/main.zip#cradle-design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.