AutoGineer
Generated banner for Number Details
Generated logo for Number Details

Number Details

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Design and creative
  • MIT
  • Medium risk
Get it from the source

From the author

Add decorative 01, 02, 03 numeric detail markers.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The Number Details skill provides a structured approach to adding subtle, architectural numeric markers to digital interfaces. By using consistent two-digit formatting (01, 02, 03), designers can create a sense of order and rhythm in layouts such as timelines, feature lists, or card-based galleries without overwhelming the primary content.

What it does

  • Defines a standard for two-digit numeric markers.
  • Provides placement strategies for visual consistency.
  • Offers guidance on typography and contrast for decorative elements.
  • Establishes rules for maintaining visual hierarchy.

When to use it

  • When you need to add visual structure to a series of items.
  • When designing timelines or process steps.
  • When creating card-based layouts that require subtle numbering.
  • When you want to improve the editorial rhythm of a page.

Advantages

  • Improves visual organization and layout clarity.
  • Ensures consistent design language across interface elements.
  • Prevents decorative elements from distracting from primary content.
  • Creates a professional, architectural aesthetic.

Usage examples

“How should I style the numbers for a three-step process section?”
The skill advises using two-digit markers (01, 02, 03) with low-contrast, mono, or narrow typography, placed in consistent positions like section gutters or beside headings.
“Where should I place decorative numbers in a card layout?”
The skill recommends placing them in predictable locations such as card corners to maintain a clean, architectural look without competing with the card's main content.

Install

  1. 1 of its files are not mirrored here, so install it from its source:

    https://github.com/MengTo/Skills/tree/5ea1661a0e05d82b054553daaa6baf6d0233c33c/agent-skills/web-design/number-details

Documentation by Meng To

Number Details Skill

Use When

  • A section needs subtle 01, 02, 03 markers for process steps, feature groups, cards, or editorial rhythm.

Workflow

  1. Add numeric markers as secondary visual structure, not primary content.

  2. Use two-digit numbers such as 01, 02, 03 for consistency.

  3. Place markers in predictable positions: card corners, section gutters, timeline rails, or beside headings.

  4. Use mono or narrow uppercase typography with low contrast so the detail feels architectural.

  5. Keep spacing and alignment consistent across all numbered elements.

Guardrails

  • Do not let decorative numbers compete with headings or CTAs.

  • Do not mix numbering styles in the same section.

Files

demo/PROMPT.md

Number Details Demo Prompts

Minimal prompt

Use $number-details to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.

Recreate the demo

Use $number-details to recreate the design quality and behavior of Cedar Lodges | Where the Mountains Breathe as a complete responsive HTML document. Treat the included demo/index.html as the visual and interaction reference, not as a loose mood board.

Product brief

  • Page concept: Cedar Lodges | Where the Mountains Breathe.

  • Purpose: Cedar Lodges Background Effect is designed for delivering a visual treatment or immersive background effect. Key features include atmospheric visuals, motion depth, and flexible presentation layering. It is suitable for visual-first pages, motion studies, and atmospheric hero treatments.

  • Content anchors: Cedar Lodges · "Eight can sleep here but the mountain feels infinite." · Suites in the Sky · Presidential Suite · Forest Chalet.

  • Useful subject tags: background, animated, webgl, threejs, dither, effect.

Skill direction

  • Add decorative 01, 02, 03 numeric detail markers.

    • Number Details: Add decorative 01, 02, 03 numeric detail markers.

Fidelity target

  • Match the reference's composition, information density, type scale, spacing rhythm, surface treatment, color relationships, and motion restraint.

  • Preserve the strongest interaction and animated background behavior instead of replacing it with generic fades or decorative movement.

  • Keep the first screen art-directed, then carry the same design logic through every supporting section.

  • Make the result responsive from mobile to desktop, keyboard accessible, and stable when reduced motion is enabled.

  • Deliver a full index.html. Put page-owned images, video, models, and textures in demo/assets/. External runtime libraries may stay as pinned CDN dependencies when the source relies on them.

Reference snapshot

Remix prompt

Use $number-details and the included Neuform demo as the quality bar, but replace the brand, subject, copy, palette, and content. Preserve the underlying layout logic, signature visual treatment, interaction choreography, responsive behavior, and performance constraints so the remix still clearly demonstrates the skill.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

  • Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/number-details · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Get it from the source

1 of this skill’s files are not mirrored here, so there is no ZIP. Get the complete skill from its source: MengTo/Skills