flowstate-extension-ui Package Skill

Package: @epicdm/flowstate-extension-ui Repository: epic-flowstate-community Path: packages/extension-ui Version: 1.0.7

Use this published Dojo skill as the package-level entrypoint. For detailed workflows, use the package-local skills listed below.

Primary Package Workflow

FlowState Extension UI Catalog

Status: Active Purpose: Teach agents how to compose extension catalog, list, detail, and panel UI. Scope: Extension catalog components in packages/extension-ui/src/components. Trigger: A task needs extension marketplace cards, searchable lists, detail pages, action buttons, metadata, or selected-extension panels. Input: ExtensionInfo[], optional ExtensionDetailInfo, action callbacks, pending ID, categories, selected ID. Output: Correct catalog UI composition with controlled or uncontrolled state.

Source Paths

• src/components/ExtensionList.tsx
• src/components/ExtensionCard.tsx
• src/components/ExtensionCardSkeleton.tsx
• src/components/ExtensionDetail.tsx
• src/components/ExtensionDetailHeader.tsx
• src/components/ExtensionMetadata.tsx
• src/components/ExtensionActionBar.tsx
• src/components/ExtensionPanel.tsx
• src/types/extension-types.ts

Data Contracts

Use ExtensionInfo for list/card surfaces. Use ExtensionDetailInfo for full detail surfaces.

Required ExtensionInfo fields include:

• id
• displayName
• description
• publisher
• version
• status
• compatibility
• contributions
• categories

ExtensionDetailInfo adds optional readme, license, fileSize, dependencies, changelog, and tags.

Extension List Example

import {
  ExtensionList,
  type ExtensionActionName,
  type ExtensionInfo,
} from '@epicdm/flowstate-extension-ui';

export function Marketplace({
  extensions,
  pendingId,
  runAction,
}: {
  extensions: ExtensionInfo[];
  pendingId: string | null;
  runAction: (action: ExtensionActionName, id: string) => void;
}) {
  return (
    <ExtensionList
      extensions={extensions}
      layout="grid"
      categories={['Themes', 'Tools']}
      pendingId={pendingId}
      loading={extensions.length === 0}
      onAction={runAction}
    />
  );
}

ExtensionList internally uses useExtensionSearch for text search, category filters, and sort selection.

Extension Panel Example

import {
  ExtensionPanel,
  type ExtensionDetailInfo,
  type ExtensionInfo,
} from '@epicdm/flowstate-extension-ui';

export function ExtensionManager({
  extensions,
  detailsById,
}: {
  extensions: ExtensionInfo[];
  detailsById: Record<string, ExtensionDetailInfo>;
}) {
  return (
    <ExtensionPanel
      extensions={extensions}
      getExtensionDetail={(id) => detailsById[id]}
      onAction={(action, id) => console.log(action, id)}
      categories={['Themes', 'Productivity']}
    />
  );
}

ExtensionPanel supports controlled selection with selectedId and onSelectionChange; otherwise it maintains internal selection.

Status-To-Action Behavior

Cards and detail headers use internal helpers:

ExtensionActionBar exposes multiple actions for installed/enabled/disabled states and no actions for updating or error.

Detail Tabs

ExtensionDetail has tabs:

• overview
• contributions
• settings
• changelog

Use activeTab and onTabChange for controlled tabs. Without them, it manages internal tab state.

The settings tab currently renders a placeholder; use flowstate-extension-ui-settings for real settings editor composition.

Styling And Testing Hooks

Catalog components emit:

• data-component
• data-part
• data-status
• data-compatibility
• data-layout

Tests rely on these markers. Host styling should too.

Red Flags

Verification

yarn workspace @epicdm/flowstate-extension-ui test --runInBand src/__tests__/ExtensionList.test.tsx src/__tests__/ExtensionPanel.test.tsx src/__tests__/ExtensionDetail.test.tsx
yarn workspace @epicdm/flowstate-extension-ui typecheck

