# Component Reference Design

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-vanszs-anti-ai-ui-component-reference-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Vanszs](https://agentstack.voostack.com/s/vanszs)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Vanszs](https://github.com/Vanszs)
- **Source:** https://github.com/Vanszs/Anti-AI-UI/tree/main/component-reference-design

## Install

```sh
agentstack add skill-vanszs-anti-ai-ui-component-reference-design
```

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

## About

# Component Reference Design — Positive Pattern Library

## Purpose
A **reference of what good looks like**, sourced from trusted design systems.
Where `Anti-AI-Slop` tells you what to AVOID, this skill shows you what to BUILD:
modern layouts, varied section anatomies, proven type systems, every card and
component variant, and tasteful accessible motion — all copy-pasteable and a11y-correct.

> Use the two skills together: **Anti-AI-Slop = the filter, Component Reference = the palette.**

## How To Use This Skill
1. Identify what you're building (a page layout? a card? a form? a nav?).
2. Open the matching reference file (see Category Map) and pick a pattern by its
   **when-to-use** note — not by "what looks coolest in isolation."
3. Copy the concrete markup; swap in real content, brand color, and a non-Inter
   display font.
4. Apply the **Anti-Monotony Rules** below so the page doesn't feel templated.
5. Run the Anti-AI-Slop **Pre-Delivery Audit** before shipping.

## Category Map (where to look)

| You're building… | Open | Contains |
|------------------|------|----------|
| Page/app skeleton, grid, responsive structure | `references/layouts.md` | Holy-grail, sidebar shell, dashboard, split-screen, full-bleed, bento, masonry, magazine, asymmetric, sticky-aside, container-query, Z/F patterns, Every-Layout primitives |
| Type scale, font pairing, fluid type | `references/typography.md` | 8+ display+body pairings, modular scales (1.2/1.25/1.333), clamp() recipes, per-role leading/measure/tracking, Tailwind config, MUI/MD3/Apple/Carbon scales compared |
| Card, button, form, nav, table, list, badge | `references/components.md` | Card variants (17), buttons (10), form controls (13), navigation (13), data-display (16) |
| Modal, drawer, toast, tooltip, popover, animation | `references/animation.md` | Overlay/feedback components + tasteful motion patterns (timing, easing, reduced-motion, 13 motion recipes) |
| Choosing a library / design tokens | `references/design-systems.md` | 18 design-system index (ecosystem, styling, a11y, theming, license, URL) + W3C DTCG tokens + decision matrix |
| Charts, graphs, KPI cards, sparklines, data-viz | `references/charts.md` | Beautiful modern Recharts patterns: color systems (teal/Okabe-Ito/OKLCH), premium chrome (custom tooltip/legend/axes/grid), bar/line/area/donut/radial, KPI+sparkline cards, specialty (heatmap/treemap/funnel/radar/scatter/bullet/waffle), motion, dark-mode/responsive, a11y, 15-point anti-slop scan |
| Admin dashboard — app shell, sidebar, topbar, widgets, tables, filters | `references/dashboards.md` | Modern clean admin dashboard: 15 clean-dashboard principles, app shell (grid sidebar+header), sidebar nav (collapsible/rail/groups/footer), topbar (breadcrumb/⌘K search/notif/avatar/org-switcher), command palette, grid composition (KPI→hero+side→table, bento), KPI/stat cards (delta inversion), chart placement/chrome, filters & toolbar (date-range/segmented/chips/saved-views), data table (TanStack/density/sort/selection/pagination), all states (skeleton/empty/error/zero), 3-tier color tokens + dark, anti-pattern cheat sheet |

## The Anti-Monotony Rules (apply to every multi-section page)
1. **Never repeat the same section anatomy consecutively.** Vary: centered → split → bento → stats-bar → full-bleed → alternating.
2. **Vary container widths by content** — text `max-w-3xl`, grids `max-w-6xl`, ≥1 full-bleed break per page.
3. **Vary section padding** — hero `py-32`, features `py-16`, CTA `py-12`. Never one uniform `py-20`.
4. **One dominant element per section** — size/weight ≥1.5× its neighbours.
5. **Break rhythm every 2–3 sections** — a full-bleed image, colour block, or stats bar.
6. **Mix grid structures** — 2-col, 4-col, asymmetric spans; a bento needs a real 2×2 dominant cell (else it's just a card grid).
7. **≥2 deliberate asymmetric moments per page** — unequal columns, off-centre headings, left-aligned text.

## Proven Storytelling Sequence (Evil Martians, 100 dev-tool landing pages)
`Hero (what is it?) → Trust (who uses it?) → Features (what/why?) → Social proof (what do users say?) → Supporting (FAQ / comparison / pricing) → Final CTA (what now?)` — with each section using a DIFFERENT anatomy.

## Non-Negotiable Quality Bar (every pattern here already follows it)
- **Semantic HTML first** — ``, ``, ``, ``, ``, ``, `` before div-soup.
- **Accessible by default** — labels wired, `aria-*` present, focus-visible rings, keyboard reachable, focus trap on modals.
- **`prefers-reduced-motion`** gates every spatial animation.
- **Radius is a scale** — inputs/buttons `rounded-md`, cards `rounded-lg`, modals `rounded-xl`, pills `rounded-full`.
- **Type** — distinctive display font (NOT Inter-everywhere), modular scale, `max-w-prose` body, 2–3 weights.
- **Motion budget** — hovers 100–150ms, entrances 200–300ms, exits faster; `transform`+`opacity` only.
- **WCAG AA contrast** — 4.5:1 body, 3:1 large/UI; test light + dark.

## Trusted Sources (full index in `references/design-systems.md`)
MUI · shadcn/ui · Radix Primitives & Themes · Headless UI · Ant Design · Chakra UI ·
Mantine · Tailwind UI · Material Design 3 · Apple HIG · IBM Carbon · Atlassian ·
Polaris (Shopify) · Fluent (Microsoft) · Base Web (Uber) · Park UI / Ark UI · daisyUI ·
Tremor · TanStack Table · Recharts · NNG · Refactoring UI · Every-Layout · Josh Comeau ·
Framer Motion / Motion · Emil Kowalski (Sonner, Vaul) · cmdk · W3C WAI-ARIA APG · W3C DTCG.

## Output Expectations
Use these patterns as a starting point, then make ≥1 deliberate, content-specific
choice per section (color, type, layout variation). The result should read as
**intentional, branded, varied, accessible, production-ready** — never templated.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Vanszs](https://github.com/Vanszs)
- **Source:** [Vanszs/Anti-AI-UI](https://github.com/Vanszs/Anti-AI-UI)
- **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-vanszs-anti-ai-ui-component-reference-design
- Seller: https://agentstack.voostack.com/s/vanszs
- 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%.