Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
Frontend Design
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
skill openclawclawhub Free
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
โฌ 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, animation.md, colors.md, examples.md, mobile.md, stack.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.2
Provenance
- Publisher
- ivangdavila
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
When to Use
User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.
Quick Reference
TopicFileStack & toolingstack.mdTypography rulestypography.mdColor systemscolors.mdMobile patternsmobile.mdAnimationanimation.mdExamplesexamples.md
1. Mobile-First Always
Start with mobile layout, enhance upward Every grid must collapse to single column Touch targets minimum 44x44px Test on real devices, not just simulators
2. Typography Matters
Avoid generic fonts (Inter, Roboto, Arial) Use dramatic size jumps (2x+), not timid increments Body text 16-18px minimum See typography.md for specific recommendations
3. Color with Purpose
70-20-10 rule: primary, secondary, accent Commit to light OR dark โ no muddy mid-grays Never solid white backgrounds โ add depth See colors.md for CSS variables and patterns
4. Feedback on Every Interaction
Acknowledge taps within 100ms Optimistic updates for instant feel Loading states for operations >1s Preserve user input on errors
5. Accessibility Non-Negotiable
Color contrast 4.5:1 (text), 3:1 (UI) Focus states on all interactive elements Semantic HTML (nav, main, section, article) Keyboard navigation works for everything
6. Performance from Start
Lazy load below-fold content Image placeholders prevent layout shift Code split heavy components Target LCP <2.5s, CLS <0.1
7. One Memorable Element
Every page needs one unforgettable design choice Typography treatment, hero animation, unusual layout Timid designs fail โ commit to an aesthetic
Frontend Traps
TrapConsequenceFixGeneric fontsLooks like every other siteUse distinctive fontsSolid white backgroundsFlat, lifelessAdd gradients, grain, depthMobile as afterthoughtBroken for 60% of usersMobile-first alwaysForm error clears inputUser ragePreserve input, highlight errorNo loading statesUser thinks brokenShow progress immediatelyTimid type scaleNo visual hierarchyUse 2x+ jumps for headlines
Scope
This skill ONLY: Provides frontend patterns and guidelines Recommends stack and tooling choices Guides responsive implementation This skill NEVER: Makes network requests Accesses user data Stores any information
Security & Privacy
This skill is read-only guidance. No data is collected, sent, or stored.
Feedback
If useful: clawhub star frontend Stay updated: clawhub sync
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
6 Docs
- SKILL.md
- animation.md
- colors.md
- examples.md
- mobile.md
- stack.md