Skip to content
Get packs

Number Details

Adds subtle 01, 02, 03 decorative number markers to web section layouts

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

When installed, the agent adds small, low-contrast numbers like 01, 02, 03 to web layouts, such as beside headings, on cards, or along timelines, to signal process steps or feature groups. It follows guidance to keep these numbers secondary to the main content, use consistent two-digit formatting and typography, and avoid competing with headings or calls to action. It is a styling guide rather than a tool that does anything on its own.

Great for

  • Front-end developers building landing pages or marketing sites with step-by-step or feature sections
  • Designers who want an architectural, editorial look for cards and timelines

Skip it if

  • Content where numbers carry real meaning, such as ordered instructions or data, since decorative markers could be mistaken for content (the skill is purely visual)
  • Accessibility-critical interfaces, since the skill's guidance on low-contrast text may conflict with readability requirements

Try asking

  • “Add 01, 02, 03 markers to the three feature cards on this landing page”
  • “Number the process steps in this 'how it works' section with subtle mono markers”
  • “Add editorial-style numbering to the timeline on our about page”
Step-by-step guide: how to use Number DetailsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    number-details.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip number-details.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip number-details.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Specify your framework or styling system (for example Tailwind or CSS modules) so the markers match your codebase
  • Ask the agent to check contrast so the low-contrast styling still meets accessibility standards

What's inside

  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.