# Send Frontend Design to your agent Use the source page and any available docs to guide the install because the item is currently unstable or timing out. ## Fast path - 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. ## Suggested prompts ### New install ```text 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 ```text 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. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "frontend-design", "name": "Frontend Design", "source": "tencent", "type": "skill", "category": "内容创作", "sourceUrl": "https://clawhub.ai/TySnyder/front-end-design", "canonicalUrl": "https://clawhub.ai/TySnyder/front-end-design", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/frontend-design", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=front-end-design", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "_meta.json", "references/shadcn-components.md", "references/mobile-patterns.md", "references/design-philosophy.md", "README.md", "scripts/init-vite.sh" ], "downloadMode": "manual_only", "sourceHealth": { "source": "tencent", "slug": "frontend-design", "status": "unstable", "reason": "timeout", "recommendedAction": "retry_later", "checkedAt": "2026-04-29T18:50:46.635Z", "expiresAt": "2026-04-30T06:50:46.635Z", "httpStatus": null, "finalUrl": null, "contentType": null, "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=front-end-design", "error": "Timed out after 5000ms", "slug": "frontend-design" }, "scope": "item", "summary": "Item is unstable.", "detail": "This item is timing out or returning errors right now. Review the source page and try again later.", "primaryActionLabel": "Review source status", "primaryActionHref": "https://clawhub.ai/TySnyder/front-end-design" }, "validation": { "installChecklist": [ "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." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/frontend-design", "downloadUrl": "https://openagent3.xyz/downloads/frontend-design", "agentUrl": "https://openagent3.xyz/skills/frontend-design/agent", "manifestUrl": "https://openagent3.xyz/skills/frontend-design/agent.json", "briefUrl": "https://openagent3.xyz/skills/frontend-design/agent.md" } } ``` ## Documentation ### 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. ## Trust - Source: tencent - Verification: Indexed source record - Publisher: TySnyder - Version: 1.0.0 ## Source health - Status: unstable - Item is unstable. - This item is timing out or returning errors right now. Review the source page and try again later. - Health scope: item - Reason: timeout - Checked at: 2026-04-29T18:50:46.635Z - Expires at: 2026-04-30T06:50:46.635Z - Recommended action: Review source status ## Links - [Detail page](https://openagent3.xyz/skills/frontend-design) - [Send to Agent page](https://openagent3.xyz/skills/frontend-design/agent) - [JSON manifest](https://openagent3.xyz/skills/frontend-design/agent.json) - [Markdown brief](https://openagent3.xyz/skills/frontend-design/agent.md) - [Download page](https://openagent3.xyz/downloads/frontend-design)