Tencent SkillHub · Content Creation

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

skill openclawclawhub Free

0 Downloads

0 Stars

0 Installs

0 Score

High Signal

⬇ 0 downloads ★ 0 stars Unverified but indexed

Install for OpenClaw

Item is unstable.

This item is timing out or returning errors right now. Review the source page and try again later.

Quick setup

Wait for the source to recover or retry later.
Review SKILL.md only after the source returns a real package.
Do not rely on this source for automated install yet.

Requirements

Target platform: OpenClaw
Install method: Manual import
Extraction: Extract archive
Prerequisites: OpenClaw
Primary doc: SKILL.md

Package facts

Download mode: Manual review
Package format: ZIP package
Source platform: Tencent SkillHub
What's included: _meta.json, references/shadcn-components.md, references/mobile-patterns.md, references/design-philosophy.md, README.md, scripts/init-vite.sh

Validation

Wait for the source to recover or retry later.
Review SKILL.md only after the download returns a real package.
Treat this source as transient until the upstream errors clear.

Install with your agent

Agent handoff

Use the source page and any available docs to guide the install because the item is currently unstable or timing out.

Open the source page via Review source status.
If you can obtain the package, extract it into a folder your agent can access.
Paste one of the prompts below and point your agent at the source page and extracted files.

New install

I tried to install a skill package from Yavira, but the item is currently unstable or timing out. Inspect the source page and any extracted docs, then tell me what you can confirm and any manual steps still required. Then review README.md for any prerequisites, environment setup, or post-install checks.

Upgrade existing

I tried to upgrade a skill package from Yavira, but the item is currently unstable or timing out. Compare the source page and any extracted docs with my current installation, then summarize what changed and what manual follow-up I still need. Then review README.md for any prerequisites, environment setup, or post-install checks.

Open Send to Agent page Open JSON manifest Open Markdown brief

Trust & source

Release facts

Source: Tencent SkillHub
Verification: Indexed source record
Version: 1.0.0

Provenance

Publisher: TySnyder
Source page: View original listing
Canonical URL: Open canonical page

Documentation

ClawHub primary doc Primary doc: SKILL.md 28 sections Open source page

Frontend Design Ultimate

Create distinctive, production-grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs. Stack: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion Output: Vite (static HTML) or Next.js (Vercel-ready)

Quick Start

"Build a SaaS landing page for an AI writing tool. Dark theme, editorial typography, subtle grain texture. Pages: hero with animated demo, features grid, pricing table, FAQ accordion, footer."

Design Thinking (Do This First)

Before writing any code, commit to a BOLD aesthetic direction:

1. Understand Context

Purpose: What problem does this interface solve? Who uses it? Audience: Developer tools? Consumer app? Enterprise? Creative agency? Constraints: Performance requirements, accessibility needs, brand guidelines?

2. Choose an Extreme Tone

Pick ONE and commit fully — timid designs fail: ToneCharacteristicsBrutally MinimalSparse, monochrome, massive typography, raw edgesMaximalist ChaosLayered, dense, overlapping elements, controlled disorderRetro-FuturisticNeon accents, geometric shapes, CRT aestheticsOrganic/NaturalSoft curves, earth tones, hand-drawn elementsLuxury/RefinedSubtle animations, premium typography, restrained paletteEditorial/MagazineStrong grid, dramatic headlines, whitespace as featureBrutalist/RawExposed structure, harsh contrasts, anti-designArt Deco/GeometricGold accents, symmetry, ornate patternsSoft/PastelRounded corners, gentle gradients, friendlyIndustrial/UtilitarianFunctional, monospace, data-dense

3. Define the Unforgettable Element

What's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout?

Typography — NEVER Generic

BANNED: Inter, Roboto, Arial, system fonts, Open Sans DO: Distinctive, characterful choices that elevate the design. Use CaseApproachDisplay/HeadlinesBold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair DisplayBody TextRefined readability — Instrument Sans, General Sans, Plus Jakarta SansMonospace/CodeDM Mono, JetBrains Mono, IBM Plex MonoPairing StrategyContrast weights (thin display + bold body), contrast styles (serif + geometric sans) Size Progression: Use 3x+ jumps, not timid 1.5x increments.

Color & Theme

BANNED: Purple gradients on white, evenly-distributed 5-color palettes DO: Dominant + Sharp Accent: 70-20-10 rule (primary-secondary-accent) CSS Variables: --primary, --accent, --surface, --text Commit to dark OR light: Don't hedge with gray middle-grounds High contrast CTAs: Buttons should pop dramatically :root { --bg-primary: #0a0a0a; --bg-secondary: #141414; --text-primary: #fafafa; --text-secondary: #a1a1a1; --accent: #ff6b35; --accent-hover: #ff8555; }

Motion & Animation

Priority: One orchestrated page load > scattered micro-interactions High-Impact Moments: Staggered hero reveals (animation-delay) Scroll-triggered section entrances Hover states that surprise (scale, color shift, shadow depth) Smooth page transitions Implementation: CSS-only for simple animations Framer Motion for React (pre-installed via init scripts) Keep durations 200-400ms (snappy, not sluggish)

Spatial Composition

BANNED: Centered, symmetrical, predictable layouts DO: Asymmetry with purpose Overlapping elements Diagonal flow / grid-breaking Generous negative space OR controlled density (pick one) Off-grid hero sections

Backgrounds & Atmosphere

