frontend-design-system
π―Skillfrom supercent-io/skills-template
|Generates and manages a consistent, reusable frontend design system with standardized components, styles, and design tokens across a web application project.
Installation
npx skills add https://github.com/supercent-io/skills-template --skill frontend-design-systemSkill Details
Overview
# Agent Skills
> Claude Code μ€μ¬μ Multi-Agent μν¬νλ‘μ° μμ€ν (Gemini-CLI + Codex-CLI + OpenContext ν΅ν©)
> Claude Code μμ κ°μ΄λ 70κ°μ§ ν μ μ© - μμ΄μ ν± κ°λ° μ μ± κ°ν
[](LICENSE)
[](.agent-skills/)
[](CLAUDE.md)
[](.agent-skills/scripts/generate_compact_skills.py)
[](#-ai-agent-installation)
---
Prerequisites (μ¬μ μꡬμ¬ν)
> β οΈ μ€μ: μλ μꡬμ¬νμ΄ μΆ©μ‘±λμ§ μμΌλ©΄ μ€μΉκ° μ€ν¨ν©λλ€.
macOS (νμ)
```bash
# 1. Xcode Command Line Tools (νμ - μμΌλ©΄ npm/git λ±μ΄ λμνμ§ μμ)
xcode-select --install
# 2. Node.js (Homebrew κΆμ₯)
brew install node
# 3. μ€μΉ νμΈ
node --version && npm --version
```
μ¦μ: xcode-select: error: command line tools are already installed λλ μ€μΉ μ°½μ΄ μ λΈ
ν΄κ²° λ°©λ²:
```bash
# λ°©λ² 1: κΈ°μ‘΄ μ€μΉ μ κ±° ν μ¬μ€μΉ
sudo rm -rf /Library/Developer/CommandLineTools
xcode-select --install
# λ°©λ² 2: Apple κ°λ°μ μ¬μ΄νΈμμ μ§μ λ€μ΄λ‘λ
open https://developer.apple.com/download/more/
# "Command Line Tools for Xcode" κ²μ ν λ€μ΄λ‘λ
```
```bash
# Homebrew μ€μΉ
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# PATH μ€μ (Apple Silicon Mac)
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc
source ~/.zshrc
```
Linux (Debian/Ubuntu)
```bash
# 1. λΉλ λꡬ μ€μΉ
sudo apt-get update
sudo apt-get install -y build-essential curl git
# 2. Node.js 20.x μ€μΉ
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
# 3. μ€μΉ νμΈ
node --version && npm --version
```
```bash
# nvm μ€μΉ
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
# Node.js μ€μΉ
nvm install 20
nvm use 20
```
Windows (WSL2 κΆμ₯)
```powershell
# 1. WSL2 μ€μΉ
wsl --install
# 2. Ubuntu μ€μΉ ν μ¬λΆν
# 3. Ubuntu ν°λ―Έλμμ Linux κ°μ΄λ λ°λ₯΄κΈ°
```
```powershell
# Node.js μ€μΉ (곡μ μ¬μ΄νΈ)
# https://nodejs.org/en/download/ μμ LTS λ²μ λ€μ΄λ‘λ
# Git Bash μ€μΉ
# https://git-scm.com/download/win μμ λ€μ΄λ‘λ
# PowerShellμμ μ€ν μ μ± μ€μ
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
```
> β οΈ Windows λ€μ΄ν°λΈλ μΌλΆ μ€ν¬λ¦½νΈκ° νΈνλμ§ μμ μ μμ΅λλ€. WSL2 μ¬μ©μ κΆμ₯ν©λλ€.
---
π AI Agent Installation
> LLM κΈ°λ° μ€μΉλ₯Ό μ§μν©λλ€. μλΌμ΄λ λͺ λ Ή λλ AI μμ΄μ νΈ ν둬ννΈλ‘ μ€μΉνμΈμ.
One-Liner μ€μΉ (κΆμ₯)
#### κΈλ‘λ² μ€μΉ (~/.agent-skills) - κΈ°λ³Έκ°
```bash
curl -fsSL https://raw.githubusercontent.com/supercent-io/skills-template/main/install.sh | bash
```
> μ€μΉ ν νμ:
> ```bash
> echo 'source ~/.agent-skills/mcp-shell-config.sh' >> ~/.zshrc && source ~/.zshrc
> ```
#### νλ‘μ νΈ λ‘컬 μ€μΉ (μ ν)
```bash
curl -fsSL https://raw.githubusercontent.com/supercent-io/skills-template/main/install.sh | INSTALL_GLOBAL=false bash
```
μ¦μ: curl: (7) Failed to connect λλ SSL certificate problem
ν΄κ²° λ°©λ²:
```bash
# λ°©λ² 1: HTTPS μΈμ¦μ λ¬Έμ μ°ν (μμ)
curl -fsSLk https://raw.githubusercontent.com/... | bash
# λ°©λ² 2: μλ λ€μ΄λ‘λ ν μ€ν
wget https://raw.githubusercontent.com/supercent-io/skills-template/main/install.sh
chmod +x install.sh && ./install.sh
```
μ¦μ: npm ERR! Error: EACCES: permission denied
ν΄κ²° λ°©λ²:
```bash
# npm κΈλ‘λ² λλ ν 리 λ³κ²½
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc
source ~/.zshrc
# λ€μ μ€μΉ μλ
curl -fsSL https://raw.githubusercontent.com/supercent-io/skills-template/main/ins
More from this repository10
Generates comprehensive testing strategies and methodologies for software development projects, providing structured guidance on test design, coverage, and implementation approaches across differen...
Generates and renders professional video content using Remotion, automating video production workflows with customizable templates and programmatic video creation.
Analyzes code repositories and provides actionable security recommendations, identifying potential vulnerabilities, misconfigurations, and suggesting best practices for improving overall code secur...
Quickly search and navigate through codebases by filename, function, class, and code snippet with advanced filtering and context retrieval.
Generates high-quality images using multi-conditional prompting with advanced AI models and customizable generation parameters
Streamlines marketing workflows by providing reusable templates, analytics scripts, and campaign management tools for digital marketing professionals
Provides a standardized template for creating cross-platform skills with consistent structure, dependencies, and deployment configurations.
Automates PowerPoint presentation creation by generating slides, adding content, and applying design templates with customizable parameters
Automates BigQuery data visualization and reporting in Looker Studio with predefined templates and seamless data connection workflows
Prepares and validates the development environment by checking and installing necessary system dependencies like Xcode, Node.js, and build tools across macOS, Linux, and Windows platforms.