Skip to content

v1.3.0 — Design Screen Skill + Craft Action

Choose a tag to compare

@Maximepodgorski Maximepodgorski released this 05 Apr 09:30
· 5 commits to main since this release
92eb9b0

New skill: design-screen — compose UI screens from existing components with ASCII wireframe proposals, component coverage tracking, and a Figma placement draft step. Includes 6 actions (init, spec, spec-review, craft, ship, review), 4 principles, and 8 templates. Also added Deep Context section to kickoff's CLAUDE.md generation.

New Files

File Description
design-screen/SKILL.md Skill entry point — action router, 3-layer knowledge model, workflow state manifest, Figma integration
design-screen/README.md Human-readable docs with non-dev onboarding guide for craft action
design-screen/references/actions/init.md Project onboarding — parallel scan of stack, components, tokens, layouts, imports
design-screen/references/actions/spec.md Compose phase (ASCII wireframes with coverage %) + spec generation
design-screen/references/actions/spec-review.md Multi-perspective adversarial spec review (3-6 dynamic experts)
design-screen/references/actions/craft.md Figma component placement draft — maps spec to DS, builds zone-by-zone via Figma MCP
design-screen/references/actions/ship.md Ship loop implementation with stuck detection and scope mutation
design-screen/references/actions/review.md Post-ship compliance check against 4 principles
design-screen/references/principles/composition.md Screen assembly rules with formal zone definition
design-screen/references/principles/layout-patterns.md SaaS + mobile layout pattern catalog (12 patterns)
design-screen/references/principles/page-states.md Loading, empty, error, success, partial state handling
design-screen/references/principles/responsive.md Breakpoint strategy and collapse patterns
design-screen/references/templates/conventions.md Project DNA template generated by init
design-screen/references/templates/spec.md Screen spec template with zones, data flow, page states
design-screen/references/templates/outputs/init-output.md Chat output format for init action
design-screen/references/templates/outputs/spec-output.md Chat output format for spec action (compose rounds + spec generated)
design-screen/references/templates/outputs/spec-review-output.md Chat output format for spec-review (verdicts + findings)
design-screen/references/templates/outputs/craft-output.md Chat output format for craft (mapping table, zone progress, 4 exit states)
design-screen/references/templates/outputs/ship-output.md Chat output format for ship loop
design-screen/references/templates/outputs/review-output.md Chat output format for compliance review
specs/shipped/2026-03-24-interface-skill.md Archived spec for the design-screen skill
specs/shipped/2026-03-27-design-screen-craft-action.md Archived spec for the craft action
specs/history.log Feature shipping history

Changed Files

File Change
CLAUDE.md Added design-screen to project structure and skills table, action count: 5 → 6 with craft
README.md Added design-screen skill section with 6 actions, flow diagrams including craft, architecture tree, usage examples
kickoff/references/actions/generate.md Added Deep Context section to generated CLAUDE.md
kickoff/references/templates/claude-md.md Added Deep Context template block for CLAUDE.md generation

Summary

  • Added design-screen skill with 6 actions, 4 principles, 8 templates — compose screens from existing components with zero reinvention guarantee
  • Added craft action for Figma component placement drafts via Figma MCP (search_design_system + use_figma)
  • Added formal zone definition in composition.md to eliminate ambiguity in coverage calculations
  • Added workflow state manifest in SKILL.md for cross-action coherence
  • Optimized craft.md with figma-use best practices (loadFontAsync, resize before sizing, get_metadata validation, DS variables)
  • Added non-dev onboarding step-by-step guide in README for designers using craft
  • Added Deep Context section to kickoff's CLAUDE.md generation