🧩
FrontendTypeScript

Tutti UI System

by tutti-os

Tutti UI System is a Frontend skill for Claude Code, published by tutti-os in tutti.

3.3K stars328 forkson tutti-os/tuttiAdded 2026/08/17+1% in starsRepository updated 2026/08/17
View source on GitHubDownload repo ZIP
agent-collaborationagent-orchestrationagent-workspaceagentic-aiagentic-workflowai-agentsai-toolsai-workspaceclaude-codecodexcoding-agentdesktop-appdeveloper-toolshermes-agentlocal-firstmacos-appmcpmulti-agentshared-contextvibe-coding
Install in seconds
Install Tutti UI System
Copy Tutti UI System into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/tutti-os/tutti/tree/main/packages/ui/system/agent/tutti-ui-system ~/.claude/skills/tutti-ui-system

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/tutti-os/tutti.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
packages/ui/system/agent/tutti-ui-system/SKILL.md in tutti-os/tutti
Installs to
~/.claude/skills/tutti-ui-system
Collection
One of 8 skills cataloged from this repository
Category
Frontend — 567 skills

What Tutti UI System does

Tutti UI System guides use of the @tutti-os/ui-system component library, including reusing existing components, promoting new shared base or business components, and maintaining metadata and storyboard inventory.

Tutti UI System is cataloged under Frontend on DirSkills. Tutti UI System comes from a repository tagged agent-collaboration, agent-orchestration, agent-workspace, agentic-ai and agentic-workflow.

Documentation

README

Tutti UI System

Use this skill as the single entrypoint for @tutti-os/ui-system component reuse, extraction, promotion, metadata, and storyboard work.

Non-Negotiable Standard

Any UI promoted into @tutti-os/ui-system must fully follow the UI-system design standard before it can be reported as complete.

Treat these as hard requirements, not cleanup suggestions:

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Tutti UI System

  • What else does tutti-os publish alongside Tutti UI System?

    Tutti UI System is one of 8 skills that DirSkills catalogs from tutti-os/tutti, the repository it ships in. Its siblings there include Analyze Performance Traces, Tutti Agent Session Replay and Tutti Agent Workspace App. Each one is a separate skill with its own page in this directory, installs the same way Tutti UI System does, and is maintained by tutti-os in that same repository. The rest of the collection is listed on the tutti-os/tutti page.

  • How does Tutti UI System compare to other Frontend skills?

    Tutti UI System ranks #184 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Tutti UI System against them. Open each page to compare what they document and how they install.

More from tutti-os/tutti

Tutti UI System is one of 8 skills cataloged on DirSkills from tutti-os/tutti.

See all 8 skills →
🔍
2w ago

Analyze Performance Traces

Analyze Performance Traces audits Chrome, Chromium, Electron, React DevTools, or Perfetto-compatible JSON traces to prove trigger-to-render chains, isolate source-level bottlenecks, classify forced layout and render fanout, and apply safe fixes. Use it for trace files, reported profiling durations, dropped frames, long tasks, jank, render storms, layout thrashing, or interaction latency.
Frontend
3.3K328
🎞️
2w ago

Tutti Agent Session Replay

Tutti Agent Session Replay runs, audits, and freshly replays CDP-recorded Session Replay cassettes from case-repository scenario scripts against live AI Providers. Use it to diagnose transport or semantic-state mismatches and add support for new Agent Targets.
Quality
3.3K328
🤖
2w ago

Tutti Agent Workspace App

Tutti Agent Workspace App builds or evolves complex agent-enabled Tutti app repositories with web/server/shared monorepos, @tutti-os/agent-acp-kit local runtimes, dynamic agent catalogs, and run-scoped MCP tool gateways. Use it for full Tutti app architecture, packaging, and production validation; for simple package creation use tutti-workspace-app-factory instead.
AI Engineering
3.3K328
🚀
2w ago

Tutti App Release

Tutti App Release sets up, reviews, runs, or debugs external repositories that publish a Tutti workspace app using a reusable release workflow, including manifests, S3/CloudFront hosting, latest/versions/catalog JSON, and App Center visibility.
DevOps
3.3K328
🏛️
2w ago

Tutti Architecture Review

Tutti Architecture Review reviews Tutti git diffs for project structure, layering, module ownership, and duplicate event-center infrastructure. Use it when reviewing a Tutti change or named module for architecture compliance.
Quality
3.3K328
🧪
2w ago

Tutti Test Audit

Tutti Test Audit audits, designs, writes, revises, or removes Tutti tests. Use it when changing or reviewing unit, component, conformance, integration, regression, platform, or repository tests, enforcing protected contracts, credible failure, correct ownership, negative controls, overlap review, deterministic setup, and CI execution.
Quality
3.3K328

More Frontend skills

Tutti UI System is one of 567 Frontend skills cataloged on DirSkills, ranked #184 by stars among them.

Browse all Frontend skills →
🅰️
3w ago

Angular Developer

Angular Developer generates Angular code and provides architectural guidance for Angular projects. Use it for creating projects, components, or services, or for best practices on reactivity, forms, DI, routing, SSR, accessibility, animations, styling, testing, and CLI tooling.
Frontend
239.8K36.4K
🏗️
3w ago

Android Clean Architecture

Android Clean Architecture provides patterns for structuring Android and Kotlin Multiplatform projects, covering module boundaries, UseCases, Repositories, and data layer with Room, SQLDelight, and Ktor. Use it when setting up layered architecture in Android or KMP projects.
Frontend
239.8K36.4K
♿
3w ago

Accessibility

Accessibility helps design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards for keyboard, contrast, and screen-reader support. Use it when building or auditing UI that must meet WCAG 2.2 Level AA or reviewing changes for accessibility.
Frontend
239.8K36.4K