Skill

Pass

Audit score 90

swiss-user-research-video-template

nexu-io/open-design

Premium Swiss-editorial user research template with warm paper aesthetics and keyboard-navigable slides.

What is swiss-user-research-video-template?

A narrative-focused HTML template for presenting user research findings in minimalist Swiss style. Use when you need a polished, story-first research deck with warm paper tones, strict typography, and subtle interactions—all in a single self-contained file.

Single-file HTML artifact with inline CSS and JavaScript, no external dependencies
Three-slide structure: title framing, participant donut breakdown, behavioral patterns with evidence
Click and keyboard navigation (ArrowLeft/ArrowRight) with pagination dots
Donut legend hover highlights and subtle line-draw and panel-lift transitions
Customizable design tokens (paper color, ink, muted tones, rule colors, segment colors)
Warm paper editorial aesthetic with strict spacing rhythm and thin rules

How to install swiss-user-research-video-template

npx skills add https://github.com/nexu-io/open-design --skill swiss-user-research-video-template

Prerequisites

Basic understanding of HTML/CSS customization
Access to user research data (participant counts, behavioral patterns, evidence)

Claude Code

Cursor

Windsurf

Cline

How to use swiss-user-research-video-template

1.Start from assets/template.html as your base
2.Map your design tokens to CSS variables (--paper, --ink, --muted, rule colors, segment colors)
3.Populate the three slides: title/framing, participant donut breakdown, behavioral patterns with evidence panel
4.Ensure data consistency between copy, donut labels, and percentages
5.Test keyboard navigation (ArrowLeft/ArrowRight) and click interactions
6.Validate against references/checklist.md before finalizing
7.Output as a single self-contained HTML artifact

Use cases

Good for

Present user research synthesis to stakeholders with premium minimalist design
Create a live artifact for research findings with interactive participant breakdowns
Build narrative-heavy research decks that emphasize story over decoration
Share research insights in a self-contained HTML file without external dependencies
Showcase behavioral patterns and evidence with editorial-style layout and micro-interactions

Who it's for

UX researchers presenting findings to teams or clients
Product managers synthesizing user research into stakeholder decks
Design teams creating premium research documentation
Anyone needing a polished, story-first research presentation format

swiss-user-research-video-template FAQ

Can I customize the colors and typography?

Yes. Map your design tokens to the template CSS variables (--paper, --ink, --muted, rule colors, segment colors) without changing layout semantics.

Does this require external frameworks or dependencies?

No. The template is self-contained with inline CSS and JavaScript, with no external framework dependencies.

What data should I include in the donut breakdown?

Include realistic participant counts and percentages that are internally consistent with your copy and behavioral pattern evidence.

How do users navigate the slides?

Users can click pagination dots at the bottom, or use ArrowLeft/ArrowRight keyboard keys to move between slides.

What interactions are included?

Slide navigation, pagination dot active states, donut legend hover highlights, and subtle line-draw and panel-lift transitions.

Full instructions (SKILL.md)

Source of truth, from nexu-io/open-design.

name: swiss-user-research-video-template description: | Swiss-style user-research narrative template in warm-paper editorial aesthetics. Use when users ask for a premium research deck or story-first live artifact with minimalist typography, high-clarity layout, subtle motion, donut breakdowns, and keyboard/click navigation across slides in a single HTML file. triggers:

"swiss user research template"
"editorial research deck template"
"minimal user research slides"
"warm paper swiss style"
"research synthesis template"
"瑞士风用户研究模板"
"高级调性研究汇报" od: mode: template surface: video type: hyperframes platform: desktop preview: type: html entry: index.html reload: debounce-100 design_system: requires: true sections: [color, typography, layout, components] outputs: primary: index.html secondary:
- template.html
- example.html example_prompt: "Create a Swiss-style user research synthesis deck with premium minimalist typography, warm paper tone, a participant donut breakdown, and subtle editorial interactions." capabilities_required:
- file_write

Swiss User Research Video Template

A premium Swiss-editorial user research template for narrative-heavy live artifacts. The visual language is warm paper, strict spacing rhythm, thin rules, and restrained micro-interactions that keep attention on the story.

Resource map

swiss-user-research-video-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

Read DESIGN.md, then map tokens to the template CSS variables (--paper, --ink, --muted, rule colors, segment colors) without changing layout semantics.
Start from assets/template.html; keep the three-slide structure:
- title / framing
- participant breakdown donut
- behavioral pattern + evidence panel
Preserve interactions:
- click/keyboard slide navigation (ArrowLeft/ArrowRight)
- bottom pagination dots with active state
- donut legend hover highlight
- subtle line-draw and panel-lift transitions
Keep all data realistic and internally consistent between copy, donut labels, and percentages.
Keep HTML self-contained (inline CSS/JS), with no external framework dependencies.
Validate using references/checklist.md before output.

Output contract

Emit one concise orientation sentence and then a single HTML artifact:

<artifact identifier="swiss-user-research-deck" type="text/html" title="Swiss User Research Synthesis">
<!doctype html>
<html>...</html>
</artifact>

Related skills

More from nexu-io/open-design and the wider catalog.

taste-skill

nexu-io/open-design

811 installs

theme-factory

nexu-io/open-design

Apply professional font and color themes to slides, docs, reports, and HTML landing pages with 10 pre-set designs.

1.4k installsAudited

threejs

nexu-io/open-design

Create 3D scenes, materials, and interactive experiences with Three.js in the browser.

1.5k installs

ui-skills

nexu-io/open-design

Opinionated UI constraints to keep agent-generated interfaces coherent across components.

1.4k installsAudited

ui-ux-pro-max

nexu-io/open-design

Catalog entry for UI/UX Pro Max design patterns—full workflow requires upstream installation.

3.8k installs

venice-audio-music

nexu-io/open-design

Music generation queueing and retrieval via Venice.ai for jingles, loops, and prototype scoring.

1.3k installsAudited