Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

digits-fintech-swiss-template — Claude Code presentation skill

A fintech deck template on a Swiss grid: black, warm paper, neon-lime accents. Three slides with bold numeric cards and keyboard navigation, all in one HTML file.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a claude-code
Open on GitHub

What digits-fintech-swiss-template does

The skill ships a fixed three-slide structure: index.html as the main artifact, plus template.html and example.html. The design runs on contrast between a black background, a warm paper tone, and neon-lime elements. Large numeric cards carry the hierarchy, and motion stays restrained: a subtle fade on slide change and a tiny hover lift on cards.

Everything is self-contained. CSS and JS are inline, no external APIs, so the file opens fine in a sandbox. Navigation is triple: Prev/Next buttons, ArrowLeft and ArrowRight keys, and dot indicators at the bottom. This is not a builder with options. It is a rigid frame where you swap copy and metrics while keeping card order and slide structure intact.

It runs in Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. Installation needs npx; GitHub Copilot needs gh. The output contract is fixed: one orientation sentence, then an HTML artifact with the identifier digits-fintech-swiss.

What it helps with

  • assemble a fintech deck in a single HTML file with no external dependencies
  • get a ready Swiss grid with numeric cards
  • add keyboard and click navigation without writing JS from scratch
  • keep the three-slide structure when replacing content

Example prompts for the agent

  • Create a Swiss-grid fintech strategy deck with modular data cards, lime accents, and clean keyboard navigation
  • Swap the copy and metrics in the digits-fintech-swiss template, keep card hierarchy
  • Build a deck from assets/template.html, keep three slides and dot navigation

How to install digits-fintech-swiss-template

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a claude-code

2Manually: put the files in place

~/.claude/skills/digits-fintech-swiss-template/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/digits-fintech-swiss-template/

From the same set39

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs d3-visualization nexu-io This skill teaches the agent to create interactive D3.js visualizations. Use it to generate charts for dashboards, reports, and data-rich prototypes. Claude Code CX Codex Cursor +1 3,100installs

Similar

gsap-framer-scroll-animation official Utkarsh Patrikar This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. Use it for vanilla JS, React, or Next.js work. GitHub Copilot 3,900installs magic-ui magicuidesign The magic-ui skill teaches Claude Code to work with Magic UI components in React and Next.js: select animations, install via shadcn registry, and check accessibility. Claude Code CX Codex Cursor +1 1,200installs draw-io-diagram-generator official github Creates and edits draw.io diagrams in .drawio, .drawio.svg, and .drawio.png files. Use it when an agent needs to produce a diagram from a project request. GitHub Copilot 2,800installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs

Questions about digits-fintech-swiss-template

How do I install digits-fintech-swiss-template in Claude Code?

Run npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a claude-code. The skill lands in ~/.claude/skills/digits-fintech-swiss-template/SKILL.md.

What does digits-fintech-swiss-template do?

It is a skill template for generating fintech decks as a live HTML artifact. It defines three slides, a Swiss grid, numeric cards, neon-lime accents, and Prev/Next, arrow, and dot navigation.

Can I change the number of slides?

No, the skill contract requires keeping the three-slide structure. Only copy and metric values change; card hierarchy stays.

Source text

SKILL.md · Apache-2.0 
---
name: digits-fintech-swiss-template
description: |
  Swiss-grid fintech deck template in black / warm paper / neon-lime contrast.
  Use when users ask for premium data-story slides with strict modular layout,
  bold numeric cards, restrained motion, and keyboard/click navigation in one HTML file.
triggers:
  - "swiss fintech template"
  - "data-driven finance deck"
  - "neon lime editorial grid"
  - "high contrast strategy slides"
  - "数字金融瑞士风模板"
od:
  mode: template
  surface: video
  type: hyperframes
  platform: desktop
  preview:
    type: html
    entry: index.html
    reload: debounce-100
  outputs:
    primary: index.html
    secondary:
      - template.html
      - example.html
  example_prompt: "Create a Swiss-grid fintech strategy deck with modular data cards, lime accents, and clean keyboard navigation."
  capabilities_required:
    - file_write
---

# Digits Fintech Swiss Template

A premium three-slide live-artifact template for data-storytelling in a Swiss grid language.

## Resource map

```text
digits-fintech-swiss-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html
```

## Workflow

1. Start from `assets/template.html` and keep the three-slide structure intact.
2. Replace copy and metric values while preserving card hierarchy and reading order.
3. Keep interactions:
   - Prev / Next buttons
   - keyboard navigation (`ArrowLeft` / `ArrowRight`)
   - dot navigation
4. Keep motion subtle (slide fade + tiny hover lift only).
5. Keep the file self-contained (inline CSS/JS) with no sandbox-hostile APIs.

## Output contract

Emit one concise orientation sentence and then one HTML artifact:

```xml
<artifact identifier="digits-fintech-swiss" type="text/html" title="Digits Fintech Swiss Deck">
<!doctype html>
<html>...</html>
</artifact>
```

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor