Skip to content

v0.12.0 — React + Storybook frontend codegen from UI mocks

Choose a tag to compare

View all tags
@wfukatsu wfukatsu released this 30 Jun 07:04
· 323 commits to main since this release
v0.12.0
95b28b2
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Highlights

/product:generate-frontend — a new product-plugin skill that turns the navigable UI mocks and the active design system into a runnable React + TypeScript + Storybook frontend under generated/frontend/.

  • Atomic Design decomposition — design tokens → atoms → molecules → organisms → templates → pages. Each CMP- from the design system maps to a component at its atomic level; each UI-mock screen becomes a page.
  • Token-only styling — CSS Modules + CSS variables referencing design tokens (no raw color/spacing/type values).
  • Routing from the mock flow — the story next/prev order is wired with react-router; missing steps render as disabled TBD routes.
  • Storybook registration — one *.stories.tsx per component, with a story per variant/state.
  • Runnable scaffold — React 18 + Vite + Storybook 8 + TypeScript, pinned and installable (npm install && npm run storybook).

/product:start integration — generate-frontend is offered as a selectable step after the UI mocks: interactive prompt, or profile-driven under --auto (ux-to-spec / full). New flags --frontend / --no-frontend force the choice; runs at the end of the spec phase (after define-features), non-blocking for downstream phases.

The product plugin now ships 25 skills.

Verification

End-to-end tested: generated a React/Storybook app from sample mocks + design system and confirmed npm install, tsc --noEmit, vite build, and storybook build all pass (20 stories across 9 components). Confirmed usable from Codex via the AGENTS.md command mapping.

Compatibility

All three plugins (product, architect, scalardb) are released together at 0.12.0. Backward-compatible feature addition; no breaking changes.

See CHANGELOG.md (日本語) for full details.

Assets 2
Loading