feat: whyrating - initial project from turbostarter boilerplate

This commit is contained in:
Alejandro Gutiérrez
2026-02-04 01:54:52 +01:00
commit 5cdc07cd39
1618 changed files with 338230 additions and 0 deletions

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: analyst
globs:
alwaysApply: false
---
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
<agent-activation CRITICAL="TRUE">
1. LOAD the FULL agent file from @_bmad/bmm/agents/analyst.md
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
3. Execute ALL activation steps exactly as written in the agent file
4. Follow the agent's persona and menu system precisely
5. Stay in character throughout the session
</agent-activation>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: architect
globs:
alwaysApply: false
---
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
<agent-activation CRITICAL="TRUE">
1. LOAD the FULL agent file from @_bmad/bmm/agents/architect.md
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
3. Execute ALL activation steps exactly as written in the agent file
4. Follow the agent's persona and menu system precisely
5. Stay in character throughout the session
</agent-activation>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: dev
globs:
alwaysApply: false
---
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
<agent-activation CRITICAL="TRUE">
1. LOAD the FULL agent file from @_bmad/bmm/agents/dev.md
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
3. Execute ALL activation steps exactly as written in the agent file
4. Follow the agent's persona and menu system precisely
5. Stay in character throughout the session
</agent-activation>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: pm
globs:
alwaysApply: false
---
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
<agent-activation CRITICAL="TRUE">
1. LOAD the FULL agent file from @_bmad/bmm/agents/pm.md
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
3. Execute ALL activation steps exactly as written in the agent file
4. Follow the agent's persona and menu system precisely
5. Stay in character throughout the session
</agent-activation>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: quick-flow-solo-dev
globs:
alwaysApply: false
---
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
<agent-activation CRITICAL="TRUE">
1. LOAD the FULL agent file from @_bmad/bmm/agents/quick-flow-solo-dev.md
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
3. Execute ALL activation steps exactly as written in the agent file
4. Follow the agent's persona and menu system precisely
5. Stay in character throughout the session
</agent-activation>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: sm
globs:
alwaysApply: false
---
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
<agent-activation CRITICAL="TRUE">
1. LOAD the FULL agent file from @_bmad/bmm/agents/sm.md
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
3. Execute ALL activation steps exactly as written in the agent file
4. Follow the agent's persona and menu system precisely
5. Stay in character throughout the session
</agent-activation>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: tea
globs:
alwaysApply: false
---
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
<agent-activation CRITICAL="TRUE">
1. LOAD the FULL agent file from @_bmad/bmm/agents/tea.md
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
3. Execute ALL activation steps exactly as written in the agent file
4. Follow the agent's persona and menu system precisely
5. Stay in character throughout the session
</agent-activation>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: tech-writer
globs:
alwaysApply: false
---
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
<agent-activation CRITICAL="TRUE">
1. LOAD the FULL agent file from @_bmad/bmm/agents/tech-writer.md
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
3. Execute ALL activation steps exactly as written in the agent file
4. Follow the agent's persona and menu system precisely
5. Stay in character throughout the session
</agent-activation>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: ux-designer
globs:
alwaysApply: false
---
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
<agent-activation CRITICAL="TRUE">
1. LOAD the FULL agent file from @_bmad/bmm/agents/ux-designer.md
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
3. Execute ALL activation steps exactly as written in the agent file
4. Follow the agent's persona and menu system precisely
5. Stay in character throughout the session
</agent-activation>

View File

@@ -0,0 +1,7 @@
---
description: BMAD BMM Agent: check-implementation-readiness
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THIS COMMAND: LOAD the FULL @_bmad/bmm/workflows/3-solutioning/check-implementation-readiness/workflow.md, READ its entire contents and follow its directions exactly!

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: code-review
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/4-implementation/code-review/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/4-implementation/code-review/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: correct-course
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/4-implementation/correct-course/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/4-implementation/correct-course/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,7 @@
---
description: BMAD BMM Agent: create-architecture
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THIS COMMAND: LOAD the FULL @_bmad/bmm/workflows/3-solutioning/create-architecture/workflow.md, READ its entire contents and follow its directions exactly!

View File

@@ -0,0 +1,7 @@
---
description: BMAD BMM Agent: create-epics-and-stories
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THIS COMMAND: LOAD the FULL @_bmad/bmm/workflows/3-solutioning/create-epics-and-stories/workflow.md, READ its entire contents and follow its directions exactly!

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: create-excalidraw-dataflow
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/excalidraw-diagrams/create-dataflow/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/excalidraw-diagrams/create-dataflow/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: create-excalidraw-diagram
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/excalidraw-diagrams/create-diagram/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/excalidraw-diagrams/create-diagram/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: create-excalidraw-flowchart
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/excalidraw-diagrams/create-flowchart/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/excalidraw-diagrams/create-flowchart/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: create-excalidraw-wireframe
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/excalidraw-diagrams/create-wireframe/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/excalidraw-diagrams/create-wireframe/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,7 @@
---
description: BMAD BMM Agent: create-prd
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THIS COMMAND: LOAD the FULL @_bmad/bmm/workflows/2-plan-workflows/prd/workflow.md, READ its entire contents and follow its directions exactly!

View File

