uds-wireframe

name: uds-wireframe description: > Build brand-specific interface wireframe illustrations using UDS components, Tailwind utilities, and the IONOS design system. Use this skill whenever the user wants to sketch, mock up, or illustrate an interface layout, screen, page, or UI composition using real UDS components — even if they say "wireframe", "mockup", "sketch", "prototype", "interface illustration", "lo-fi layout", or "show me what this screen could look like". Also triggers when the user wants to combine a pixel image or Figma frame with a component layout, or wants micro-animations on a UI illustration. Supports two fidelity levels: standard (mid-fi, real placeholder text, light backgrounds) and decorative (dark/gradient backgrounds, visual bar placeholders, icon-forward glass cards, cinematic feel — trigger words: "decorative", "dark", "cinematic", "premium", "marketing visual"). Outputs a .tsx file — real UDS components, real IONOS brand colors. Not a full production implementation — a composed illustration of structure and intent. Requires uds-style-guide and uds-usage-best-practices. For animation: references remotion-best-practices.

UDS Wireframe

A wireframe here means a live, renderable React composition using real UDS components arranged to illustrate a layout. Real IONOS brand colors and typography — "low fidelity" comes from placeholder content, not greyscale aesthetics.

Before You Start

Ask these before generating (skip any the user already answered):

1. Images? — "Do you want to include images? If so, paste a local file path or Figma URL."
2. Fidelity? — "Standard (real placeholder copy, light background) or decorative (dark/cinematic, bar placeholders, device frame, glass cards)?"

For decorative mode only, also ask:

3. Size? — Large (750px) / Medium (500px) / Small (~250px)
4. Animations? — "Should elements have interaction animations?"

If the prompt contains "decorative", "dark", "cinematic", "premium", or "marketing visual" → treat as decorative without asking question 2. Standard wireframes never include animations — skip questions 3 and 4.

Rules Index

All rules are inlined below. Quick navigation:

Pattern → Rule routing

When the brief names a Composition pattern: (set by the moderator), load the corresponding rule in addition to ionos-wireframe-composition and ionos-wireframe-product-frame:

When dimensions.w < 512 AND dimensions.h < 512 and no Composition pattern: is set, default to small-cropped-frame for product briefs and small-icon-story for abstract briefs.

When the brief contains [HYBRID EMBED CONTRACT], always load ionos-wireframe-image-backdrop — the contract's Style: line names the exact section to follow.

Output Format

Produce a single src/Composition.tsx. For Remotion jobs, the template's Root.tsx is pre-wired — only write Composition.tsx. Structure:

// Wireframe illustration — not production code
import { type VariantProps } from './schema';          // Remotion: always use VariantProps
// OR for static wireframes:
import { ThemeProvider } from '@ionos-web-design-system/react';  // NOTE: there is no `Surface` export — use a div with a bg-surface-* utility class

export const MyComposition: React.FC<VariantProps> = ({ headline, subline, variantId, brand, colorScheme, platform }) => {
  return (
    // ThemeProvider takes ONLY children. Brand/platform/colorScheme are applied
    // as data-* attributes on a wrapping element (NOT props on ThemeProvider).
    <div data-brand={brand} data-platform={platform} data-color-scheme={colorScheme}>
      <ThemeProvider>
        {/* layout composition */}
      </ThemeProvider>
    </div>
  );
};

Related Skills

• uds-style-guide — brand colors, typography, AI feature color language (ionos-ai-features)
• uds-usage-best-practices — component APIs, token usage, prop patterns
• remotion-best-practices — advanced animation timing, spring physics, video export