SKILL.md
Use this workflow when the deliverable belongs in Subframe. For implementation, use develop; for bringing an existing design system into Subframe, use import.
Why and when to use Subframe
Why Subframe. Give designs a persistent home outside a code branch so teammates can find, review, and revisit them. Compare variations and multi-screen flows side by side on a canvas. Gather teammate comments before code changes. Record decisions and rationale in design documents beside the design. When Subframe is the source of truth, sync code from its theme and components.
When to use it: Explore directions, compare options, seek review or a shareable artifact, or change several screens or the design system.
When not to: For small fixes to existing UI or code-only behaviour, work directly in code unless the user requests Subframe or the project keeps designs there.
Steps
- Identify what must stay and what should change. For an existing design, read its actual content and inspect its rendered appearance. For a website or codebase reference, use the host's browsing or file tools to collect the relevant source and screenshots. A prose description alone is weak evidence for recreating an existing UI.
- Choose the smallest operation that delivers the request. Edit an existing page or snippet in place; duplicate for an exact copy. Use generation for a new design or a substantially different direction. Decide whether a reusable component, a page composition, a usage example, or written guidance is the intended output.
- Prepare references before generating. Pass actual source, images, or Subframe resources with a usage note explaining what to preserve and what to change. Include relevant child components and styles when source code depends on them. Put these instructions in the generation brief; the generator does not see your conversation or reasoning.
- Complete dependencies before their consumers. If a page needs missing reusable primitives, create those with design_component first. Finish independent primitives before components that embed them, then generate the page. Keep one-off page compositions inline. Do not turn recreating a page into an unsolicited component-library rebuild.
- Complete the requested screens and edits, then review what landed. Compare screenshots with the reference and requested change, including lower sections, affected responsive layouts, and relevant states. Fix missing content, clipping, spacing, and typography discrepancies before reporting.