ui-system-refactor_skill

Overview

This skill documents the UI design standard for Project N.E.K.O., focusing on a capsule-style interface and a distinct brand-blue visual system. It provides concrete CSS patterns, interaction rules, and common pitfalls with pragmatic fixes to keep components consistent across the metaverse product.

How this skill works

The specification prescribes core tokens (colors, radii, borders), component micro-interactions, and visual algorithms such as a multi-layer text-shadow matrix for soft outline effects. It highlights integration checkpoints for localization and container layout to avoid runtime visual bugs. Implementers follow the rules to create consistent, brand-aligned UI components and assets.

When to use it

• When building new components or page templates for Project N.E.K.O.
• When theming or skinning existing UI to match the brand-blue system
• When implementing localization to avoid icon loss during translation updates
• When fixing dropdown clipping or inconsistent button interactions
• When creating marketing or in-app visuals that must match the metaverse aesthetic

Best practices

• Use a single set of CSS variables for colors, radii, and shadow parameters to ensure consistency
• Apply border-radius: 50px for all interactive elements to enforce the capsule look
• Implement the 20-layer text-shadow matrix centrally so headers share the same outline algorithm
• Preserve inline icons during i18n by updating innerHTML safely or using template-aware renderers
• Set overflow: visible on containers that host native select/dropdown elements to prevent clipping
• Standardize button interactions: hover -> translateY(-1px); active -> translateY(1px) scale(0.98)

Example use cases

• Building a reusable button library that follows capsule geometry and interaction rules
• Creating a header component that uses the 20-layer text-shadow for brand-consistent titles
• Fixing localization regressions where translated strings removed embedded SVG icons
• Designing dropdown menus inside complex layouts without clipping issues
• Onboarding new engineers with a concise checklist of visual tokens and interaction specs