@@ -0,0 +1,7 @@
---
description: BMAD BMM Agent: create-product-brief
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THIS COMMAND: LOAD the FULL @_bmad/bmm/workflows/1-analysis/create-product-brief/workflow.md, READ its entire contents and follow its directions exactly!

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: create-story
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/4-implementation/create-story/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/4-implementation/create-story/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: create-tech-spec
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/bmad-quick-flow/create-tech-spec/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/bmad-quick-flow/create-tech-spec/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,7 @@
---
description: BMAD BMM Agent: create-ux-design
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THIS COMMAND: LOAD the FULL @_bmad/bmm/workflows/2-plan-workflows/create-ux-design/workflow.md, READ its entire contents and follow its directions exactly!

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: dev-story
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/4-implementation/dev-story/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/4-implementation/dev-story/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: document-project
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/document-project/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/document-project/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,7 @@
---
description: BMAD BMM Agent: generate-project-context
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THIS COMMAND: LOAD the FULL @_bmad/bmm/workflows/generate-project-context/workflow.md, READ its entire contents and follow its directions exactly!

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: quick-dev
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/bmad-quick-flow/quick-dev/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/bmad-quick-flow/quick-dev/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,7 @@
---
description: BMAD BMM Agent: research
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THIS COMMAND: LOAD the FULL @_bmad/bmm/workflows/1-analysis/research/workflow.md, READ its entire contents and follow its directions exactly!

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: retrospective
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/4-implementation/retrospective/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/4-implementation/retrospective/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: sprint-planning
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/4-implementation/sprint-planning/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/4-implementation/sprint-planning/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: sprint-status
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/4-implementation/sprint-status/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/4-implementation/sprint-status/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: testarch-atdd
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/testarch/atdd/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/testarch/atdd/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: testarch-automate
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/testarch/automate/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/testarch/automate/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: testarch-ci
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/testarch/ci/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/testarch/ci/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: testarch-framework
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/testarch/framework/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/testarch/framework/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: testarch-nfr
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/testarch/nfr-assess/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/testarch/nfr-assess/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: testarch-test-design
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/testarch/test-design/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/testarch/test-design/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: testarch-test-review
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/testarch/test-review/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/testarch/test-review/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: testarch-trace
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/testarch/trace/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/testarch/trace/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: workflow-init
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/workflow-status/init/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/workflow-status/init/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD BMM Agent: workflow-status
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THESE STEPS - while staying in character as the current agent persona you may have loaded:
<steps CRITICAL="TRUE">
1. Always LOAD the FULL @_bmad/core/tasks/workflow.xml
2. READ its entire contents - this is the CORE OS for EXECUTING the specific workflow-config @_bmad/bmm/workflows/workflow-status/workflow.yaml
3. Pass the yaml path _bmad/bmm/workflows/workflow-status/workflow.yaml as 'workflow-config' parameter to the workflow.xml instructions
4. Follow workflow.xml instructions EXACTLY as written to process and follow the specific workflow config and its instructions
5. Save outputs after EACH section when generating any documents from templates
</steps>

View File

@@ -0,0 +1,15 @@
---
description: BMAD CORE Agent: bmad-master
globs:
alwaysApply: false
---
You must fully embody this agent's persona and follow all activation instructions exactly as specified. NEVER break character until given an exit command.
<agent-activation CRITICAL="TRUE">
1. LOAD the FULL agent file from @_bmad/core/agents/bmad-master.md
2. READ its entire contents - this contains the complete agent persona, menu, and instructions
3. Execute ALL activation steps exactly as written in the agent file
4. Follow the agent's persona and menu system precisely
5. Stay in character throughout the session
</agent-activation>

View File

@@ -0,0 +1,122 @@
---
description: BMAD CORE Task: Advanced Elicitation
globs:
alwaysApply: false
---
<task id="_bmad/core/tasks/advanced-elicitation.xml" name="Advanced Elicitation" standalone="true"
methods="{project-root}/_bmad/core/tasks/advanced-elicitation-methods.csv"
agent-party="{project-root}/_bmad/_config/agent-manifest.csv">
<llm critical="true">
<i>MANDATORY: Execute ALL steps in the flow section IN EXACT ORDER</i>
<i>DO NOT skip steps or change the sequence</i>
<i>HALT immediately when halt-conditions are met</i>
<i>Each action xml tag within step xml tag is a REQUIRED action to complete that step</i>
<i>Sections outside flow (validation, output, critical-context) provide essential context - review and apply throughout execution</i>
</llm>
<integration description="When called from workflow">
<desc>When called during template workflow processing:</desc>
<i>1. Receive or review the current section content that was just generated or</i>
<i>2. Apply elicitation methods iteratively to enhance that specific content</i>
<i>3. Return the enhanced version back when user selects 'x' to proceed and return back</i>
<i>4. The enhanced content replaces the original section content in the output document</i>
</integration>
<flow>
<step n="1" title="Method Registry Loading">
<action>Load and read {{methods}} and {{agent-party}}</action>
<csv-structure>
<i>category: Method grouping (core, structural, risk, etc.)</i>
<i>method_name: Display name for the method</i>
<i>description: Rich explanation of what the method does, when to use it, and why it's valuable</i>
<i>output_pattern: Flexible flow guide using → arrows (e.g., "analysis → insights → action")</i>
</csv-structure>
<context-analysis>
<i>Use conversation history</i>
<i>Analyze: content type, complexity, stakeholder needs, risk level, and creative potential</i>
</context-analysis>
<smart-selection>
<i>1. Analyze context: Content type, complexity, stakeholder needs, risk level, creative potential</i>
<i>2. Parse descriptions: Understand each method's purpose from the rich descriptions in CSV</i>
<i>3. Select 5 methods: Choose methods that best match the context based on their descriptions</i>
<i>4. Balance approach: Include mix of foundational and specialized techniques as appropriate</i>
</smart-selection>
</step>
<step n="2" title="Present Options and Handle Responses">
<format>
**Advanced Elicitation Options (If you launched Party Mode, they will participate randomly)**
Choose a number (1-5), [r] to Reshuffle, [a] List All, or [x] to Proceed:
1. [Method Name]
2. [Method Name]
3. [Method Name]
4. [Method Name]
5. [Method Name]
r. Reshuffle the list with 5 new options
a. List all methods with descriptions
x. Proceed / No Further Actions
</format>
<response-handling>
<case n="1-5">
<i>Execute the selected method using its description from the CSV</i>
<i>Adapt the method's complexity and output format based on the current context</i>
<i>Apply the method creatively to the current section content being enhanced</i>
<i>Display the enhanced version showing what the method revealed or improved</i>
<i>CRITICAL: Ask the user if they would like to apply the changes to the doc (y/n/other) and HALT to await response.</i>
<i>CRITICAL: ONLY if Yes, apply the changes. IF No, discard your memory of the proposed changes. If any other reply, try best to
follow the instructions given by the user.</i>
<i>CRITICAL: Re-present the same 1-5,r,x prompt to allow additional elicitations</i>
</case>
<case n="r">
<i>Select 5 random methods from advanced-elicitation-methods.csv, present new list with same prompt format</i>
<i>When selecting, try to think and pick a diverse set of methods covering different categories and approaches, with 1 and 2 being
potentially the most useful for the document or section being discovered</i>
</case>
<case n="x">
<i>Complete elicitation and proceed</i>
<i>Return the fully enhanced content back to create-doc.md</i>
<i>The enhanced content becomes the final version for that section</i>
<i>Signal completion back to create-doc.md to continue with next section</i>
</case>
<case n="a">
<i>List all methods with their descriptions from the CSV in a compact table</i>
<i>Allow user to select any method by name or number from the full list</i>
<i>After selection, execute the method as described in the n="1-5" case above</i>
</case>
<case n="direct-feedback">
<i>Apply changes to current section content and re-present choices</i>
</case>
<case n="multiple-numbers">
<i>Execute methods in sequence on the content, then re-offer choices</i>
</case>
</response-handling>
</step>
<step n="3" title="Execution Guidelines">
<i>Method execution: Use the description from CSV to understand and apply each method</i>
<i>Output pattern: Use the pattern as a flexible guide (e.g., "paths → evaluation → selection")</i>
<i>Dynamic adaptation: Adjust complexity based on content needs (simple to sophisticated)</i>
<i>Creative application: Interpret methods flexibly based on context while maintaining pattern consistency</i>
<i>Focus on actionable insights</i>
<i>Stay relevant: Tie elicitation to specific content being analyzed (the current section from the document being created unless user
indicates otherwise)</i>
<i>Identify personas: For single or multi-persona methods, clearly identify viewpoints, and use party members if available in memory
already</i>
<i>Critical loop behavior: Always re-offer the 1-5,r,a,x choices after each method execution</i>
<i>Continue until user selects 'x' to proceed with enhanced content, confirm or ask the user what should be accepted from the session</i>
<i>Each method application builds upon previous enhancements</i>
<i>Content preservation: Track all enhancements made during elicitation</i>
<i>Iterative enhancement: Each selected method (1-5) should:</i>
<i> 1. Apply to the current enhanced version of the content</i>
<i> 2. Show the improvements made</i>
<i> 3. Return to the prompt for additional elicitations or completion</i>
</step>
</flow>
</task>

