{
  "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": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/frontend-design",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=front-end-design",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "_meta.json",
      "references/shadcn-components.md",
      "references/mobile-patterns.md",
      "references/design-philosophy.md",
      "README.md",
      "scripts/init-vite.sh"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/frontend-design"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "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."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/frontend-design",
    "agentPageUrl": "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"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Frontend Design Ultimate",
        "body": "Create distinctive, production-grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs.\n\nStack: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion\nOutput: Vite (static HTML) or Next.js (Vercel-ready)"
      },
      {
        "title": "Quick Start",
        "body": "\"Build a SaaS landing page for an AI writing tool. Dark theme, \neditorial typography, subtle grain texture. Pages: hero with \nanimated demo, features grid, pricing table, FAQ accordion, footer.\""
      },
      {
        "title": "Design Thinking (Do This First)",
        "body": "Before writing any code, commit to a BOLD aesthetic direction:"
      },
      {
        "title": "1. Understand Context",
        "body": "Purpose: What problem does this interface solve? Who uses it?\nAudience: Developer tools? Consumer app? Enterprise? Creative agency?\nConstraints: Performance requirements, accessibility needs, brand guidelines?"
      },
      {
        "title": "2. Choose an Extreme Tone",
        "body": "Pick ONE and commit fully — timid designs fail:\n\nToneCharacteristicsBrutally 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"
      },
      {
        "title": "3. Define the Unforgettable Element",
        "body": "What's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout?"
      },
      {
        "title": "Typography — NEVER Generic",
        "body": "BANNED: Inter, Roboto, Arial, system fonts, Open Sans\n\nDO: Distinctive, characterful choices that elevate the design.\n\nUse 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)\n\nSize Progression: Use 3x+ jumps, not timid 1.5x increments."
      },
      {
        "title": "Color & Theme",
        "body": "BANNED: Purple gradients on white, evenly-distributed 5-color palettes\n\nDO:\n\nDominant + Sharp Accent: 70-20-10 rule (primary-secondary-accent)\nCSS Variables: --primary, --accent, --surface, --text\nCommit to dark OR light: Don't hedge with gray middle-grounds\nHigh contrast CTAs: Buttons should pop dramatically\n\n:root {\n  --bg-primary: #0a0a0a;\n  --bg-secondary: #141414;\n  --text-primary: #fafafa;\n  --text-secondary: #a1a1a1;\n  --accent: #ff6b35;\n  --accent-hover: #ff8555;\n}"
      },
      {
        "title": "Motion & Animation",
        "body": "Priority: One orchestrated page load > scattered micro-interactions\n\nHigh-Impact Moments:\n\nStaggered hero reveals (animation-delay)\nScroll-triggered section entrances\nHover states that surprise (scale, color shift, shadow depth)\nSmooth page transitions\n\nImplementation:\n\nCSS-only for simple animations\nFramer Motion for React (pre-installed via init scripts)\nKeep durations 200-400ms (snappy, not sluggish)"
      },
      {
        "title": "Spatial Composition",
        "body": "BANNED: Centered, symmetrical, predictable layouts\n\nDO:\n\nAsymmetry with purpose\nOverlapping elements\nDiagonal flow / grid-breaking\nGenerous negative space OR controlled density (pick one)\nOff-grid hero sections"
      },
      {
        "title": "Backgrounds & Atmosphere",
        "body": "BANNED: Solid white/gray backgrounds\n\nDO:\n\nGradient meshes (subtle, not garish)\nNoise/grain textures (SVG filter or CSS)\nGeometric patterns (dots, lines, shapes)\nLayered transparencies\nDramatic shadows for depth\nBlur effects for glassmorphism\n\n/* Subtle grain overlay */\n.grain::before {\n  content: '';\n  position: fixed;\n  inset: 0;\n  background: url(\"data:image/svg+xml,...\") repeat;\n  opacity: 0.03;\n  pointer-events: none;\n}"
      },
      {
        "title": "Mobile-First Patterns",
        "body": "See references/mobile-patterns.md for detailed CSS."
      },
      {
        "title": "Critical Rules",
        "body": "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"
      },
      {
        "title": "Breakpoints",
        "body": "/* Tablet - stack sidebars */\n@media (max-width: 1200px) { }\n\n/* Mobile - full single column */\n@media (max-width: 768px) { }\n\n/* Small mobile - compact spacing */\n@media (max-width: 480px) { }"
      },
      {
        "title": "Font Scaling",
        "body": "@media (max-width: 768px) {\n  .hero-title { font-size: 32px; }      /* from ~48px */\n  .section-title { font-size: 24px; }   /* from ~32px */\n  .section-subtitle { font-size: 14px; } /* from ~16px */\n}"
      },
      {
        "title": "Option A: Vite (Pure Static)",
        "body": "# 1. Initialize\nbash scripts/init-vite.sh my-site\ncd my-site\n\n# 2. Develop\nnpm run dev\n\n# 3. Build static files\nnpm run build\n# Output: dist/\n\n# 4. Bundle to single HTML (optional)\nbash scripts/bundle-artifact.sh\n# Output: bundle.html"
      },
      {
        "title": "Option B: Next.js (Vercel Deploy)",
        "body": "# 1. Initialize\nbash scripts/init-nextjs.sh my-site\ncd my-site\n\n# 2. Develop\nnpm run dev\n\n# 3. Deploy to Vercel\nvercel"
      },
      {
        "title": "Vite Static",
        "body": "my-site/\n├── src/\n│   ├── components/     # React components\n│   ├── lib/           # Utilities, cn()\n│   ├── styles/        # Global CSS\n│   ├── config/\n│   │   └── site.ts    # Editable content config\n│   ├── App.tsx\n│   └── main.tsx\n├── index.html\n├── tailwind.config.ts\n└── package.json"
      },
      {
        "title": "Next.js",
        "body": "my-site/\n├── app/\n│   ├── layout.tsx\n│   ├── page.tsx\n│   └── privacy/page.tsx\n├── components/\n├── lib/\n├── config/\n│   └── site.ts\n└── tailwind.config.ts"
      },
      {
        "title": "Site Config Pattern",
        "body": "Keep all editable content in one file:\n\n// config/site.ts\nexport const siteConfig = {\n  name: \"Acme AI\",\n  tagline: \"Write better, faster\",\n  description: \"AI-powered writing assistant\",\n  \n  hero: {\n    badge: \"Now in beta\",\n    title: \"Your words,\\nsupercharged\",\n    subtitle: \"Write 10x faster with AI that understands your style\",\n    cta: { text: \"Get Started\", href: \"/signup\" },\n    secondaryCta: { text: \"Watch Demo\", href: \"#demo\" },\n  },\n  \n  features: [\n    { icon: \"Zap\", title: \"Lightning Fast\", description: \"...\" },\n    // ...\n  ],\n  \n  pricing: [\n    { name: \"Free\", price: 0, features: [...] },\n    { name: \"Pro\", price: 19, features: [...], popular: true },\n  ],\n  \n  faq: [\n    { q: \"How does it work?\", a: \"...\" },\n  ],\n  \n  footer: {\n    links: [...],\n    social: [...],\n  }\n}"
      },
      {
        "title": "Pre-Implementation Checklist",
        "body": "Run this before finalizing any design:"
      },
      {
        "title": "Design Quality",
        "body": "Typography is distinctive (no Inter/Roboto/Arial)\n Color palette has clear dominant + accent (not evenly distributed)\n Background has atmosphere (not solid white/gray)\n At least one memorable/unforgettable element\n Animations are orchestrated (not scattered)"
      },
      {
        "title": "Mobile Responsiveness",
        "body": "Hero centers on mobile (no empty grid space)\n All grids collapse to single column\n Forms stack vertically\n Large lists use accordion (not horizontal scroll)\n Font sizes scale down appropriately"
      },
      {
        "title": "Form Consistency",
        "body": "Input, select, textarea all styled consistently\n Radio/checkbox visible (check transparent-border styles)\n Dropdown options have readable backgrounds\n Labels use CSS variables (not hardcoded colors)"
      },
      {
        "title": "Accessibility",
        "body": "Color contrast meets WCAG AA (4.5:1 text, 3:1 UI)\n Focus states visible\n Semantic HTML (nav, main, section, article)\n Alt text for images\n Keyboard navigation works"
      },
      {
        "title": "shadcn/ui Components",
        "body": "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.\n\nSee references/shadcn-components.md for full component reference.\n\nMost used for landing pages:\n\nButton, Badge — CTAs and labels\nCard — Feature cards, pricing tiers\nAccordion — FAQ sections\nDialog — Modals, video players\nNavigationMenu — Header nav\nTabs — Feature showcases\nCarousel — Testimonials"
      },
      {
        "title": "References",
        "body": "references/design-philosophy.md — Extended anti-AI-slop guidance\nreferences/mobile-patterns.md — Detailed responsive CSS\nreferences/shadcn-components.md — Component quick reference\ntemplates/site-config.ts — Full siteConfig example"
      },
      {
        "title": "Prompt → Output",
        "body": "Input:\n\n\"Portfolio site for a photographer. Minimal, editorial feel.\nGrid gallery with lightbox, about section, contact form.\"\n\nDesign Decisions:\n\nTone: Editorial/Magazine\nTypography: Cormorant Garamond (display) + Inter... wait, banned. Plus Jakarta Sans (body)\nColor: Near-black bg (#0c0c0c), warm white text (#f5f5f0), copper accent (#b87333)\nUnforgettable: Full-bleed hero image with text overlay that reveals on scroll\nMotion: Gallery images fade in staggered on scroll\n\nOutput: Complete Next.js project with responsive gallery, lightbox component, and contact form with validation.\n\nBased on Anthropic's frontend-design, web-artifacts-builder, and community frontend-design-v2 skills."
      }
    ],
    "body": "Frontend Design Ultimate\n\nCreate distinctive, production-grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs.\n\nStack: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion\nOutput: Vite (static HTML) or Next.js (Vercel-ready)\n\nQuick Start\n\"Build a SaaS landing page for an AI writing tool. Dark theme, \neditorial typography, subtle grain texture. Pages: hero with \nanimated demo, features grid, pricing table, FAQ accordion, footer.\"\n\nDesign Thinking (Do This First)\n\nBefore writing any code, commit to a BOLD aesthetic direction:\n\n1. Understand Context\nPurpose: What problem does this interface solve? Who uses it?\nAudience: Developer tools? Consumer app? Enterprise? Creative agency?\nConstraints: Performance requirements, accessibility needs, brand guidelines?\n2. Choose an Extreme Tone\n\nPick ONE and commit fully — timid designs fail:\n\nTone\tCharacteristics\nBrutally Minimal\tSparse, monochrome, massive typography, raw edges\nMaximalist Chaos\tLayered, dense, overlapping elements, controlled disorder\nRetro-Futuristic\tNeon accents, geometric shapes, CRT aesthetics\nOrganic/Natural\tSoft curves, earth tones, hand-drawn elements\nLuxury/Refined\tSubtle animations, premium typography, restrained palette\nEditorial/Magazine\tStrong grid, dramatic headlines, whitespace as feature\nBrutalist/Raw\tExposed structure, harsh contrasts, anti-design\nArt Deco/Geometric\tGold accents, symmetry, ornate patterns\nSoft/Pastel\tRounded corners, gentle gradients, friendly\nIndustrial/Utilitarian\tFunctional, monospace, data-dense\n3. Define the Unforgettable Element\n\nWhat's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout?\n\nAesthetics Guidelines\nTypography — NEVER Generic\n\nBANNED: Inter, Roboto, Arial, system fonts, Open Sans\n\nDO: Distinctive, characterful choices that elevate the design.\n\nUse Case\tApproach\nDisplay/Headlines\tBold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair Display\nBody Text\tRefined readability — Instrument Sans, General Sans, Plus Jakarta Sans\nMonospace/Code\tDM Mono, JetBrains Mono, IBM Plex Mono\nPairing Strategy\tContrast weights (thin display + bold body), contrast styles (serif + geometric sans)\n\nSize Progression: Use 3x+ jumps, not timid 1.5x increments.\n\nColor & Theme\n\nBANNED: Purple gradients on white, evenly-distributed 5-color palettes\n\nDO:\n\nDominant + Sharp Accent: 70-20-10 rule (primary-secondary-accent)\nCSS Variables: --primary, --accent, --surface, --text\nCommit to dark OR light: Don't hedge with gray middle-grounds\nHigh contrast CTAs: Buttons should pop dramatically\n:root {\n  --bg-primary: #0a0a0a;\n  --bg-secondary: #141414;\n  --text-primary: #fafafa;\n  --text-secondary: #a1a1a1;\n  --accent: #ff6b35;\n  --accent-hover: #ff8555;\n}\n\nMotion & Animation\n\nPriority: One orchestrated page load > scattered micro-interactions\n\nHigh-Impact Moments:\n\nStaggered hero reveals (animation-delay)\nScroll-triggered section entrances\nHover states that surprise (scale, color shift, shadow depth)\nSmooth page transitions\n\nImplementation:\n\nCSS-only for simple animations\nFramer Motion for React (pre-installed via init scripts)\nKeep durations 200-400ms (snappy, not sluggish)\nSpatial Composition\n\nBANNED: Centered, symmetrical, predictable layouts\n\nDO:\n\nAsymmetry with purpose\nOverlapping elements\nDiagonal flow / grid-breaking\nGenerous negative space OR controlled density (pick one)\nOff-grid hero sections\nBackgrounds & Atmosphere\n\nBANNED: Solid white/gray backgrounds\n\nDO:\n\nGradient meshes (subtle, not garish)\nNoise/grain textures (SVG filter or CSS)\nGeometric patterns (dots, lines, shapes)\nLayered transparencies\nDramatic shadows for depth\nBlur effects for glassmorphism\n/* Subtle grain overlay */\n.grain::before {\n  content: '';\n  position: fixed;\n  inset: 0;\n  background: url(\"data:image/svg+xml,...\") repeat;\n  opacity: 0.03;\n  pointer-events: none;\n}\n\nMobile-First Patterns\n\nSee references/mobile-patterns.md for detailed CSS.\n\nCritical Rules\nPattern\tDesktop\tMobile Fix\nHero with hidden visual\t2-column grid\tSwitch to display: flex (not grid)\nLarge selection lists\tHorizontal scroll\tAccordion with category headers\nMulti-column forms\tSide-by-side\tStack vertically\nStatus/alert cards\tInline\talign-items: center + text-align: center\nFeature grids\t3-4 columns\tSingle column\nBreakpoints\n/* Tablet - stack sidebars */\n@media (max-width: 1200px) { }\n\n/* Mobile - full single column */\n@media (max-width: 768px) { }\n\n/* Small mobile - compact spacing */\n@media (max-width: 480px) { }\n\nFont Scaling\n@media (max-width: 768px) {\n  .hero-title { font-size: 32px; }      /* from ~48px */\n  .section-title { font-size: 24px; }   /* from ~32px */\n  .section-subtitle { font-size: 14px; } /* from ~16px */\n}\n\nBuild Workflow\nOption A: Vite (Pure Static)\n# 1. Initialize\nbash scripts/init-vite.sh my-site\ncd my-site\n\n# 2. Develop\nnpm run dev\n\n# 3. Build static files\nnpm run build\n# Output: dist/\n\n# 4. Bundle to single HTML (optional)\nbash scripts/bundle-artifact.sh\n# Output: bundle.html\n\nOption B: Next.js (Vercel Deploy)\n# 1. Initialize\nbash scripts/init-nextjs.sh my-site\ncd my-site\n\n# 2. Develop\nnpm run dev\n\n# 3. Deploy to Vercel\nvercel\n\nProject Structure\nVite Static\nmy-site/\n├── src/\n│   ├── components/     # React components\n│   ├── lib/           # Utilities, cn()\n│   ├── styles/        # Global CSS\n│   ├── config/\n│   │   └── site.ts    # Editable content config\n│   ├── App.tsx\n│   └── main.tsx\n├── index.html\n├── tailwind.config.ts\n└── package.json\n\nNext.js\nmy-site/\n├── app/\n│   ├── layout.tsx\n│   ├── page.tsx\n│   └── privacy/page.tsx\n├── components/\n├── lib/\n├── config/\n│   └── site.ts\n└── tailwind.config.ts\n\nSite Config Pattern\n\nKeep all editable content in one file:\n\n// config/site.ts\nexport const siteConfig = {\n  name: \"Acme AI\",\n  tagline: \"Write better, faster\",\n  description: \"AI-powered writing assistant\",\n  \n  hero: {\n    badge: \"Now in beta\",\n    title: \"Your words,\\nsupercharged\",\n    subtitle: \"Write 10x faster with AI that understands your style\",\n    cta: { text: \"Get Started\", href: \"/signup\" },\n    secondaryCta: { text: \"Watch Demo\", href: \"#demo\" },\n  },\n  \n  features: [\n    { icon: \"Zap\", title: \"Lightning Fast\", description: \"...\" },\n    // ...\n  ],\n  \n  pricing: [\n    { name: \"Free\", price: 0, features: [...] },\n    { name: \"Pro\", price: 19, features: [...], popular: true },\n  ],\n  \n  faq: [\n    { q: \"How does it work?\", a: \"...\" },\n  ],\n  \n  footer: {\n    links: [...],\n    social: [...],\n  }\n}\n\nPre-Implementation Checklist\n\nRun this before finalizing any design:\n\nDesign Quality\n Typography is distinctive (no Inter/Roboto/Arial)\n Color palette has clear dominant + accent (not evenly distributed)\n Background has atmosphere (not solid white/gray)\n At least one memorable/unforgettable element\n Animations are orchestrated (not scattered)\nMobile Responsiveness\n Hero centers on mobile (no empty grid space)\n All grids collapse to single column\n Forms stack vertically\n Large lists use accordion (not horizontal scroll)\n Font sizes scale down appropriately\nForm Consistency\n Input, select, textarea all styled consistently\n Radio/checkbox visible (check transparent-border styles)\n Dropdown options have readable backgrounds\n Labels use CSS variables (not hardcoded colors)\nAccessibility\n Color contrast meets WCAG AA (4.5:1 text, 3:1 UI)\n Focus states visible\n Semantic HTML (nav, main, section, article)\n Alt text for images\n Keyboard navigation works\nshadcn/ui Components\n\n10 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.\n\nSee references/shadcn-components.md for full component reference.\n\nMost used for landing pages:\n\nButton, Badge — CTAs and labels\nCard — Feature cards, pricing tiers\nAccordion — FAQ sections\nDialog — Modals, video players\nNavigationMenu — Header nav\nTabs — Feature showcases\nCarousel — Testimonials\nReferences\nreferences/design-philosophy.md — Extended anti-AI-slop guidance\nreferences/mobile-patterns.md — Detailed responsive CSS\nreferences/shadcn-components.md — Component quick reference\ntemplates/site-config.ts — Full siteConfig example\nExamples\nPrompt → Output\n\nInput:\n\n\"Portfolio site for a photographer. Minimal, editorial feel. Grid gallery with lightbox, about section, contact form.\"\n\nDesign Decisions:\n\nTone: Editorial/Magazine\nTypography: Cormorant Garamond (display) + Inter... wait, banned. Plus Jakarta Sans (body)\nColor: Near-black bg (#0c0c0c), warm white text (#f5f5f0), copper accent (#b87333)\nUnforgettable: Full-bleed hero image with text overlay that reveals on scroll\nMotion: Gallery images fade in staggered on scroll\n\nOutput: Complete Next.js project with responsive gallery, lightbox component, and contact form with validation.\n\nBased on Anthropic's frontend-design, web-artifacts-builder, and community frontend-design-v2 skills."
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/TySnyder/front-end-design",
    "publisherUrl": "https://clawhub.ai/TySnyder/front-end-design",
    "owner": "TySnyder",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "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"
  }
}