# Frontend > Generate high-quality landing pages with anti-slop guardrails and multi-platform support. Creates modern, accessible designs for Zo.space, standalone HTML, and Next.js with professional aesthetics and clear typography hierarchy. - Skill: `thevibethinker/frontend` (Agent Skill, multi-file: 5 files) - Install (CLI): `npx skillmds@latest add thevibethinker/frontend` - Raw SKILL.md: https://api.skillmd.com/api/skills/thevibethinker/frontend/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: thevibethinker (https://skillmd.com/u/thevibethinker) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/thevibethinker/frontend --- # Frontend Design Skill A comprehensive frontend design system that generates professional landing pages across multiple platforms. This skill combines design expertise with anti-slop guardrails to create clean, modern interfaces that avoid generic AI aesthetics. ## Input Spectrum This skill handles a wide spectrum of input detail levels: ### Vibes Only - **Example**: "a modern SaaS landing page that feels trustworthy" - **Behavior**: Generate clarifying questions OR apply tasteful defaults - **Focus**: Mood, industry, target audience ### Colors & Mood - **Example**: "Healthcare app, calming blues (#2563eb, #1e40af), professional but approachable" - **Behavior**: Use specified palette as foundation, derive complementary colors - **Focus**: Brand personality, emotional tone ### Content Provided - **Example**: Headlines, feature lists, CTAs, product descriptions - **Behavior**: Design around provided content, suggest improvements - **Focus**: Information architecture, content hierarchy ### Template Specified - **Example**: "Use the saas-minimal template with green accent" - **Behavior**: Load template from `templates/.yaml`, apply customizations - **Focus**: Template adaptation, brand alignment ## Generation Workflow ### 1. Input Processing - Analyze input detail level (vibes → template spectrum) - Detect or ask for target platform (Zo.space, HTML, Next.js) - Apply context clues from user's environment or previous requests ### 2. Clarification (when needed) Ask targeted questions for sparse input: - "What's the primary call-to-action?" - "Who's your target audience?" - "Any brand colors or visual references?" - "What feeling should visitors have?" ### 3. Anti-Slop Verification Before generating, review `references/anti-patterns.md` and ensure design avoids: - Generic purple/blue gradients - Overly symmetrical layouts - Stock illustration aesthetic - Excessive animations - Poor typography hierarchy - Generic "startup" messaging ### 4. Multi-Variant Generation When `--variants N` is requested: - Generate N distinct design directions - Vary layout approach, color treatment, typography scale - Maintain consistent content hierarchy across variants - Present clear distinctions between approaches ## Platform-Specific Output ### Zo.space (React/Tailwind/Hono) Create React components that leverage Zo's full-stack capabilities: ```typescript // Use update_space_route(path, route_type="page", code, public=True) import { useState } from "react"; import { ArrowRight, Check } from "lucide-react"; export default function LandingPage() { const [email, setEmail] = useState(""); return (
{/* Component content */}
); } ``` **Technical requirements:** - Component must be default export React function - Use Tailwind 4 classes throughout - Import icons from `lucide-react` only - Reference uploaded assets via their asset_path - Handle form state with React hooks when needed - Use semantic HTML for accessibility ### Standalone HTML Self-contained HTML files that work immediately: ```html Page Title ``` **Technical requirements:** - Use Tailwind CDN (no external CSS files) - Inline all custom styles within `