# Acme Ui

> A Claude skill from vercel-labs/design-systems-to-agent-skills.

- **Type:** Skill
- **Install:** `agentstack add skill-vercel-labs-design-systems-to-agent-skills-acme-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [vercel-labs](https://agentstack.voostack.com/s/vercel-labs)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [vercel-labs](https://github.com/vercel-labs)
- **Source:** https://github.com/vercel-labs/design-systems-to-agent-skills/tree/main/example/skills/acme-ui

## Install

```sh
agentstack add skill-vercel-labs-design-systems-to-agent-skills-acme-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Acme UI Design System Skill

**Package:** `@acme/ui` v1.0.0
**Framework:** React 18 + Next.js 14 (App Router)

## Quick Start

1. Import the stylesheet in your root layout:
   ```tsx
   import '@acme/ui/styles.css'
   ```

2. Import components from subpaths:
   ```tsx
   import { Button } from '@acme/ui/components/button'
   import { Card } from '@acme/ui/components/card'
   ```

3. 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](https://github.com/vercel-labs)
- **Source:** [vercel-labs/design-systems-to-agent-skills](https://github.com/vercel-labs/design-systems-to-agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-vercel-labs-design-systems-to-agent-skills-acme-ui
- Seller: https://agentstack.voostack.com/s/vercel-labs
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.