Playgrounds
Relevant source files
The following files were used as context for generating this wiki page:
Playgrounds are dedicated workspaces within the monorepo designed exclusively for local development, visual testing, and verification of packages and CLI tools. They serve as isolated environments where developers can fine-tune animations, verify component behavior, or ensure that data extraction tools function correctly before integration into main applications.
These environments are explicitly marked for local development and testing purposes only, ensuring that experimental code or heavy testing configurations do not interfere with the production-ready apps or core library packages.
Sources: README.md:27-31, CLAUDE.md:38-41, packages/ui-craft/README.md:12-14
Architecture and Workspace Integration
Playgrounds are integrated into the monorepo via bun workspaces and managed by Turborepo. They are located in the playgrounds/ directory and often depend on internal packages using the workspace:* versioning pattern.
The following diagram illustrates how Playgrounds sit alongside Apps and Packages in the project hierarchy:
The Playgrounds utilize internal workspace packages to provide a live testing environment for library development.
Sources: package.json:44-48, CLAUDE.md:19-41, playgrounds/ui-craft-playground/package.json:20-22
Key Playground Modules
UI Craft Playground
The ui-craft-playground is a Next.js-based environment used specifically for testing components from the @siluat/ui-craft library. Its primary purpose is visual testing and the fine-tuning of animation parameters using Framer Motion and TailwindCSS.
- Technology Stack: Next.js 15, React 19, TailwindCSS 4, Radix UI.
- Key Dependencies:
@siluat/ui-craft,@siluat/shadcn-ui,framer-motion,lucide-react. - Purpose: Fine-tuning animation parameters and verifying component rendering.
Sources: playgrounds/ui-craft-playground/package.json:1-36, packages/ui-craft/README.md:12-14, CLAUDE.md:40-41
Animation Practice
This playground focuses on educational and experimental animation work. It includes specific practices from external courses, such as "Animation on the Web," and provides a structured way to add new practice modules through a sidebar configuration.
- Structure: Workspaces are organized under
app/(workspaces)/**. - Configuration: New practices are registered in
app/_config/sidebar.config.ts.
Sources: playgrounds/animation-practice/README.md:1-12
Noumenon Gleaner Runner
A specialized testing environment for the noumenon-gleaner Rust CLI tool. Unlike the UI playgrounds, this is a runner package used to verify that the data extraction and TypeScript schema generation logic works correctly via npm scripts.
Sources: README.md:34, CLAUDE.md:41
Development Workflow
Playgrounds are managed using standard monorepo commands. Developers typically use turbo dev to start development servers across the workspace, including the playgrounds.
| Task | Command | Description |
|---|---|---|
| Start Development | turbo dev | Runs dev servers for apps and playgrounds. |
| Specialized UI Dev | bun dev:ui-craft | Specific command for UI craft development workflow. |
| Build Playground | next build | Standard Next.js build command within the playground directory. |
| Type Check | tsc --noEmit | Verifies TypeScript integrity within the playground. |
Sources: CLAUDE.md:6-9, packages/ui-craft/README.md:8-10, playgrounds/ui-craft-playground/package.json:8-14
Configuration and Tooling
Playgrounds share the project's global code quality standards and configurations. They utilize Biome for linting and formatting and depend on @siluat/typescript-config for shared TS settings.
Playgrounds act as the bridge between raw package code and verified functionality in a simulated application environment.
Sources: CLAUDE.md:43-58, playgrounds/ui-craft-playground/package.json:28-30, package.json:16-24
Summary
Playgrounds are an essential part of the @siluat/web-projects development lifecycle. By providing isolated environments like ui-craft-playground and noumenon-gleaner-runner, the project ensures that UI animations and CLI tools are rigorously tested and visually verified in a local environment before being consumed by production applications like dotori-note or noumenon-front.