agentsclimarketplace

Frontend

Skill thevibethinker/vibe-thinker-skills/frontend

Portable, standalone Zo Computer skills you can install, reuse, and share.

Install
npx -y skills add thevibethinker/vibe-thinker-skills --skill frontend

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.md

14.3 KB, as published. Nobody here has run it

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/<name>.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:

// 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 (
    <div className="min-h-screen bg-zinc-50">
      {/* Component content */}
    </div>
  );
}

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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <!-- Content with inline Tailwind -->
</body>
</html>

Technical requirements:

  • Use Tailwind CDN (no external CSS files)
  • Inline all custom styles within <style> tags
  • No external dependencies beyond Tailwind CDN
  • Should work when opened directly in browser
  • Include basic responsive design patterns

Next.js (App Router)

Modern Next.js components with latest patterns:

// app/page.tsx or components
"use client"; // Only if interactivity needed

export default async function LandingPage() {
  return (
    <main className="min-h-screen">
      {/* Component content */}
    </main>
  );
}

Technical requirements:

  • Use App Router conventions
  • Include "use client" directive only when needed
  • Export default async function component
  • Follow Next.js 14+ patterns
  • Use standard Tailwind classes
  • Handle server/client components appropriately

Template Application

When a template is specified:

1. Template Loading

  • Load template YAML from templates/<name>.yaml
  • Parse layout, palette, typography, and style_notes sections
  • Validate template exists and is well-formed

2. Value Application

  • Apply color palette to design system
  • Use typography scale for headings/body text
  • Follow layout constraints (grid, spacing, component arrangement)
  • Incorporate style_notes as aesthetic guidance

3. Content Integration

  • User-provided content takes precedence over template defaults
  • Adapt template structure to accommodate content length
  • Maintain template's visual character while serving content needs

4. Brand Customization

  • Allow accent color overrides
  • Adapt template patterns to brand voice
  • Preserve template's design integrity while personalizing

Template Capture

When a generated page perfectly captures the aesthetic you want, you can preserve it as a reusable template for future projects.

When to Capture

Capture a template when:

  • The generated page has a distinctive visual character worth reusing
  • You find yourself wanting to recreate the same "feel" for other projects
  • The page demonstrates a successful aesthetic approach for a specific domain
  • The design balances uniqueness with broad applicability

Analysis Process

To create an accurate template, analyze the generated page systematically:

1. Color Palette Extraction

  • Use browser devtools or eyedropper tools to sample exact colors
  • Identify the primary brand color, secondary supporting color, and accent color
  • Note background, surface, text, and muted text colors
  • Verify contrast ratios meet accessibility standards (4.5:1 minimum)

2. Typography Assessment

  • Identify font families used for headings and body text
  • Note font weights and the typographic scale (tight/normal/loose)
  • Observe heading hierarchy and how it creates visual rhythm
  • Check line-height and letter-spacing characteristics

3. Layout Pattern Recognition

  • Measure or estimate max-width settings
  • Assess spacing rhythm between sections (compact/balanced/airy)
  • Note border-radius treatment (none/subtle/rounded/pill)
  • Identify grid systems and alignment patterns

4. Section Structure Analysis

  • List all sections in order of appearance
  • Identify the specific variant used for each section type
  • Note any unique section combinations or arrangements
  • Document content patterns that work well with this structure

5. Aesthetic Essence Capture

  • Describe the intangible "feel" in concrete terms
  • Note shadow usage, animation styles, interaction patterns
  • Identify what makes this template distinctive from others
  • Document the emotional impression it creates

Template Creation Process

1. Start with the Schema

Copy templates/_TEMPLATE.yaml as your starting point:

cp templates/_TEMPLATE.yaml templates/your-template-name.yaml

2. Fill in Structured Fields

  • name: Use descriptive slug format (e.g., minimal-saas, bold-agency, warm-nonprofit)
  • description: Write 2-3 sentences explaining use cases and target aesthetic
  • source: Credit the original page URL or describe the synthesis process
  • created: Use current date in YYYY-MM-DD format
  • palette: Fill in all 7 required color values using exact hex codes
  • typography: Specify fonts, scale, and heading weight
  • layout: Set max-width, spacing, and border-radius preferences
  • sections: List all sections with their variants in order

3. Craft Detailed Style Notes

The style_notes field is critical for preserving design nuance. Include:

  • Visual characteristics: Shadows, borders, gradients (or lack thereof)
  • Typography treatment: Hierarchy approach, text decoration patterns
  • Color usage patterns: How colors are applied across different elements
  • Spacing philosophy: Density preferences, rhythm between elements
  • Interactive elements: Button styles, hover states, link treatments
  • Content density: How much information fits comfortably
  • Unique design elements: Anything that sets this template apart
  • Emotional tone: The feeling users should have when viewing pages using this template

4. Template Naming Conventions

Choose names that immediately convey the aesthetic:

  • Good examples: minimal-saas, bold-agency, warm-nonprofit, technical-docs, luxury-ecommerce
  • Avoid generic names: template-1, blue-theme, modern-design
  • Include context: Reference the industry or mood when helpful
  • Keep it memorable: Names you'll recognize months later

