Vibe Index
🎯

ui-design-system

🎯Skill

from davila7/claude-code-templates

VibeIndex|
What it does
|

A large collection of Claude Code skill templates sponsored by Z.AI, providing ready-to-use development skill configurations across various domains.

Overview

The UI Design System skill is part of Claude Code Templates, a comprehensive collection of ready-to-use configurations for Claude Code including 100+ AI agents, custom commands, settings, hooks, external integrations (MCPs), and project templates. It provides expertise in building and maintaining design systems to ensure consistent UI patterns across applications.

Key Features

  • Interactive Web Interface - Browse and install design system components through the interactive web interface at aitmpl.com
  • NPM CLI Installation - Install templates directly using npx claude-code-templates@latest with targeted component selection
  • 100+ Components Available - Part of a comprehensive collection spanning agents, commands, settings, hooks, and MCP integrations
  • Project Template Support - Includes design system project scaffolding templates for various frameworks and architectures
  • Partnership Integrations - Supports integrations with services like Z.AI's GLM Coding Plan for enhanced design system development

Who is this for?

This skill is for frontend developers and design engineers who build and maintain design systems and want Claude Code to provide expert guidance on UI component architecture, theming, and consistency patterns. It is also useful for teams starting new design system projects who can benefit from pre-configured templates and best practices.

πŸ“¦

Same repository

davila7/claude-code-templates(672 items)

ui-design-system

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code
npx vibeindex add davila7/claude-code-templates --skill ui-design-system
skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code
npx skills add davila7/claude-code-templates --skill ui-design-system
Manual InstallCopy SKILL.md content and save to the path below
~/.claude/skills/ui-design-system/SKILL.md

SKILL.md

842Installs
19,376
-
Last UpdatedJan 29, 2026
View on GitHubBack to Skills

More from this repository10

πŸ”Œ
devops-automationπŸ”ŒPlugin

DevOps automation suite with CI/CD, infrastructure management, and deployment orchestration

πŸ”Œ
documentation-generatorπŸ”ŒPlugin

Automated documentation generation with API docs, technical writing, and content management

πŸͺ
davila7-claude-code-templatesπŸͺMarketplace

Ready-to-use Claude Code templates organized by workflow

πŸ”Œ
nextjs-vercel-proπŸ”ŒPlugin

A Claude Code template for building production-grade Next.js applications with Vercel deployment, providing best-practice project structure, configuration, and workflow patterns.

πŸ”Œ
project-management-suiteπŸ”ŒPlugin

Project management toolkit with sprint planning, task automation, and team collaboration tools

πŸ”Œ
ai-ml-toolkitπŸ”ŒPlugin

AI and Machine Learning development suite with data engineering and model deployment tools

πŸ”Œ
testing-suiteπŸ”ŒPlugin

A Claude Code template for comprehensive testing workflows, providing pre-configured patterns for unit testing, integration testing, and end-to-end testing.

πŸ”Œ
performance-optimizerπŸ”ŒPlugin

Performance optimization suite with profiling, bundle analysis, and speed improvement tools

πŸ”Œ
git-workflowπŸ”ŒPlugin

Git workflow automation: feature, release, and hotfix commands with git specialists

πŸ”Œ
security-proπŸ”ŒPlugin

Enterprise security toolkit with auditing, penetration testing, and compliance automation