BANNED: Solid white/gray backgrounds DO: Gradient meshes (subtle, not garish) Noise/grain textures (SVG filter or CSS) Geometric patterns (dots, lines, shapes) Layered transparencies Dramatic shadows for depth Blur effects for glassmorphism /* Subtle grain overlay */ .grain::before { content: ''; position: fixed; inset: 0; background: url("data:image/svg+xml,...") repeat; opacity: 0.03; pointer-events: none; }

Mobile-First Patterns

See references/mobile-patterns.md for detailed CSS.

Critical Rules

PatternDesktopMobile FixHero with hidden visual2-column gridSwitch to display: flex (not grid)Large selection listsHorizontal scrollAccordion with category headersMulti-column formsSide-by-sideStack verticallyStatus/alert cardsInlinealign-items: center + text-align: centerFeature grids3-4 columnsSingle column

Breakpoints

/* Tablet - stack sidebars */ @media (max-width: 1200px) { } /* Mobile - full single column */ @media (max-width: 768px) { } /* Small mobile - compact spacing */ @media (max-width: 480px) { }

Font Scaling

@media (max-width: 768px) { .hero-title { font-size: 32px; } /* from ~48px */ .section-title { font-size: 24px; } /* from ~32px */ .section-subtitle { font-size: 14px; } /* from ~16px */ }

Option A: Vite (Pure Static)

# 1. Initialize bash scripts/init-vite.sh my-site cd my-site # 2. Develop npm run dev # 3. Build static files npm run build # Output: dist/ # 4. Bundle to single HTML (optional) bash scripts/bundle-artifact.sh # Output: bundle.html

Option B: Next.js (Vercel Deploy)

# 1. Initialize bash scripts/init-nextjs.sh my-site cd my-site # 2. Develop npm run dev # 3. Deploy to Vercel vercel

Vite Static

my-site/ ├── src/ │ ├── components/ # React components │ ├── lib/ # Utilities, cn() │ ├── styles/ # Global CSS │ ├── config/ │ │ └── site.ts # Editable content config │ ├── App.tsx │ └── main.tsx ├── index.html ├── tailwind.config.ts └── package.json

Next.js

my-site/ ├── app/ │ ├── layout.tsx │ ├── page.tsx │ └── privacy/page.tsx ├── components/ ├── lib/ ├── config/ │ └── site.ts └── tailwind.config.ts

Site Config Pattern

Keep all editable content in one file: // config/site.ts export const siteConfig = { name: "Acme AI", tagline: "Write better, faster", description: "AI-powered writing assistant", hero: { badge: "Now in beta", title: "Your words,\nsupercharged", subtitle: "Write 10x faster with AI that understands your style", cta: { text: "Get Started", href: "/signup" }, secondaryCta: { text: "Watch Demo", href: "#demo" }, }, features: [ { icon: "Zap", title: "Lightning Fast", description: "..." }, // ... ], pricing: [ { name: "Free", price: 0, features: [...] }, { name: "Pro", price: 19, features: [...], popular: true }, ], faq: [ { q: "How does it work?", a: "..." }, ], footer: { links: [...], social: [...], } }

Pre-Implementation Checklist

Run this before finalizing any design:

Design Quality

Typography is distinctive (no Inter/Roboto/Arial) Color palette has clear dominant + accent (not evenly distributed) Background has atmosphere (not solid white/gray) At least one memorable/unforgettable element Animations are orchestrated (not scattered)

Mobile Responsiveness

Hero centers on mobile (no empty grid space) All grids collapse to single column Forms stack vertically Large lists use accordion (not horizontal scroll) Font sizes scale down appropriately

Form Consistency

Input, select, textarea all styled consistently Radio/checkbox visible (check transparent-border styles) Dropdown options have readable backgrounds Labels use CSS variables (not hardcoded colors)

Accessibility

Color contrast meets WCAG AA (4.5:1 text, 3:1 UI) Focus states visible Semantic HTML (nav, main, section, article) Alt text for images Keyboard navigation works

shadcn/ui Components

10 common components pre-installed (button, badge, card, accordion, dialog, navigation-menu, tabs, sheet, separator, avatar, alert). Add more with npx shadcn@latest add [name] or install all with npx shadcn@latest add --all. See references/shadcn-components.md for full component reference. Most used for landing pages: Button, Badge — CTAs and labels Card — Feature cards, pricing tiers Accordion — FAQ sections Dialog — Modals, video players NavigationMenu — Header nav Tabs — Feature showcases Carousel — Testimonials

References

references/design-philosophy.md — Extended anti-AI-slop guidance references/mobile-patterns.md — Detailed responsive CSS references/shadcn-components.md — Component quick reference templates/site-config.ts — Full siteConfig example

Prompt → Output

Input: "Portfolio site for a photographer. Minimal, editorial feel. Grid gallery with lightbox, about section, contact form." Design Decisions: Tone: Editorial/Magazine Typography: Cormorant Garamond (display) + Inter... wait, banned. Plus Jakarta Sans (body) Color: Near-black bg (#0c0c0c), warm white text (#f5f5f0), copper accent (#b87333) Unforgettable: Full-bleed hero image with text overlay that reveals on scroll Motion: Gallery images fade in staggered on scroll Output: Complete Next.js project with responsive gallery, lightbox component, and contact form with validation. Based on Anthropic's frontend-design, web-artifacts-builder, and community frontend-design-v2 skills.

Category context

Writing, remixing, publishing, visual generation, and marketing content production.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package

4 Docs1 Scripts1 Config

README.md Docs
references/design-philosophy.md Docs
references/mobile-patterns.md Docs
references/shadcn-components.md Docs
scripts/init-vite.sh Scripts
_meta.json Config