chrome Package Skill

Package: @epicdm/chrome Repository: flowstate-platform Path: packages/shared/chrome Version: 0.1.0

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

Primary Package Workflow

Chrome App Shell Workflow

Status: Active Purpose: Keep FlowState app shells and shared chrome exports consistent across apps. Scope: packages/shared/chrome Trigger: A shared layout, navigation, provider, UI primitive, content helper, font, icon, or style export needs to change. Input: Target app usage, export subpath, component props, style needs, and downstream consumers. Output: Updated shared chrome surface with compatible exports and typecheck coverage.

Workflow

Check public exports first: top-level exports in src/index.ts; subpath exports in package.json for ./ui, ./content, ./fonts, ./icons, ./styles/theme.css, and ./styles/prism.css.
Wrap apps with ChromeProviders from src/providers/ChromeProviders.tsx when using theme or color-theme components.
Use SiteLayout from src/components/SiteLayout.tsx for standard marketing/docs shells; it composes Header, Navigation, HeaderRight, main, and Footer.
Put reusable operational UI primitives in src/ui/* and export them through src/ui/index.ts. Keep app-specific screens in the consuming app.
Keep client components marked with 'use client' when they use hooks, next-themes, Headless UI, state, or browser APIs.
Before renaming or removing exports, check consumers with rg "@epicdm/chrome" packages --glob '!**/node_modules/**'.

Verification

yarn workspace @epicdm/chrome typecheck
yarn workspace @epicdm/chrome lint
For visible changes, run the affected consuming app's local verification or screenshot workflow.

Red Flags

Red flag	Required action
Component uses hooks without `'use client'`	Add client boundary or move hook usage.
Export changed without consumer search	Run the import search before finishing.
App-specific route logic added to shared chrome	Move it back to the app and pass props instead.
Style export renamed	Update package exports and every stylesheet import together.

Composition

Use app-local skills for route-specific UI behavior.
Use flowstate-marketplace-publishing-workflow or identity/app skills when chrome changes are part of broader app work.

Package Skill Inventory

Skill Inventory: @epicdm/chrome

Created Skills

Skill	Type	Trigger
`chrome-app-shell-workflow`	Workflow	Use when composing or changing shared FlowState app chrome, providers, UI primitives, content helpers, fonts, icons, or styles.

Candidate Future Skills

Candidate	Reason to Split Later
`chrome-content-markdoc`	Content helpers are used by docs and may deserve focused Markdoc guidance.
`chrome-theme-system`	Theme CSS, `next-themes`, and color themes may need a style-system reference.
`chrome-sidebar-dashboard`	Sidebar/dashboard patterns can become a shared app-shell subskill.

Source Evidence

src/index.ts and package exports define public entry points.
src/providers/ChromeProviders.tsx composes theme providers.
src/components/SiteLayout.tsx composes header, navigation, main, and footer.
src/ui/index.ts, src/content/index.ts, src/fonts/index.ts, and styles exports define subpath surfaces.
Downstream imports show broad usage across app packages.

Review Gate

Review: @epicdm/chrome Skills

Result: Pass for source-backed package-local workflow guidance.

Checks

The skill focuses on app-shell composition and public exports.
It cites provider, layout, UI/content/font/style surfaces and downstream import checks.
Verification commands match available package scripts.
Generated .flowstate/dojo files were not modified.

Residual Risk

Visual changes require app-level screenshot or component verification that this package does not currently provide.

flowstate-flowstate-platform-epicdm-chrome

Tags

Publisher

Versions

Skill