create-yss-spec 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/template/.agents/skills/high-fidelity-html-prototype/SKILL.md +102 -0
- package/template/.codex/skills/data-analytics/.app.json +84 -0
- package/template/.codex/skills/data-analytics/.codex-plugin/plugin.json +66 -0
- package/template/.codex/skills/data-analytics/.mcp.json +30 -0
- package/template/.codex/skills/data-analytics/AGENTS.md +20 -0
- package/template/.codex/skills/data-analytics/DEPENDENCIES.MD +27 -0
- package/template/.codex/skills/data-analytics/README.md +60 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html +16 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part001 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part002 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part003 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part004 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part005 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-artifact-widget.html.gz.b64.part006 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html +16 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part001 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part002 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part003 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part004 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part005 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part006 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-chart-widget.html.gz.b64.part007 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-small.svg +5 -0
- package/template/.codex/skills/data-analytics/assets/datascience-table-widget.html +16 -0
- package/template/.codex/skills/data-analytics/assets/datascience-table-widget.html.gz.b64.part001 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-table-widget.html.gz.b64.part002 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-table-widget.html.gz.b64.part003 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience-table-widget.html.gz.b64.part004 +1 -0
- package/template/.codex/skills/data-analytics/assets/datascience.png +0 -0
- package/template/.codex/skills/data-analytics/assets/datascience.svg +10 -0
- package/template/.codex/skills/data-analytics/mcp/server.cjs +2963 -0
- package/template/.codex/skills/data-analytics/package-lock.json +3048 -0
- package/template/.codex/skills/data-analytics/package.json +43 -0
- package/template/.codex/skills/data-analytics/scripts/normalize-widget-assets.mjs +75 -0
- package/template/.codex/skills/data-analytics/skills/analyze-data-quality/SKILL.md +160 -0
- package/template/.codex/skills/data-analytics/skills/analyze-data-quality/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/SKILL.md +148 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/specifications/bi-platform-dashboard.md +18 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/specifications/html-dashboard.md +24 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/specifications/mcp-artifact-dashboard.md +71 -0
- package/template/.codex/skills/data-analytics/skills/build-dashboard/specifications/streamlit-dashboard.md +85 -0
- package/template/.codex/skills/data-analytics/skills/build-report/SKILL.md +207 -0
- package/template/.codex/skills/data-analytics/skills/build-report/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-report/assets/executive-report-shell.html +70 -0
- package/template/.codex/skills/data-analytics/skills/build-report/assets/technical-report-shell.html +66 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/SKILL.md +118 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/__init__.py +1 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/cli.py +57 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/constants.py +61 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/docx_writer.py +362 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/html_parser.py +829 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/model.py +30 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/plan.py +129 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/quality.py +374 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/rendering.py +613 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/table_utils.py +54 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc/utils.py +16 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-doc/scripts/report_to_google_doc_plan.py +9 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-slides/SKILL.md +78 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-slides/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-google-slides/scripts/report_to_google_slides.py +2379 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-pdf/SKILL.md +88 -0
- package/template/.codex/skills/data-analytics/skills/build-report/report-to-pdf/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/build-report/specifications/executive-report.md +97 -0
- package/template/.codex/skills/data-analytics/skills/build-report/specifications/mcp-app-report.md +59 -0
- package/template/.codex/skills/data-analytics/skills/build-report/specifications/technical-report.md +75 -0
- package/template/.codex/skills/data-analytics/skills/design-kpis/SKILL.md +103 -0
- package/template/.codex/skills/data-analytics/skills/design-kpis/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/gather-business-context/SKILL.md +68 -0
- package/template/.codex/skills/data-analytics/skills/gather-business-context/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/index/SKILL.md +251 -0
- package/template/.codex/skills/data-analytics/skills/index/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/jupyter-notebooks/SKILL.md +131 -0
- package/template/.codex/skills/data-analytics/skills/jupyter-notebooks/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/kpi-reporting/SKILL.md +141 -0
- package/template/.codex/skills/data-analytics/skills/kpi-reporting/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/kpi-reporting/references/report-templates.md +32 -0
- package/template/.codex/skills/data-analytics/skills/market-sizing/SKILL.md +106 -0
- package/template/.codex/skills/data-analytics/skills/market-sizing/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/metric-diagnostics/SKILL.md +130 -0
- package/template/.codex/skills/data-analytics/skills/metric-diagnostics/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/product-business-analysis/SKILL.md +141 -0
- package/template/.codex/skills/data-analytics/skills/product-business-analysis/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/SKILL.md +178 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/agents/openai.yaml +9 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/assets/file-spreadsheet.png +0 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/charts.md +31 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/references/artifact_tool_api.md +466 -0
- package/template/.codex/skills/data-analytics/skills/spreadsheets/style_guidelines.md +99 -0
- package/template/.codex/skills/data-analytics/skills/user-context/SKILL.md +195 -0
- package/template/.codex/skills/data-analytics/skills/user-context/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/user-context/plugin-author-config/automation-config.md +26 -0
- package/template/.codex/skills/data-analytics/skills/user-context/plugin-author-config/source-category-config.json +51 -0
- package/template/.codex/skills/data-analytics/skills/user-context/plugin-author-config/user-context-config.md +66 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/automation.md +69 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/onboarding-examples.md +204 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/onboarding-state-template.json +87 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/onboarding.md +497 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/semantic-layer/connector-playbook.md +74 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/semantic-layer/setup.md +65 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/semantic-layer/skill-template.md +160 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/semantic-layer/source-intake.md +75 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/semantic-layer/weekly-polling-automation.md +96 -0
- package/template/.codex/skills/data-analytics/skills/user-context/references/source-category-runtime.md +263 -0
- package/template/.codex/skills/data-analytics/skills/user-context/scripts/data_analytics_preflight.py +1460 -0
- package/template/.codex/skills/data-analytics/skills/user-context/scripts/init_user_context_state.py +128 -0
- package/template/.codex/skills/data-analytics/skills/user-context/scripts/reset_user_context_state.py +101 -0
- package/template/.codex/skills/data-analytics/skills/user-context/scripts/validate_user_context_preflight.py +499 -0
- package/template/.codex/skills/data-analytics/skills/user-context/tests/test_state_helpers.py +978 -0
- package/template/.codex/skills/data-analytics/skills/validate-data/SKILL.md +190 -0
- package/template/.codex/skills/data-analytics/skills/validate-data/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/visualize-data/SKILL.md +157 -0
- package/template/.codex/skills/data-analytics/skills/visualize-data/agents/openai.yaml +6 -0
- package/template/.codex/skills/data-analytics/skills/visualize-data/references/seaborn-templates.md +774 -0
- package/template/.codex/skills/data-analytics/src/DESIGN.md +222 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/App.tsx +3666 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/analytics-layout.test.mjs +136 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/ChartFrame.tsx +54 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/ChartLegend.tsx +96 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/ChartRenderer.tsx +1647 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/ChartTooltip.tsx +245 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-app-helpers.tsx +462 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-capabilities.ts +107 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-compatibility.ts +164 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-contract.ts +192 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-theme.ts +203 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-tokens.css +619 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/charting/chart-transforms.ts +402 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/fonts/SystemSansVariableVF.woff2 +0 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/imageExport.ts +370 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/layout/AnalyticsLayoutCanvas.tsx +536 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/layout/RichMarkdown.tsx +681 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/layout/analyticsLayoutCore.ts +164 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/main.tsx +21 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/scripts/chart_contract.py +472 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/scripts/check_analytics_app_runtime_links.py +75 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/scripts/design_contract.py +142 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/scripts/package_utils.py +142 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/scripts/tests/test_package_utils.py +377 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/styles.css +3468 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/tables/DataTable.d.ts +44 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/tables/DataTable.jsx +639 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/tables/data-table.css +327 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/tokens.css +225 -0
- package/template/.codex/skills/data-analytics/src/analytics-app/types.ts +204 -0
- package/template/.codex/skills/data-analytics/src/analytics-app-core.md +85 -0
- package/template/.codex/skills/data-analytics/src/codex-style-contract.md +30 -0
- package/template/.codex/skills/data-analytics/src/datascience-artifact-widget.html +12 -0
- package/template/.codex/skills/data-analytics/src/datascience-artifact-widget.jsx +1008 -0
- package/template/.codex/skills/data-analytics/src/datascience-chart-widget.css +2117 -0
- package/template/.codex/skills/data-analytics/src/datascience-chart-widget.html +122 -0
- package/template/.codex/skills/data-analytics/src/datascience-chart-widget.js +3588 -0
- package/template/.codex/skills/data-analytics/src/datascience-table-widget.css +483 -0
- package/template/.codex/skills/data-analytics/src/datascience-table-widget.html +32 -0
- package/template/.codex/skills/data-analytics/src/datascience-table-widget.js +333 -0
- package/template/.codex/skills/data-analytics/src/mcp-host.js +153 -0
- package/template/.codex/skills/data-analytics/src/recharts-config.js +315 -0
- package/template/.codex/skills/data-analytics/src/recharts-renderer.jsx +294 -0
- package/template/.codex/skills/data-analytics/src/sql-source-view.css +33 -0
- package/template/.codex/skills/data-analytics/src/sql-source-view.js +157 -0
- package/template/.codex/skills/data-analytics/src/styles/codex-theme.css +121 -0
- package/template/.codex/skills/data-analytics/src/table-renderer.jsx +28 -0
- package/template/.codex/skills/data-analytics/tests/chart-transforms.test.mjs +87 -0
- package/template/.codex/skills/data-analytics/tests/funnel-smoke.html +105 -0
- package/template/.codex/skills/data-analytics/tests/inline-widget-compare.html +233 -0
- package/template/.codex/skills/data-analytics/tests/mcp-server.test.mjs +1500 -0
- package/template/.codex/skills/data-analytics/tests/native-style-contract.test.mjs +219 -0
- package/template/.codex/skills/data-analytics/tests/recharts-config.test.mjs +144 -0
- package/template/.codex/skills/data-analytics/tests/recharts-renderer.test.mjs +11 -0
- package/template/.codex/skills/data-analytics/tests/rich-markdown.test.mjs +54 -0
- package/template/.codex/skills/data-analytics/tests/widget-render-harness.html +321 -0
- package/template/.codex/skills/data-analytics/tsconfig.json +19 -0
- package/template/.codex/skills/data-analytics/vite.config.ts +46 -0
- package/template/.codex/skills/high-fidelity-html-prototype/SKILL.md +102 -0
- package/template/.codex/skills/high-fidelity-html-prototype/agents/openai.yaml +5 -0
- package/template/.codex/skills/product-design/.app.json +7 -0
- package/template/.codex/skills/product-design/.codex-plugin/plugin.json +50 -0
- package/template/.codex/skills/product-design/README.md +50 -0
- package/template/.codex/skills/product-design/agents/openai.yaml +4 -0
- package/template/.codex/skills/product-design/assets/composerIcon.svg +9 -0
- package/template/.codex/skills/product-design/assets/logo.png +0 -0
- package/template/.codex/skills/product-design/package.json +11 -0
- package/template/.codex/skills/product-design/references/browser-order.md +9 -0
- package/template/.codex/skills/product-design/references/communication-protocol.md +45 -0
- package/template/.codex/skills/product-design/references/critical-overrides.md +58 -0
- package/template/.codex/skills/product-design/references/local-prototype-preflight.md +16 -0
- package/template/.codex/skills/product-design/scripts/bootstrap-prototype.mjs +147 -0
- package/template/.codex/skills/product-design/skills/audit/SKILL.md +159 -0
- package/template/.codex/skills/product-design/skills/audit/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/audit/references/design-audit-framework.md +73 -0
- package/template/.codex/skills/product-design/skills/design-qa/SKILL.md +133 -0
- package/template/.codex/skills/product-design/skills/design-qa/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/design-qa/references/qa-rubric.md +61 -0
- package/template/.codex/skills/product-design/skills/get-context/SKILL.md +81 -0
- package/template/.codex/skills/product-design/skills/get-context/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/ideate/SKILL.md +179 -0
- package/template/.codex/skills/product-design/skills/ideate/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/image-to-code/SKILL.md +105 -0
- package/template/.codex/skills/product-design/skills/image-to-code/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/index/SKILL.md +126 -0
- package/template/.codex/skills/product-design/skills/index/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/prototype/SKILL.md +128 -0
- package/template/.codex/skills/product-design/skills/prototype/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/prototype/references/existing-codebase-edits.md +18 -0
- package/template/.codex/skills/product-design/skills/research/SKILL.md +92 -0
- package/template/.codex/skills/product-design/skills/research/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/share/SKILL.md +41 -0
- package/template/.codex/skills/product-design/skills/share/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/url-to-code/SKILL.md +124 -0
- package/template/.codex/skills/product-design/skills/url-to-code/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/user-context/SKILL.md +147 -0
- package/template/.codex/skills/product-design/skills/user-context/agents/openai.yaml +6 -0
- package/template/.codex/skills/product-design/skills/user-context/plugin-author-config/user-context-template.md +63 -0
- package/template/.codex/skills/product-design/skills/user-context/references/onboarding.md +66 -0
- package/template/.codex/skills/product-design/skills/user-context/scripts/init_user_context.py +86 -0
- package/template/.codex/skills/product-design/skills/user-context/scripts/user_context_preflight.py +204 -0
- package/template/.codex/skills/product-design/templates/prototype/AGENTS.md +7 -0
- package/template/.codex/skills/product-design/templates/prototype/index.html +12 -0
- package/template/.codex/skills/product-design/templates/prototype/package.json +18 -0
- package/template/.codex/skills/product-design/templates/prototype/src/App.jsx +5 -0
- package/template/.codex/skills/product-design/templates/prototype/src/main.jsx +10 -0
- package/template/.codex/skills/product-design/templates/prototype/src/styles.css +13 -0
- package/template/.codex/skills/product-design/templates/prototype/vite.config.mjs +14 -0
- package/template/.codex/skills/product-design-prototype/SKILL.md +2 -4
- package/template/.codex/skills/prototype-review/SKILL.md +7 -7
- package/template/.codex/skills/yss-design-system/SKILL.md +4 -2
- package/template/.codex/skills/yss-product-lifecycle/SKILL.md +10 -7
- package/template/.codex/skills/yss-product-lifecycle/references/artifact-checklist.md +1 -0
- package/template/.codex/skills/yss-product-lifecycle/references/stage-routing.md +1 -1
- package/template/.codex/skills/yss-ui/SKILL.md +4 -10
- package/template/.codex/skills/yss-ui/references/quick-recipes.md +1 -1
- package/template/AGENTS.md +9 -3
- package/template/CONTEXT.md +1 -0
- package/template/docs/adr/adr-product-design-prototype-entrypoint.md +54 -0
- package/template/docs/api/templates/openapi-draft-review-checklist.md +5 -1
- package/template/docs/design/README.md +13 -6
- package/template/docs/design/prototypes/.gitkeep +1 -0
- package/template/docs/design/templates/interaction-spec-template.md +8 -3
- package/template/docs/design/templates/product-overview-design-template.md +34 -5
- package/template/docs/design/templates/prototype-confirmation-template.md +57 -0
- package/template/docs/design/templates/prototype-review-checklist.md +7 -3
- package/template/docs/design/templates/state-matrix-template.md +1 -1
- package/template/docs/process/harness-executive-blueprint.md +6 -1
- package/template/docs/process/harness-process-tailoring.md +3 -3
- package/template/docs/process/harness-work-unit-map.md +1 -1
- package/template/docs/process/lifecycle-artifact-map.md +7 -5
- package/template/docs/process/product-prototype-workflow.md +82 -0
- package/template/docs/templates/requirement-freeze-template.md +4 -3
- package/template/docs/user-guide/product-lifecycle-workflow.md +2 -2
- package/template/docs/user-guide/product-rd-lifecycle-best-practices.md +54 -24
- package/template/.codex/skills/component-story-prototype/SKILL.md +0 -55
- package/template/.codex/skills/component-story-prototype/agents/openai.yaml +0 -4
- package/template/.codex/skills/mock-api-prototype/SKILL.md +0 -48
- package/template/.codex/skills/mock-api-prototype/agents/openai.yaml +0 -4
|
@@ -0,0 +1,321 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>Data Analytics widget render harness</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
color-scheme: light dark;
|
|
10
|
+
--background: #f8fafc;
|
|
11
|
+
--foreground: #111827;
|
|
12
|
+
--muted: #64748b;
|
|
13
|
+
--border: #d8dee8;
|
|
14
|
+
--card: #ffffff;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@media (prefers-color-scheme: dark) {
|
|
18
|
+
:root {
|
|
19
|
+
--background: #101318;
|
|
20
|
+
--foreground: #f8fafc;
|
|
21
|
+
--muted: #94a3b8;
|
|
22
|
+
--border: #2f3745;
|
|
23
|
+
--card: #151a22;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
* {
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
body {
|
|
32
|
+
margin: 0;
|
|
33
|
+
padding: 28px;
|
|
34
|
+
background: var(--background);
|
|
35
|
+
color: var(--foreground);
|
|
36
|
+
font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
header {
|
|
40
|
+
margin: 0 0 18px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
h1 {
|
|
44
|
+
margin: 0 0 6px;
|
|
45
|
+
font-size: 24px;
|
|
46
|
+
line-height: 1.15;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
p {
|
|
50
|
+
margin: 0;
|
|
51
|
+
color: var(--muted);
|
|
52
|
+
font-size: 13px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.actions {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-wrap: wrap;
|
|
58
|
+
gap: 8px;
|
|
59
|
+
margin: 16px 0 18px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
button {
|
|
63
|
+
min-height: 30px;
|
|
64
|
+
border: 1px solid var(--border);
|
|
65
|
+
border-radius: 6px;
|
|
66
|
+
padding: 0 10px;
|
|
67
|
+
background: var(--card);
|
|
68
|
+
color: var(--foreground);
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
font: inherit;
|
|
71
|
+
font-size: 13px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.grid {
|
|
75
|
+
display: grid;
|
|
76
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
77
|
+
gap: 18px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@media (max-width: 900px) {
|
|
81
|
+
.grid {
|
|
82
|
+
grid-template-columns: minmax(0, 1fr);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
iframe {
|
|
87
|
+
display: block;
|
|
88
|
+
width: 100%;
|
|
89
|
+
height: 520px;
|
|
90
|
+
border: 1px solid var(--border);
|
|
91
|
+
border-radius: 8px;
|
|
92
|
+
background: transparent;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
#status {
|
|
96
|
+
margin-top: 14px;
|
|
97
|
+
}
|
|
98
|
+
</style>
|
|
99
|
+
</head>
|
|
100
|
+
<body>
|
|
101
|
+
<header>
|
|
102
|
+
<h1>Data Analytics widget render smoke</h1>
|
|
103
|
+
<p>Loads two chart widget instances and sends targeted host updates to check that payloads and display modes stay separate.</p>
|
|
104
|
+
</header>
|
|
105
|
+
|
|
106
|
+
<div class="actions" aria-label="Harness actions">
|
|
107
|
+
<button type="button" data-expand="chart-a">Expand first chart</button>
|
|
108
|
+
<button type="button" data-expand="chart-b">Expand second chart</button>
|
|
109
|
+
<button type="button" id="reset">Reset inline</button>
|
|
110
|
+
<button type="button" id="cross-talk">Send cross-talk probe</button>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<main class="grid">
|
|
114
|
+
<iframe
|
|
115
|
+
id="chart-a"
|
|
116
|
+
title="Data Analytics chart widget A"
|
|
117
|
+
src="../src/datascience-chart-widget.html?widgetInstanceId=chart-a"
|
|
118
|
+
></iframe>
|
|
119
|
+
<iframe
|
|
120
|
+
id="chart-b"
|
|
121
|
+
title="Data Analytics chart widget B"
|
|
122
|
+
src="../src/datascience-chart-widget.html?widgetInstanceId=chart-b"
|
|
123
|
+
></iframe>
|
|
124
|
+
</main>
|
|
125
|
+
|
|
126
|
+
<p id="status" role="status">Loading widgets.</p>
|
|
127
|
+
|
|
128
|
+
<script>
|
|
129
|
+
const widgetUri = "ui://widget/datascience-chart.html";
|
|
130
|
+
const payloads = {
|
|
131
|
+
"chart-a": {
|
|
132
|
+
ok: true,
|
|
133
|
+
widget_type: "chart",
|
|
134
|
+
title: "Activation by Segment",
|
|
135
|
+
source: {
|
|
136
|
+
query: {
|
|
137
|
+
engine: "databricks",
|
|
138
|
+
id: "activation-query",
|
|
139
|
+
executed_at: "2026-05-01T03:30:00Z",
|
|
140
|
+
text: "SELECT segment, activation_rate FROM harness.activation_by_segment",
|
|
141
|
+
},
|
|
142
|
+
},
|
|
143
|
+
table: {
|
|
144
|
+
columns: [
|
|
145
|
+
{ key: "segment", label: "Segment", type: "text" },
|
|
146
|
+
{ key: "activation_rate", label: "Activation", type: "number", unit: "%" },
|
|
147
|
+
],
|
|
148
|
+
rows: [
|
|
149
|
+
{ segment: "Free", activation_rate: 19 },
|
|
150
|
+
{ segment: "Team", activation_rate: 33 },
|
|
151
|
+
{ segment: "Enterprise", activation_rate: 48 },
|
|
152
|
+
],
|
|
153
|
+
row_count: 3,
|
|
154
|
+
truncated: false,
|
|
155
|
+
},
|
|
156
|
+
chart: {
|
|
157
|
+
type: "bar",
|
|
158
|
+
fields: {
|
|
159
|
+
x: { field: "segment", type: "nominal" },
|
|
160
|
+
y: { field: "activation_rate", type: "quantitative", aggregate: "sum", unit: "%" },
|
|
161
|
+
},
|
|
162
|
+
},
|
|
163
|
+
display: {
|
|
164
|
+
unit: "%",
|
|
165
|
+
controls: true,
|
|
166
|
+
},
|
|
167
|
+
},
|
|
168
|
+
"chart-b": {
|
|
169
|
+
ok: true,
|
|
170
|
+
widget_type: "chart",
|
|
171
|
+
title: "Revenue by Region",
|
|
172
|
+
source: {
|
|
173
|
+
query: {
|
|
174
|
+
engine: "trino",
|
|
175
|
+
id: "revenue-query",
|
|
176
|
+
text: "SELECT region, motion, revenue_m FROM harness.revenue_by_region",
|
|
177
|
+
},
|
|
178
|
+
},
|
|
179
|
+
table: {
|
|
180
|
+
columns: [
|
|
181
|
+
{ key: "region", label: "Region", type: "text" },
|
|
182
|
+
{ key: "motion", label: "Motion", type: "text" },
|
|
183
|
+
{ key: "revenue_m", label: "Revenue", type: "number", unit: "$M" },
|
|
184
|
+
],
|
|
185
|
+
rows: [
|
|
186
|
+
{ region: "North America", motion: "Self-serve", revenue_m: 62 },
|
|
187
|
+
{ region: "North America", motion: "Sales-led", revenue_m: 38 },
|
|
188
|
+
{ region: "EMEA", motion: "Self-serve", revenue_m: 46 },
|
|
189
|
+
{ region: "EMEA", motion: "Sales-led", revenue_m: 54 },
|
|
190
|
+
{ region: "APAC", motion: "Self-serve", revenue_m: 57 },
|
|
191
|
+
{ region: "APAC", motion: "Sales-led", revenue_m: 43 },
|
|
192
|
+
],
|
|
193
|
+
row_count: 6,
|
|
194
|
+
truncated: false,
|
|
195
|
+
},
|
|
196
|
+
chart: {
|
|
197
|
+
type: "bar",
|
|
198
|
+
fields: {
|
|
199
|
+
x: { field: "region", type: "nominal" },
|
|
200
|
+
y: { field: "revenue_m", type: "quantitative", aggregate: "sum", unit: "$M" },
|
|
201
|
+
color: { field: "motion", type: "nominal" },
|
|
202
|
+
},
|
|
203
|
+
options: {
|
|
204
|
+
orientation: "horizontal",
|
|
205
|
+
grouping: "stacked100",
|
|
206
|
+
},
|
|
207
|
+
},
|
|
208
|
+
display: {
|
|
209
|
+
unit: "$M",
|
|
210
|
+
controls: true,
|
|
211
|
+
},
|
|
212
|
+
notes: ["Harness payload B."],
|
|
213
|
+
},
|
|
214
|
+
};
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
function asToolResult(payload, targetWidgetId) {
|
|
218
|
+
return {
|
|
219
|
+
content: [{ type: "text", text: JSON.stringify(payload) }],
|
|
220
|
+
structuredContent: payload,
|
|
221
|
+
isError: false,
|
|
222
|
+
_meta: {
|
|
223
|
+
"ui/resourceUri": widgetUri,
|
|
224
|
+
["openai/outputTemplate"]: widgetUri,
|
|
225
|
+
targetWidgetId,
|
|
226
|
+
},
|
|
227
|
+
};
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
function frameWindow(id) {
|
|
231
|
+
return document.getElementById(id).contentWindow;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
function installHost(id) {
|
|
235
|
+
const win = frameWindow(id);
|
|
236
|
+
if (!win) return;
|
|
237
|
+
win.openai = {
|
|
238
|
+
widgetInstanceId: id,
|
|
239
|
+
displayMode: "inline",
|
|
240
|
+
availableDisplayModes: ["inline", "fullscreen"],
|
|
241
|
+
toolOutput: asToolResult(payloads[id], id),
|
|
242
|
+
async requestDisplayMode({ mode }) {
|
|
243
|
+
this.displayMode = mode;
|
|
244
|
+
win.postMessage({ targetWidgetId: id, displayMode: mode }, "*");
|
|
245
|
+
return { mode };
|
|
246
|
+
},
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
function sendPayload(id) {
|
|
251
|
+
const win = frameWindow(id);
|
|
252
|
+
if (!win) return;
|
|
253
|
+
const toolResult = asToolResult(payloads[id], id);
|
|
254
|
+
if (win.openai) win.openai.toolOutput = toolResult;
|
|
255
|
+
win.dispatchEvent(
|
|
256
|
+
new win.CustomEvent("openai:set_globals", {
|
|
257
|
+
detail: { globals: { targetWidgetId: id, toolOutput: toolResult } },
|
|
258
|
+
}),
|
|
259
|
+
);
|
|
260
|
+
win.postMessage(toolResult, "*");
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
function sendDisplayMode(id, mode) {
|
|
264
|
+
const win = frameWindow(id);
|
|
265
|
+
if (!win) return;
|
|
266
|
+
if (win.openai) win.openai.displayMode = mode;
|
|
267
|
+
win.postMessage({ targetWidgetId: id, displayMode: mode }, "*");
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
function loadFrame(id) {
|
|
271
|
+
const frame = document.getElementById(id);
|
|
272
|
+
const send = () => {
|
|
273
|
+
installHost(id);
|
|
274
|
+
sendPayload(id);
|
|
275
|
+
};
|
|
276
|
+
frame.addEventListener("load", () => {
|
|
277
|
+
send();
|
|
278
|
+
window.setTimeout(send, 100);
|
|
279
|
+
});
|
|
280
|
+
window.setTimeout(send, 100);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
function sendCrossTalkProbe() {
|
|
284
|
+
for (const id of Object.keys(payloads)) {
|
|
285
|
+
const win = frameWindow(id);
|
|
286
|
+
if (!win) continue;
|
|
287
|
+
const otherId = id === "chart-a" ? "chart-b" : "chart-a";
|
|
288
|
+
const wrongTargetResult = asToolResult({ ...payloads[otherId], title: "Wrong target" }, otherId);
|
|
289
|
+
if (win.openai) win.openai.toolOutput = wrongTargetResult;
|
|
290
|
+
win.postMessage(wrongTargetResult, "*");
|
|
291
|
+
win.postMessage(
|
|
292
|
+
asToolResult({ ...payloads[id], subtitle: "Accepted targeted payload." }, id),
|
|
293
|
+
"*",
|
|
294
|
+
);
|
|
295
|
+
win.postMessage({ targetWidgetId: otherId, displayMode: "fullscreen" }, "*");
|
|
296
|
+
}
|
|
297
|
+
document.getElementById("status").textContent =
|
|
298
|
+
"Cross-talk probe sent. Each frame should reject the wrong target and accept its own targeted payload.";
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
loadFrame("chart-a");
|
|
302
|
+
loadFrame("chart-b");
|
|
303
|
+
|
|
304
|
+
document.querySelectorAll("[data-expand]").forEach((button) => {
|
|
305
|
+
button.addEventListener("click", () => {
|
|
306
|
+
sendDisplayMode(button.dataset.expand, "fullscreen");
|
|
307
|
+
document.getElementById("status").textContent = `${button.dataset.expand} requested fullscreen.`;
|
|
308
|
+
});
|
|
309
|
+
});
|
|
310
|
+
document.getElementById("reset").addEventListener("click", () => {
|
|
311
|
+
sendDisplayMode("chart-a", "inline");
|
|
312
|
+
sendDisplayMode("chart-b", "inline");
|
|
313
|
+
document.getElementById("status").textContent = "Both charts reset inline.";
|
|
314
|
+
});
|
|
315
|
+
document.getElementById("cross-talk").addEventListener("click", sendCrossTalkProbe);
|
|
316
|
+
window.setTimeout(() => {
|
|
317
|
+
document.getElementById("status").textContent = "Harness ready.";
|
|
318
|
+
}, 600);
|
|
319
|
+
</script>
|
|
320
|
+
</body>
|
|
321
|
+
</html>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"module": "ESNext",
|
|
6
|
+
"moduleResolution": "Bundler",
|
|
7
|
+
"strict": true,
|
|
8
|
+
"allowSyntheticDefaultImports": true,
|
|
9
|
+
"esModuleInterop": true,
|
|
10
|
+
"forceConsistentCasingInFileNames": true,
|
|
11
|
+
"isolatedModules": true,
|
|
12
|
+
"resolveJsonModule": true,
|
|
13
|
+
"skipLibCheck": true,
|
|
14
|
+
"noUncheckedIndexedAccess": true,
|
|
15
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
16
|
+
"types": ["node"]
|
|
17
|
+
},
|
|
18
|
+
"include": ["vite.config.ts"]
|
|
19
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import { fileURLToPath } from "node:url";
|
|
3
|
+
|
|
4
|
+
import { defineConfig } from "vite";
|
|
5
|
+
import { viteSingleFile } from "vite-plugin-singlefile";
|
|
6
|
+
|
|
7
|
+
const input = process.env.INPUT ?? "datascience-chart-widget.html";
|
|
8
|
+
const isArtifactWidget = input.includes("datascience-artifact-widget");
|
|
9
|
+
const pluginRoot = fileURLToPath(new URL(".", import.meta.url));
|
|
10
|
+
const reactAliases = isArtifactWidget
|
|
11
|
+
? [
|
|
12
|
+
{ find: /^react$/, replacement: path.join(pluginRoot, "node_modules/react/index.js") },
|
|
13
|
+
{
|
|
14
|
+
find: /^react\/jsx-runtime$/,
|
|
15
|
+
replacement: path.join(pluginRoot, "node_modules/react/jsx-runtime.js"),
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
find: /^react\/jsx-dev-runtime$/,
|
|
19
|
+
replacement: path.join(pluginRoot, "node_modules/react/jsx-dev-runtime.js"),
|
|
20
|
+
},
|
|
21
|
+
{ find: /^react-dom$/, replacement: path.join(pluginRoot, "node_modules/react-dom/index.js") },
|
|
22
|
+
{
|
|
23
|
+
find: /^react-dom\/client$/,
|
|
24
|
+
replacement: path.join(pluginRoot, "node_modules/react-dom/client.js"),
|
|
25
|
+
},
|
|
26
|
+
]
|
|
27
|
+
: [];
|
|
28
|
+
|
|
29
|
+
export default defineConfig({
|
|
30
|
+
root: "src",
|
|
31
|
+
plugins: [viteSingleFile()],
|
|
32
|
+
resolve: {
|
|
33
|
+
alias: reactAliases,
|
|
34
|
+
dedupe: ["react", "react-dom"],
|
|
35
|
+
preserveSymlinks: true
|
|
36
|
+
},
|
|
37
|
+
build: {
|
|
38
|
+
outDir: "../assets",
|
|
39
|
+
emptyOutDir: false,
|
|
40
|
+
minify: isArtifactWidget ? "oxc" : false,
|
|
41
|
+
cssMinify: false,
|
|
42
|
+
rollupOptions: {
|
|
43
|
+
input
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
});
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: high-fidelity-html-prototype
|
|
3
|
+
description: Use after low-fidelity prototype review is approved and before PRD calibration, requirement freeze, OpenAPI Draft, or UI implementation when a user-facing YSS feature needs a high-fidelity interactive HTML prototype using Ant Design v6.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# High Fidelity HTML Prototype
|
|
7
|
+
|
|
8
|
+
Use this skill only after `prototype-review` approves the low-fidelity prototype / interaction design. It turns reviewed product design into a high-fidelity, browser-runnable HTML artifact for business, UX, frontend, and API review.
|
|
9
|
+
|
|
10
|
+
## Required Inputs
|
|
11
|
+
|
|
12
|
+
- PRD baseline: `docs/requirements/<feature>-prd.md`.
|
|
13
|
+
- Product overview design / functional architecture: `docs/design/<feature>-product-overview-design.md`.
|
|
14
|
+
- Interaction spec: `docs/design/<feature>-interaction-spec.md`.
|
|
15
|
+
- State matrix: `docs/design/<feature>-state-matrix.md`.
|
|
16
|
+
- Approved low-fidelity prototype review: `docs/design/<feature>-prototype-review.md` or equivalent issue comment.
|
|
17
|
+
- Project design system: `docs/design/design.md` and `docs/design/tokens/*`.
|
|
18
|
+
|
|
19
|
+
If low-fidelity `prototype-review` is blocked or missing, stop and return to `product-design-prototype` / `prototype-review`.
|
|
20
|
+
|
|
21
|
+
## Ant Design Official Agent Baseline
|
|
22
|
+
|
|
23
|
+
Use the official Ant Design agent guidance as the implementation baseline:
|
|
24
|
+
|
|
25
|
+
- Read or reference `https://ant.design/docs/react/for-agents` when the task starts.
|
|
26
|
+
- Use `@ant-design/cli` before choosing unfamiliar components, props, tokens, or migration-sensitive APIs.
|
|
27
|
+
- Prefer direct CLI subcommands because `--help` may fail in some Node environments while subcommands still work.
|
|
28
|
+
|
|
29
|
+
Recommended commands:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm view antd version
|
|
33
|
+
npm view @ant-design/cli version
|
|
34
|
+
npx -y @ant-design/cli@6.5.0 info Button
|
|
35
|
+
npx -y @ant-design/cli@6.5.0 token Button
|
|
36
|
+
npx -y @ant-design/cli@6.5.0 demo Select basic
|
|
37
|
+
npx -y @ant-design/cli@6.5.0 changelog 5.0.0 6.5.0 Table
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Use the latest verified v6.x version instead of `6.5.0` when npm reports a newer v6 release. Record the exact version and any queried components in the output.
|
|
41
|
+
|
|
42
|
+
## Core Rules
|
|
43
|
+
|
|
44
|
+
- Output is HTML: `docs/design/prototypes/<feature>/index.html`.
|
|
45
|
+
- The prototype must use Ant Design v6. Before generating or updating code, verify the current v6 package with `npm view antd version` and `npm view @ant-design/cli version`. If the latest version is not v6.x, pin the newest available v6.x version and record the choice.
|
|
46
|
+
- Use React >= 18, `antd@6.x`, and `@ant-design/icons@6.x` for interactive prototypes.
|
|
47
|
+
- Prefer Ant Design components and tokens over hand-built controls: `Layout`, `Menu`, `Breadcrumb`, `Button`, `Input`, `Select`, `Table`, `Form`, `Tabs`, `Steps`, `Drawer`, `Modal`, `Alert`, `Tooltip`, `Tag`, `Badge`, `DatePicker`, `Upload`, `Pagination`, `Empty`, `Spin`, `Result`.
|
|
48
|
+
- Do not create extra data-service or fixture artifacts. Use embedded sample data inside the HTML/JS for visual and interaction demonstration only.
|
|
49
|
+
- Mark the file clearly as `PROTOTYPE ONLY - NOT PRODUCTION CODE`.
|
|
50
|
+
- Do not treat the HTML prototype as a stable frontend implementation, generated-client contract, or OpenAPI source of truth. It informs PRD calibration and OpenAPI Draft.
|
|
51
|
+
|
|
52
|
+
## Interaction Coverage
|
|
53
|
+
|
|
54
|
+
The HTML prototype must cover, or explicitly mark not applicable:
|
|
55
|
+
|
|
56
|
+
- Primary page navigation and page-to-page return path.
|
|
57
|
+
- Main task completion flow.
|
|
58
|
+
- Search / filter / sort / pagination behavior.
|
|
59
|
+
- Form input, validation, submit, cancel, dirty-form leave prompt.
|
|
60
|
+
- Drawer / modal / confirmation interactions.
|
|
61
|
+
- loading, empty, error, readonly, disabled, no-permission, conflict, success states.
|
|
62
|
+
- Permission behavior: hidden vs disabled vs rejected action.
|
|
63
|
+
- Field-level and page-level error placement.
|
|
64
|
+
- Responsive behavior for at least desktop, tablet, and narrow mobile viewport.
|
|
65
|
+
|
|
66
|
+
## Verification
|
|
67
|
+
|
|
68
|
+
Run a local browser verification before calling the artifact ready:
|
|
69
|
+
|
|
70
|
+
- Open `docs/design/prototypes/<feature>/index.html` or run the dev server if the prototype needs one.
|
|
71
|
+
- Check that the page renders nonblank.
|
|
72
|
+
- Exercise the main flow and at least one failure / permission / conflict state.
|
|
73
|
+
- Check at least one desktop and one mobile viewport.
|
|
74
|
+
- Record verification evidence in the response or in the related review / issue.
|
|
75
|
+
|
|
76
|
+
## Output Contract
|
|
77
|
+
|
|
78
|
+
```markdown
|
|
79
|
+
### 当前阶段
|
|
80
|
+
High-fidelity HTML prototype
|
|
81
|
+
|
|
82
|
+
### 输入资产
|
|
83
|
+
- <PRD / product overview / interaction spec / state matrix / prototype review>
|
|
84
|
+
|
|
85
|
+
### 高保真产物
|
|
86
|
+
- `docs/design/prototypes/<feature>/index.html`
|
|
87
|
+
|
|
88
|
+
### Ant Design v6 依据
|
|
89
|
+
- <antd version, @ant-design/cli version, official docs checked, CLI component/token/demo queries>
|
|
90
|
+
|
|
91
|
+
### 覆盖范围
|
|
92
|
+
- <pages, flows, states, permissions, data dependencies>
|
|
93
|
+
|
|
94
|
+
### 验证证据
|
|
95
|
+
- <render command or file open path, viewport checks, interaction checks>
|
|
96
|
+
|
|
97
|
+
### 是否可进入 PRD 校准 / API 影响分析
|
|
98
|
+
- <yes/no; list blocking gaps>
|
|
99
|
+
|
|
100
|
+
### 下一步
|
|
101
|
+
- <PRD calibration / return to high-fidelity prototype / return to product-design-prototype>
|
|
102
|
+
```
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
version: 1
|
|
2
|
+
interface:
|
|
3
|
+
display_name: "High Fidelity HTML Prototype"
|
|
4
|
+
short_description: "Ant Design v6 interactive HTML prototype gate"
|
|
5
|
+
default_prompt: "Use $high-fidelity-html-prototype to create an Ant Design v6 high-fidelity interactive HTML prototype after low-fidelity prototype review."
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "product-design",
|
|
3
|
+
"version": "0.1.41",
|
|
4
|
+
"description": "The Product Design plugin is built for turning early ideas into prototypes teams can review. It starts design and build work by confirming the brief, then helps teams explore product directions, audit user flows, prototype from a live URL, and make static screenshots interactive.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "OpenAI",
|
|
7
|
+
"url": "https://openai.com/"
|
|
8
|
+
},
|
|
9
|
+
"homepage": "https://github.com/openai/role-specific-plugins",
|
|
10
|
+
"repository": "https://github.com/openai/role-specific-plugins/tree/main/plugins/product-design",
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"keywords": [
|
|
13
|
+
"prototype",
|
|
14
|
+
"frontend",
|
|
15
|
+
"ux-research",
|
|
16
|
+
"ux-audit",
|
|
17
|
+
"accessibility-audit",
|
|
18
|
+
"research",
|
|
19
|
+
"context-gathering",
|
|
20
|
+
"ideation",
|
|
21
|
+
"image-generation",
|
|
22
|
+
"prototype"
|
|
23
|
+
],
|
|
24
|
+
"skills": "./skills/",
|
|
25
|
+
"apps": "./.app.json",
|
|
26
|
+
"interface": {
|
|
27
|
+
"displayName": "Product Design",
|
|
28
|
+
"shortDescription": "Explore and prototype ideas",
|
|
29
|
+
"longDescription": "Turn early ideas into prototypes teams can review. Explore product directions, audit user flows, research user friction, prototype from a live URL, and make static screenshots interactive. Start with a written brief, URL, screenshot, or existing design, then compare visual directions before building.\n\nUse available browser, Figma, Canva, image generation, and hosting tools to gather references, create concepts, review the result, and carry the work forward with your team.",
|
|
30
|
+
"developerName": "OpenAI",
|
|
31
|
+
"category": "Design",
|
|
32
|
+
"capabilities": [
|
|
33
|
+
"Interactive",
|
|
34
|
+
"Read",
|
|
35
|
+
"Write"
|
|
36
|
+
],
|
|
37
|
+
"websiteURL": "https://openai.com/",
|
|
38
|
+
"privacyPolicyURL": "https://openai.com/policies/privacy-policy/",
|
|
39
|
+
"termsOfServiceURL": "https://openai.com/policies/terms-of-use/",
|
|
40
|
+
"defaultPrompt": [
|
|
41
|
+
"Help me get started",
|
|
42
|
+
"Turn this product idea into three visual directions",
|
|
43
|
+
"Clone this URL into an editable prototype"
|
|
44
|
+
],
|
|
45
|
+
"composerIcon": "./assets/composerIcon.svg",
|
|
46
|
+
"logo": "./assets/logo.png",
|
|
47
|
+
"brandColor": "#FF66AD",
|
|
48
|
+
"screenshots": []
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# Product Design
|
|
2
|
+
|
|
3
|
+
Turn early product ideas, live URLs, and static screenshots into prototypes teams can review, refine, and carry forward.
|
|
4
|
+
|
|
5
|
+
## When to use this plugin
|
|
6
|
+
|
|
7
|
+
Use Product Design when you want to understand an existing experience, explore a new direction, or create a prototype that people can interact with and review. You can start from a written brief, screenshots, a design image, a live URL, an existing prototype, or product references you have saved for future work, such as product URLs, Figma files, screenshots, codebase paths, or design tokens.
|
|
8
|
+
|
|
9
|
+
## Optional setup
|
|
10
|
+
|
|
11
|
+
Ask Codex:
|
|
12
|
+
|
|
13
|
+
`@Product Design Help me get started`
|
|
14
|
+
|
|
15
|
+
Product Design has a short optional setup flow that helps save useful product context such as product URLs, relevant Figma files, screenshots, codebase paths, Storybook links, tokens, and brand assets.
|
|
16
|
+
|
|
17
|
+
Already have a task in mind? Skip setup and ask for the workflow you need directly.
|
|
18
|
+
|
|
19
|
+
## Example workflows
|
|
20
|
+
|
|
21
|
+
Hero workflows are bolded.
|
|
22
|
+
|
|
23
|
+
| Workflow | Try this | Skill | Result |
|
|
24
|
+
| --- | --- | --- | --- |
|
|
25
|
+
| **Prototype a new idea** | `Build a clickable prototype for this product idea` | `prototype` | Three visual directions to choose from, followed by a runnable prototype based on your selection |
|
|
26
|
+
| **Recreate a live surface** | `Clone this URL into an editable prototype` | `url-to-code` | An editable local prototype grounded in the visible source |
|
|
27
|
+
| Implement a selected design | `Turn this selected mockup into a responsive prototype` | `image-to-code` | A faithful, interactive implementation of the design you selected |
|
|
28
|
+
| Explore visual directions | `Turn this product idea into three visual directions` | `ideate` | Distinct concepts you can compare before choosing what to build |
|
|
29
|
+
| Redesign an existing screen | `Redesign this settings screen and show me three directions before building` | `prototype` | Three grounded redesign options, followed by a prototype only after you choose a direction |
|
|
30
|
+
| **Audit a product flow** | `Audit this onboarding flow and identify the highest-impact UX and accessibility issues` | `audit` | Screenshot-backed findings tied to the steps in the experience |
|
|
31
|
+
| Research user friction | `Research the biggest UX problems users are reporting for this product` | `research` | A source-grounded view of user pain, severity, confidence, and product opportunities |
|
|
32
|
+
| Critique a prototype | `Critique this prototype and identify the highest-impact design issues` | `audit` | An evidence-grounded UX, design, and accessibility review |
|
|
33
|
+
| Share a prototype | `Share this prototype with the team` | `share` | A working shareable URL after you choose a hosting target |
|
|
34
|
+
|
|
35
|
+
### Tip: Refine a prototype with Annotations
|
|
36
|
+
|
|
37
|
+
When editing a prototype in the in-app browser, you can use the Annotations tool to point at the exact elements you want to change. Add comments on the UI or adjust CSS values directly, then send the annotations back to Codex for fast, focused edits.
|
|
38
|
+
|
|
39
|
+
## Integrations
|
|
40
|
+
|
|
41
|
+
Product Design can use available tools when they are connected:
|
|
42
|
+
|
|
43
|
+
| Tool | What it unlocks |
|
|
44
|
+
| --- | --- |
|
|
45
|
+
| Browser, Chrome, or Playwright | Capturing and inspecting live product surfaces for audits, cloning, and prototype QA |
|
|
46
|
+
| Figma or Canva | Carrying prototype work into a reviewable design workspace and using existing design context |
|
|
47
|
+
| Image generation | Exploring visual alternatives and producing assets for selected directions |
|
|
48
|
+
| Sites, Vercel, or another available hosting tool | Publishing runnable prototypes after you choose a deployment target |
|
|
49
|
+
|
|
50
|
+
You can still begin with a written brief, screenshots, image files, URLs, local prototypes, or saved design context when a connected tool is not needed.
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
interface:
|
|
2
|
+
display_name: "Product Design"
|
|
3
|
+
short_description: "Product Design audits, research, brief confirmation, ideation, prototypes, and visual QA"
|
|
4
|
+
default_prompt: "For designing, building, or extending UI work, start by confirming the design brief. Help with product-flow audits, design research, ideation, prototyping, or prototype QA."
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="9.5" y="4" width="5" height="5" rx="1" fill="#FF66AD" stroke="#FF66AD" stroke-width="1.8" stroke-linecap="round"/>
|
|
3
|
+
<path d="M15.5 16.6C15.5 16.0399 15.5 15.7599 15.609 15.546C15.7049 15.3578 15.8578 15.2049 16.046 15.109C16.2599 15 16.5399 15 17.1 15H18.9C19.4601 15 19.7401 15 19.954 15.109C20.1422 15.2049 20.2951 15.3578 20.391 15.546C20.5 15.7599 20.5 16.0399 20.5 16.6V18.4C20.5 18.9601 20.5 19.2401 20.391 19.454C20.2951 19.6422 20.1422 19.7951 19.954 19.891C19.7401 20 19.4601 20 18.9 20H17.1C16.5399 20 16.2599 20 16.046 19.891C15.8578 19.7951 15.7049 19.6422 15.609 19.454C15.5 19.2401 15.5 18.9601 15.5 18.4V16.6Z" fill="#FF66AD" stroke="#FF66AD" stroke-width="1.8" stroke-linecap="round"/>
|
|
4
|
+
<path d="M3.5 16.6C3.5 16.0399 3.5 15.7599 3.60899 15.546C3.70487 15.3578 3.85785 15.2049 4.04601 15.109C4.25992 15 4.53995 15 5.1 15H6.9C7.46005 15 7.74008 15 7.95399 15.109C8.14215 15.2049 8.29513 15.3578 8.39101 15.546C8.5 15.7599 8.5 16.0399 8.5 16.6V18.4C8.5 18.9601 8.5 19.2401 8.39101 19.454C8.29513 19.6422 8.14215 19.7951 7.95399 19.891C7.74008 20 7.46005 20 6.9 20H5.1C4.53995 20 4.25992 20 4.04601 19.891C3.85785 19.7951 3.70487 19.6422 3.60899 19.454C3.5 19.2401 3.5 18.9601 3.5 18.4V16.6Z" fill="#FF66AD" stroke="#FF66AD" stroke-width="1.8" stroke-linecap="round"/>
|
|
5
|
+
<circle cx="2.76152" cy="5.9998" r="1.7" fill="#FF66AD" stroke="#FF66AD" stroke-width="1.8" stroke-linecap="round"/>
|
|
6
|
+
<circle cx="21.2815" cy="5.9998" r="1.7" fill="#FF66AD" stroke="#FF66AD" stroke-width="1.8" stroke-linecap="round"/>
|
|
7
|
+
<path d="M15.0352 5.09961H19.5002V6.90039H16.4416C17.1636 7.48718 17.7855 8.21825 18.2629 9.13574C18.9414 10.4398 19.3009 12.0661 19.301 14.0908V14.7812H17.5002V14.0908C17.5001 12.2749 17.1783 10.9512 16.6662 9.9668C16.2553 9.17704 15.7035 8.57058 15.0352 8.09036V5.09961Z" fill="#FF66AD" fill-opacity="0.5"/>
|
|
8
|
+
<path d="M9.36816 5.09961H4.90314V6.90039H7.96173C7.23976 7.48718 6.61786 8.21825 6.14044 9.13574C5.46193 10.4398 5.10241 12.0661 5.10236 14.0908V14.7812H6.90314V14.0908C6.90319 12.2749 7.22497 10.9512 7.73712 9.9668C8.14807 9.17704 8.69981 8.57058 9.36816 8.09036V5.09961Z" fill="#FF66AD" fill-opacity="0.5"/>
|
|
9
|
+
</svg>
|
|
Binary file
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "product-design",
|
|
3
|
+
"version": "0.1.41",
|
|
4
|
+
"private": true,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"description": "The Product Design plugin is built for turning early ideas into prototypes teams can review. It starts design and build work by confirming the brief, then helps teams explore product directions, audit user flows, prototype from a live URL, and make static screenshots interactive.",
|
|
7
|
+
"repository": "https://github.com/openai/role-specific-plugins/tree/main/plugins/product-design",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"prototype:bootstrap": "node scripts/bootstrap-prototype.mjs"
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# Browser Order
|
|
2
|
+
|
|
3
|
+
Use the first available browser in this order unless the user names a preferred browser to use:
|
|
4
|
+
|
|
5
|
+
1. Browser skill.
|
|
6
|
+
2. Chrome skill.
|
|
7
|
+
3. Playwright, only after asking the user.
|
|
8
|
+
|
|
9
|
+
Use the selected browser for source capture, local preview, screenshots, DOM, styles, layout, assets, and verification. Explore the tools and what they provide if you're not familiar with them.
|