Composition Notes

• Use flowstate-extension-ui-hooks-actions for async action state.
• Use flowstate-extension-ui-contributions-themes for rich contribution and compatibility displays.
• Use flowstate-extension-ui-primitives for host styling conventions.

Created: 2026-06-29

Package Skill Inventory

@epicdm/flowstate-extension-ui Skill Inventory

Repository: epic-flowstate-community Package path: packages/extension-ui

Skill Map

Composition Guidance

Use flowstate-extension-ui first for broad package tasks, then route to:

• flowstate-extension-ui-primitives for small reusable building blocks.
• flowstate-extension-ui-catalog for extension list/detail/panel workflows.
• flowstate-extension-ui-settings for configuration editors.
• flowstate-extension-ui-contributions-themes for contribution or theme-preview views.
• flowstate-extension-ui-hooks-actions for search and action state management.
• flowstate-extension-ui-native-maintenance for package maintenance and export drift.

Baseline Failure Cases Addressed

Review Gate

The local skillset is publish-ready only after:

• YAML frontmatter exists in each SKILL.md.
• Skills teach usage and maintenance workflows, not component lists.
• Verification results are recorded in REVIEW.md.
• Dojo publication is rebuilt from these reviewed skills, not from generated placeholders.

Review Gate

@epicdm/flowstate-extension-ui Skill Review

Review Summary

Created package-local operating skills for @epicdm/flowstate-extension-ui under packages/extension-ui/.flowstate/skills.

The skillset replaces generated one-export-per-skilllet material with composable guidance for:

• Package workflow routing.
• Primitive UI and host-app styling hooks.
• Extension catalog/list/detail/panel UI.
• JSON-schema settings editor behavior.
• Contribution, compatibility, platform, and theme preview UI.
• Search and async action hooks.
• Native subpath, build, docs, and export maintenance.

Evidence Reviewed

• package.json
• README.md
• CHANGELOG.md
• .flowstate/feature-matrix/inventory.md
• .flowstate/dojo/agent-skillset.md
• src/index.ts
• src/native.ts
• src/types/extension-types.ts
• src/hooks/useExtensionSearch.ts
• src/hooks/useExtensionActions.ts
• src/utils/extension-helpers.ts
• src/components/*.tsx
• src/__tests__/*.test.tsx
• jest.config.cjs
• tsup.config.ts
• tsconfig.json

Quality Notes

The skills intentionally group UI components by how agents use them:

• primitives and styling hooks
• catalog/detail workflows
• settings workflows
• contribution/theme preview workflows
• hooks/action state
• native/export maintenance

This package has broad component coverage, but the useful learning shape is composition and data contracts.

Known Drift Preserved

• README examples are placeholders rather than real import examples.
• README implies identical native rendering, while src/native.ts says full native implementations are future work.
• CHANGELOG stops at 1.0.3, while package version is 1.0.7.
• Feature inventory lists getActionLabel, getActionName, and formatCount as features, but src/index.ts does not export them.
• No package-local lint script exists.
• No direct in-repo consumers were found outside this package.

Verification Status

Completed after authoring:

• ASCII scan: passed.
• yarn workspace @epicdm/flowstate-extension-ui typecheck: passed.
• yarn workspace @epicdm/flowstate-extension-ui test --runInBand: passed, 28 suites and 279 tests.
• yarn workspace @epicdm/flowstate-extension-ui build: passed, building root and native entries.
• yarn nx build @epicdm/flowstate-extension-ui: passed; Nx Cloud reported the existing unconnected-workspace 401/setup notice.
• Package has no lint script.

Dojo publication remains deferred until local skills pass verification and review.

Start with this skill to understand the package purpose, then use the package-local focused skills for specific workflows. Keep this Dojo version aligned with packages/extension-ui/package.json. Do not treat generated feature lists as lessons; use workflow evidence from CODE-REVIEW.md, SKILL-INVENTORY.md, and REVIEW.md.