New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Tutti UI System

by tutti-os in tutti-os/tutti

A skill your agent uses when working with @tutti-os/ui-system components, replacing local UI with shared components, querying component ids or metadata, promoting UI into shared base or business…

Apache-2.0Auto-check passedMedia & Creative

Install Tutti UI System

skills CLI
$ npx skills add tutti-os/tutti --skill tutti-ui-system -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install tutti-os/tutti tutti-ui-system --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/tutti-os/tutti.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/ui/system/agent/tutti-ui-system .claude/skills/tutti-ui-system && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
tutti-ui-system
GitHub stars
3.8k
Token cost
~2.7k tokens
SKILL.md length
1,390 words
Files
6 (incl. scripts, references)
Skills in repo
8
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when working with @tutti-os/ui-system components, replacing local UI with shared components, querying component ids or metadata, promoting UI into shared base or business…

  • Works in 4 steps: nearest AGENTS.md for the target code → local AGENTS.md bundled with this skill → local ui-system.md bundled with this skill → …
  • Working with @tutti-os/ui-system components
  • SKILL.md covers Non-Negotiable Standard, Source Of Truth, Route The Task and Global Boundaries, plus 3 more sections
  • Runs JavaScript scripts from its folder; calls pnpm and node

What it does

Tutti UI System is an agent skill from tutti-os/tutti. Use when working with @tutti-os/ui-system components, replacing local UI with shared components, querying component ids or metadata, promoting UI into shared base or business components, or maintaining UI-system storyboard inventory.

Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including scripts and reference files (for example `references/extract-base-component.md`, `references/maintain-inventory.md` and `references/promote-business-component.md`).

It sits in Media & Creative, covering Comics and storyboards. The repository describes itself as: Where people and agents build in tune. The licence is Apache-2.0.

When your agent uses it

  • Working with @tutti-os/ui-system components
  • Replacing local UI with shared components
  • Querying component ids
  • Promoting UI into shared base

Example prompts

  • “/tutti-ui-system”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. nearest AGENTS.md for the target code
  2. local AGENTS.md bundled with this skill
  3. local ui-system.md bundled with this skill
  4. component metadata from the first available source

What it can do on your machine

Read from SKILL.md and the folder at commit 207beee. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • pnpm
    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tutti UI System loads about 2.7k tokens when it runs, and up to ~8.1k if it reads all its reference files. Until then it costs about 62 tokens; SKILL.md has 1,390 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~62
When it runs · the whole SKILL.md, loaded when a task matches
~2.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from tutti-os/tutti at commit 207beee, republished under its Apache-2.0 licence (© tutti-os). 1,390 words, ~2,704 tokens.

Download SKILL.mdSave it as .claude/skills/tutti-ui-system/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
tutti-ui-system
description
Use when working with @tutti-os/ui-system components, replacing local UI with shared components, querying component ids or metadata, promoting UI into shared base or business components, or maintaining UI-system storyboard inventory.

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:

  • use UI-system semantic tokens and existing shared CSS variables; do not leave raw hex, rgb(...), rgba(...), ad hoc gradients, or app-local palette values in promoted components or their storyboard examples unless the source of truth already exposes them as approved tokens
  • compose existing UI-system base primitives such as Card, Button, Tooltip, Dialog, and related vocabulary before creating custom panel, button, field, or overlay treatments
  • use icon components from @tutti-os/ui-system/icons for promoted components and storyboard examples. Do not inline SVG/data URI assets, import app-local icon files, or pull third-party icon packages directly from promoted UI. If the source UI depends on an icon that is not in the UI system, promote the source-derived icon into packages/ui/system/src/icons with metadata first, then consume the UI-system icon export.
  • make storyboard examples render the real component surface and states; do not rely on surrounding docs chrome to hide component-level visual drift or to fake the final panel/surface language
  • when a consumer is migrated, its final rendered result must also follow the same UI-system visual standard; a temporary bridge may help wiring, but it is not acceptable as the final visual implementation if it keeps a second token system or divergent component styling

If these conditions are not met, report the promotion as incomplete or blocked, not complete.

Source Of Truth

Read these before editing:

  1. nearest AGENTS.md for the target code
  2. local AGENTS.md bundled with this skill
  3. local ui-system.md bundled with this skill
  4. component metadata from the first available source:
    • GET http://127.0.0.1:4100/components
    • packages/ui/system/src/metadata/components.json
    • @tutti-os/ui-system/metadata from the installed package

