appiq-solution 1.4.3 → 1.4.4

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.
Files changed (90) hide show
  1. package/#Tools/APPIQ-METHOD/.cursor/commands/analyze.md +1 -1
  2. package/#Tools/APPIQ-METHOD/.cursor/commands/appiq.md +1 -1
  3. package/#Tools/APPIQ-METHOD/.cursor/commands/help.md +1 -1
  4. package/#Tools/APPIQ-METHOD/.cursor/commands/story.md +1 -1
  5. package/#Tools/APPIQ-METHOD/bmad-core/agents/init-flow-po.md +219 -0
  6. package/#Tools/APPIQ-METHOD/commands/analyze.md +1 -1
  7. package/#Tools/APPIQ-METHOD/commands/appiq.md +1 -1
  8. package/#Tools/APPIQ-METHOD/commands/help.md +1 -1
  9. package/#Tools/APPIQ-METHOD/commands/story.md +1 -1
  10. package/#Tools/APPIQ-METHOD/package.json +1 -1
  11. package/#Tools/APPIQ-METHOD/tools/setup-ide-commands.js +40 -37
  12. package/#Tools/APPIQ-METHOD/tools/smart-installer.js +16 -13
  13. package/bmad-core/agent-teams/team-all.yaml +14 -0
  14. package/bmad-core/agent-teams/team-flutter-mobile.yaml +114 -0
  15. package/bmad-core/agent-teams/team-fullstack.yaml +28 -0
  16. package/bmad-core/agent-teams/team-ide-minimal.yaml +10 -0
  17. package/bmad-core/agent-teams/team-no-ui.yaml +13 -0
  18. package/bmad-core/agents/analyst.md +85 -0
  19. package/bmad-core/agents/architect.md +90 -0
  20. package/bmad-core/agents/bmad-master.md +108 -0
  21. package/bmad-core/agents/bmad-orchestrator.md +150 -0
  22. package/bmad-core/agents/bmad-smart-launcher.md +170 -0
  23. package/bmad-core/agents/dev.md +95 -0
  24. package/bmad-core/agents/init-flow-po.md +219 -0
  25. package/bmad-core/agents/pm.md +85 -0
  26. package/bmad-core/agents/po.md +76 -0
  27. package/bmad-core/agents/qa.md +86 -0
  28. package/bmad-core/agents/sm.md +67 -0
  29. package/bmad-core/agents/ux-expert.md +71 -0
  30. package/bmad-core/bmad-core/user-guide.md +0 -0
  31. package/bmad-core/checklists/architect-checklist.md +443 -0
  32. package/bmad-core/checklists/change-checklist.md +182 -0
  33. package/bmad-core/checklists/pm-checklist.md +375 -0
  34. package/bmad-core/checklists/po-master-checklist.md +441 -0
  35. package/bmad-core/checklists/security-validation-checklist.md +332 -0
  36. package/bmad-core/checklists/story-dod-checklist.md +101 -0
  37. package/bmad-core/checklists/story-draft-checklist.md +156 -0
  38. package/bmad-core/core-config.yaml +20 -0
  39. package/bmad-core/core-config.yaml.bak +20 -0
  40. package/bmad-core/data/backend-services-integration.md +686 -0
  41. package/bmad-core/data/bmad-kb.md +803 -0
  42. package/bmad-core/data/brainstorming-techniques.md +36 -0
  43. package/bmad-core/data/elicitation-methods.md +134 -0
  44. package/bmad-core/data/shadcn-ui-integration.md +388 -0
  45. package/bmad-core/data/technical-preferences.md +149 -0
  46. package/bmad-core/enhanced-ide-development-workflow.md +43 -0
  47. package/bmad-core/tasks/advanced-elicitation.md +117 -0
  48. package/bmad-core/tasks/brownfield-create-epic.md +160 -0
  49. package/bmad-core/tasks/brownfield-create-story.md +147 -0
  50. package/bmad-core/tasks/correct-course.md +70 -0
  51. package/bmad-core/tasks/create-brownfield-story.md +304 -0
  52. package/bmad-core/tasks/create-deep-research-prompt.md +289 -0
  53. package/bmad-core/tasks/create-flutter-story.md +197 -0
  54. package/bmad-core/tasks/create-next-story.md +112 -0
  55. package/bmad-core/tasks/document-project.md +341 -0
  56. package/bmad-core/tasks/facilitate-brainstorming-session.md +136 -0
  57. package/bmad-core/tasks/generate-ai-frontend-prompt.md +51 -0
  58. package/bmad-core/tasks/index-docs.md +179 -0
  59. package/bmad-core/tasks/intelligent-epic-creation.md +234 -0
  60. package/bmad-core/tasks/kb-mode-interaction.md +75 -0
  61. package/bmad-core/tasks/review-story.md +145 -0
  62. package/bmad-core/tasks/shard-doc.md +187 -0
  63. package/bmad-core/tasks/smart-project-analysis.md +289 -0
  64. package/bmad-core/tasks/validate-next-story.md +134 -0
  65. package/bmad-core/templates/architecture-tmpl.yaml +650 -0
  66. package/bmad-core/templates/brainstorming-output-tmpl.yaml +156 -0
  67. package/bmad-core/templates/brownfield-architecture-tmpl.yaml +476 -0
  68. package/bmad-core/templates/brownfield-prd-tmpl.yaml +280 -0
  69. package/bmad-core/templates/competitor-analysis-tmpl.yaml +293 -0
  70. package/bmad-core/templates/flutter-mobile-prd-tmpl.yaml +330 -0
  71. package/bmad-core/templates/flutter-story-tmpl.yaml +376 -0
  72. package/bmad-core/templates/flutter-ui-spec-tmpl.yaml +415 -0
  73. package/bmad-core/templates/front-end-architecture-tmpl.yaml +206 -0
  74. package/bmad-core/templates/front-end-spec-tmpl.yaml +349 -0
  75. package/bmad-core/templates/fullstack-architecture-tmpl.yaml +812 -0
  76. package/bmad-core/templates/market-research-tmpl.yaml +252 -0
  77. package/bmad-core/templates/prd-tmpl.yaml +202 -0
  78. package/bmad-core/templates/project-brief-tmpl.yaml +221 -0
  79. package/bmad-core/templates/story-tmpl.yaml +137 -0
  80. package/bmad-core/user-guide.md +251 -0
  81. package/bmad-core/workflows/brownfield-fullstack.yaml +311 -0
  82. package/bmad-core/workflows/brownfield-service.yaml +187 -0
  83. package/bmad-core/workflows/brownfield-ui.yaml +197 -0
  84. package/bmad-core/workflows/greenfield-fullstack.yaml +284 -0
  85. package/bmad-core/workflows/greenfield-service.yaml +206 -0
  86. package/bmad-core/workflows/greenfield-ui.yaml +235 -0
  87. package/bmad-core/working-in-the-brownfield.md +373 -0
  88. package/package.json +1 -1
  89. package/tools/setup-ide-commands.js +40 -37
  90. package/tools/smart-installer.js +16 -13