View File

@@ -0,0 +1,71 @@
---
description: BMAD CORE Task: Index Docs
globs:
alwaysApply: false
---
<task id="_bmad/core/tasks/index-docs" name="Index Docs"
description="Generates or updates an index.md of all documents in the specified directory" webskip="true" standalone="true">
<llm critical="true">
<i>MANDATORY: Execute ALL steps in the flow section IN EXACT ORDER</i>
<i>DO NOT skip steps or change the sequence</i>
<i>HALT immediately when halt-conditions are met</i>
<i>Each action xml tag within step xml tag is a REQUIRED action to complete that step</i>
<i>Sections outside flow (validation, output, critical-context) provide essential context - review and apply throughout execution</i>
</llm>
<flow>
<step n="1" title="Scan Directory">
<i>List all files and subdirectories in the target location</i>
</step>
<step n="2" title="Group Content">
<i>Organize files by type, purpose, or subdirectory</i>
</step>
<step n="3" title="Generate Descriptions">
<i>Read each file to understand its actual purpose and create brief (3-10 word) descriptions based on the content, not just the
filename</i>
</step>
<step n="4" title="Create/Update Index">
<i>Write or update index.md with organized file listings</i>
</step>
</flow>
<output-format>
<example>
# Directory Index
## Files
- **[filename.ext](./filename.ext)** - Brief description
- **[another-file.ext](./another-file.ext)** - Brief description
## Subdirectories
### subfolder/
- **[file1.ext](./subfolder/file1.ext)** - Brief description
- **[file2.ext](./subfolder/file2.ext)** - Brief description
### another-folder/
- **[file3.ext](./another-folder/file3.ext)** - Brief description
</example>
</output-format>
<halt-conditions critical="true">
<i>HALT if target directory does not exist or is inaccessible</i>
<i>HALT if user does not have write permissions to create index.md</i>
</halt-conditions>
<validation>
<i>Use relative paths starting with ./</i>
<i>Group similar files together</i>
<i>Read file contents to generate accurate descriptions - don't guess from filenames</i>
<i>Keep descriptions concise but informative (3-10 words)</i>
<i>Sort alphabetically within groups</i>
<i>Skip hidden files (starting with .) unless specified</i>
</validation>
</task>

View File