Use stable public imports only:

  • @tutti-os/ui-system
  • @tutti-os/ui-system/components
  • @tutti-os/ui-system/icons
  • @tutti-os/ui-system/metadata
  • @tutti-os/ui-system/styles.css
  • @tutti-os/ui-system/utils

Never deep import @tutti-os/ui-system/src/* or per-file component paths.

Route The Task

Read only the reference file that matches the task.

  • Using or querying existing components: references/use-existing-component.md
  • Extracting a low-level base primitive: references/extract-base-component.md
  • Promoting reusable business UI into a shared component: references/promote-business-component.md
  • Maintaining ids, metadata, exports, or storyboard inventory: references/maintain-inventory.md

Global Boundaries

Keep these outside @tutti-os/ui-system components:

  • daemon, Electron, filesystem, router, or host adapter calls
  • data fetching, cache mutation, persistence, polling, and global store ownership
  • workflow orchestration such as onboarding, workspace registration, install or uninstall flows, confirmation dialogs, queueing, or navigation
  • i18n key lookup and business-specific copy derivation unless supplied by props, children, or labels

For any promoted public component, add stable exports, metadata, and storyboard coverage that match the chosen reference workflow.

For promoted base components, preview coverage is not satisfied by metadata alone. DOM components need a real renderable example in apps/ui-storyboard. React Native components need a real renderable example in the Mobile development gallery because the DOM storyboard cannot render their final surface. In both cases, the example must use the stable public entrypoint and show the component's public states.

For business component promotion, use a copy-first workflow: move the existing business component structure as intact as possible, preserve the real DOM, visual hierarchy, state branches, and interaction layout, then progressively remove host dependencies and standardize the public API. Do not begin by inventing a cleaner abstraction or new visual treatment. The state matrix, props boundary, and candidate source UI define what to copy, what to keep caller-owned, and what to standardize after parity exists.

Treat business component promotion as an iterative migration-review loop, not a single extraction pass:

  1. migrate the source UI copy-first
  2. recreate source-backed states in storyboard
  3. run independent review against the original source and screenshot
  4. migrate again to close review findings
  5. repeat review until source/design parity is acceptable

Only after that loop should the API be generalized further. Do not report the component as complete after the first migration if review still shows material DOM, visual, token, state, icon, or storyboard coverage drift.

The promoted UI must follow the original design exactly unless the user explicitly approves a visual change. Do not add new decoration, controls, icons, layout chrome, copy, motion, states, spacing, or visual hierarchy that does not exist in the source UI or provided screenshot. If UI-system token or primitive replacement is needed, it must preserve the observed design and interaction path rather than becoming a redesign.

Copy-first also applies to dependent presentational subcomponents and third-party-library wrappers used by the candidate UI. Do not copy only the top level JSX and recreate nested behavior from memory. Trace the dependency tree: pure display helpers should move with the component; reusable wrappers around Radix, floating UI, resizable panels, virtualization, or similar libraries should be promoted or reused as base primitives first; host-coupled children must be split into caller-owned data, labels, callbacks, or slots before the business component is considered promoted.

Show full SKILL.md (584 more words)Show less

Design Foundation Verification

Every promoted component must comply with ui-system.md, especially the shared tokens, theme variables, spacing, radius, typography, surface language, interactive states, and existing base primitive vocabulary.

Explicitly check and report all of these before completion:

  • color and surface styling come from UI-system semantic tokens rather than raw palette values
  • panels, rows, controls, and overlays compose existing base primitives where applicable instead of recreating them locally
  • storyboard shows the component's real promoted surface rather than only a documentation wrapper
  • migrated consumers no longer depend on a separate visual token system for the promoted surface

Run the Tutti promotion review gate before reporting completion. The gate is adapted from frontend design review practice but constrained to Tutti's dense workbench product language:

  • Frictionless: the migrated consumer preserves the original task path, keeps a clear action hierarchy, and does not bury primary or recovery actions.
  • Quality craft: visual parity evidence is captured for selected states, shared tokens and primitives are used, light/dark and interactive states work, and no unapproved raw palette, spacing, radius, typography, or motion drift remains.
  • Trustworthy: empty, loading, disabled, error-like, permission-limited, and AI-generated-content states keep clear labels, actionable recovery, and host-owned policy or provenance outside the shared component.

After promoting a base or business component, start an independent subagent to review design-foundation compliance before reporting completion. Provide the subagent with the promoted files, source usage, selected states, storyboard and metadata entries, and the UI-system guidelines. If subagents are unavailable, state that design-foundation verification is blocked and do not claim full compliance.

Report the gate result with:

  • context: source usage, promoted component id/layer, user task, selected states
  • status: pass, needs work, or blocked
  • pillar assessment: Frictionless, Quality craft, Trustworthy
  • issues grouped as blocking, major, and minor
  • validation commands and exact results
  • remaining risks, uncovered states, or approved visual deltas

API Composition Review

When converting source states into public props, review the API shape before writing the promoted component:

  • avoid boolean prop proliferation for rendering modes; mode axes such as isFoo, showBar, or withBaz must come from code evidence and usually become a finite variant, discriminated union, explicit component variant, slot, or composed child
  • keep standard UI booleans such as disabled, loading, selected, open, required, and invalid only when they represent real component state and cannot create impossible combinations
  • prefer children or named slots for caller-owned visual regions; use render props only when the shared component must pass data back to the caller
  • use compound components and context only for genuinely complex reusable structures where consumers need to compose subparts without prop drilling
  • if shared state is needed, define a narrow context value as state, actions, and meta; providers may inject state but must not own daemon, Electron, router, store, query, persistence, or workflow side effects
  • for new React components in this React 19 codebase, prefer the React 19 API shape such as ref as a prop; do not churn shadcn or Radix-acquired code only to normalize style when behavior and public API are already sound

Report the API composition decision with the state matrix: which differences became props, variants, slots, children, explicit variants, provider state, or stayed host-owned.

Validation Commands

Run the smallest relevant checks from the selected reference. Common checks are:

bash
node tools/scripts/check-ui-metadata.mjs
pnpm check:ui-boundaries
pnpm --filter @tutti-os/ui-storyboard typecheck

If runtime component code changed, also run the relevant package typecheck or consumer build.

When a base component is promoted, verify both of these conditions before reporting completion:

  • the component metadata opts into storyboard visibility when appropriate
  • apps/ui-storyboard contains a concrete rendered example for the promoted component states, not just inventory wiring

© tutti-os, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (scripts, references) in packages/ui/system/agent/tutti-ui-system of tutti-os/tutti.

  • SKILL.md
  • references/extract-base-component.md
  • references/maintain-inventory.md
  • references/promote-business-component.md
  • references/use-existing-component.md
  • scripts/create-business-preview.mjs

Open the folder on GitHubat commit 207beee

Compare with similar skills

Tutti UI System next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Tutti UI System compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tutti UI System this skilltutti-os/tutti3.8k—~2.7kAutomated safety check: PassApache-2.0
Canghe Comicfreestylefly/canghe-skills4618 repos~3.2kAutomated safety check: PassNone
3D Animation Short Generatortl2012tl/comfyUI-llama-TE2414 repos~3.7kAutomated safety check: PassNone
Text to PNG Card Casterlijigang/ljg-skills7.5k—~1.9kAutomated safety check: PassMIT
H3 Cinematic Directorjtydhr88/ComfyTV1.1k—~2.7kAutomated safety check: PassMIT
Scroll Promo Site Builderkangarooking/kangarooking-skills662—~2.6kAutomated safety check: PassMIT

Similar skills

  • Canghe Comic

    freestylefly/canghe-skills

    Knowledge comic creator supporting multiple art styles and tones.

    461 GitHub starsUsed in 8 repos~3.2k tokens
    Media & CreativeAuto-check passed

  • 3D Animation Short Generator

    tl2012tl/comfyUI-llama-TE

    Create complete stylized 3D animated shorts from a story idea through an ordered production workflow covering project brief, story outline, character and environment cards, standardized shot…

    241 GitHub starsUsed in 4 repos~3.7k tokens
    Media & CreativeAuto-check passed

  • Text to PNG Card Caster

    lijigang/ljg-skills

    Turns text, URLs or local files into tall PNG cards through HTML typography, with four modes: long reading card, full-text layout, comic and whiteboard.

    7.5k GitHub stars~1.9k tokensUpdated yesterday
    Media & CreativeAuto-check passed

  • H3 Cinematic Director

    jtydhr88/ComfyTV

    Convert approved scripts, shot briefs, storyboards, keyframes, character sheets, scene assets, prop sheets, and sound briefs into director-level storyboards and production-ready MiniMax H3 prompts.

    1.1k GitHub stars~2.7k tokensUpdated 3 days ago
    Media & CreativeAuto-check passed

  • Scroll Promo Site Builder

    kangarooking/kangarooking-skills

    Create a scroll-controlled cinematic product website with rich motion (动效网站) from product materials, reference pages or videos, and brand assets.

    662 GitHub stars~2.6k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed

  • Motion Graphics Music Video

    makevoid/motion-graphics-music-video-skill

    Create and revise animated character music videos from a supplied song and creative prompt, with researched storyboards, Fal character and video generation, p5 motion graphics, audio editing, and…

    143 GitHub stars~3.3k tokensUpdated 5 days ago
    Media & CreativeAuto-check passed

More from tutti-os/tutti

All 8 skills in this repo

  • Analyze Performance Traces

    tutti-os/tutti

    Analyze Chrome, Chromium, Electron, React DevTools, or Perfetto-compatible JSON traces and audit user-reported profiling findings without loading large artifacts into context; prove…

    3.8k GitHub stars~3.3k tokensUpdated 2 days ago
    Auto-check passed

  • Tutti Record Agent Session Replay

    tutti-os/tutti

    From a Tutti checkout, run, audit, freshly replay, publish, or diagnose Session Replay cassettes that are driven by case-repository scenario scripts (CDP), not by interactive UI recording.

    3.8k GitHub stars~4k tokensUpdated 2 days ago
    Auto-check passed

  • Tutti Workspace App Factory

    tutti-os/tutti

    Create, convert, or repair one Tutti workspace app as either a self-contained publishable package under package/ or a Chrome-style local debug app under .tutti/dev-app/.

    3.8k GitHub stars~5.9k tokensUpdated 2 days ago
    Auto-check passed

  • Tutti Agent Workspace App

    tutti-os/tutti

    Build or evolve a complex agent-enabled Tutti workspace app repository.

    3.8k GitHub stars~1.9k tokensUpdated 2 days ago
    Auto-check passed

  • Tutti Architecture Review

    tutti-os/tutti

    Review tutti git diffs for project structure, layering, module ownership, and duplicate event-center infrastructure by planning focused architecture review tasks, then having the main agent…

    3.8k GitHub stars~2.3k tokensUpdated 2 days ago
    Auto-check passed

  • Tutti App Release

    tutti-os/tutti

    Set up, review, run, or debug external repositories that publish a Tutti workspace app through the reusable Tutti App Release GitHub Actions workflow.

    3.8k GitHub stars~4.1k tokensUpdated 2 days ago
    Auto-check passed

Categories

Questions about Tutti UI System

What does Tutti UI System do?

A skill your agent uses when working with @tutti-os/ui-system components, replacing local UI with shared components, querying component ids or metadata, promoting UI into shared base or business…. Tutti UI System is an agent skill from tutti-os/tutti. Use when working with @tutti-os/ui-system components, replacing local UI with shared components, querying component ids or metadata, promoting UI into shared base or business components, or maintaining UI-system storyboard inventory.

When should I use Tutti UI System?

Tutti UI System fits situations like: working with @tutti-os/ui-system components; replacing local UI with shared components; querying component ids; promoting UI into shared base.

How do I install Tutti UI System in Claude Code?

Run `npx skills add tutti-os/tutti --skill tutti-ui-system -a claude-code`. Or copy the skill folder (packages/ui/system/agent/tutti-ui-system in tutti-os/tutti) into .claude/skills/tutti-ui-system in your project. Claude Code loads it when a task matches its description.

How do I install Tutti UI System in Codex?

Run `npx skills add tutti-os/tutti --skill tutti-ui-system -a codex`. Or copy the skill folder (packages/ui/system/agent/tutti-ui-system in tutti-os/tutti) into .agents/skills/tutti-ui-system in your project. Codex loads it when a task matches its description.

Can I use Tutti UI System in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tutti-os/tutti --skill tutti-ui-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tutti-ui-system, .gemini/skills/tutti-ui-system, .github/skills/tutti-ui-system and .opencode/skills/tutti-ui-system in your project.

What does Tutti UI System need to run?

Going by SKILL.md and its folder, Tutti UI System needs JavaScript for the scripts in its folder and the command-line tools its instructions call (pnpm and node). Our summary lists: Node.js.

Does Tutti UI System access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Tutti UI System safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Tutti UI System use?

Tutti UI System is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tutti UI System use?

About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.4k tokens, read only when the agent opens those files.

What are the alternatives to Tutti UI System?

Skills that share tags, products or a category with Tutti UI System: Canghe Comic (freestylefly/canghe-skills, 461 stars), 3D Animation Short Generator (tl2012tl/comfyUI-llama-TE, 241 stars), Text to PNG Card Caster (lijigang/ljg-skills, 7.5k stars) and H3 Cinematic Director (jtydhr88/ComfyTV, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tutti UI System?

tutti-os (a GitHub organization) maintains it in tutti-os/tutti, which has 3,811 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 8, 2026.

Source: tutti-os/tutti on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.