skills.rest
andrewnovykov
andrewnovykovCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ux-ui

Enforce Soft Modern design tokens and Tailwind mappings across HeadsUp pages and components.

Updated Feb 9, 2026
Search Tags:#ui#frontend#responsive#ux#design-system#heads_up
One-click install
npx skills add https://github.com/andrewnovykov/total-66 --skill ux-ui-andrewnovykov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-ui
Source: https://github.com/andrewnovykov/total-66/tree/main/.claude/skills/ux-ui
Command: npx skills add https://github.com/andrewnovykov/total-66 --skill ux-ui-andrewnovykov

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides a structured workflow to deliver consistent UI/UX improvements across HeadsUp by enforcing the Soft Modern design system and enabling cross-page/component alignment.

Core Features & Use Cases

  • Design-system enforcement across pages and components
  • UI auditing against the Soft Modern standard
  • Updating design documentation in project_doc/docs/design/
  • Building and refactoring reusable Phoenix function components with mobile-first responsive patterns
  • Guiding design decisions during redesigns, component extraction, and documentation updates

Quick Start

Describe a mobile-first HeadsUp UI redesign task following the Soft Modern design language.

Frequently Asked Questions about ux-ui

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

FAQPage Schema
How do I align UI components with a design system during a HeadsUp redesign?▼

Align UI components with a design system during a HeadsUp redesign by enforcing the Soft Modern design language, applying 24px card radii, shadow tokens, and Tailwind mappings derived from project design tokens.

What is the Soft Modern design language for mobile-first responsive layouts?▼

The Soft Modern design language for mobile-first responsive layouts is a standard enforcing 24px card radii, shadow tokens, and Tailwind mappings to ensure consistent cross-page UI alignment during component extraction and redesigns.

How do I audit UI pages against design tokens and documentation?▼

Audit UI pages against design tokens by consulting design docs at project_doc/docs/design/ and page specs, checking components against the Soft Modern standard, and updating documentation to reflect required 24px card radii and shadow tokens.

Can I use Phoenix function components with Tailwind mappings for UI refactoring?▼

Yes, you can build and refactor reusable Phoenix function components using mobile-first responsive patterns, applying Tailwind mappings generated from design tokens to maintain design-system alignment across pages.

When do I need to update design documentation for HeadsUp UI components?▼

You need to update design documentation for HeadsUp UI components during redesigns, component extraction, and audits, ensuring project_doc/docs/design/ accurately reflects the Soft Modern design language, tokens, and responsive layout specs.

Related Skills

Explore More Design & Creative Skills→
hobbong21hobbong21

nuxia-design-extract

Extract Nuxia design tokens into JSON with Tailwind mappings and responsive specs.

Community
Advanced
nicoarbelaeznicoarbelaez

tailwind-css-patterns

Standardize UI styling with reusable Tailwind CSS patterns for React, Vue, and Svelte components.

Community
Intermediate
imehrimehr
1

design-system-modern-oklch

Create OKLCH design systems with Tailwind v4 tokens and Shadcn components.

Community
Advanced
yfyang86yfyang86
1

dennis-ritchie-perspective

Apply Dennis Ritchie's mental models to system design and language architecture decisions.

Community
Basic