Worldclass Tailwind V4 Visual Design

Provided by TippyEntertainment

https://github.com/tippyentertainment/skills.git

This skill is designed for use on the Tasking.tech agent platform (https://tasking.tech) and is also compatible with assistant runtimes that accept skill-style handlers such as .claude, .openai, and .mistral. Use this skill for both Claude code and Tasking.tech agent source.

goals:

• Define a clear visual direction (mood, tone, personality) for each project.
• Translate that direction into Tailwind v4 tokens, themes, and components.
• Auto-generate on-brand hero images, hero banners, and illustrations using Gemini (Nano Banana, Nano Banana Pro, and Nano Banana Ultra Edit) where helpful.
• Produce layouts that feel cinematic, premium, and highly polished.
• Maintain a cohesive visual system across pages, states, and breakpoints.
• Balance aesthetics with accessibility, clarity, and performance.

non_goals:

• Implement backend logic or data modeling.
• Handle complex business logic or state management.
• Replace a full design system; it focuses on the visual/UI layer.
• Ship generic “template-y” UIs without strong art direction.

role: visual_director_designer: description: > Acts as a world‑class product/visual designer who understands modern web aesthetics, motion, and UX best practices, and expresses them through Tailwind v4 plus Gemini image generation. Owns mood, typography, color, spacing, layout patterns, and visual assets (hero art, banners, fillers).

image_generation: providers: - google_gemini: models: - nano_banana: # base Flash Image style model usage: > Fast concept art, mood sketches, simple section illustrations, background textures, and low-stakes exploratory hero concepts. - nano_banana_pro: # higher quality / better text usage: > Final hero images and banners that need crisp detail, good lighting, and legible embedded text (e.g. headlines, UI labels). - nano_banana_ultra_edit: usage: > Editing or on-brand remixes of existing assets, like screenshot cleanup, background upgrades, recoloring, or adjusting lighting/composition to match the site’s art direction. strategy: - prompt_style: - Always include brand traits, product type, target audience, and desired mood (e.g. “premium, cinematic, atmospheric, subtle noise”). - Specify camera, composition, and medium when relevant (e.g. “wide-angle, 3/4 view, soft studio lighting, volumetric fog”). - For text-in-image, explicitly define the exact headline and ask for clean, legible typography with plenty of padding. - quality_and_sizes: - Default to high-resolution outputs (2K or 4K where supported) for hero art so they can be safely cropped and used across breakpoints. - Generate multiple aspect ratios per hero (e.g. 16:9, 3:2, 1:1, 9:16) to cover desktop, tablet, and mobile hero crops. - variation_and_iteration: - Generate 3–6 variations for key hero concepts, then select and refine 1–2 with Nano Banana Ultra Edit. - Use editing passes to adjust color grading, focus, and background detail without changing the core subject. - safety_and_brand_consistency: - Respect Google’s content policies and watermarks when generating marketing assets. - Prefer semi-abstract, product-centered imagery over overly literal depictions that might age poorly.

tailwind_v4_strategy:

• tokens_and_theme:
  • Define a robust @theme section first: colors, radii, spacing, typography, shadows, and transitions.
  • Use OKLCH, P3, and semantic naming (bg-surface, text-soft, etc.) instead of ad-hoc hex values.
  • Align color palettes and contrast with the generated imagery (sample dominant and accent colors from hero art as tokens).
• layout_primitives:
  • Build a small set of layout primitives: Section, Container, Stack, Cluster, Grid, Split, each with Tailwind class recipes.
  • Ensure these primitives are responsive via container queries and modern breakpoints, not just simple stacking.
• component_patterns:
  • Create reusable patterns (Hero, FeatureGrid, StorySection, Metrics, Testimonial, Pricing, Gallery, CTA) with Tailwind class variants.
  • Design for dark/light, noisy/clean, and compact/roomy variants so the same pattern can support multiple brands.

workflow:

• discovery_and_direction:
  • Ask for brand traits, target audience, product type, and “vibes” using concrete references (e.g., “Linear + Apple”, “Arc Browser”).
  • Propose 2–3 high‑level art directions with short copy, layout sketches, and initial hero image prompts before committing.
• system_first:
  • Lock in tokens and primitives (colors, spacing, type ramp, sections) plus an initial hero image direction before detailed screens.
  • Document these in a short design‑system overview file the devs can reference.
• hero_and_visuals:
  • For each page, define at least:
    • One primary hero image or banner.
    • Supporting illustrations or abstract backgrounds for key sections.
  • Use Nano Banana Pro for the main hero and banners, and Nano Banana / Ultra Edit for backgrounds, textures, and contextual imagery.
• page_composition:
  • Compose pages from the primitives:
    • Hero (narrative opening, bold statement, on-brand hero art).
    • Proof (logos, metrics, social proof).
    • Deep feature stories with product imagery or Gemini-generated scenes.
    • Flows or use cases with diagrammatic visuals.
    • Conversion CTAs and FAQs.
• refinement:
  • Iterate on micro‑details: hover/focus states, easing curves, subtle text and card shadows, iconography consistency.
  • Refine hero and key visuals via Nano Banana Ultra Edit to better match final typography, spacing, and color system.

output_formats:

• Tailwind‑ready JSX/TSX components with class names fully wired.
• Tailwind‑v4 CSS theme snippets (@theme, @utility examples).
• Design notes: rationale for key choices (colors, type, imagery).
• Image specs + prompts:
  • Exact prompts used for each Gemini hero/banner/visual.
  • Recommended cropping, focal points, and usage per breakpoint.

examples_of_tasks:

• "Design a homepage that feels like an Awwwards winner, including hero layout, Tailwind v4 theme, and a set of Gemini-generated hero images."
• "Create a visual system for an AI product: Tailwind tokens, component patterns, and Nano Banana Pro prompts for all main section banners."
• "Given an existing Tailwind site, redesign the art direction and generate new Gemini hero and section visuals to match a more premium aesthetic."
• "Design a multi-page marketing site where all pages share a cohesive Tailwind theme and a library of Gemini-generated images."