Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub · Content Creation
Anthropic Frontend Design
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Combines the design intelligence of UI/UX Pro Max with Anthropic's anti-slop philosophy. Use for building UI components, pages, applications, or interfaces with exceptional attention to detail and bold creative choices.
skill openclawclawhub Free
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Combines the design intelligence of UI/UX Pro Max with Anthropic's anti-slop philosophy. Use for building UI components, pages, applications, or interfaces with exceptional attention to detail and bold creative choices.
⬇ 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
- assets/data/charts.csv, assets/data/colors.csv, assets/data/icons.csv, assets/data/landing.csv, assets/data/products.csv, assets/data/react-performance.csv
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.1.0
Provenance
- Publisher
- Qrucio
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
Anthropic Frontend Design
This skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. It integrates structured design intelligence (accessibility, UX rules, stack guidelines) with a bold, intentional aesthetic philosophy.
Core Philosophy: Anti-AI Slop
Claude (and all AI agents) are capable of extraordinary creative work, yet often default to safe, generic patterns. This skill MANDATES breaking those patterns. AVOID: Inter, Roboto, Arial, system fonts, purple-on-white gradients, cookie-cutter SaaS layouts, emojis as icons. MANDATE: Unique typography, context-specific color schemes, intentional motion, unexpected spatial composition, and production-grade functional code.
Design Thinking Process
Before coding, understand the context and commit to a BOLD aesthetic direction: Purpose: What problem does this solve? Who is it for? Tone: Pick an extreme direction—brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, etc. Intelligence (Reference): Use the internal design tool to gather data (see below). Differentiation: What makes this UNFORGETTABLE?
Design Intelligence Tool
Use the internal search tool to gather palettes, font pairings, and UX guidelines. CRITICAL: You MUST filter the results through the Anti-AI Slop lens. If the tool suggests "Inter" or "Roboto", you are REQUIRED to ignore it and pick a distinctive alternative. # Generate a complete design system python scripts/search.py "<product_type> <industry> <keywords>" --design-system # Search specific domains (style, typography, color, ux, chart, landing) python scripts/search.py "<keyword>" --domain <domain> # Get stack-specific guidelines (html-tailwind, react, nextjs, shadcn, etc.) python scripts/search.py "<keyword>" --stack <stack_name>
1. Professional UI Rules
RuleDoDon'tIconsUse SVG (Heroicons, Lucide, Simple Icons)Use emojis like 🎨 🚀 ⚙️ as UI iconsTypographyBeautiful, unique Google/Custom fontsInter, Roboto, Arial, System fontsHoverStable transitions (color/opacity/shadow)Scale transforms that shift layoutCursorAdd cursor-pointer to all interactive itemsLeave default cursor on buttons/cardsContrastMinimum 4.5:1 for accessibilityLow-contrast "vibes" that are unreadable
2. Motion & Animation
Prioritize CSS-only solutions where possible. Focus on high-impact moments (staggered reveals on page load). Use duration 150-300ms for micro-interactions.
3. Spatial Composition
Use asymmetry, overlap, or diagonal flow to break standard grids. Balance generous negative space OR intentional density.
Pre-Delivery Checklist
Before delivering code, verify every item:
Visual Quality
No emojis used as icons (SVG only). Typography is characterful and NOT "AI standard". Color scheme is unique to the context (no generic gradients). Hover states provide clear, stable visual feedback.
UX & Accessibility
All interactive elements have cursor-pointer. Form inputs have labels; images have alt text. Text contrast meets 4.5:1 minimum (test Light/Dark modes). Responsive at all breakpoints (375px, 768px, 1024px, 1440px). No horizontal scroll on mobile.
Aesthetic Directions (Reference)
Brutally Minimal: Monochrome, extreme white space, sparse typography. Maximalist Chaos: Overlapping elements, dense information, pattern mixing. Retro-Futuristic: Chrome effects, neon accents, 80s-inspired. Luxury/Refined: Gold/Dark accents, serif fonts, generous spacing. Playful/Toy-like: Rounded corners, bright pastels, bouncy animations. Editorial/Magazine: Grid-based, bold headlines, clean hierarchy. Brutalist/Raw: Monospace fonts, harsh contrasts, industrial. Art Deco: Sharp angles, metallic accents, ornate borders. Commit to ONE direction and execute it fully—no half measures.
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
6 Assets
- assets/data/charts.csv
- assets/data/colors.csv
- assets/data/icons.csv
- assets/data/landing.csv
- assets/data/products.csv
- assets/data/react-performance.csv