@@ -0,0 +1,36 @@
1
+ # Brainstorming Techniques Data
2
+
3
+ ## Creative Expansion
4
+
5
+ 1. **What If Scenarios**: Ask one provocative question, get their response, then ask another
6
+ 2. **Analogical Thinking**: Give one example analogy, ask them to find 2-3 more
7
+ 3. **Reversal/Inversion**: Pose the reverse question, let them work through it
8
+ 4. **First Principles Thinking**: Ask "What are the fundamentals?" and guide them to break it down
9
+
10
+ ## Structured Frameworks
11
+
12
+ 5. **SCAMPER Method**: Go through one letter at a time, wait for their ideas before moving to next
13
+ 6. **Six Thinking Hats**: Present one hat, ask for their thoughts, then move to next hat
14
+ 7. **Mind Mapping**: Start with central concept, ask them to suggest branches
15
+
16
+ ## Collaborative Techniques
17
+
18
+ 8. **"Yes, And..." Building**: They give idea, you "yes and" it, they "yes and" back - alternate
19
+ 9. **Brainwriting/Round Robin**: They suggest idea, you build on it, ask them to build on yours
20
+ 10. **Random Stimulation**: Give one random prompt/word, ask them to make connections
21
+
22
+ ## Deep Exploration
23
+
24
+ 11. **Five Whys**: Ask "why" and wait for their answer before asking next "why"
25
+ 12. **Morphological Analysis**: Ask them to list parameters first, then explore combinations together
26
+ 13. **Provocation Technique (PO)**: Give one provocative statement, ask them to extract useful ideas
27
+
28
+ ## Advanced Techniques
29
+
30
+ 14. **Forced Relationships**: Connect two unrelated concepts and ask them to find the bridge
31
+ 15. **Assumption Reversal**: Challenge their core assumptions and ask them to build from there
32
+ 16. **Role Playing**: Ask them to brainstorm from different stakeholder perspectives
33
+ 17. **Time Shifting**: "How would you solve this in 1995? 2030?"
34
+ 18. **Resource Constraints**: "What if you had only $10 and 1 hour?"
35
+ 19. **Metaphor Mapping**: Use extended metaphors to explore solutions
36
+ 20. **Question Storming**: Generate questions instead of answers first
@@ -0,0 +1,134 @@
1
+ # Elicitation Methods Data
2
+
3
+ ## Core Reflective Methods
4
+
5
+ **Expand or Contract for Audience**
6
+ - Ask whether to 'expand' (add detail, elaborate) or 'contract' (simplify, clarify)
7
+ - Identify specific target audience if relevant
8
+ - Tailor content complexity and depth accordingly
9
+
10
+ **Explain Reasoning (CoT Step-by-Step)**
11
+ - Walk through the step-by-step thinking process
12
+ - Reveal underlying assumptions and decision points
13
+ - Show how conclusions were reached from current role's perspective
14
+
15
+ **Critique and Refine**
16
+ - Review output for flaws, inconsistencies, or improvement areas
17
+ - Identify specific weaknesses from role's expertise
18
+ - Suggest refined version reflecting domain knowledge
19
+
20
+ ## Structural Analysis Methods
21
+
22
+ **Analyze Logical Flow and Dependencies**
23
+ - Examine content structure for logical progression
24
+ - Check internal consistency and coherence
25
+ - Identify and validate dependencies between elements
26
+ - Confirm effective ordering and sequencing
27
+
28
+ **Assess Alignment with Overall Goals**
29
+ - Evaluate content contribution to stated objectives
30
+ - Identify any misalignments or gaps
31
+ - Interpret alignment from specific role's perspective
32
+ - Suggest adjustments to better serve goals
33
+
34
+ ## Risk and Challenge Methods
35
+
36
+ **Identify Potential Risks and Unforeseen Issues**
37
+ - Brainstorm potential risks from role's expertise
38
+ - Identify overlooked edge cases or scenarios
39
+ - Anticipate unintended consequences
40
+ - Highlight implementation challenges
41
+
42
+ **Challenge from Critical Perspective**
43
+ - Adopt critical stance on current content
44
+ - Play devil's advocate from specified viewpoint
45
+ - Argue against proposal highlighting weaknesses
46
+ - Apply YAGNI principles when appropriate (scope trimming)
47
+
48
+ ## Creative Exploration Methods
49
+
50
+ **Tree of Thoughts Deep Dive**
51
+ - Break problem into discrete "thoughts" or intermediate steps
52
+ - Explore multiple reasoning paths simultaneously
53
+ - Use self-evaluation to classify each path as "sure", "likely", or "impossible"
54
+ - Apply search algorithms (BFS/DFS) to find optimal solution paths
55
+
56
+ **Hindsight is 20/20: The 'If Only...' Reflection**
57
+ - Imagine retrospective scenario based on current content
58
+ - Identify the one "if only we had known/done X..." insight
59
+ - Describe imagined consequences humorously or dramatically
60
+ - Extract actionable learnings for current context
61
+
62
+ ## Multi-Persona Collaboration Methods
63
+
64
+ **Agile Team Perspective Shift**
65
+ - Rotate through different Scrum team member viewpoints
66
+ - Product Owner: Focus on user value and business impact
67
+ - Scrum Master: Examine process flow and team dynamics
68
+ - Developer: Assess technical implementation and complexity
69
+ - QA: Identify testing scenarios and quality concerns
70
+
71
+ **Stakeholder Round Table**
72
+ - Convene virtual meeting with multiple personas
73
+ - Each persona contributes unique perspective on content
74
+ - Identify conflicts and synergies between viewpoints
75
+ - Synthesize insights into actionable recommendations
76
+
77
+ **Meta-Prompting Analysis**
78
+ - Step back to analyze the structure and logic of current approach
79
+ - Question the format and methodology being used
80
+ - Suggest alternative frameworks or mental models
81
+ - Optimize the elicitation process itself
82
+
83
+ ## Advanced 2025 Techniques
84
+
85
+ **Self-Consistency Validation**
86
+ - Generate multiple reasoning paths for same problem
87
+ - Compare consistency across different approaches
88
+ - Identify most reliable and robust solution
89
+ - Highlight areas where approaches diverge and why
90
+
91
+ **ReWOO (Reasoning Without Observation)**
92
+ - Separate parametric reasoning from tool-based actions
93
+ - Create reasoning plan without external dependencies
94
+ - Identify what can be solved through pure reasoning
95
+ - Optimize for efficiency and reduced token usage
96
+
97
+ **Persona-Pattern Hybrid**
98
+ - Combine specific role expertise with elicitation pattern
99
+ - Architect + Risk Analysis: Deep technical risk assessment
100
+ - UX Expert + User Journey: End-to-end experience critique
101
+ - PM + Stakeholder Analysis: Multi-perspective impact review
102
+
103
+ **Emergent Collaboration Discovery**
104
+ - Allow multiple perspectives to naturally emerge
105
+ - Identify unexpected insights from persona interactions
106
+ - Explore novel combinations of viewpoints
107
+ - Capture serendipitous discoveries from multi-agent thinking
108
+
109
+ ## Game-Based Elicitation Methods
110
+
111
+ **Red Team vs Blue Team**
112
+ - Red Team: Attack the proposal, find vulnerabilities
113
+ - Blue Team: Defend and strengthen the approach
114
+ - Competitive analysis reveals blind spots
115
+ - Results in more robust, battle-tested solutions
116
+
117
+ **Innovation Tournament**
118
+ - Pit multiple alternative approaches against each other
119
+ - Score each approach across different criteria
120
+ - Crowd-source evaluation from different personas
121
+ - Identify winning combination of features
122
+
123
+ **Escape Room Challenge**
124
+ - Present content as constraints to work within
125
+ - Find creative solutions within tight limitations
126
+ - Identify minimum viable approach
127
+ - Discover innovative workarounds and optimizations
128
+
129
+ ## Process Control
130
+
131
+ **Proceed / No Further Actions**
132
+ - Acknowledge choice to finalize current work
133
+ - Accept output as-is or move to next step
134
+ - Prepare to continue without additional elicitation
@@ -0,0 +1,388 @@
1
+ # shadcn/ui Integration Guide
2
+
3
+ ## 📋 Overview
4
+
5
+ This guide provides comprehensive integration instructions for shadcn/ui components with MCP @21st-dev/magic tool integration for enhanced React development workflows.
6
+
7
+ ## 🎯 shadcn/ui Framework Support
8
+
9
+ ### What is shadcn/ui?
10
+
11
+ shadcn/ui is a collection of reusable components built using Radix UI and Tailwind CSS. It's designed to be:
12
+ - **Copy & Paste**: Components you can copy and paste into your apps
13
+ - **Customizable**: Fully customizable and extensible
14
+ - **Accessible**: Built on Radix UI primitives for accessibility
15
+ - **Modern**: Uses the latest React patterns and TypeScript
16
+
17
+ ### Key Features
18
+
19
+ - **Headless Components**: Built on Radix UI primitives
20
+ - **Tailwind CSS**: Styled with Tailwind CSS utility classes
21
+ - **TypeScript**: Full TypeScript support with proper type definitions
22
+ - **Dark Mode**: Built-in dark mode support
23
+ - **Theming**: Comprehensive theming system
24
+ - **Responsive**: Mobile-first responsive design
25
+
26
+ ## 🛠️ MCP @21st-dev/magic Integration
27
+
28
+ ### MCP Tool Capabilities
29
+
30
+ The @21st-dev/magic MCP tool provides:
31
+ - **Component Generation**: Generate shadcn/ui components with proper setup
32
+ - **Theme Management**: Manage and customize themes programmatically
33
+ - **Component Customization**: Modify existing components with variations
34
+ - **Template Creation**: Create component templates for reuse
35
+ - **Code Analysis**: Analyze component usage and optimization opportunities
36
+
37
+ ### Setup Instructions
38
+
39
+ 1. **Install MCP Tool**
40
+ ```bash
41
+ npm install -g @21st-dev/magic
42
+ ```
43
+
44
+ 2. **Configure MCP in Project**
45
+ ```json
46
+ // .mcp-config.json
47
+ {
48
+ "tools": {
49
+ "@21st-dev/magic": {
50
+ "enabled": true,
51
+ "config": {
52
+ "framework": "react",
53
+ "ui-library": "shadcn/ui",
54
+ "styling": "tailwind",
55
+ "typescript": true
56
+ }
57
+ }
58
+ }
59
+ }
60
+ ```
61
+
62
+ 3. **Initialize shadcn/ui**
63
+ ```bash
64
+ npx shadcn-ui@latest init
65
+ ```
66
+
67
+ ## 🎨 Component Architecture
68
+
69
+ ### Component Structure
70
+
71
+ ```
72
+ src/
73
+ ├── components/
74
+ │ ├── ui/ # shadcn/ui components
75
+ │ │ ├── button.tsx
76
+ │ │ ├── card.tsx
77
+ │ │ ├── dialog.tsx
78
+ │ │ └── ...
79
+ │ ├── custom/ # Custom components
80
+ │ │ ├── data-table.tsx
81
+ │ │ ├── form-builder.tsx
82
+ │ │ └── ...
83
+ │ └── layout/ # Layout components
84
+ │ ├── header.tsx
85
+ │ ├── sidebar.tsx
86
+ │ └── footer.tsx
87
+ ├── lib/
88
+ │ ├── utils.ts # Utility functions (cn, etc.)
89
+ │ └── validations.ts # Form validation schemas
90
+ └── styles/
91
+ └── globals.css # Global styles and CSS variables
92
+ ```
93
+
94
+ ### Component Categories
95
+
96
+ #### Core UI Components
97
+ - **Button**: Various button styles and sizes
98
+ - **Input**: Form input components with validation
99
+ - **Card**: Content containers with headers and footers
100
+ - **Dialog**: Modal dialogs and sheets
101
+ - **Dropdown**: Dropdown menus and select components
102
+ - **Navigation**: Navigation menus and breadcrumbs
103
+
104
+ #### Data Display
105
+ - **Table**: Data tables with sorting and filtering
106
+ - **Badge**: Status indicators and labels
107
+ - **Avatar**: User profile images and initials
108
+ - **Skeleton**: Loading state placeholders
109
+ - **Progress**: Progress bars and indicators
110
+
111
+ #### Form Components
112
+ - **Form**: Form wrapper with validation
113
+ - **Label**: Form field labels
114
+ - **Checkbox**: Checkbox inputs
115
+ - **Radio**: Radio button groups
116
+ - **Switch**: Toggle switches
117
+ - **Textarea**: Multi-line text inputs
118
+
119
+ #### Layout Components
120
+ - **Sheet**: Slide-out panels and drawers
121
+ - **Tabs**: Tabbed content organization
122
+ - **Accordion**: Collapsible content sections
123
+ - **Separator**: Visual content dividers
124
+ - **Scroll Area**: Custom scrollable areas
125
+
126
+ ## 🎯 Development Patterns
127
+
128
+ ### Component Creation with MCP
129
+
130
+ ```typescript
131
+ // Using MCP @21st-dev/magic to generate components
132
+ import { magic } from '@21st-dev/magic';
133
+
134
+ // Generate a new shadcn/ui component
135
+ const component = await magic.generate({
136
+ type: 'component',
137
+ name: 'UserProfile',
138
+ baseComponent: 'card',
139
+ props: {
140
+ user: 'User',
141
+ showActions: 'boolean',
142
+ onEdit: '() => void'
143
+ },
144
+ styling: {
145
+ theme: 'default',
146
+ variant: 'outline'
147
+ }
148
+ });
149
+ ```
150
+
151
+ ### Theme Customization
152
+
153
+ ```css
154
+ /* globals.css - CSS Variables for theming */
155
+ @layer base {
156
+ :root {
157
+ --background: 0 0% 100%;
158
+ --foreground: 222.2 84% 4.9%;
159
+ --card: 0 0% 100%;
160
+ --card-foreground: 222.2 84% 4.9%;
161
+ --popover: 0 0% 100%;
162
+ --popover-foreground: 222.2 84% 4.9%;
163
+ --primary: 221.2 83.2% 53.3%;
164
+ --primary-foreground: 210 40% 98%;
165
+ --secondary: 210 40% 96%;
166
+ --secondary-foreground: 222.2 84% 4.9%;
167
+ --muted: 210 40% 96%;
168
+ --muted-foreground: 215.4 16.3% 46.9%;
169
+ --accent: 210 40% 96%;
170
+ --accent-foreground: 222.2 84% 4.9%;
171
+ --destructive: 0 84.2% 60.2%;
172
+ --destructive-foreground: 210 40% 98%;
173
+ --border: 214.3 31.8% 91.4%;
174
+ --input: 214.3 31.8% 91.4%;
175
+ --ring: 221.2 83.2% 53.3%;
176
+ --radius: 0.5rem;
177
+ }
178
+
179
+ .dark {
180
+ --background: 222.2 84% 4.9%;
181
+ --foreground: 210 40% 98%;
182
+ /* ... dark mode variables */
183
+ }
184
+ }
185
+ ```
186
+
187
+ ### Utility Functions
188
+
189
+ ```typescript
190
+ // lib/utils.ts
191
+ import { type ClassValue, clsx } from "clsx";
192
+ import { twMerge } from "tailwind-merge";
193
+
194
+ export function cn(...inputs: ClassValue[]) {
195
+ return twMerge(clsx(inputs));
196
+ }
197
+
198
+ // Form validation with Zod
199
+ import { z } from "zod";
200
+
201
+ export const userSchema = z.object({
202
+ name: z.string().min(2, "Name must be at least 2 characters"),
203
+ email: z.string().email("Invalid email address"),
204
+ age: z.number().min(18, "Must be at least 18 years old"),
205
+ });
206
+
207
+ export type User = z.infer<typeof userSchema>;
208
+ ```
209
+
210
+ ## 🚀 Integration with BMAD Workflow
211
+
212
+ ### Agent Integration
213
+
214
+ #### Frontend Developer Agent Enhancement
215
+ ```yaml
216
+ # Enhanced commands for shadcn/ui support
217
+ commands:
218
+ - create-shadcn-component: Generate shadcn/ui component with MCP magic
219
+ - customize-theme: Customize theme variables and dark mode
220
+ - optimize-components: Analyze and optimize component usage
221
+ - generate-form: Create form components with validation
222
+ - create-data-table: Generate data table with sorting and filtering
223
+ ```
224
+
225
+ #### MCP Tool Integration
226
+ ```typescript
227
+ // Integration with MCP tools in development workflow
228
+ interface MCPShadcnIntegration {
229
+ generateComponent(spec: ComponentSpec): Promise<ComponentCode>;
230
+ customizeTheme(theme: ThemeConfig): Promise<CSSVariables>;
231
+ analyzeUsage(project: ProjectStructure): Promise<UsageReport>;
232
+ optimizeBundle(components: ComponentList): Promise<OptimizationSuggestions>;
233
+ }
234
+ ```
235
+
236
+ ### Workflow Integration
237
+
238
+ 1. **Component Planning**: Use MCP to analyze requirements and suggest components
239
+ 2. **Generation**: Generate base components with proper TypeScript types
240
+ 3. **Customization**: Apply project-specific styling and behavior
241
+ 4. **Integration**: Integrate with existing state management and data flow
242
+ 5. **Testing**: Generate tests for components with proper mocking
243
+ 6. **Optimization**: Analyze bundle size and optimize imports
244
+
245
+ ## 📋 Best Practices
246
+
247
+ ### Component Development
248
+ - **Composition over Inheritance**: Build complex components from simple ones
249
+ - **Prop Drilling Avoidance**: Use React Context for deep prop passing
250
+ - **TypeScript First**: Always define proper TypeScript interfaces
251
+ - **Accessibility**: Ensure all components meet WCAG guidelines
252
+ - **Performance**: Use React.memo and useMemo for expensive operations
253
+
254
+ ### Styling Guidelines
255
+ - **Utility First**: Use Tailwind utility classes primarily
256
+ - **CSS Variables**: Use CSS custom properties for theming
257
+ - **Responsive Design**: Mobile-first responsive approach
258
+ - **Dark Mode**: Support both light and dark themes
259
+ - **Consistent Spacing**: Use consistent spacing scale
260
+
261
+ ### State Management Integration
262
+ ```typescript
263
+ // Integration with state management
264
+ interface ComponentWithState {
265
+ // Zustand integration
266
+ useStore: <T>(selector: (state: State) => T) => T;
267
+
268
+ // React Query integration
269
+ useQuery: <T>(key: string, fetcher: () => Promise<T>) => QueryResult<T>;
270
+
271
+ // Form state management
272
+ useForm: <T>(schema: ZodSchema<T>) => FormMethods<T>;
273
+ }
274
+ ```
275
+
276
+ ## 🔧 Development Commands
277
+
278
+ ### Component Generation
279
+ ```bash
280
+ # Generate new component with MCP
281
+ npx @21st-dev/magic generate component UserCard --base=card --props="user:User,onEdit:()=>void"
282
+
283
+ # Add shadcn/ui component
284
+ npx shadcn-ui@latest add button card dialog
285
+
286
+ # Customize existing component
287
+ npx @21st-dev/magic customize button --variant=ghost --size=lg
288
+ ```
289
+
290
+ ### Theme Management
291
+ ```bash
292
+ # Generate theme variations
293
+ npx @21st-dev/magic theme create --name=corporate --primary="#1a365d"
294
+
295
+ # Export theme variables
296
+ npx @21st-dev/magic theme export --format=css --output=theme.css
297
+ ```
298
+
299
+ ### Code Analysis
300
+ ```bash
301
+ # Analyze component usage
302
+ npx @21st-dev/magic analyze components --report=usage
303
+
304
+ # Bundle optimization
305
+ npx @21st-dev/magic optimize --target=bundle-size --threshold=100kb
306
+ ```
307
+
308
+ ## 🧪 Testing Strategy
309
+
310
+ ### Component Testing
311
+ ```typescript
312
+ // Component test with shadcn/ui
313
+ import { render, screen, fireEvent } from '@testing-library/react';
314
+ import { Button } from '@/components/ui/button';
315
+
316
+ describe('Button Component', () => {
317
+ it('renders with correct variant', () => {
318
+ render(<Button variant="destructive">Delete</Button>);
319
+
320
+ const button = screen.getByRole('button', { name: /delete/i });
321
+ expect(button).toHaveClass('bg-destructive');
322
+ });
323
+
324
+ it('handles click events', () => {
325
+ const handleClick = jest.fn();
326
+ render(<Button onClick={handleClick}>Click me</Button>);
327
+
328
+ fireEvent.click(screen.getByRole('button'));
329
+ expect(handleClick).toHaveBeenCalledTimes(1);
330
+ });
331
+ });
332
+ ```
333
+
334
+ ### Visual Testing
335
+ ```typescript
336
+ // Storybook integration for visual testing
337
+ import type { Meta, StoryObj } from '@storybook/react';
338
+ import { Button } from '@/components/ui/button';
339
+
340
+ const meta: Meta<typeof Button> = {
341
+ title: 'UI/Button',
342
+ component: Button,
343
+ parameters: {
344
+ layout: 'centered',
345
+ },
346
+ tags: ['autodocs'],
347
+ };
348
+
349
+ export default meta;
350
+ type Story = StoryObj<typeof meta>;
351
+
352
+ export const Primary: Story = {
353
+ args: {
354
+ variant: 'default',
355
+ children: 'Button',
356
+ },
357
+ };
358
+ ```
359
+
360
+ ## 🔒 Security Considerations
361
+
362
+ ### Input Validation
363
+ - **Sanitization**: Sanitize all user inputs before rendering
364
+ - **XSS Prevention**: Use proper escaping for dynamic content
365
+ - **CSRF Protection**: Implement CSRF tokens for forms
366
+ - **Content Security Policy**: Configure CSP headers properly
367
+
368
+ ### Component Security
369
+ - **Prop Validation**: Validate all component props
370
+ - **Safe Rendering**: Avoid dangerouslySetInnerHTML
371
+ - **Access Control**: Implement proper role-based access
372
+ - **Audit Dependencies**: Regular security audits of dependencies
373
+
374
+ ## 📊 Performance Optimization
375
+
376
+ ### Bundle Optimization
377
+ - **Tree Shaking**: Import only used components
378
+ - **Code Splitting**: Split components into separate bundles
379
+ - **Lazy Loading**: Lazy load heavy components
380
+ - **Bundle Analysis**: Regular bundle size analysis
381
+
382
+ ### Runtime Performance
383
+ - **Memoization**: Use React.memo for expensive components
384
+ - **Virtual Scrolling**: For large lists and tables
385
+ - **Image Optimization**: Optimize images and use proper formats
386
+ - **Caching**: Implement proper caching strategies
387
+
388
+ This integration guide ensures shadcn/ui is properly integrated into the BMAD framework with full MCP tool support for enhanced development workflows.
@@ -0,0 +1,149 @@
1
+ # User-Defined Preferred Patterns and Preferences
2
+
3
+ ## Frontend Frameworks
4
+
5
+ ### Web Development
6
+ - **React**: Latest stable version with TypeScript
7
+ - **Next.js**: Full-stack React framework with App Router
8
+ - **Vue 3**: Composition API with TypeScript
9
+ - **Angular**: Latest LTS version with standalone components
10
+ - **Svelte/SvelteKit**: Modern reactive framework
11
+
12
+ ### UI Component Libraries
13
+ - **shadcn/ui**: Modern React components with Tailwind CSS
14
+ - **Material UI**: React components following Material Design
15
+ - **Ant Design**: Enterprise-class UI design language
16
+ - **Chakra UI**: Modular and accessible component library
17
+ - **Headless UI**: Unstyled, accessible UI components
18
+
19
+ ### CSS Frameworks
20
+ - **Tailwind CSS**: Utility-first CSS framework
21
+ - **CSS Modules**: Localized CSS
22
+ - **Styled Components**: CSS-in-JS library
23
+ - **Emotion**: Performant and flexible CSS-in-JS
24
+
25
+ ## Mobile Development
26
+
27
+ ### Flutter
28
+ - **Framework**: Flutter 3.24+ with Dart 3.5+
29
+ - **State Management**: Cubit/BLoC pattern with flutter_bloc
30
+ - **Architecture**: Clean Architecture with dependency injection
31
+ - **Code Generation**: Freezed + json_serializable + injectable
32
+ - **Networking**: Dio HTTP client
33
+ - **Local Storage**: Hive for complex data, SharedPreferences for simple data
34
+ - **Routing**: GoRouter for declarative routing
35
+ - **Localization**: flutter_localizations with ARB files
36
+ - **Testing**: flutter_test + bloc_test + mocktail
37
+
38
+ ## Backend Services
39
+
40
+ ### Firebase
41
+ - **Authentication**: Firebase Auth with multi-provider support
42
+ - **Database**: Firestore for NoSQL, Realtime Database for real-time features
43
+ - **Storage**: Firebase Storage for file uploads
44
+ - **Functions**: Cloud Functions for serverless backend logic
45
+ - **Hosting**: Firebase Hosting for web deployment
46
+ - **Analytics**: Firebase Analytics and Crashlytics
47
+
48
+ ### Supabase
49
+ - **Database**: PostgreSQL with Row Level Security (RLS)
50
+ - **Authentication**: Supabase Auth with social providers
51
+ - **Storage**: Supabase Storage for file management
52
+ - **Real-time**: Real-time subscriptions
53
+ - **Edge Functions**: Deno-based serverless functions
54
+ - **API**: Auto-generated REST and GraphQL APIs
55
+
56
+ ### Traditional Backend
57
+ - **Node.js**: Express.js or Fastify with TypeScript
58
+ - **Python**: FastAPI or Django with type hints
59
+ - **Database**: PostgreSQL for relational, MongoDB for document-based
60
+ - **API**: REST with OpenAPI documentation or GraphQL
61
+
62
+ ## Development Tools
63
+
64
+ ### Build Tools
65
+ - **Vite**: Fast build tool for modern web development
66
+ - **Webpack**: Module bundler for complex configurations
67
+ - **Turbo**: High-performance build system for monorepos
68
+ - **esbuild**: Extremely fast JavaScript bundler
69
+
70
+ ### State Management
71
+ - **Web**: Redux Toolkit, Zustand, or Valtio
72
+ - **Mobile**: Cubit/BLoC for Flutter, Redux for React Native
73
+
74
+ ### Testing
75
+ - **Unit Testing**: Jest, Vitest, or Flutter Test
76
+ - **Integration Testing**: Cypress, Playwright, or Flutter Integration Tests
77
+ - **E2E Testing**: Playwright or Detox for mobile
78
+
79
+ ### Code Quality
80
+ - **Linting**: ESLint for JavaScript/TypeScript, flutter_lints for Flutter
81
+ - **Formatting**: Prettier for web, dart format for Flutter
82
+ - **Type Checking**: TypeScript strict mode, Dart null safety
83
+
84
+ ## Architecture Patterns
85
+
86
+ ### Clean Architecture
87
+ - **Presentation Layer**: UI components and state management
88
+ - **Domain Layer**: Business logic and entities
89
+ - **Data Layer**: Data sources and repository implementations
90
+ - **Infrastructure**: External services and frameworks
91
+
92
+ ### Design Patterns
93
+ - **Repository Pattern**: Abstract data access
94
+ - **Dependency Injection**: Inversion of control
95
+ - **Observer Pattern**: State management and reactive programming
96
+ - **Factory Pattern**: Object creation
97
+ - **Singleton Pattern**: Shared services and utilities
98
+
99
+ ## Security Preferences
100
+
101
+ ### Authentication
102
+ - **Multi-factor Authentication**: Always enabled for production
103
+ - **OAuth 2.0**: Preferred for third-party authentication
104
+ - **JWT Tokens**: With proper expiration and refresh mechanisms
105
+ - **Biometric Authentication**: For mobile applications where applicable
106
+
107
+ ### Data Protection
108
+ - **Encryption at Rest**: All sensitive data encrypted
109
+ - **Encryption in Transit**: HTTPS/TLS for all communication
110
+ - **Input Validation**: Server-side validation for all inputs
111
+ - **SQL Injection Prevention**: Parameterized queries or ORM
112
+
113
+ ### API Security
114
+ - **Rate Limiting**: Prevent abuse and DoS attacks
115
+ - **CORS Configuration**: Proper cross-origin resource sharing
116
+ - **API Keys**: Secure API key management
117
+ - **Certificate Pinning**: For mobile applications
118
+
119
+ ## Performance Preferences
120
+
121
+ ### Web Performance
122
+ - **Core Web Vitals**: Optimize for LCP, FID, and CLS
123
+ - **Code Splitting**: Lazy loading for better performance
124
+ - **Image Optimization**: WebP format with fallbacks
125
+ - **Caching Strategy**: Service workers and CDN caching
126
+
127
+ ### Mobile Performance
128
+ - **60 FPS**: Maintain smooth animations and scrolling
129
+ - **Memory Management**: Efficient memory usage and garbage collection
130
+ - **Battery Optimization**: Minimize battery drain
131
+ - **Offline Support**: Graceful offline functionality
132
+
133
+ ## Localization Preferences
134
+
135
+ ### Multi-language Support
136
+ - **Internationalization**: Built-in from project start
137
+ - **Translation Keys**: Descriptive and hierarchical
138
+ - **RTL Support**: Right-to-left language support
139
+ - **Date/Time Formatting**: Locale-specific formatting
140
+ - **Number Formatting**: Currency and number localization
141
+
142
+ ## MCP Tool Integrations
143
+
144
+ ### Available MCP Tools
145
+ - **@21st-dev/magic**: For shadcn/ui component generation and management
146
+ - **supabase-mcp**: For Supabase backend integration and management
147
+ - **firebase-mcp**: For Firebase services integration
148
+ - **sequential-thinking**: For complex problem analysis and decision making
149
+ - **dart-mcp**: For Dart code analysis and Flutter development assistance