Agent skill

design-system-library

Design system selection and implementation helper. Detects and recommends UI libraries (MUI, Tailwind, shadcn/ui, etc.) based on project context.

View SKILL.md on GitHub Repository
Stars 14
Forks 2

Install this agent skill to your Project

npx add-skill https://github.com/nguyenthienthanh/aura-frog/tree/main/aura-frog/skills/design-system-library

SKILL.md

Skill: Design System Library

Category: Implementation Skill

Purpose

Help select and implement design systems. For up-to-date library documentation, use Context7.

How to Use

"Build a login form with Material UI" use context7
"Create dashboard with Ant Design" use context7
"Style with Tailwind" use context7

Context7 fetches current, version-specific documentation automatically.

Design System Selection

toon
systems[10]{system,best_for,platform}:
  Material UI (MUI),Google ecosystem + enterprise,React/Next.js
  Ant Design,Data-heavy enterprise apps,React/Vue
  Tailwind CSS,Utility-first flexibility,All frameworks
  shadcn/ui,Modern React + full control,React/Next.js
  Chakra UI,Accessible + great DX,React/Next.js
  NativeWind,Tailwind for mobile,React Native
  Bootstrap,Quick prototyping,All frameworks
  Mantine,Full-featured + dark mode,React/Next.js
  Radix UI,Headless primitives,React
  Headless UI,Tailwind Labs headless,React/Vue

Auto-Detection

Detect from package.json:

toon
detection[8]{package,system}:
  @mui/material,Material UI
  antd,Ant Design
  tailwindcss,Tailwind CSS
  @chakra-ui/react,Chakra UI
  nativewind,NativeWind
  @radix-ui/*,Radix UI
  @headlessui/react,Headless UI
  @mantine/core,Mantine

Quick Selection

Use Case Recommendation
Enterprise Ant Design, MUI, Mantine
Modern Web Tailwind + shadcn/ui
Mobile (RN) NativeWind
Prototyping Bootstrap, Tailwind

For implementation details: Add "use context7" to fetch current library docs.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

nguyenthienthanh/aura-frog

scalable-thinking

Design for scale while keeping implementation simple (KISS).

14 2
Explore
nguyenthienthanh/aura-frog

debugging

Systematic debugging with root cause investigation. NO fixes without understanding cause first.

14 2
Explore
nguyenthienthanh/aura-frog

migration-helper

Guide safe database and code migrations with zero-downtime strategies.

14 2
Explore
nguyenthienthanh/aura-frog

testing-patterns

Unified testing patterns across all frameworks. Provides consistent test structure, naming, and best practices for Jest, Vitest, Pytest, PHPUnit, Go testing, and more.

14 2
Explore
nguyenthienthanh/aura-frog

phase1-lite

Ultra-compact Phase 1 requirements output. HARD CAP: 500 tokens.

14 2
Explore
nguyenthienthanh/aura-frog

stitch-design

Generate UI designs using Google Stitch AI with optimized prompts

14 2
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results