@@ -0,0 +1,115 @@
---
description: BMAD CORE Tool: Shard Document
globs:
alwaysApply: false
---
<tool id="_bmad/core/tasks/shard-doc" name="Shard Document"
description="Splits large markdown documents into smaller, organized files based on level 2 (default) sections" webskip="true"
standalone="true">
<objective>Split large markdown documents into smaller, organized files based on level 2 sections using @kayvan/markdown-tree-parser tool</objective>
<llm critical="true">
<i>MANDATORY: Execute ALL steps in the flow section IN EXACT ORDER</i>
<i>DO NOT skip steps or change the sequence</i>
<i>HALT immediately when halt-conditions are met</i>
<i>Each action xml tag within step xml tag is a REQUIRED action to complete that step</i>
<i>Sections outside flow (validation, output, critical-context) provide essential context - review and apply throughout execution</i>
</llm>
<critical-context>
<i>Uses `npx @kayvan/markdown-tree-parser` to automatically shard documents by level 2 headings and generate an index</i>
</critical-context>
<flow>
<step n="1" title="Get Source Document">
<action>Ask user for the source document path if not provided already</action>
<action>Verify file exists and is accessible</action>
<action>Verify file is markdown format (.md extension)</action>
<action if="file not found or not markdown">HALT with error message</action>
</step>
<step n="2" title="Get Destination Folder">
<action>Determine default destination: same location as source file, folder named after source file without .md extension</action>
<action>Example: /path/to/architecture.md → /path/to/architecture/</action>
<action>Ask user for the destination folder path ([y] to confirm use of default: [suggested-path], else enter a new path)</action>
<action if="user accepts default">Use the suggested destination path</action>
<action if="user provides custom path">Use the custom destination path</action>
<action>Verify destination folder exists or can be created</action>
<action>Check write permissions for destination</action>
<action if="permission denied">HALT with error message</action>
</step>
<step n="3" title="Execute Sharding">
<action>Inform user that sharding is beginning</action>
<action>Execute command: `npx @kayvan/markdown-tree-parser explode [source-document] [destination-folder]`</action>
<action>Capture command output and any errors</action>
<action if="command fails">HALT and display error to user</action>
</step>
<step n="4" title="Verify Output">
<action>Check that destination folder contains sharded files</action>
<action>Verify index.md was created in destination folder</action>
<action>Count the number of files created</action>
<action if="no files created">HALT with error message</action>
</step>
<step n="5" title="Report Completion">
<action>Display completion report to user including:</action>
<i>- Source document path and name</i>
<i>- Destination folder path</i>
<i>- Number of section files created</i>
<i>- Confirmation that index.md was created</i>
<i>- Any tool output or warnings</i>
<action>Inform user that sharding completed successfully</action>
</step>
<step n="6" title="Handle Original Document">
<critical>Keeping both the original and sharded versions defeats the purpose of sharding and can cause confusion</critical>
<action>Present user with options for the original document:</action>
<ask>What would you like to do with the original document `[source-document-name]`?
Options:
[d] Delete - Remove the original (recommended - shards can always be recombined)
[m] Move to archive - Move original to a backup/archive location
[k] Keep - Leave original in place (NOT recommended - defeats sharding purpose)
Your choice (d/m/k):</ask>
<check if="user selects 'd' (delete)">
<action>Delete the original source document file</action>
<action>Confirm deletion to user: "✓ Original document deleted: [source-document-path]"</action>
<note>The document can be reconstructed from shards by concatenating all section files in order</note>
</check>
<check if="user selects 'm' (move)">
<action>Determine default archive location: same directory as source, in an "archive" subfolder</action>
<action>Example: /path/to/architecture.md → /path/to/archive/architecture.md</action>
<ask>Archive location ([y] to use default: [default-archive-path], or provide custom path):</ask>
<action if="user accepts default">Use default archive path</action>
<action if="user provides custom path">Use custom archive path</action>
<action>Create archive directory if it doesn't exist</action>
<action>Move original document to archive location</action>
<action>Confirm move to user: "✓ Original document moved to: [archive-path]"</action>
</check>
<check if="user selects 'k' (keep)">
<action>Display warning to user:</action>
<output>⚠️ WARNING: Keeping both original and sharded versions is NOT recommended.
This creates confusion because:
- The discover_inputs protocol may load the wrong version
- Updates to one won't reflect in the other
- You'll have duplicate content taking up space
Consider deleting or archiving the original document.</output>
<action>Confirm user choice: "Original document kept at: [source-document-path]"</action>
</check>
</step>
</flow>
<halt-conditions critical="true">
<i>HALT if npx command fails or produces no output files</i>
</halt-conditions>
</tool>

View File

@@ -0,0 +1,7 @@
---
description: BMAD CORE Agent: brainstorming
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THIS COMMAND: LOAD the FULL @_bmad/core/workflows/brainstorming/workflow.md, READ its entire contents and follow its directions exactly!

View File

@@ -0,0 +1,7 @@
---
description: BMAD CORE Agent: party-mode
globs:
alwaysApply: false
---
IT IS CRITICAL THAT YOU FOLLOW THIS COMMAND: LOAD the FULL @_bmad/core/workflows/party-mode/workflow.md, READ its entire contents and follow its directions exactly!

View File

