Install
$ agentstack add skill-vercel-labs-design-systems-to-agent-skills-acme-ui ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
Acme UI Design System Skill
Package: @acme/ui v1.0.0 Framework: React 18 + Next.js 14 (App Router)
Quick Start
- Import the stylesheet in your root layout:
``tsx import '@acme/ui/styles.css' ``
- Import components from subpaths:
``tsx import { Button } from '@acme/ui/components/button' import { Card } from '@acme/ui/components/card' ``
- Use design tokens via Tailwind
@theme inline:
``css @theme inline { --color-acme-blue-600: var(--acme-blue-600); --color-acme-gray-100: var(--acme-gray-100); --spacing-acme-4: var(--acme-space-4); } ` Then use as Tailwind utilities: bg-acme-blue-600, p-acme-4`.
Routing Matrix
| Task | Reference | |---|---| | Use a component | acme-ui/v1/components/{name}/react-web/api.md | | See usage examples | acme-ui/v1/components/{name}/react-web/examples/ | | Find import paths | acme-ui/v1/guides/imports.md | | Use design tokens | acme-ui/v1/guides/tokens.md | | Accessibility | guidelines/a11y.md | | Performance | guidelines/performance.md | | Security | guidelines/security.md |
Reference Structure
references/
├── guidelines/ # Cross-cutting best practices
├── acme-ui/v1/
│ ├── index.md # Component catalog + navigation
│ ├── components.md # Categorized reference
│ ├── guides/ # Tokens, imports
│ └── components/ # Per-component api + examples
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: vercel-labs
- Source: vercel-labs/design-systems-to-agent-skills
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.