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 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
Add numeric markers as secondary visual structure, not primary content.
Use two-digit numbers such as 01, 02, 03 for consistency.
Place markers in predictable positions: card corners, section gutters, timeline rails, or beside headings.
Use mono or narrow uppercase typography with low contrast so the detail feels architectural.
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
- ATTRIBUTION.mdAdded by AutoGineer850 B
- LICENSELicence file added by AutoGineer1.0 KiB
- SKILL.md793 B
- demo/PROMPT.md2.5 KiB
- demo/assets/page-01-photo-1542224566-6e85f2e6772f.jpg(opens on GitHub)Not mirrored: opens on GitHub1.2 MiB
- demo/assets/page-02-photo-1518732714860-b62714ce0c59.jpg182.4 KiB
- demo/assets/page-03-photo-1596394516093-501ba68a0ba6.jpg256.7 KiB
- demo/assets/page-04-photo-1587061949409-02df41d5e562.jpg520.8 KiB
- demo/assets/page-05-photo-1522708323590-d24dbb6b0267.jpg232.8 KiB
- demo/assets/page-06-photo-1464822759023-fed622ff2c3b.jpg429.0 KiB
- demo/assets/page-07-photo-1544161515-4ab6ce6db874.jpg188.3 KiB
- demo/assets/page-08-photo-1555396273-367ea4eb4db5.jpg563.2 KiB
- demo/assets/source-preview.jpg27.0 KiB
- demo/index.html59.0 KiB
- demo/preview.jpg138.3 KiB
- demo/source.json4.7 KiB
SKILL.md
Number Details Skill
Use When
A section needs subtle 01, 02, 03 markers for process steps, feature groups, cards, or editorial rhythm.
Workflow
Add numeric markers as secondary visual structure, not primary content.
Use two-digit numbers such as 01, 02, 03 for consistency.
Place markers in predictable positions: card corners, section gutters, timeline rails, or beside headings.
Use mono or narrow uppercase typography with low contrast so the detail feels architectural.
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.
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.
Related skills
Frontend Design
AnthropicOfficial
A framework for creating distinctive, intentional UI designs that avoid common templated aesthetics.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0GitHub stars of the source repository188.6k
Theme Factory
AnthropicOfficial
A toolkit for applying professional color and font themes to documents, presentations, and web artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0GitHub stars of the source repository188.6k
Brand Guidelines
AnthropicOfficial
Applies Anthropic's official brand colors and typography to digital artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0GitHub stars of the source repository188.6k
Impeccable
Paul Bakaus· Community
A comprehensive design system and UI refinement tool for auditing, polishing, and evolving digital interfaces.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0Low riskHas scriptsGitHub stars of the source repository105.3k
Diagram Design
Cathryn Lavery· Community
Generate branded, editorial-style technical diagrams as self-contained HTML, SVG, or PNG files.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 moreMITLow riskHas scriptsGitHub stars of the source repository65.6k
UI UX Designer
Seth Hobson· Community
An expert UI/UX designer focused on systematic, accessible, and research-backed interface creation.
Design and creativeClaude CodeMITGitHub stars of the source repository42.3k
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