Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub Β· AI
Design System
Build design systems with tokens, components, and documentation that scale across teams and products.
skill openclawclawhub Free
Build design systems with tokens, components, and documentation that scale across teams and products.
β¬ 0 downloads β
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, memory-template.md, setup.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- ivangdavila
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
Setup
On first use, read setup.md for integration guidelines. All preferences are stored in ~/design-system/memory.md.
When to Use
User needs to create, maintain, or extend a design system. Agent handles token architecture, component patterns, documentation structure, and cross-platform consistency.
Architecture
Memory lives in ~/design-system/. See memory-template.md for structure. ~/design-system/ βββ memory.md # Status + context + decisions βββ tokens/ # Token definitions if exported
Quick Reference
TopicFileSetup processsetup.mdMemory templatememory-template.md
1. Tokens First, Components Second
Design tokens are the foundation. Before building any component: Define color tokens (semantic, not raw hex) Define spacing scale (consistent multiplier) Define typography scale (modular) Components consume tokens. Never hardcode values.
2. Semantic Over Literal Naming
BadGoodblue-500primary14pxtext-sm8pxspace-2 Semantic names survive rebrand. Literal names break everything.
3. Three-Tier Token Architecture
Primitive β Semantic β Component β β β gray-900 text-primary button-text Primitive: Raw values (colors, sizes) Semantic: Meaning-based (primary, danger, muted) Component: Specific use (button-bg, card-border)
4. Document Decisions, Not Just Specs
Every token and component needs: What: The value or pattern When: Usage context Why: The decision behind it When NOT: Anti-patterns to avoid
5. Platform-Agnostic Source of Truth
Design tokens should export to: CSS custom properties Tailwind config iOS/Android native Figma variables One source, many outputs. Use Style Dictionary or similar.
6. Component API Consistency
All components follow the same patterns: Same prop naming (variant, size, disabled) Same size scale (sm, md, lg) Same variant names (primary, secondary, ghost) Predictability beats cleverness.
7. Versioning and Migration
Breaking changes need: Version bump (semver) Migration guide Deprecation warnings before removal Codemods when possible
Common Traps
Premature abstraction β Build 3 instances before extracting a pattern Token explosion β 50 grays is not a system, it is chaos Skipping documentation β Undocumented patterns get reimplemented wrong Designing for edge cases first β Cover 80% well before 100% poorly No dark mode strategy β Retrofit is 10x harder than planning upfront Inconsistent spacing β Use a scale (4px base), not arbitrary values Component prop sprawl β More than 10 props means split the component
Security & Privacy
Data that stays local: Design decisions in ~/design-system/ Token definitions and component specs This skill does NOT: Access files outside ~/design-system/ Make network requests Store sensitive data
Related Skills
Install with clawhub install <slug> if user confirms: css β Styling fundamentals tailwindcss β Utility-first CSS frontend β Frontend development ui β User interface patterns design β Design principles
Feedback
If useful: clawhub star design-system Stay updated: clawhub sync
Category context
Agent frameworks, memory systems, reasoning layers, and model-native orchestration.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
3 Docs
- SKILL.md
- memory-template.md
- setup.md