design-app-surface

Designing Shopify embedded app surfaces requires enforcing the island rule, where Polaris owns the surrounding chrome and your app renders only within a dedicated brand island. This approach prevents direct writes under apps/shopify-app/ and yields repeatable surface specifications.

The island rule is a design constraint for Shopify embedded apps where Polaris owns the admin chrome and your app owns a contained island. It ensures UI elements like score cards and pillar cells render without breaking the Polaris layout.

Generate a UI spec for Shopify dashboards by drafting a surface spec that applies the island rule to each page type. The spec guides implementation for dashboards, issue drill-downs, fix previews, and Channel Health pages within the embedded app.

Yes, the surface spec workflow supports Channel Health pages and fix previews within Shopify embedded apps. It produces consistent specifications for these specific page types while maintaining Polaris chrome ownership and Flintmere island constraints.

Yes, the surface spec workflow includes checks for accessibility, performance, and consistency. It provides workflow guidance from initial brief to build-feature hand-off, ensuring engineering teams receive a complete and validated design specification.

Avoiding direct writes under apps/shopify-app/ preserves the Polaris chrome integrity and enforces the island rule. Direct writes risk breaking the embedded app layout, so rendering should occur within the designated brand island area instead.