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

Quick setup

Download the package from Yavira.
Extract the archive and review SKILL.md first.
Import or place the package into your OpenClaw setup.

Requirements

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

Package facts

Download mode: Yavira redirect
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

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. Then review README.md for any prerequisites, environment setup, or post-install checks. 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. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.

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