skills.rest
www-zaq-ai
www-zaq-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design

Extract UI components and migrate CSS styles using design system tokens.

66|9|Updated Feb 26, 2026
Search Tags:#design system#ui design#component extraction#liveview#back-office ui
One-click install
npx skills add https://github.com/www-zaq-ai/zaq --skill design-www-zaq-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/www-zaq-ai/zaq/tree/main/.agents/skills/design
Command: npx skills add https://github.com/www-zaq-ai/zaq --skill design-www-zaq-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

The Skill addresses the complex task of designing ZAQ back-office user interfaces by offering streamlined component creation and management.

Core Features & Use Cases

  • Component Creation: Extract inline UI elements into reusable components.
  • Design System Migrations: Migrate CSS styles using design system tokens.
  • UI Consistency: Maintain a consistent UI look and feel across various ZAQ applications.

Quick Start

Start by using the '/design' command followed by 'read' to familiarize yourself with the DESIGN.md documentation.

Frequently Asked Questions about design

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

FAQPage Schema
How do I extract inline UI elements into reusable components for back-office interfaces?▼

To migrate CSS styles using design system tokens, the Skill requires a design-first approach and manual confirmation for critical operations. This ensures accurate token application and maintains UI consistency across various ZAQ applications.

How do I migrate CSS styles using design system tokens for back-office UI?▼

To migrate CSS styles using design system tokens, the Skill requires a design-first approach and manual confirmation for critical operations. This ensures accurate token application and maintains UI consistency across ZAQ applications.

Does this UI component extraction process require Storybook integration?▼

Yes, Storybook integration is required to manage UI component extraction and design system token migration. The Skill uses this integration to maintain UI consistency and streamline ZAQ back-office interface development.

What is the best way to manage UI patterns for ZAQ back-office applications?▼

The best way to manage UI patterns is by using the '/design' command to read the DESIGN.md documentation. This provides UI pattern management and component creation to maintain consistency across ZAQ applications.

How do I maintain a consistent UI look and feel across multiple ZAQ applications?▼

To maintain a consistent UI look and feel, use the Skill to migrate CSS styles using design system tokens and manage UI patterns. This ensures uniformity across various ZAQ back-office interfaces.

Why does the design system token migration require manual confirmation?▼

Manual confirmation for design system token migration is required because the Skill enforces a design-first approach for critical operations. This prevents unintended style overrides and ensures accurate CSS migration across ZAQ interfaces.

Related Skills

Explore More Design & Creative Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
hi-yuki-922hi-yuki-922
1

i-extract

Extract reusable UI components and design tokens into a centralized design system.

Community
Intermediate
layeddielayeddie
1

liveview-patterns

Implement Phoenix LiveView UI patterns for real-time interfaces.

Community
Advanced
www-zaq-aiwww-zaq-ai
66

design-migrate

Migrate legacy CSS styles to the --zaq-* token system for ZAQ UI.

Official
Advanced