[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71EPPRMDMB51MJRXPV47X34":3,"skill-same:01M71EPPRMDMB51MJRXPV47X34":133},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":33,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":67,"commitSha":68,"skillDirectory":69,"forksCount":70,"repositoryHtmlUrl":71,"repositoryHomepageUrl":6,"ownerHtmlUrl":72,"ownerBlogUrl":6,"ownerDescription":73,"updatedAt":74,"install":75,"resources":88},"01M71EPPRMDMB51MJRXPV47X34","frontend-design-ultimate",null,"Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn\u002Fui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.","ViewWay\u002Fhermes-by-everythings","ViewWay","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F57283862?v=4","01M71ENR60K309MXA64A23SEW5","01M71ENR6QYM7NQHP29W53HSXT",3,"MIT","https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002FSKILL.md",[17,22,25,28],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"design","frontend design","frontend design ultimate","frontend","aesthetics","bold","shadcn","responsive","ui","mobile","create","text","react","workflows","static","Tailwind","Anti-AI","slop","frontend-design","css","2026-11-10 10:12:30",false,"---\nname: frontend-design-ultimate\ndescription: Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn\u002Fui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.\nhomepage: https:\u002F\u002Fgithub.com\u002Fkesslerio\u002Ffrontend-design-ultimate-clawhub-skill\nmetadata:\n  openclaw:\n    emoji: \"🎨\"\n    requires:\n      bins: [\"node\", \"npm\"]\n---\n\n# 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\n**Stack**: React 18 + TypeScript + Tailwind CSS + shadcn\u002Fui + Framer Motion  \n**Output**: Vite (static HTML) or Next.js (Vercel-ready)\n\n## Quick Start\n\n```\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```\n\n---\n\n## Design Thinking (Do This First)\n\nBefore writing any code, commit to a **BOLD aesthetic direction**:\n\n### 1. Understand Context\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Audience**: Developer tools? Consumer app? Enterprise? Creative agency?\n- **Constraints**: Performance requirements, accessibility needs, brand guidelines?\n\n### 2. Choose an Extreme Tone\nPick ONE and commit fully — timid designs fail:\n\n| Tone | Characteristics |\n|------|-----------------|\n| **Brutally Minimal** | Sparse, monochrome, massive typography, raw edges |\n| **Maximalist Chaos** | Layered, dense, overlapping elements, controlled disorder |\n| **Retro-Futuristic** | Neon accents, geometric shapes, CRT aesthetics |\n| **Organic\u002FNatural** | Soft curves, earth tones, hand-drawn elements |\n| **Luxury\u002FRefined** | Subtle animations, premium typography, restrained palette |\n| **Editorial\u002FMagazine** | Strong grid, dramatic headlines, whitespace as feature |\n| **Brutalist\u002FRaw** | Exposed structure, harsh contrasts, anti-design |\n| **Art Deco\u002FGeometric** | Gold accents, symmetry, ornate patterns |\n| **Soft\u002FPastel** | Rounded corners, gentle gradients, friendly |\n| **Industrial\u002FUtilitarian** | Functional, monospace, data-dense |\n\n### 3. Define the Unforgettable Element\nWhat's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout?\n\n---\n\n## Aesthetics Guidelines\n\n### Typography — NEVER Generic\n\n**BANNED**: Inter, Roboto, Arial, system fonts, Open Sans\n\n**DO**: Distinctive, characterful choices that elevate the design.\n\n| Use Case | Approach |\n|----------|----------|\n| Display\u002FHeadlines | Bold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair Display |\n| Body Text | Refined readability — Instrument Sans, General Sans, Plus Jakarta Sans |\n| Monospace\u002FCode | DM Mono, JetBrains Mono, IBM Plex Mono |\n| Pairing Strategy | Contrast weights (thin display + bold body), contrast styles (serif + geometric sans) |\n\n**Size Progression**: Use 3x+ jumps, not timid 1.5x increments.\n\n### Color & Theme\n\n**BANNED**: Purple gradients on white, evenly-distributed 5-color palettes\n\n**DO**:\n- **Dominant + Sharp Accent**: 70-20-10 rule (primary-secondary-accent)\n- **CSS Variables**: `--primary`, `--accent`, `--surface`, `--text`\n- **Commit to dark OR light**: Don't hedge with gray middle-grounds\n- **High contrast CTAs**: Buttons should pop dramatically\n\n```css\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```\n\n### Motion & Animation\n\n**Priority**: One orchestrated page load > scattered micro-interactions\n\n**High-Impact Moments**:\n- Staggered hero reveals (`animation-delay`)\n- Scroll-triggered section entrances\n- Hover states that surprise (scale, color shift, shadow depth)\n- Smooth page transitions\n\n**Implementation**:\n- CSS-only for simple animations\n- Framer Motion for React (pre-installed via init scripts)\n- Keep durations 200-400ms (snappy, not sluggish)\n\n### Spatial Composition\n\n**BANNED**: Centered, symmetrical, predictable layouts\n\n**DO**:\n- Asymmetry with purpose\n- Overlapping elements\n- Diagonal flow \u002F grid-breaking\n- Generous negative space OR controlled density (pick one)\n- Off-grid hero sections\n\n### Backgrounds & Atmosphere\n\n**BANNED**: Solid white\u002Fgray backgrounds\n\n**DO**:\n- Gradient meshes (subtle, not garish)\n- Noise\u002Fgrain textures (SVG filter or CSS)\n- Geometric patterns (dots, lines, shapes)\n- Layered transparencies\n- Dramatic shadows for depth\n- Blur effects for glassmorphism\n\n```css\n\u002F* Subtle grain overlay *\u002F\n.grain::before {\n  content: '';\n  position: fixed;\n  inset: 0;\n  background: url(\"data:image\u002Fsvg+xml,...\") repeat;\n  opacity: 0.03;\n  pointer-events: none;\n}\n```\n\n---\n\n## Mobile-First Patterns\n\nSee **[references\u002Fmobile-patterns.md](references\u002Fmobile-patterns.md)** for detailed CSS.\n\n### Critical Rules\n\n| Pattern | Desktop | Mobile Fix |\n|---------|---------|------------|\n| Hero with hidden visual | 2-column grid | Switch to `display: flex` (not grid) |\n| Large selection lists | Horizontal scroll | Accordion with category headers |\n| Multi-column forms | Side-by-side | Stack vertically |\n| Status\u002Falert cards | Inline | `align-items: center` + `text-align: center` |\n| Feature grids | 3-4 columns | Single column |\n\n### Breakpoints\n\n```css\n\u002F* Tablet - stack sidebars *\u002F\n@media (max-width: 1200px) { }\n\n\u002F* Mobile - full single column *\u002F\n@media (max-width: 768px) { }\n\n\u002F* Small mobile - compact spacing *\u002F\n@media (max-width: 480px) { }\n```\n\n### Font Scaling\n\n```css\n@media (max-width: 768px) {\n  .hero-title { font-size: 32px; }      \u002F* from ~48px *\u002F\n  .section-title { font-size: 24px; }   \u002F* from ~32px *\u002F\n  .section-subtitle { font-size: 14px; } \u002F* from ~16px *\u002F\n}\n```\n\n---\n\n## Build Workflow\n\n### Option A: Vite (Pure Static)\n\n```bash\n# 1. Initialize\nbash scripts\u002Finit-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\u002F\n\n# 4. Bundle to single HTML (optional)\nbash scripts\u002Fbundle-artifact.sh\n# Output: bundle.html\n```\n\n### Option B: Next.js (Vercel Deploy)\n\n```bash\n# 1. Initialize\nbash scripts\u002Finit-nextjs.sh my-site\ncd my-site\n\n# 2. Develop\nnpm run dev\n\n# 3. Deploy to Vercel\nvercel\n```\n\n---\n\n## Project Structure\n\n### Vite Static\n```\nmy-site\u002F\n├── src\u002F\n│   ├── components\u002F     # React components\n│   ├── lib\u002F           # Utilities, cn()\n│   ├── styles\u002F        # Global CSS\n│   ├── config\u002F\n│   │   └── site.ts    # Editable content config\n│   ├── App.tsx\n│   └── main.tsx\n├── index.html\n├── tailwind.config.ts\n└── package.json\n```\n\n### Next.js\n```\nmy-site\u002F\n├── app\u002F\n│   ├── layout.tsx\n│   ├── page.tsx\n│   └── privacy\u002Fpage.tsx\n├── components\u002F\n├── lib\u002F\n├── config\u002F\n│   └── site.ts\n└── tailwind.config.ts\n```\n\n---\n\n## Site Config Pattern\n\nKeep all editable content in one file:\n\n```typescript\n\u002F\u002F config\u002Fsite.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: \"\u002Fsignup\" },\n    secondaryCta: { text: \"Watch Demo\", href: \"#demo\" },\n  },\n  \n  features: [\n    { icon: \"Zap\", title: \"Lightning Fast\", description: \"...\" },\n    \u002F\u002F ...\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```\n\n---\n\n## Pre-Implementation Checklist\n\nRun this before finalizing any design:\n\n### Design Quality\n- [ ] Typography is distinctive (no Inter\u002FRoboto\u002FArial)\n- [ ] Color palette has clear dominant + accent (not evenly distributed)\n- [ ] Background has atmosphere (not solid white\u002Fgray)\n- [ ] At least one memorable\u002Funforgettable element\n- [ ] Animations are orchestrated (not scattered)\n\n### Mobile 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\n\n### Form Consistency\n- [ ] Input, select, textarea all styled consistently\n- [ ] Radio\u002Fcheckbox visible (check transparent-border styles)\n- [ ] Dropdown options have readable backgrounds\n- [ ] Labels use CSS variables (not hardcoded colors)\n\n### Accessibility\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\n\n---\n\n## shadcn\u002Fui 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\u002Fshadcn-components.md](references\u002Fshadcn-components.md)** for full component reference.\n\nMost used for landing pages:\n- `Button`, `Badge` — CTAs and labels\n- `Card` — Feature cards, pricing tiers\n- `Accordion` — FAQ sections\n- `Dialog` — Modals, video players\n- `NavigationMenu` — Header nav\n- `Tabs` — Feature showcases\n- `Carousel` — Testimonials\n\n---\n\n## References\n\n- **[references\u002Fdesign-philosophy.md](references\u002Fdesign-philosophy.md)** — Extended anti-AI-slop guidance\n- **[references\u002Fmobile-patterns.md](references\u002Fmobile-patterns.md)** — Detailed responsive CSS\n- **[references\u002Fshadcn-components.md](references\u002Fshadcn-components.md)** — Component quick reference\n- **[templates\u002Fsite-config.ts](templates\u002Fsite-config.ts)** — Full siteConfig example\n\n---\n\n## Examples\n\n### Prompt → Output\n\n**Input**:\n> \"Portfolio site for a photographer. Minimal, editorial feel. \n> Grid gallery with lightbox, about section, contact form.\"\n\n**Design Decisions**:\n- Tone: Editorial\u002FMagazine\n- Typography: Cormorant Garamond (display) + Inter... wait, banned. Plus Jakarta Sans (body)\n- Color: Near-black bg (#0c0c0c), warm white text (#f5f5f0), copper accent (#b87333)\n- Unforgettable: Full-bleed hero image with text overlay that reveals on scroll\n- Motion: Gallery images fade in staggered on scroll\n\n**Output**: Complete Next.js project with responsive gallery, lightbox component, and contact form with validation.\n\n---\n\n*Based on Anthropic's frontend-design, web-artifacts-builder, and community frontend-design-v2 skills.*\n","# 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\n**Stack**: React 18 + TypeScript + Tailwind CSS + shadcn\u002Fui + Framer Motion  \n**Output**: Vite (static HTML) or Next.js (Vercel-ready)\n\n## Quick Start\n\n```\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```\n\n---\n\n## Design Thinking (Do This First)\n\nBefore writing any code, commit to a **BOLD aesthetic direction**:\n\n### 1. Understand Context\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Audience**: Developer tools? Consumer app? Enterprise? Creative agency?\n- **Constraints**: Performance requirements, accessibility needs, brand guidelines?\n\n### 2. Choose an Extreme Tone\nPick ONE and commit fully — timid designs fail:\n\n| Tone | Characteristics |\n|------|-----------------|\n| **Brutally Minimal** | Sparse, monochrome, massive typography, raw edges |\n| **Maximalist Chaos** | Layered, dense, overlapping elements, controlled disorder |\n| **Retro-Futuristic** | Neon accents, geometric shapes, CRT aesthetics |\n| **Organic\u002FNatural** | Soft curves, earth tones, hand-drawn elements |\n| **Luxury\u002FRefined** | Subtle animations, premium typography, restrained palette |\n| **Editorial\u002FMagazine** | Strong grid, dramatic headlines, whitespace as feature |\n| **Brutalist\u002FRaw** | Exposed structure, harsh contrasts, anti-design |\n| **Art Deco\u002FGeometric** | Gold accents, symmetry, ornate patterns |\n| **Soft\u002FPastel** | Rounded corners, gentle gradients, friendly |\n| **Industrial\u002FUtilitarian** | Functional, monospace, data-dense |\n\n### 3. Define the Unforgettable Element\nWhat's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout?\n\n---\n\n## Aesthetics Guidelines\n\n### Typography — NEVER Generic\n\n**BANNED**: Inter, Roboto, Arial, system fonts, Open Sans\n\n**DO**: Distinctive, characterful choices that elevate the design.\n\n| Use Case | Approach |\n|----------|----------|\n| Display\u002FHeadlines | Bold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair Display |\n| Body Text | Refined readability — Instrument Sans, General Sans, Plus Jakarta Sans |\n| Monospace\u002FCode | DM Mono, JetBrains Mono, IBM Plex Mono |\n| Pairing Strategy | Contrast weights (thin display + bold body), contrast styles (serif + geometric sans) |\n\n**Size Progression**: Use 3x+ jumps, not timid 1.5x increments.\n\n### Color & Theme\n\n**BANNED**: Purple gradients on white, evenly-distributed 5-color palettes\n\n**DO**:\n- **Dominant + Sharp Accent**: 70-20-10 rule (primary-secondary-accent)\n- **CSS Variables**: `--primary`, `--accent`, `--surface`, `--text`\n- **Commit to dark OR light**: Don't hedge with gray middle-grounds\n- **High contrast CTAs**: Buttons should pop dramatically\n\n```css\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```\n\n### Motion & Animation\n\n**Priority**: One orchestrated page load > scattered micro-interactions\n\n**High-Impact Moments**:\n- Staggered hero reveals (`animation-delay`)\n- Scroll-triggered section entrances\n- Hover states that surprise (scale, color shift, shadow depth)\n- Smooth page transitions\n\n**Implementation**:\n- CSS-only for simple animations\n- Framer Motion for React (pre-installed via init scripts)\n- Keep durations 200-400ms (snappy, not sluggish)\n\n### Spatial Composition\n\n**BANNED**: Centered, symmetrical, predictable layouts\n\n**DO**:\n- Asymmetry with purpose\n- Overlapping elements\n- Diagonal flow \u002F grid-breaking\n- Generous negative space OR controlled density (pick one)\n- Off-grid hero sections\n\n### Backgrounds & Atmosphere\n\n**BANNED**: Solid white\u002Fgray backgrounds\n\n**DO**:\n- Gradient meshes (subtle, not garish)\n- Noise\u002Fgrain textures (SVG filter or CSS)\n- Geometric patterns (dots, lines, shapes)\n- Layered transparencies\n- Dramatic shadows for depth\n- Blur effects for glassmorphism\n\n```css\n\u002F* Subtle grain overlay *\u002F\n.grain::before {\n  content: '';\n  position: fixed;\n  inset: 0;\n  background: url(\"data:image\u002Fsvg+xml,...\") repeat;\n  opacity: 0.03;\n  pointer-events: none;\n}\n```\n\n---\n\n## Mobile-First Patterns\n\nSee **[references\u002Fmobile-patterns.md](references\u002Fmobile-patterns.md)** for detailed CSS.\n\n### Critical Rules\n\n| Pattern | Desktop | Mobile Fix |\n|---------|---------|------------|\n| Hero with hidden visual | 2-column grid | Switch to `display: flex` (not grid) |\n| Large selection lists | Horizontal scroll | Accordion with category headers |\n| Multi-column forms | Side-by-side | Stack vertically |\n| Status\u002Falert cards | Inline | `align-items: center` + `text-align: center` |\n| Feature grids | 3-4 columns | Single column |\n\n### Breakpoints\n\n```css\n\u002F* Tablet - stack sidebars *\u002F\n@media (max-width: 1200px) { }\n\n\u002F* Mobile - full single column *\u002F\n@media (max-width: 768px) { }\n\n\u002F* Small mobile - compact spacing *\u002F\n@media (max-width: 480px) { }\n```\n\n### Font Scaling\n\n```css\n@media (max-width: 768px) {\n  .hero-title { font-size: 32px; }      \u002F* from ~48px *\u002F\n  .section-title { font-size: 24px; }   \u002F* from ~32px *\u002F\n  .section-subtitle { font-size: 14px; } \u002F* from ~16px *\u002F\n}\n```\n\n---\n\n## Build Workflow\n\n### Option A: Vite (Pure Static)\n\n```bash\n# 1. Initialize\nbash scripts\u002Finit-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\u002F\n\n# 4. Bundle to single HTML (optional)\nbash scripts\u002Fbundle-artifact.sh\n# Output: bundle.html\n```\n\n### Option B: Next.js (Vercel Deploy)\n\n```bash\n# 1. Initialize\nbash scripts\u002Finit-nextjs.sh my-site\ncd my-site\n\n# 2. Develop\nnpm run dev\n\n# 3. Deploy to Vercel\nvercel\n```\n\n---\n\n## Project Structure\n\n### Vite Static\n```\nmy-site\u002F\n├── src\u002F\n│   ├── components\u002F     # React components\n│   ├── lib\u002F           # Utilities, cn()\n│   ├── styles\u002F        # Global CSS\n│   ├── config\u002F\n│   │   └── site.ts    # Editable content config\n│   ├── App.tsx\n│   └── main.tsx\n├── index.html\n├── tailwind.config.ts\n└── package.json\n```\n\n### Next.js\n```\nmy-site\u002F\n├── app\u002F\n│   ├── layout.tsx\n│   ├── page.tsx\n│   └── privacy\u002Fpage.tsx\n├── components\u002F\n├── lib\u002F\n├── config\u002F\n│   └── site.ts\n└── tailwind.config.ts\n```\n\n---\n\n## Site Config Pattern\n\nKeep all editable content in one file:\n\n```typescript\n\u002F\u002F config\u002Fsite.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: \"\u002Fsignup\" },\n    secondaryCta: { text: \"Watch Demo\", href: \"#demo\" },\n  },\n  \n  features: [\n    { icon: \"Zap\", title: \"Lightning Fast\", description: \"...\" },\n    \u002F\u002F ...\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```\n\n---\n\n## Pre-Implementation Checklist\n\nRun this before finalizing any design:\n\n### Design Quality\n- [ ] Typography is distinctive (no Inter\u002FRoboto\u002FArial)\n- [ ] Color palette has clear dominant + accent (not evenly distributed)\n- [ ] Background has atmosphere (not solid white\u002Fgray)\n- [ ] At least one memorable\u002Funforgettable element\n- [ ] Animations are orchestrated (not scattered)\n\n### Mobile 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\n\n### Form Consistency\n- [ ] Input, select, textarea all styled consistently\n- [ ] Radio\u002Fcheckbox visible (check transparent-border styles)\n- [ ] Dropdown options have readable backgrounds\n- [ ] Labels use CSS variables (not hardcoded colors)\n\n### Accessibility\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\n\n---\n\n## shadcn\u002Fui 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\u002Fshadcn-components.md](references\u002Fshadcn-components.md)** for full component reference.\n\nMost used for landing pages:\n- `Button`, `Badge` — CTAs and labels\n- `Card` — Feature cards, pricing tiers\n- `Accordion` — FAQ sections\n- `Dialog` — Modals, video players\n- `NavigationMenu` — Header nav\n- `Tabs` — Feature showcases\n- `Carousel` — Testimonials\n\n---\n\n## References\n\n- **[references\u002Fdesign-philosophy.md](references\u002Fdesign-philosophy.md)** — Extended anti-AI-slop guidance\n- **[references\u002Fmobile-patterns.md](references\u002Fmobile-patterns.md)** — Detailed responsive CSS\n- **[references\u002Fshadcn-components.md](references\u002Fshadcn-components.md)** — Component quick reference\n- **[templates\u002Fsite-config.ts](templates\u002Fsite-config.ts)** — Full siteConfig example\n\n---\n\n## Examples\n\n### Prompt → Output\n\n**Input**:\n> \"Portfolio site for a photographer. Minimal, editorial feel. \n> Grid gallery with lightbox, about section, contact form.\"\n\n**Design Decisions**:\n- Tone: Editorial\u002FMagazine\n- Typography: Cormorant Garamond (display) + Inter... wait, banned. Plus Jakarta Sans (body)\n- Color: Near-black bg (#0c0c0c), warm white text (#f5f5f0), copper accent (#b87333)\n- Unforgettable: Full-bleed hero image with text overlay that reveals on scroll\n- Motion: Gallery images fade in staggered on scroll\n\n**Output**: Complete Next.js project with responsive gallery, lightbox component, and contact form with validation.\n\n---\n\n*Based on Anthropic's frontend-design, web-artifacts-builder, and community frontend-design-v2 skills.*\n",{"name":5,"homepage":59,"metadata":60,"description":7},"https:\u002F\u002Fgithub.com\u002Fkesslerio\u002Ffrontend-design-ultimate-clawhub-skill",{"openclaw":61},{"emoji":62,"requires":63},"🎨",{"bins":64},[65,66],"node","npm","main","0446e11613ad1942de249b12f7deea3889c25af4","skills\u002Ffrontend-design-ultimate",0,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings","https:\u002F\u002Fgithub.com\u002FViewWay","rust can do everything","2026-06-19 23:27:05",{"source":8,"skillName":5,"commands":76,"prompt":86,"zipAvailable":87},[77,80,83],{"tool":78,"command":79},"npx","npx skills add ViewWay\u002Fhermes-by-everythings --skill frontend-design-ultimate",{"tool":81,"command":82},"bunx","bunx skills add ViewWay\u002Fhermes-by-everythings --skill frontend-design-ultimate",{"tool":84,"command":85},"pnpm","pnpm dlx skills add ViewWay\u002Fhermes-by-everythings --skill frontend-design-ultimate","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002FSKILL.md",true,[89,95,99,103,107,111,115,121,125,129],{"path":90,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":93,"sourceHtmlUrl":94},"_meta.json","REFERENCE","参考文档",143,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002F_meta.json",{"path":96,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":97,"sourceHtmlUrl":98},"README.md",3526,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002FREADME.md",{"path":100,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":101,"sourceHtmlUrl":102},"references\u002Fdesign-philosophy.md",7483,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002Freferences\u002Fdesign-philosophy.md",{"path":104,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":105,"sourceHtmlUrl":106},"references\u002Fmobile-patterns.md",9375,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002Freferences\u002Fmobile-patterns.md",{"path":108,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":109,"sourceHtmlUrl":110},"references\u002Fshadcn-components.md",9112,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002Freferences\u002Fshadcn-components.md",{"path":112,"resourceType":91,"resourceTypeDesc":92,"sizeBytes":113,"sourceHtmlUrl":114},"REVIEW.md",4730,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002FREVIEW.md",{"path":116,"resourceType":117,"resourceTypeDesc":118,"sizeBytes":119,"sourceHtmlUrl":120},"scripts\u002Fbundle-artifact.sh","SCRIPT","脚本",1473,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002Fscripts\u002Fbundle-artifact.sh",{"path":122,"resourceType":117,"resourceTypeDesc":118,"sizeBytes":123,"sourceHtmlUrl":124},"scripts\u002Finit-nextjs.sh",3756,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002Fscripts\u002Finit-nextjs.sh",{"path":126,"resourceType":117,"resourceTypeDesc":118,"sizeBytes":127,"sourceHtmlUrl":128},"scripts\u002Finit-vite.sh",9629,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002Fscripts\u002Finit-vite.sh",{"path":130,"resourceType":117,"resourceTypeDesc":118,"sizeBytes":131,"sourceHtmlUrl":132},"templates\u002Fsite-config.ts",7787,"https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-design-ultimate\u002Ftemplates\u002Fsite-config.ts",[134,158,184,210,241,262],{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":143,"publishedAt":54},"01M71EREGWXCCGBGDZ969RZQA7","ui-ux-pro-max","UI\u002FUX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems\u002Ftokens, component specs, copy\u002Fmicrocopy, accessibility, or to generate\u002Fcritique\u002Frefine frontend UI (HTML\u002FCSS\u002FJS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI\u002FUX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.","https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Fui-ux-pro-max\u002FSKILL.md",[140,141,142],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},[144,145,146,42,147,148,149,53,150,151,49,152,37,34,153,154,155,156,47,157],"ux","max","ui ux","ui ux pro max","pro","information architecture","microcopy","direction","flows","new","svelte","design systems","information","when",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":164,"publishedAt":54},"01M71ERBY797MAY4HTFMSHPXMY","springboot-verification","Verification loop for Spring Boot projects: build, static analysis, tests with coverage, security scans, and diff review before release or PR.","https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Fspringboot-verification\u002FSKILL.md",[],[165,166,167,168,169,170,171,172,48,173,174,175,176,177,178,179,180,181,182,183],"springboot verification","verification","coverage","projects","verification loop","pr","diff","for","tests","spring boot","diff review","spring","loop","boot","analysis","review","with","build","release",{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":193,"publishedAt":54},"01M71ER9TQGK9Y00JEEM6RW9RY","springboot-patterns","Spring Boot architecture patterns, REST API design, layered services, data access, caching, async processing, and logging. Use for Java Spring Boot backend work.","https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Fspringboot-patterns\u002FSKILL.md",[190],{"categoryNo":191,"categoryName":192,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",[194,195,196,197,174,34,198,199,200,201,202,203,204,205,206,172,207,208,209,176],"patterns","springboot patterns","processing","rest api design","access","caching","architecture","api","spring boot architecture","work","data","architecture patterns","logging","async","java spring","use",{"skillNo":211,"name":212,"nameZh":6,"description":213,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":214,"categories":215,"keywords":223,"publishedAt":54},"01M71ER6XTWDJ0NVE5RFY28RE7","security-auditor","Use when reviewing code for security vulnerabilities, implementing authentication flows, auditing OWASP Top 10, configuring CORS\u002FCSP headers, handling secrets, input validation, SQL injection prevention, XSS protection, or any security-related code review.","https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Fsecurity-auditor\u002FSKILL.md",[216,219,220],{"categoryNo":217,"categoryName":218,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":191,"categoryName":192,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":221,"categoryName":222,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000033","数据分析师",[224,225,226,227,228,152,229,230,231,157,232,233,234,235,180,236,237,238,239,240],"security","security auditor","auditor","authentication","code review","implementing","csrf","Input Validation","encryption","code","vulnerability","xss","top","owasp top 10","audit","sql","secrets",{"skillNo":242,"name":243,"nameZh":6,"description":244,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":245,"categories":246,"keywords":250,"publishedAt":54},"01M71ER4PHRJ1EKXQTQPEPYQ6J","rust-testing","Rust testing patterns including unit tests, integration tests, async testing, property-based testing, mocking, and coverage. Follows TDD methodology.","https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Frust-testing\u002FSKILL.md",[247],{"categoryNo":248,"categoryName":249,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",[251,252,253,167,254,255,194,256,207,257,173,258,259,260,261],"rust","testing","rust testing","unit","testing patterns","integration tests","mocking","unit tests","tdd","integration","methodology",{"skillNo":263,"name":264,"nameZh":6,"description":265,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":266,"categories":267,"keywords":268,"publishedAt":54},"01M71ER0XW3N4K7YTQSXXWW3M3","rust-patterns","Idiomatic Rust patterns, ownership, error handling, traits, concurrency, and best practices for building safe, performant applications.","https:\u002F\u002Fgithub.com\u002FViewWay\u002Fhermes-by-everythings\u002Fblob\u002Fmain\u002Fskills\u002Frust-patterns\u002FSKILL.md",[],[251,194,269,270,271,272,273,274,172,275,276,277,278],"rust patterns","error","traits","concurrency","safe","idiomatic","applications","best practices","error handling","ownership"]