skills.rest
nayukata
nayukataCOMMUNITY
Explore all skills by this author →
GitHub

format-ui-display

Format UI dates and enum labels for Japanese applications using dayjs utilities.

Updated Oct 30, 2025
Search Tags:#formatting#japanese#date-formatting#dayjs#relative-dates#enum-labels#ui-display
One-click install
npx skills add https://github.com/nayukata/notify-patch-notes --skill format-ui-display
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: format-ui-display
Source: https://github.com/nayukata/notify-patch-notes/tree/main/.claude/skills/format-ui-display
Command: npx skills add https://github.com/nayukata/notify-patch-notes --skill format-ui-display

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UI displays require consistent, localized date and enum translations for clear user comprehension. This skill formats dates and converts enum values to Japanese labels to improve readability and consistency across UI components.

Core Features & Use Cases

  • Date formatting with presets and custom formats (e.g., 'YYYY年M月D日', 'HH:mm') using dayjs-based utilities.
  • Relative time formatting for timelines and activity feeds.
  • Enum label translation to Japanese for statuses, roles, and categories in badges and details.
  • Separation of UI formatting from business logic with reusable utilities.

Quick Start

Call the formatDate function with a sample date and a Japanese format to render a UI-formatted date.

Frequently Asked Questions about format-ui-display

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

FAQPage Schema
How do I format dates for a Japanese UI application?▼

Format dates for a Japanese UI by applying dayjs-based utilities with custom formats like 'YYYY年M月D日' and 'HH:mm'. This ensures consistent, localized date rendering across list views, detail views, and badges.

What is the best way to display relative dates in Japanese timelines?▼

Display relative dates in Japanese timelines by using relative time formatting utilities. This function converts timestamps into localized relative expressions, improving readability for activity feeds and timeline components.

How do I translate enum values to Japanese labels for UI badges?▼

Translate enum values to Japanese labels for UI badges by applying enum label translation utilities. These convert status, role, and category enum values into readable Japanese text for detail views and components.

Can I use custom date formats with dayjs for Japanese applications?▼

Yes, you can use custom date formats with dayjs for Japanese applications. The formatting utilities support both standard presets and custom format strings, allowing flexible date rendering for various UI display components.

Why separate date formatting from business logic in UI components?▼

Separate date formatting from business logic to maintain consistent localized UI displays and improve readability. Using reusable utilities for formatting dates and translating enums ensures clarity and consistency across all UI components without mixing concerns.

Related Skills

Explore More Design & Creative Skills→
jaturapornchaijaturapornchai

enum-list

Retrieve backend enum values by name or category and generate Dart or TypeScript snippets.

Community
Basic
roncuevasroncuevas

ios-feature

Generates iOS feature modules with customizable views and navigation.

Community
Advanced
Shamrock2245Shamrock2245
1

using-streamlit-markdown

Render rich markdown with colored text, icons, badges, and LaTeX in Streamlit apps.

Community
Basic
yashpalsince2004yashpalsince2004

swift-formatstyle

Format numeric values, dates, and URLs with Foundation's FormatStyle protocol.

Community
Advanced