Add a combined stylesheet entry for package consumers

README.md

@@ -72,6 +72,24 @@ pnpm lint
 pnpm typecheck
 ```
 
+## Package consumption
+
+For package-style consumers, prefer a single CSS entrypoint from `@ai-ui/ui`:
+
+```tsx
+import { Button } from "@ai-ui/ui";
+```
+
+```css
+@import "tailwindcss";
+@import "@ai-ui/ui/styles.css";
+@source "../node_modules/@ai-ui/ui/src";
+```
+
+This keeps the app on one UI package import path while still pulling in token and skin
+styles together. Consumers that want lower-level control can still import
+`@ai-ui/tokens/styles.css` and `@ai-ui/ui/skins.css` separately.
+
 Install source-owned components into another project:
 
 ```bash

apps/docs/src/preview.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
-@import "@ai-ui/tokens/styles.css";
-@import "@ai-ui/ui/skins.css";
+@import "@ai-ui/ui/styles.css";
 @source "../../../packages/ui/src";
 
 :root {

docs/registry.md

@@ -107,6 +107,11 @@ At minimum, the consumer app should import:
 
 - `src/cadence-ui/tokens/styles.css` from its global app stylesheet or entry module
 
+For package consumers instead of source-copy installs, the equivalent convenience import
+is:
+
+- `@ai-ui/ui/styles.css`
+
 If the consumer wants the theme helpers, they can also import from:
 
 - `src/cadence-ui/tokens/index.ts`

docs/releasing.md

@@ -27,6 +27,16 @@ Changesets should currently be used for:
 - `@ai-ui/ui`
 - `@ai-ui/tokens`
 
+Package consumers should now prefer:
+
+- `@ai-ui/ui` for component imports
+- `@ai-ui/ui/styles.css` for the combined token + skin stylesheet
+
+The lower-level entries remain available when needed:
+
+- `@ai-ui/tokens/styles.css`
+- `@ai-ui/ui/skins.css`
+
 Changes to the docs app alone usually do not need a changeset.
 
 ## When to create a changeset

docs/rfcs/multi-style-architecture.md

@@ -546,7 +546,7 @@ Deliverables:
 
 Status:
 
-- not started
+- completed
 
 ## Acceptance Criteria For The First Real Milestone
 
@@ -609,6 +609,9 @@ As of 2026-03-20, the project is at this point:
 - scoped `data-motion="reduced"` now works for nested docs wrappers
 - shared skin-aware treatment now extends across the broader component library surface,
   including controls, menus, overlays, feedback, and data-heavy patterns
+- package consumers can now import a single combined stylesheet from
+  `@ai-ui/ui/styles.css`
 
-The next implementation task should be Phase 5: improve packaging and consumer
-ergonomics for style consumption.
+The original Phase 0-5 implementation sequence is now complete. Further work should be
+treated as iteration: refining skins, expanding motion packs, or hardening package and
+registry distribution.

packages/ui/package.json

@@ -8,6 +8,7 @@
   ],
   "exports": {
     ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css",
     "./skins.css": "./src/skins.css"
   },
   "files": [

packages/ui/src/styles.css

@@ -0,0 +1,2 @@
+@import "@ai-ui/tokens/styles.css";
+@import "./skins.css";