5. Validation Check

Before saving, verify your template:

  • All required fields are filled with valid values
  • Colors use proper hex format (#000000)
  • Typography fonts are available (Google Fonts or system fonts)
  • Section types and variants exist in the skill's repertoire
  • Style notes capture the essence clearly enough for recreation

Example Capture Process

Original page: A meditation app landing page with sage greens and serif typography

Analysis notes:

  • Color palette: Sage primary (#059669), warm white background (#FFFEF7)
  • Typography: Playfair Display headings, Source Serif Pro body, loose scale
  • Layout: Narrow max-width, airy spacing, subtle rounded corners
  • Feel: Calm, premium, trustworthy, organic

Template creation:

name: calm-wellness
description: |
  Meditation and wellness app template with sage greens and serif typography.
  Creates a premium, organic feeling suitable for mindfulness, therapy,
  and personal development products.
source: Meditation app landing page, adapted for broader wellness market
# ... rest of structured fields
style_notes: |
  Serene, premium aesthetic using sage greens and warm typography.
  Serif fonts create trust and tradition. Generous whitespace suggests
  spaciousness and calm. Rounded elements feel organic and approachable...

Template Library Management

  • Keep it curated: Only capture truly distinctive templates worth reusing
  • Regular review: Periodically assess whether older templates still represent best practices
  • Documentation: Update style_notes if you discover new applications or refinements
  • Sharing: Templates with broad appeal can become part of the core library

Design Principles

Typography Hierarchy

  • H1: Hero headlines, primary value proposition
  • H2: Section headers, feature categories
  • H3: Feature names, subsection titles
  • Body: Descriptions, supporting text
  • Small: Captions, legal text, metadata

Color Strategy

  • Primary: Brand color, CTAs, key interactive elements
  • Secondary: Supporting actions, accents, highlights
  • Neutral: Text, backgrounds, borders, subtle elements
  • Semantic: Success, warning, error, info states

Layout Patterns

  • Hero Section: Value proposition + primary CTA
  • Features Grid: 3-4 column grid, icon + title + description
  • Social Proof: Testimonials, logos, usage stats
  • Pricing: Clear tiers, feature comparison
  • Footer: Links, contact, social, legal

Accessibility Standards

  • Sufficient color contrast (4.5:1 minimum)
  • Focus indicators for all interactive elements
  • Semantic HTML structure
  • Alt text for images
  • Keyboard navigation support
  • Screen reader friendly markup

Anti-Slop Guardrails

Reference references/anti-patterns.md for comprehensive list. Key avoidances:

Visual Anti-Patterns

  • Generic purple/blue gradient backgrounds
  • Symmetrical layouts without visual interest
  • Stock illustration aesthetic (geometric shapes, flat characters)
  • Excessive drop shadows or gloss effects
  • Rainbow color schemes without purpose

Content Anti-Patterns

  • "Revolutionize your workflow" messaging
  • Generic "trusted by thousands" claims
  • Excessive exclamation points
  • Buzzword-heavy descriptions
  • Vague value propositions

UX Anti-Patterns

  • Too many CTAs competing for attention
  • Poor information hierarchy
  • Tiny touch targets on mobile
  • Auto-playing videos or animations
  • Pop-ups that interrupt reading flow

Usage Examples

Basic Usage

Generate a landing page for a project management tool. Clean, professional, focus on team collaboration features.

With Variants

Create a SaaS pricing page --variants 3
Colors: #2563eb, #1e40af
Content: Starter ($29), Pro ($99), Enterprise ($299)

Template-Based

Use the saas-minimal template for a meditation app
Primary color: #059669 (green)
Target: busy professionals seeking mindfulness

Platform-Specific

Generate a Next.js component for our product showcase
Features: AI writing, grammar check, tone analysis
Style: Grammarly-inspired but distinct

Quality Standards

Every generated design should meet:

  • Visual Polish: Professional appearance, consistent spacing
  • Content Clarity: Clear value proposition, logical flow
  • Technical Quality: Valid code, responsive design, accessibility
  • Brand Coherence: Consistent voice, appropriate aesthetics
  • Performance: Fast loading, optimized images, clean markup

Advanced Features

Responsive Design

  • Mobile-first approach with progressive enhancement
  • Breakpoint strategy: sm (640px), md (768px), lg (1024px), xl (1280px)
  • Touch-friendly interactive elements (min 44px)
  • Readable typography at all screen sizes

Performance Optimization

  • Semantic HTML structure for fast parsing
  • Efficient CSS with Tailwind utilities
  • Optimized images with proper sizing
  • Minimal JavaScript for interactivity

SEO Readiness

  • Proper heading hierarchy (H1 → H6)
  • Meta descriptions and titles
  • Structured data markup when relevant
  • Fast loading times
  • Mobile-friendly design

This skill transforms design briefs into production-ready landing pages that combine aesthetic appeal with technical excellence and user experience best practices.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.