skills.rest
hobbong21
hobbong21COMMUNITY
Explore all skills by this author →
GitHub

nuxia-design-extract

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

Updated Apr 21, 2026
Search Tags:#responsive#tailwind#ux-design#design-system#design-token#capacitor#commerce-ui
One-click install
npx skills add https://github.com/hobbong21/nuxia2 --skill nuxia-design-extract
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxia-design-extract
Source: https://github.com/hobbong21/nuxia2/tree/main/.claude/skills/nuxia-design-extract
Command: npx skills add https://github.com/hobbong21/nuxia2 --skill nuxia-design-extract

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill translates Nuxia's design language into practical design tokens, component references, and responsive specs for commerce-focused hybrid apps, enabling faster handoffs between design and development.

Core Features & Use Cases

  • Design Token Extraction: Generate a tokens JSON mapping colors, typography, spacing, radii, and shadows from the observed design language.
  • Component Catalog: Produce a catalog of UI primitives customized for commerce contexts (Button, ProductCard, etc.) with responsive variants.
  • Responsive Specs: Define mobile-first breakpoints and Tailwind mappings to ensure consistent rendering across devices.
  • Use Case: A designer hands off a Nuxia homepage concept; the skill outputs tokens + component references that developers implement in Tailwind and Capacitor-ready layouts.

Quick Start

Analyze the Nuxia site design language and generate design tokens, component references, and responsive specs ready for Tailwind mapping.

Frequently Asked Questions about nuxia-design-extract

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

FAQPage Schema
How do I extract design tokens from a UI concept for Tailwind and Capacitor?▼

Design token extraction for Tailwind and Capacitor involves analyzing a UI concept's colors, typography, spacing, radii, and shadows, then translating them into a structured JSON format. This outputs actionable tokens, a component catalog, and responsive breakpoint specs for commerce apps.

What are design tokens and how do they work for responsive commerce apps?▼

Design tokens are structured JSON variables encoding UI decisions like colors, typography, and spacing. For responsive commerce apps, they map to Tailwind breakpoints to ensure consistent rendering across mobile and desktop devices while maintaining a unified design system.

Can I generate a component catalog for commerce UI using extracted design tokens?▼

Yes, you can generate a component catalog for commerce UI using extracted design tokens. The process produces UI primitives like Buttons and ProductCards with responsive variants, customized specifically for commerce contexts and mobile-first implementation.

Does this design token extraction approach work with Tailwind mappings?▼

Yes, the design token extraction approach works with Tailwind mappings by defining mobile-first breakpoints and translating the observed design language into Tailwind-compatible specs. This ensures consistent rendering across devices within hybrid app environments.

How do I hand off design specs to developers for hybrid commerce apps?▼

To hand off design specs for hybrid commerce apps, provide developers with a tokens JSON, a component catalog, and responsive documentation. This translates the design language into Capacitor-ready layouts, enabling faster and more accurate implementation.

Related Skills

Explore More Design & Creative Skills→
matteotittamatteotitta
29

figma-to-prototype

Convert Figma design mockups into HTML or React prototypes.

Community
Advanced
inpinitiinpiniti

shadcn

Provide pre-built shadcn/ui component definitions and implementations for json-render.

Community
Intermediate
Cap-goCap-go
58

tailwind-capacitor

Style Capacitor mobile apps with Tailwind CSS utilities.

Official
Intermediate
yonatangrossyonatangross
217

figma-design-handoff

Extract Figma design tokens and generate TypeScript component interfaces.

Community
Advanced