skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

swiss-creative-mode-template

Generate single-file HTML presentation templates featuring Swiss-inspired editorial typography and interactive slide navigation.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#template#HTML#prototyping#presentation#swiss-design#Brutalist
One-click install
npx skills add https://github.com/nexu-io/open-design --skill swiss-creative-mode-template
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiss-creative-mode-template
Source: https://github.com/nexu-io/open-design/tree/main/skills/swiss-creative-mode-template
Command: npx skills add https://github.com/nexu-io/open-design --skill swiss-creative-mode-template

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the need for rapid, high-quality visual prototyping by providing a pre-configured, editorial-style HTML template that maintains consistent design rhythm and interaction patterns without requiring external build tools.

Core Features & Use Cases

  • Editorial Design System: Implements a Swiss-brutalist aesthetic with bold typography, geometric frames, and responsive grid layouts.
  • Interactive Components: Includes built-in slide navigation, theme switching (paper/dark), palette cycling, and hotspot annotations.
  • Use Case: Use this when you need to quickly present a design concept, strategy deck, or launch narrative as a polished, self-contained HTML artifact that works directly in any browser.

Quick Start

Generate a new Swiss-style presentation template using the current design system variables.

Frequently Asked Questions about swiss-creative-mode-template

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a Swiss-style presentation template?▼

Invoke the swiss-creative-mode-template skill to produce a single-file HTML artifact. The template includes pre-built hero scenes, process cards, and architecture diagrams ready for your content.

Can I customize the colors in the template?▼

Yes, the template includes a palette-cycle interaction button that rotates through predefined accent color schemes. You can also modify the CSS variables in the root style block for custom branding.

Does the template require external dependencies?▼

No, the template is fully self-contained. It uses standard HTML, CSS, and vanilla JavaScript, ensuring it works in any browser without external libraries or build tooling.

How do I add my own content to the template?▼

Edit the content within the scene sections of the generated index.html file. The structure uses standard semantic HTML, allowing you to replace text and labels while preserving the layout rhythm.

Is the template accessible for keyboard users?▼

Yes, the template supports keyboard navigation using arrow keys for slide transitions and standard focus states for buttons, ensuring usability for all users.

Related Skills

Explore More Design & Creative Skills→
fengjutianfengjutian

stitch-design-taste

Generate DESIGN.md files defining visual and interaction standards for Google Stitch.

Community
Advanced
JeriCommerceJeriCommerce

Jeri - Webflow Guide Creator

Generate and format HTML support articles for the JeriCommerce Webflow CMS.

Official
Advanced
michelvemichelve
1

playwright-skill

Automate browser interactions and end-to-end tests with Playwright.

Community
Advanced
dhar174dhar174
1

markdown-to-html

Converts Markdown documents to HTML for web display or static sites.

Community
Intermediate