@@ -0,0 +1,105 @@
---
description: BMAD Method - Master Index
globs:
alwaysApply: true
---
# BMAD Method - Cursor Rules Index
This is the master index for all BMAD agents, tasks, tools, and workflows available in your project.
## Installation Complete!
BMAD rules have been installed to: `.cursor/rules/bmad/`
**Note:** BMAD does not modify your `.cursorrules` file. You manage that separately.
## How to Use
- Reference specific agents: @bmad/{module}/agents/{agent-name}
- Reference specific tasks: @bmad/{module}/tasks/{task-name}
- Reference specific tools: @bmad/{module}/tools/{tool-name}
- Reference specific workflows: @bmad/{module}/workflows/{workflow-name}
- Reference entire modules: @bmad/{module}
- Reference this index: @bmad/index
## Available Modules
### CORE
**Agents:**
- @bmad/core/agents/bmad-master - bmad-master
**Tasks:**
- @bmad/core/tasks/advanced-elicitation - advanced-elicitation
- @bmad/core/tasks/index-docs - index-docs
**Tools:**
- @bmad/core/tools/shard-doc - shard-doc
**Workflows:**
- @bmad/core/workflows/brainstorming - brainstorming
- @bmad/core/workflows/party-mode - party-mode
### BMM
**Agents:**
- @bmad/bmm/agents/analyst - analyst
- @bmad/bmm/agents/architect - architect
- @bmad/bmm/agents/dev - dev
- @bmad/bmm/agents/pm - pm
- @bmad/bmm/agents/quick-flow-solo-dev - quick-flow-solo-dev
- @bmad/bmm/agents/sm - sm
- @bmad/bmm/agents/tea - tea
- @bmad/bmm/agents/tech-writer - tech-writer
- @bmad/bmm/agents/ux-designer - ux-designer
**Workflows:**
- @bmad/bmm/workflows/create-product-brief - create-product-brief
- @bmad/bmm/workflows/research - research
- @bmad/bmm/workflows/create-ux-design - create-ux-design
- @bmad/bmm/workflows/create-prd - create-prd
- @bmad/bmm/workflows/check-implementation-readiness - check-implementation-readiness
- @bmad/bmm/workflows/create-architecture - create-architecture
- @bmad/bmm/workflows/create-epics-and-stories - create-epics-and-stories
- @bmad/bmm/workflows/code-review - code-review
- @bmad/bmm/workflows/correct-course - correct-course
- @bmad/bmm/workflows/create-story - create-story
- @bmad/bmm/workflows/dev-story - dev-story
- @bmad/bmm/workflows/retrospective - retrospective
- @bmad/bmm/workflows/sprint-planning - sprint-planning
- @bmad/bmm/workflows/sprint-status - sprint-status
- @bmad/bmm/workflows/create-tech-spec - create-tech-spec
- @bmad/bmm/workflows/quick-dev - quick-dev
- @bmad/bmm/workflows/document-project - document-project
- @bmad/bmm/workflows/create-excalidraw-dataflow - create-excalidraw-dataflow
- @bmad/bmm/workflows/create-excalidraw-diagram - create-excalidraw-diagram
- @bmad/bmm/workflows/create-excalidraw-flowchart - create-excalidraw-flowchart
- @bmad/bmm/workflows/create-excalidraw-wireframe - create-excalidraw-wireframe
- @bmad/bmm/workflows/generate-project-context - generate-project-context
- @bmad/bmm/workflows/testarch-atdd - testarch-atdd
- @bmad/bmm/workflows/testarch-automate - testarch-automate
- @bmad/bmm/workflows/testarch-ci - testarch-ci
- @bmad/bmm/workflows/testarch-framework - testarch-framework
- @bmad/bmm/workflows/testarch-nfr - testarch-nfr
- @bmad/bmm/workflows/testarch-test-design - testarch-test-design
- @bmad/bmm/workflows/testarch-test-review - testarch-test-review
- @bmad/bmm/workflows/testarch-trace - testarch-trace
- @bmad/bmm/workflows/workflow-init - workflow-init
- @bmad/bmm/workflows/workflow-status - workflow-status
## Quick Reference
- All BMAD rules are Manual type - reference them explicitly when needed
- Agents provide persona-based assistance with specific expertise
- Tasks are reusable workflows for common operations
- Tools provide specialized functionality
- Workflows orchestrate multi-step processes
- Each agent includes an activation block for proper initialization
## Configuration
BMAD rules are configured as Manual rules (alwaysApply: false) to give you control
over when they're included in your context. Reference them explicitly when you need
specific agent expertise, task workflows, tools, or guided workflows.

View File

@@ -0,0 +1,54 @@
---
description: Cognitive orientation - project identity and constraints
alwaysApply: true
---
# LiquidRender
DSL-to-React rendering engine built on TurboStarter.
## What This Is
A system that compiles a domain-specific language into React UI components. The DSL describes interfaces declaratively; the renderer produces interactive dashboards, forms, and data visualizations.
## Structure
```
packages/liquid-render/ ← Core engine
├── src/compiler/ ← DSL → render tree
├── src/renderer/ ← React components (47 components)
│ └── components/ ← DataTable, Charts, Forms, Layout
└── src/types/ ← Type definitions
packages/liquid-code/ ← Code generation
packages/liquid-survey/ ← Survey/form builder
apps/web/ ← Next.js web app
apps/mobile/ ← Expo mobile app
packages/db/ ← Drizzle schemas (10 tables)
```
## Core Files
| What | Where |
|------|-------|
| Main renderer | `liquid-render/src/renderer/LiquidUI.tsx` |
| Design tokens | `liquid-render/src/renderer/components/utils.ts` |
| DSL types | `liquid-render/src/types/` |
| DB schemas | `packages/db/src/schema/` |
## Before Building Anything
**Read `capabilities.yaml` first.** Most things already exist.
## Conventions
- Design tokens in `utils.ts` - never hardcode colors/spacing
- Components need `data-liquid-type` attribute
- Handle empty/null states in all components
## Expand
- Creating components → `cache/answers/how-to-create-component.md`
- Full entity map → `knowledge.json`
- Library docs → `libraries.json` + MCP

View File

