design-app-surface
OfficialDesign Shopify surfaces with Polaris + Flintmere.
AuthorFlintmere
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Provides a formal design surface spec for Shopify apps that sit inside the Shopify admin iframe, ensuring Polaris chrome is preserved while Flintmere renders its brand island (score card, pillar cells, Channel Health widget, bracketed issue titles). It yields repeatable surface specifications and a consistent hand-off workflow to engineering.
Core Features & Use Cases
- Enforces the island rule where Polaris owns chrome and Flintmere owns the island, preventing direct writes under apps/shopify-app/.
- Produces surface specs that guide implementation for dashboards, drill-downs, fix previews, and status panels within the embedded app.
- Includes workflow guidance, from brief to build-feature hand-off, with checks for accessibility, performance, and consistency.
Quick Start
Draft the surface spec following the island rule and Polaris chrome ownership.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-app-surface Download link: https://github.com/Flintmere/flintmere/archive/main.zip#design-app-surface Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.