number-details

Add decorative two-digit numeric markers to sections, cards, and editorial layouts.

5.7k|685|Updated Feb 3, 2026
One-click install
npx skills add https://github.com/MengTo/Skills --skill number-details
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: number-details
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/number-details
Command: npx skills add https://github.com/MengTo/Skills --skill number-details

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Landing pages and editorial layouts often lack the subtle structural rhythm that makes sections feel intentional and art-directed. This Skill provides a repeatable workflow for adding decorative 01, 02, 03 numeric markers that give process steps, feature groups, and cards a consistent architectural detail without competing with primary content.

Core Features & Use Cases

  • Decorative Numeric Markers: Adds two-digit numbers (01, 02, 03) as secondary visual structure for sections, cards, timelines, and headings.
  • Placement & Typography Rules: Defines predictable positions (card corners, gutters, timeline rails) with mono or narrow uppercase low-contrast styling.
  • Consistency Guardrails: Prevents numbering styles from competing with headings or CTAs and forbids mixing numbering styles within a section.
  • Use Case: When building a hotel or product landing page with multiple suites or feature sections, apply numbered markers like "01 / The Sanctuary" and "02 / Accommodations" to create editorial rhythm across the page.

Quick Start

Use the number-details skill to add consistent decorative 01, 02, 03 numeric markers to each section of my landing page.

Frequently Asked Questions about number-details

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

FAQPage Schema
How do I add decorative section numbers to a landing page?

Add two-digit numbers like 01, 02, 03 as secondary visual elements beside headings, in card corners, or along timeline rails. Style them with mono or narrow uppercase typography at low contrast so they read as architectural detail rather than primary content.

What typography works best for decorative numeric markers?

Use mono or narrow uppercase typefaces with low contrast against the background. Keep the size smaller than body headings and maintain consistent tracking and alignment across every numbered element on the page.

Where should numbered details be placed in a layout?

Place markers in predictable positions such as card corners, section gutters, timeline rails, or directly beside headings. Consistent placement across all sections is what makes the numbering feel intentional rather than decorative noise.

When should I avoid using decorative section numbers?

Avoid them when they compete with headings or calls to action for attention, or when a section already has strong visual hierarchy. Do not mix different numbering styles, such as 01 and Step 1, within the same section.

Can numeric markers work with responsive and accessible designs?

Yes, keep markers as decorative secondary content so they do not disrupt reading order, and ensure contrast and spacing adapt cleanly from mobile to desktop. They should never carry essential meaning on their own.