🎯

ui-design-system

🎯Skill

from hainamchung/agent-assistant

What it does

Generates comprehensive design system tokens, components, and documentation to streamline UI design workflows and enhance design-development collaboration.

📦

Part of

hainamchung/agent-assistant(227 items)

ui-design-system

Installation

npm installInstall npm package

npm install -g @namch/agent-assistant

git cloneClone repository

git clone https://github.com/hainamchung/agent-assistant.git

Node.jsRun Node.js server

node cli/install.js install cursor # Cursor

Node.jsRun Node.js server

node cli/install.js install claude # Claude Code

Node.jsRun Node.js server

node cli/install.js install copilot # GitHub Copilot

+ 7 more commands

📖 Extracted from docs: hainamchung/agent-assistant

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

Overview

# UI Design System

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

Design token generation (colors, typography, spacing)
Component system architecture
Responsive design calculations
Accessibility compliance
Developer handoff documentation

Key Scripts

design_token_generator.py

Generates complete design system tokens from brand colors.

Usage: python3 ~/.{TOOL}/skills/ui-design-system/scripts/design_token_generator.py [brand_color] [style] [format]

Styles: modern, classic, playful
Formats: json, css, scss

Features:

Complete color palette generation
Modular typography scale
8pt spacing grid system
Shadow and animation tokens
Responsive breakpoints
Multiple export formats

More from this repository10

Skill

Develops high-performance C++ applications with modern C++20/23 features, template metaprogramming, and zero-overhead systems design.

🎯

senior-architect🎯Skill

Designs scalable software architectures using modern tech stacks, generating architecture diagrams, analyzing dependencies, and providing system design recommendations.

🎯

senior-frontend🎯Skill

Generates, analyzes, and scaffolds modern frontend projects using ReactJS, NextJS, TypeScript, and Tailwind CSS with automated best practices.

🎯

spec-miner🎯Skill

Extracts and documents specifications from legacy or undocumented codebases by systematically analyzing code structure, data flows, and system behaviors.

🎯

docs-seeker🎯Skill

Searches and retrieves technical documentation by executing intelligent scripts across library sources, GitHub repos, and context7.com with automated query detection.

🎯

writing-plans🎯Skill

Generates comprehensive, step-by-step implementation plans for software features with precise file paths, test-driven development approach, and clear task granularity.

🎯

file path traversal testing🎯Skill

Tests and identifies potential file path traversal vulnerabilities in code by analyzing file path handling and input validation mechanisms.

🎯

nodejs-best-practices🎯Skill

Guides developers in making strategic Node.js architecture and framework decisions by providing context-aware selection principles and modern runtime considerations.

🎯

red-team-tactics🎯Skill

Simulates adversarial attack techniques across MITRE ATT&CK framework phases, mapping network vulnerabilities and demonstrating systematic compromise strategies.