Skip to content
cccskills
FreePublished on GitHubEnglish overview

swiss-creative-mode-template

Create a Swiss-inspired presentation page as a single HTML file, using bold typography and geometric cards. The template includes slide navigation, light and dark themes, accent color cycling, and optional annotation overlays without external runtime dependencies.

OriginalShow the original description

Swiss-inspired creative-mode presentation template skill with bold editorial typography, high-contrast geometric cards, interactive slide navigation, theme switching, hotspot overlays, and palette choreography in a single-file HTML artifact. Use when users ask for a premium presentation-style landing, a Swiss/brutalist deck look, or a creative launch page with rich interactions.

AI rating100/ 100See how to install

Good for

  • Build a presentation-style landing page
  • Create a Swiss-inspired HTML slide deck
  • Present a launch with interactive navigation
  • Add switchable themes and annotation overlays

Overview

What it does

This skill creates an HTML page that works like a presentation, using Swiss-inspired typography and geometric cards. Its template includes an opening scene with a large title, a row of cards showing a four-step process, and an architecture diagram scene. You can include previous and next controls, dot navigation, light and dark themes, accent color cycling, and annotation overlays.

When it helps

Use it for landing pages that communicate through contrasting text sizes and geometric forms, or for presentation materials that people can navigate. It also suits product launch pages where explanations need to be divided into separate scenes. The same page can provide controls for changing its theme and displaying annotations.

Example requests

  • “Create a product launch presentation page with Swiss-inspired typography.”
  • “Make HTML presentation materials with controls for light and dark themes and annotation overlays.”

Notes

Creating the page requires file-writing capability. The skill maps colors, typography, and layout from the active DESIGN.md into CSS variables and uses the supplied template and checklist. The output is one index.html file with inline CSS and JavaScript, without external runtime libraries.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodThe description identifies presentation-style landing and launch pages, with an interactive single-file HTML output.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodThe workflow specifies mapping DESIGN.md, copying the template, preserving interactions, checklist validation, and the output format.
SafetyAre sending data, deleting files, and running commands disclosed?
AGoodFile-writing capability is explicitly required, and index.html is specified as the copy destination.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodRequirements identify DESIGN.md and file writing, show bundled file locations, and state that no external runtime dependency is needed.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (4)

  • SKILL.md2.3 KB
  • assets/template.html13.1 KB
  • example.html3.4 KB
  • references/checklist.md1.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Swiss Creative Mode Template

Produce a premium Swiss/editorial-style HTML template with strong visual rhythm and meaningful interactions, then emit it as a single-file artifact.

Resource map

swiss-creative-mode-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

  1. Read active DESIGN.md and map palette/type/layout decisions into root CSS variables.
  2. Copy assets/template.html to index.html.
  3. Keep this structure intact:
    • Hero scene with bold title and geometric frame.
    • Four-step process card row.
    • Stack/architecture diagram scene.
  4. Keep these interactions working:
    • Prev/next slide navigation + dot nav.
    • Theme toggle (paper/dark).
    • Palette cycle button (changes accent colors across the template).
    • Hotspot toggle for annotations/details.
  5. Keep output self-contained (<!doctype html>, inline CSS/JS, no external runtime dependency).
  6. Validate against references/checklist.md before emitting.

Output contract

One short sentence before artifact, then:

<artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template">
<!doctype html>
<html>...</html>
</artifact>

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design103.2KUpdated Oct 22, 2026

ad-creative

FreeSummaryAI rating 80

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design103.2KUpdated Oct 22, 2026

after-hours-editorial-template

FreeSummaryAI rating 80

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design103.2KUpdated Oct 22, 2026

agent-browser

FreeSummaryAI rating 100

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design103.2KUpdated Oct 22, 2026

ai-music-album

FreeSummaryAI rating 80

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design103.2KUpdated Oct 22, 2026

algorithmic-art

FreeSummaryAI rating 80

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design103.2KUpdated Oct 22, 2026

See all skills by nexu-io

Report a problem with this skill