NVIDIA Elements
AI/ML 팩토리, 로보틱스 및 자율주행 차량을 위한 NVIDIA 디자인 시스템 및 UI 에이전트 하네스.
- 에이전트 준비 완료 도구(Agent-ready tooling): CLI와 MCP는 컴포넌트 API, 토큰, 예제, 임포트, 유효성 검사 및 설정을 터미널과 AI 어시스턴트에 노출합니다.
- 프레임워크에 구애받지 않음(Framework agnostic): Web Components는 React, Angular, Vue, Svelte, Lit, 일반 HTML, 서버 렌더링된 템플릿 및 혼합 스택에서 실행됩니다.
- AI 인프라를 위해 구축됨: AI/ML 워크로드, 자율주행 차량 도구, 로보틱스 콘솔용 운영 UI.
- 안정적인 API 계약(Stable API contracts): Skills와 lint는 작성 모범 사례, 일반적인 UI 패턴 및 자동화된 정적 분석을 안내합니다.
NVIDIA Elements 스킬
오픈 skills CLI를 사용하여 Elements 에이전트 스킬을 설치하세요:
npx skills add https://github.com/nvidia/elements --skill elements
요청 및 기여 (Requests and Contributions)
구성 (Organization)
이 저장소는 최상위 **저장소(repository)**와 개별 프로젝트(project) 디렉토리를 사용합니다.
프로젝트 디렉토리에는 자체 package.json과 명령어가 있습니다. CI 및 개발 설정은 루트 저장소(repository) 레벨에서 실행하세요.
프로젝트 예시:
/projects/starters - Elements와 Patterns를 위한 표준화된 스타터 앱 모음집/projects/core - Elements 라이브러리: Elements 팀이 관리하는 큐레이션된 UI/projects/themes - Elements 테마 라이브러리: Element 기반 프로젝트에 대한 지원되는 테마 세트 제공/projects/styles - Elements 스타일 라이브러리: 레이아웃 및 타이포그래피를 위한 CSS 유틸리티 세트 제공
개발 (Development)
설정 (Setup)
저장소 종속성을 설정하고 전체 빌드를 실행하려면, 저장소의 루트 디렉토리에서 다음 명령을 실행하십시오:
CI 파이프라인은 Go 스타터도 빌드합니다. 전체 로컬 CI 파이프라인을 실행하기 전에 Go 1.26.x를 설치해야 합니다.
# 종속성 설치 https://mise.en.dev/getting-started.html
curl https://mise.run | sh
~/.local/bin/mise run setup
문제 해결 (Troubleshooting)
다른 저장소에서 개발을 진행한 경우, mise으로 저장소 툴체인을 새로 고쳐야 할 수 있습니다. 프로젝트 루트에서 mise run install을 실행하여 mise.toml 및 pnpm-lock.yaml에 지정된 Node.js, pnpm, Vale, Go, Git LFS 및 패키지 버전을 설치하십시오.
다른 저장소 간을 활발하게 전환하는 경우, mise exec --를 통해 명령을 실행하거나 셸에서 mise을 활성화하여 도구가 자동으로 전환되도록 하십시오.
빌드 (Building)
최상위 저장소와 각 프로젝트 모두 표준화된 npm 스크립트 세트를 가지고 있습니다. 모든 프로젝트를 빌드하고 테스트하려면, 저장소 루트에서 mise exec -- pnpm run ci를 실행하십시오.
최상위 저장소 (Top-Level Repository)
ci: 전체 빌드/린팅/테스트 실행ci:all: 전체 CI 프로세스: 빌드, 린트, 단위 테스트/라이트하우스/시각적 테스트ci:reset: 모든 캐시/종속성을 정리한 후 종속성 재설치
개별 프로젝트 (Individual Projects)
일반적인 프로젝트 스크립트는 다음과 같습니다:
dev: 워치 모드(watch mode)로 실행build: 프로젝트/라이브러리 빌드 실행test: 단위 테스트 실행test:lighthouse: 라이트하우스 성능 테스트 실행test:visual: playwright 시각적 회귀 테스트 실행test:axe: a11y를 위한 axe 테스트 실행
사용 가능한 스크립트는 프로젝트마다 다릅니다. 프로젝트별 명령을 실행하기 전에 해당 프로젝트의 package.json을 확인하십시오.
저장소 빌드 및 런타임 흐름에 대한 자세한 내용은 빌드 시스템 문서를 참조하십시오.
워크플로우 (Workflow)
브랜치나 Pull Request를 생성하기 전에 먼저 새 이슈 또는 기능 요청을 작성하여 팀이 정렬 상태를 확인하고 중복 작업을 방지하도록 하세요.
브랜치 생성 (Create a Branch)
topic/ 접두사를 사용하여 설명적인 브랜치 이름을 사용하세요. 예시: topic/bug-fix.
git checkout -b topic/bug-fix
브랜치를 생성한 후, 소스 코드 변경 사항을 적용합니다. 완료되면 리포지토리 루트에서 mise exec -- pnpm run ci를 실행하여 모든 빌드와 테스트를 진행하세요. 모든 테스트가 통과하면 PR 생성을 할 준비가 된 것입니다.
커밋 메시지 (Commit Messages)
이 리포지토리는 패키지 변경 관리를 위해 Semantic Release를 사용합니다. 커밋 메시지는 병합(merge) 시 릴리스 버전을 결정합니다. Commit Lint는 커밋 형식을 강제합니다.
git commit -a -s -m "fix(core): disable multi-select"
예시 커밋
| 유형 (Types) | 설명 (Description) |
|---|
fix | 버그 수정, 성능 개선 등 |
| ... | |
| 범위 (Scopes) | 설명 (Description) |
| ----------- | ------------------------------ |
ci | CI 및 릴리스 자동화 |
| ... | |
커밋 이름은 변경 사항에 초점을 맞추세요. 릴리스 프로세스는 다음 릴리스와 생성된 변경 로그(changelog notes)를 결정하기 위해 커밋 메시지를 사용합니다.
Pull Request 열기 (Opening a Pull Request)
로컬 브랜치에 변경 사항을 커밋했다면, 이를 원격 GitHub 저장소에 푸시하세요.
git push --set-upstream origin topic/bug-fix
GitHub에서 새로운 Pull Request를 여세요. 팀원들에게 검토를 요청하고, GitHub UI에서 type:fix 및 scope(core)와 같은 적절한 레이블을 적용하세요.
커밋 수정 (Amending Commit)
수정 요청 사항이 있는 경우, 해당 수정 사항을 로컬에서 적용하고 커밋을 수정(amend)하세요.
git commit -a --amend --no-edit
이렇게 하면 변경 사항이 기존 커밋에 추가됩니다. 그런 다음 업데이트된 커밋을 원격 브랜치로 다시 푸시하여 검토를 받으세요.
git push --force origin topic/bug-fix
커밋 리베이스 (Rebasing Commit)
PR 승인 전에 main 브랜치에 변경 사항이 있다면, 로컬 브랜치를 리베이스하여 main의 최신 변경 사항을 포함시키세요.
git checkout main # main 브랜치로 전환
git pull # 새로운 변경 사항 당기기
git checkout topic/bug-fix # 토픽 브랜치로 다시 전환
...
이 과정에서 발생하는 모든 병합 충돌(merge conflict)을 해결해야 할 수 있습니다. 완료되면, 업데이트된 브랜치를 원격 저장소로 다시 푸시하여 검토를 받으세요.
새 프로젝트 (New Project)
새 프로젝트를 생성할 때(예: ./projects/code), 루트 디렉토리에 위치한 pnpm-workspace.yaml에 해당 프로젝트를 추가했는지 확인하세요.
릴리스 (Release)
승인 후, GitHub UI를 통해 Pull Request를 main에 병합하세요. GitHub Actions가 자동으로 새 릴리스를 트리거합니다. Semantic Release는 커밋 유형으로부터 버전을 계산합니다. 또한 변경 로그(changelog)에는 PR의 커밋 내용도 포함됩니다.