@@ -0,0 +1,340 @@
---
description: ---
---
---
title: "Chart Component Patterns"
purpose: "Creating or modifying chart components in LiquidRender"
answers:
- "How do I use Recharts in LiquidRender?"
- "What color palette should charts use?"
- "How do I configure axes in chart components?"
- "How do I handle SSR for charts?"
- "How do I add legends and tooltips consistently?"
- "How do I transform data for Recharts?"
- "How do I handle empty chart states?"
read_when: "You're creating, modifying, or debugging chart components"
skip_when: "You're working on non-chart components like tables or forms"
depends_on:
files:
- "packages/liquid-render/src/renderer/components/utils.ts"
- "packages/liquid-render/src/renderer/components/line-chart.tsx"
- "packages/liquid-render/src/renderer/components/bar-chart.tsx"
- "packages/liquid-render/src/renderer/components/pie-chart.tsx"
- "packages/liquid-render/src/renderer/components/area-chart.tsx"
entities:
- "chartColors"
- "tokens"
- "isBrowser"
- "fieldToLabel"
- "ResponsiveContainer"
concepts:
- "Recharts library"
- "SSR hydration"
- "Design tokens"
confidence: 0.85
verified_at: "2025-12-27"
---
# Chart Component Patterns
> **Read when:** You're creating, modifying, or debugging chart components
>
> **Skip when:** You're working on non-chart components like tables or forms
## Sections
| Section | Summary |
|---------|---------|
| [Recharts Setup](#recharts-setup) | ResponsiveContainer and SSR handling |
| [Color Palette](#color-palette) | chartColors array from utils.ts |
| [Axis Configuration](#axis-configuration) | XAxis and YAxis consistent styling |
| [Legend & Tooltip](#legend--tooltip) | Tooltip and Legend styling patterns |
| [Data Transformation](#data-transformation) | Auto-detecting x/y fields from data |
| [Empty State Handling](#empty-state-handling) | Placeholder UI for no-data scenarios |
---
## Recharts Setup
> **TL;DR:** Wrap all charts in `ResponsiveContainer` and check `isBrowser` before rendering Recharts components.
Charts must be responsive and handle server-side rendering gracefully. The `ResponsiveContainer` makes charts fluid, while `isBrowser` prevents hydration mismatches.
### Basic Structure
```tsx
import {
LineChart as RechartsLineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
} from 'recharts';
import { isBrowser } from './utils';
// SSR fallback - always check before rendering Recharts
if (!isBrowser) {
return (
<div data-liquid-type="line" style={styles.wrapper}>
{label && <div style={styles.header}>{label}</div>}
<div style={styles.placeholder}>
[Line chart - {chartData.length} points]
</div>
</div>
);
}
// Client-side render with ResponsiveContainer
return (
<ResponsiveContainer width="100%" height={220}>
<RechartsLineChart data={chartData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
{/* Chart components */}
</RechartsLineChart>
</ResponsiveContainer>
);
```
### Key Points
- **Always** use `ResponsiveContainer` with `width="100%"` and explicit `height`
- Default chart height is `220px` across all chart types
- Use `margin={{ top: 5, right: 20, bottom: 5, left: 0 }}` for consistent spacing
- The SSR placeholder shows chart type and data summary in brackets
---
## Color Palette
> **TL;DR:** Import `chartColors` from utils.ts and cycle through with modulo for multi-series charts.
The color palette is defined in `utils.ts` and provides 8 harmonious colors for data visualization:
```tsx
import { chartColors } from './utils';
// chartColors = [
// '#3b82f6', // blue
// '#22c55e', // green
// '#f59e0b', // amber
// '#ef4444', // red
// '#8b5cf6', // violet
// '#ec4899', // pink
// '#06b6d4', // cyan
// '#84cc16', // lime
// ]
// Single series - use first color
<Line stroke={chartColors[0]} />
// Multiple series - cycle with modulo
{numericFields.map((field, i) => (
<Line
key={field}
stroke={chartColors[i % chartColors.length]}
fill={chartColors[i % chartColors.length]}
/>
))}
```
### Color Usage by Chart Type
| Chart Type | Color Property | Example |
|------------|----------------|---------|
| Line | `stroke`, `dot.fill` | `stroke={chartColors[0]}` |
| Bar | `fill` | `fill={chartColors[i % chartColors.length]}` |
| Area | `stroke`, `fill` (often gradient) | `stroke={chartColors[0]}` |
| Pie | `Cell` fill | `<Cell fill={chartColors[index % chartColors.length]} />` |
---
## Axis Configuration
> **TL;DR:** Use `tokens.colors.mutedForeground` for tick text and `tokens.colors.border` for axis lines.
All charts follow the same axis styling pattern for visual consistency:
```tsx
import { tokens } from './utils';
<XAxis
dataKey={xKey}
tick={{ fontSize: 12, fill: tokens.colors.mutedForeground }}
stroke={tokens.colors.border}
/>
<YAxis
tick={{ fontSize: 12, fill: tokens.colors.mutedForeground }}
stroke={tokens.colors.border}
/>
<CartesianGrid strokeDasharray="3 3" stroke={tokens.colors.border} />
```
### Axis Style Reference
| Property | Value | Purpose |
|----------|-------|---------|
| `tick.fontSize` | `12` | Readable but compact labels |
| `tick.fill` | `tokens.colors.mutedForeground` | Subdued text color |
| `stroke` | `tokens.colors.border` | Axis line color |
| `strokeDasharray` | `"3 3"` | CartesianGrid dash pattern |
---
## Legend & Tooltip
> **TL;DR:** Style tooltips with `tokens.colors.card` background and `tokens.colors.border`; use `fontSize: tokens.fontSize.sm` for legends.
Consistent tooltip and legend styling across all chart types:
```tsx
import { tokens } from './utils';
<Tooltip
contentStyle={{
backgroundColor: tokens.colors.card,
border: `1px solid ${tokens.colors.border}`,
borderRadius: tokens.radius.md,
fontSize: tokens.fontSize.sm,
}}
// Bar charts also use cursor styling:
cursor={{ fill: tokens.colors.muted }}
/>
<Legend wrapperStyle={{ fontSize: tokens.fontSize.sm }} />
```
### Tooltip Variations
```tsx
// Bar chart adds cursor highlight
<Tooltip cursor={{ fill: tokens.colors.muted }} />
// Pie chart has no cursor (circular)
<Tooltip contentStyle={{...}} />
```
---
## Data Transformation
> **TL;DR:** Use `detectXYFields()` to auto-detect category (string) and value (numeric) fields; use `fieldToLabel()` for display names.
Charts automatically detect which fields to use based on data types:
```tsx
import { fieldToLabel } from './utils';
// Helper to check numeric values
function isNumeric(value: unknown): value is number {
return typeof value === 'number' && !isNaN(value);
}
// Auto-detect x (category) and y (numeric) fields
function detectXYFields(data: ChartDataPoint[]): { x: string; y: string } {
if (data.length === 0) return { x: 'x', y: 'y' };
const firstRow = data[0]!;
const keys = Object.keys(firstRow);
// Find first string-like field for x (category/date)
const xField = keys.find(k => {
const val = firstRow[k];
return typeof val === 'string' || val instanceof Date;
}) || keys[0] || 'x';
// Find first numeric field for y
const yField = keys.find(k => {
const val = firstRow[k];
return isNumeric(val) && k !== xField;
}) || keys[1] || 'y';
return { x: xField, y: yField };
}
// Detect ALL numeric fields for multi-series charts
function detectAllNumericFields(data: ChartDataPoint[], xField: string): string[] {
if (data.length === 0) return [];
const firstRow = data[0]!;
return Object.keys(firstRow).filter(k =>
k !== xField && isNumeric(firstRow[k])
);
}
// Usage: convert field names to labels
<Line
dataKey={field}
name={fieldToLabel(field)} // "total_sales" -> "Total Sales"
/>
```
### Explicit vs Auto-Detection
```tsx
// Allow explicit binding override
const { x: xKey, y: yKey } = useMemo(() => {
const explicitX = block.binding?.x;
const explicitY = block.binding?.y;
if (explicitX && explicitY) {
return { x: explicitX, y: explicitY };
}
return detectXYFields(chartData); // Fallback to auto-detect
}, [block.binding, chartData]);
```
---
## Empty State Handling
> **TL;DR:** Return a styled placeholder with "No data available" message when `chartData.length === 0`.
Every chart must handle empty data gracefully:
```tsx
// Empty state with consistent styling
if (chartData.length === 0) {
return (
<div
data-liquid-type="line" // Use appropriate type
style={styles.wrapper}
role="img"
aria-label={`${label ? label + ': ' : ''}Empty line chart - no data available`}
>
{label && <div style={styles.header}>{label}</div>}
<div style={styles.placeholder}>No data available</div>
</div>
);
}
// Placeholder style definition
const styles = {
placeholder: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '220px',
color: tokens.colors.mutedForeground,
fontSize: tokens.fontSize.sm,
textAlign: 'center',
} as React.CSSProperties,
};
```
### State Hierarchy
1. **SSR fallback** - Check `isBrowser` first, return text placeholder
2. **Empty state** - Check `chartData.length === 0`, return "No data available"
3. **Normal render** - Full chart with data
---
## See Also
- [utils.ts](/packages/liquid-render/src/renderer/components/utils.ts) - Design tokens and shared utilities
- [COMPONENT-GUIDE.md](/packages/liquid-render/docs/COMPONENT-GUIDE.md) - General component patterns
- [Recharts Documentation](https://recharts.org/en-US/) - Official Recharts API reference

View File

@@ -0,0 +1,386 @@
---
description: ---
---
---
title: How to Create a LiquidRender Component
purpose: Creating or modifying LiquidRender components
answers:
- How should I structure a component file?
- How do I use design tokens?
- What's the difference between dynamic and static variants?
- How do I handle empty states?
- How do I format values for display?
read_when: Creating or modifying a component
skip_when: Just using existing components
depends_on:
files:
- packages/liquid-render/src/renderer/components/utils.ts
- packages/liquid-render/docs/COMPONENT-GUIDE.md
---
# How to Create a LiquidRender Component
> **Read when:** Creating or modifying a component
## Sections
| Section | Summary |
|---------|---------|
| [File Structure](#file-structure) | Types, Styles, Helpers, Sub-components, Main, Static |
| [Design Tokens](#design-tokens) | Import from utils.ts, never hardcode values |
| [Data Attribute](#data-attribute) | Required `data-liquid-type` on root element |
| [Empty States](#empty-states) | Always handle null/empty data gracefully |
| [Value Formatting](#value-formatting) | Use formatDisplayValue() and fieldToLabel() |
| [Static Variants](#static-variants) | Provide both dynamic and static exports |
| [SSR Handling](#ssr-handling) | Browser detection for chart components |
| [Checklist](#checklist) | Quick validation before submitting |
---
## File Structure
> **TL;DR:** Follow strict section order: Types, Styles, Helpers, Sub-components, Main, Static.
Every component file uses section headers for organization:
```tsx
// [ComponentName] Component - Brief description
import React from 'react';
import type { LiquidComponentProps } from './utils';
import { tokens, cardStyles, mergeStyles } from './utils';
import { resolveBinding } from '../data-context';
// ============================================================================
// Types
// ============================================================================
interface ComponentSpecificType { ... }
// ============================================================================
// Styles
// ============================================================================
const styles = {
wrapper: { ... },
};
// ============================================================================
// Helpers
// ============================================================================
function helperFunction() { ... }
// ============================================================================
// Sub-components (if needed)
// ============================================================================
function SubComponent() { ... }
// ============================================================================
// Main Component
// ============================================================================
export function ComponentName({ block, data }: LiquidComponentProps): React.ReactElement {
// 1. Resolve bindings
const value = resolveBinding(block.binding, data);
// 2. Extract block properties
const label = block.label;
const color = getBlockColor(block);
// 3. Render
return (
<div data-liquid-type="typename" style={styles.wrapper}>
{/* content */}
</div>
);
}
// ============================================================================
// Static Component (standalone usage)
// ============================================================================
interface StaticComponentProps { ... }
export function StaticComponent(props: StaticComponentProps): React.ReactElement {
// For use outside LiquidUI context
}
export default ComponentName;
```
---
## Design Tokens
> **TL;DR:** Import `tokens` from utils.ts. Never hardcode colors, spacing, or sizes.
```tsx
import { tokens } from './utils';
// CORRECT
padding: tokens.spacing.md,
fontSize: tokens.fontSize.sm,
color: tokens.colors.foreground,
borderRadius: tokens.radius.lg,
// INCORRECT - never hardcode
padding: '16px',
fontSize: '14px',
color: '#0a0a0a',
```
### Available Token Categories
| Category | Examples | Values |
|----------|----------|--------|
| `tokens.colors.*` | `foreground`, `border`, `success` | CSS variables with fallbacks |
| `tokens.spacing.*` | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` | 4px to 48px |
| `tokens.radius.*` | `sm`, `md`, `lg`, `xl`, `full` | 4px to 9999px |
| `tokens.fontSize.*` | `xs`, `sm`, `base`, `lg`, `xl` | 12px to 36px |
| `tokens.fontWeight.*` | `normal`, `medium`, `semibold`, `bold` | 400 to 700 |
| `tokens.shadow.*` | `none`, `sm`, `md`, `lg` | Box shadows |
| `tokens.transition.*` | `fast`, `normal`, `slow` | 150ms to 300ms |
### Style Helpers
```tsx
import { cardStyles, buttonStyles, inputStyles, mergeStyles } from './utils';
// Card-like containers
const styles = {
wrapper: mergeStyles(cardStyles(), {
padding: tokens.spacing.md,
}),
};
// Buttons with variants
const btnStyle = buttonStyles('default', 'md'); // variant, size
// Input fields
const inputStyle = inputStyles({ /* overrides */ });
```
### Chart Colors
```tsx
import { chartColors } from './utils';
// Consistent palette for data visualization
stroke={chartColors[i % chartColors.length]}
```
---
## Data Attribute
> **TL;DR:** Every component MUST have `data-liquid-type` on its root element.
```tsx
<div data-liquid-type="kpi" style={styles.wrapper}>
<div data-liquid-type="line" style={styles.wrapper}>
<div data-liquid-type="table" style={styles.wrapper}>
```
This enables:
- CSS targeting for styling overrides
- Testing queries for component selection
- Debug inspection in DevTools
---
## Empty States
> **TL;DR:** Always check for null/empty data and render a graceful fallback.
```tsx
if (!data || data.length === 0) {
return (
<div style={styles.wrapper}>
{label && <div style={styles.header}>{label}</div>}
<div style={styles.empty}>No data available</div>
</div>
);
}
```
Handle all edge cases:
- `null` or `undefined` data
- Empty arrays
- Missing required fields
---
## Value Formatting
> **TL;DR:** Use `formatDisplayValue()` for values and `fieldToLabel()` for auto-labels.
### formatDisplayValue()
```tsx
import { formatDisplayValue } from './utils';
<span>{formatDisplayValue(value)}</span>
```
Handles:
- Large numbers: `1234567` becomes `1.2M`
- Thousands: `12345` becomes `12.3K`
- Null/undefined: displays `--`
- Booleans: `Yes`/`No`
- Dates: Localized format
### fieldToLabel()
```tsx
import { fieldToLabel } from './utils';
// Auto-generate labels from field names
fieldToLabel('totalRevenue') // "Total Revenue"
fieldToLabel('order_count') // "Order Count"
fieldToLabel('avgValue') // "Avg Value"
```
### Common Pattern
```tsx
const label = block.label || fieldToLabel(block.binding?.field || '');
```
---
## Static Variants
> **TL;DR:** Export both `ComponentName` (dynamic) and `StaticComponent` (standalone).
### Dynamic Component (DSL-driven)
Used by the LiquidUI renderer. Receives `LiquidComponentProps`:
```tsx
export function DataTable({ block, data }: LiquidComponentProps) {
const resolvedData = resolveBinding(block.binding, data);
// ...
}
```
### Static Component (standalone)
Used directly in React apps with explicit props:
```tsx
interface StaticTableProps {
data: Record<string, unknown>[];
columns?: string[];
title?: string;
sortable?: boolean;
}
export function StaticTable({ data, columns, title, sortable }: StaticTableProps) {
// No binding resolution needed
}
```
### Export Pattern
```tsx
// In component file
export { ComponentName, StaticComponent };
export default ComponentName;
// In index.ts - register for DSL usage
export const liquidComponents = {
typename: ComponentName,
};
```
---
## SSR Handling
> **TL;DR:** Use `isBrowser` check for components requiring browser APIs.
```tsx
import { isBrowser } from './utils';
export function ChartComponent({ block, data }: LiquidComponentProps) {
if (!isBrowser) {
return (
<div style={styles.placeholder}>
[Chart placeholder - {data.length} points]
</div>
);
}
// Browser-only rendering (Recharts, etc.)
return (
<ResponsiveContainer>
...
</ResponsiveContainer>
);
}
```
---
## Checklist
Before submitting a new component, verify:
- [ ] File follows standard structure with section headers
- [ ] Uses `tokens` for all style values (no hardcoded colors/spacing)
- [ ] Has `data-liquid-type` attribute on root element
- [ ] Handles empty/null data states
- [ ] Uses `formatDisplayValue()` for value display
- [ ] Uses `fieldToLabel()` for auto-labels
- [ ] Has SSR placeholder if browser-dependent
- [ ] Includes both dynamic and static variants
- [ ] Registered in `liquidComponents` map
- [ ] Exported from `index.ts`
---
## Quick Reference
### Imports
```tsx
import type { LiquidComponentProps } from './utils';
import {
tokens,
chartColors,
cardStyles,
buttonStyles,
inputStyles,
mergeStyles,
getLayoutStyles,
getBlockColor,
formatDisplayValue,
fieldToLabel,
generateId,
isBrowser,
} from './utils';
import { resolveBinding } from '../data-context';
```
### Props Interface
```tsx
interface LiquidComponentProps {
block: Block; // Parsed block from DSL
data: DataContext; // Data for binding resolution
children?: ReactNode;
className?: string;
}
```
### Block Properties
```tsx
const value = resolveBinding(block.binding, data);
const label = block.label || fieldToLabel(block.binding?.field || '');
const color = getBlockColor(block);
const layoutStyles = getLayoutStyles(block);
const columns = block.columns;
```