claude

utopia-design

👾 The Utopia Design Protocol for utopia_ui apps. Edit/rebrand DTCG design tokens (design/tokens.json) with validation gates, import external designs (Figma DTCG exports, tokens.css / Tailwind @theme, handoff bundles, DESIGN.md), regenerate the Flutter theme and HTML twin from tokens, build screens from the component manifest with explicit gap reporting, and scaffold project components registered in the project/merged manifest. SessionStart detection plus PostToolUse token/literal gates; silent outside utopia_ui projects.

1 on GitHubby UtopiaSoftwarev0.4.0BSD-2-Clauseupdated 17 days ago
/

Plugin utopia-design from marketplace utopia-flutter-skills in Utopia-USS/utopia-flutter-skills. Commands read from the repo's manifest — 17 days ago.

This plugin runs code on your machine — its hooks fire automatically on events like tool use. The exact commands are listed below; read them before installing.

What it installs

Skills (5)

  • component

    Turn a reported component GAP (or any need for a custom component) into a LIVE manifest id: scaffold it from utopia_ui primitives, write its overlay YAML (design/overlay/<local-part>.yaml), regenerate the project + merged manifests (generate_manifest), validate, and hand back the namespaced id. Appl

  • import

    Bring an external design source into a utopia_ui project's design/tokens.json: a Figma DTCG export, a foreign tokens.css / Tailwind @theme, a Claude Design handoff bundle, or a DESIGN.md. Applies when: identifying the source type and parsing its values; mapping them onto the closed utopia token tree

  • screen

    Build or update a Flutter screen from an outside design input using ONLY components from the utopia_ui component manifest (the merged manifest when the project registers custom components). Applies when: implementing or recreating an HTML mockup, a screenshot, a handoff bundle, a DESIGN.md, or the p

  • sync

    Regenerate every generated surface of the Utopia Design Protocol from design/tokens.json after it changes: the Flutter theme code (generate_theme) and the HTML twin (generate_twin: tokens.css, tokens.tailwind.css, DESIGN.md front matter, and gallery.html when the twin composes one). Runs validate_to

  • tokens

    Edit or rebrand a consumer app's design/tokens.json - the DTCG design-tokens document that is the single source of truth for the Utopia Design Protocol on top of utopia_ui. Applies when: bootstrapping design/tokens.json from the packaged utopia_ui default theme; changing theme colors, the spacing/ra

Hooks (2)

  • SessionStart

    bash "${CLAUDE_PLUGIN_ROOT}/scripts/session_start.sh"

  • PostToolUse

    bash "${CLAUDE_PLUGIN_ROOT}/scripts/quality_check.sh"

View source on GitHub

More from Utopia-USS/utopia-flutter-skills

All 8 plugins →

utopia-hooks-migrate-bloc

claude

👾 Migrate Flutter BLoC/Cubit codebases to utopia_hooks. Two-phase migration (global states first, then screens) with per-commit granularity, service extraction for logic-heavy Cubits, deferred provider registration (no dual-run side effects), a flutter-test behavioral gate, staged plans for god-screens, dart analyze baseline (Dart MCP preferred), and a --finalize cleanup mode. Includes the /utopia-hooks-migrate-bloc:migrate orchestrator coordinating five sub-agents: migrate-inventory, migrate-foundation, migrate-global-state, migrate-screen, and migrate-review. Recommended companion: utopia-hooks plugin.

1 skill · 1 command · 5 agents · hooks

1

utopia-reviews

claudecodex

👾 Code reviews as a two-way agent conversation on GitHub / GitLab / Bitbucket. Two skills: utopia-code-review performs a Utopia-aware, severity-ranked review of a PR/MR or a local branch pair (and, after one approval gate, posts it as inline comments); utopia-resolve-code-review addresses review comments on the user's own PR end to end - triage against code + spec + Utopia conventions, one gate, then fix, verify, push, reply, resolve. Includes /utopia-reviews:review and /utopia-reviews:resolve.

2 skills · 2 commands

1

utopia-cms

claudecodex

👾 Flutter CMS / admin panels with utopia_cms. CmsWidget shell, CmsTablePage, CmsDelegate (Firebase / Supabase / Hasura / GraphQL), CmsEntry catalog, filters, custom actions, management sections. PostToolUse hook flags the hand-rolled DataTable + service + state-class anti-pattern.

1 skill · hooks

1

utopia-hooks

claudecodex

👾 Flutter state management with utopia_hooks. Screen/State/View pattern, hook catalog, global state, async/pagination patterns, app bootstrap, global error handling, navigation conventions, hook-state testing, utopia_cli integration (describe / add screen / doctor / MCP), and enforcement of conventions via SessionStart project detection + PostToolUse checks.

1 skill · hooks

1

utopia-pubdev

claudecodex

👾 Compose and standardize pub.dev READMEs for Dart/Flutter packages - brand-profile-driven header and badge row, house voice, section structure (minimal vs full tiers), a no-sponsor footer with sibling links, and a tool-agnostic AI assistants section. Auto-applies the bundled Utopia profile in Utopia codebases, reads docs/pubdev-brand.md elsewhere, and ships a brand-setup interview skill plus the Utopia brand-chip header generator (package name to Clay PNG via headless Chrome). Use when creating or refreshing a package README, its header image, or the repo's branding profile; not for app code or non-package docs.

2 skills

1

utopia-ai-arch

claude

👾 Create and maintain the Claude Code `.claude/` layer (agents, skills, slash commands, enforcement hooks, settings.json, refs, claude-architecture.md decision log) for Utopia Flutter projects. Encodes the project-claude-layer blueprint plus the invariants and decision criteria distilled from production implementations across multiple Utopia repos. Use when bootstrapping a new repo's AI architecture, adding a skill/agent/command/hook script, recording a rejected alternative, auditing for drift, or diagnosing why the agent keeps forgetting a project convention.

1 skill

1

Maintain utopia-design?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins8 plugins