Build scalable full-stack applications with SELISE Blocks, MCP server integration, and React best practices. Includes schema management, GraphQL CRUD, translation workflows, and 3-layer component architecture.
Expert guidance for building scalable applications with SELISE Blocks Construct, leveraging MCP (Model Context Protocol) automation for cloud operations and following strict architectural patterns.
SELISE <blocks/> Construct is a ready-to-use application blueprint that accelerates development with pre-integrated microservices, offering a scalable full-stack foundation with essential features, prebuilt modules, and practical use cases.
**CRITICAL: Read Project Documentation First**
Before ANY implementation, read these files in the `llm-docs/` directory IN ORDER:
1. `workflows/user-interaction.md` - User interaction patterns
2. `workflows/feature-planning.md` - Task breakdown and planning
3. `recipes/graphql-crud.md` - Data operations (primary reference)
4. `recipes/translation-integration.md` - Internationalization process
5. `agent-instructions/selise-development-agent.md` - Development workflows
6. Other recipes as needed for specific features
**Path guidance:** Look for `llm-docs/` directory in project root. If not found, perform full directory search before proceeding.
1. **Read documentation first** (`workflows/user-interaction.md`)
2. **Create tracking files** in project root:
- `FEATURELIST.md` - User requirements and features
- `TASKS.md` - Implementation task checklist
- `SCRATCHPAD.md` - Development notes and decisions
- `CLOUD.md` - MCP operations and schema documentation
3. **Engage with user**:
- Ask clarifying questions about desired features
- Document ALL requirements in FEATURELIST.md
- Break down features into specific functionalities
- Get explicit user confirmation before proceeding
**CRITICAL: All project setup and schema management MUST use MCP tools.**
#### Authentication
```python
get_auth_status()
```
#### Project Configuration
```bash
PROJECT_KEY=$(grep VITE_X_BLOCKS_KEY .env | cut -d '=' -f2)
PROJECT_KEY=$(grep VITE_X_BLOCKS_KEY .env.dev | cut -d '=' -f2)
```
#### Available MCP Tools
**Project Management:**
**Schema Management:**
**Translation Management:**
**Other:**
#### Schema Creation Example
```python
create_schema(
schema_name="TaskManagementTasks",
fields=[
{"name": "Title", "type": "String"},
{"name": "Description", "type": "String"},
{"name": "Status", "type": "String"},
{"name": "Priority", "type": "Int"},
{"name": "DueDate", "type": "Date"},
{"name": "AssignedTo", "type": "String"}
]
)
list_schemas()
get_schema_details("TaskManagementTasks")
```
#### 3-Layer Component Hierarchy (MANDATORY)
```
Layer 1: Feature Components (src/modules/*/components/)
↓ uses
Layer 2: Block Components (src/components/core/)
↓ uses
Layer 3: UI Components (src/components/ui/)
```
**Never skip layers or create custom implementations when SELISE components exist.**
#### Feature Module Structure
Follow this directory pattern (reference `src/modules/inventory/` for structure ONLY):
```
src/modules/[module-name]/
├── components/ # Feature-specific components
├── graphql/ # Queries and mutations
├── hooks/ # Feature-specific hooks
├── services/ # API calls and business logic
├── types/ # TypeScript interfaces
└── index.ts # Public exports
```
**WARNING: Use inventory for FOLDER STRUCTURE only. Never copy its GraphQL patterns.**
**CRITICAL: Follow ONLY the patterns in `recipes/graphql-crud.md`. Do NOT reference inventory module for data operations.**
#### Schema Name Quirks (MUST KNOW)
```typescript
// Schema name: TodoTask
// Query field: TodoTasks (schema + single 's')
// Mutations: insertTodoTask, updateTodoTask, deleteTodoTask
// Input types: TodoTaskInsertInput, TodoTaskUpdateInput
```
#### Query Example
```typescript
import { graphqlClient } from '@/lib/graphql-client';
const QUERY_TODO_TASKS = `
query QueryTodoTasks($filter: String!) {
TodoTasks(filter: $filter) {
items {
_id
Title
Status
Priority
}
}
}
`;
async function fetchTasks() {
const result = await graphqlClient.request(QUERY_TODO_TASKS, {
filter: JSON.stringify({}) // MongoDB filter format
});
// Response path: result.TodoTasks.items (no 'data' wrapper)
return result.TodoTasks.items;
}
```
#### Mutation Example
```typescript
const INSERT_TODO_TASK = `
mutation InsertTodoTask($data: TodoTaskInsertInput!) {
insertTodoTask(data: $data) {
_id
Title
}
}
`;
async function createTask(title: string, status: string) {
const result = await graphqlClient.request(INSERT_TODO_TASK, {
data: { Title: title, Status: status }
});
return result.insertTodoTask;
}
```
#### Update with Filter
```typescript
const UPDATE_TODO_TASK = `
mutation UpdateTodoTask($filter: String!, $data: TodoTaskUpdateInput!) {
updateTodoTask(filter: $filter, data: $data) {
_id
Title
Status
}
}
`;
async function updateTask(id: string, updates: object) {
const result = await graphqlClient.request(UPDATE_TODO_TASK, {
filter: JSON.stringify({ _id: id }), // ALWAYS use _id, never ItemId
data: updates
});
return result.updateTodoTask;
}
```
#### Delete Example
```typescript
const DELETE_TODO_TASK = `
mutation DeleteTodoTask($filter: String!) {
deleteTodoTask(filter: $filter)
}
`;
async function deleteTask(id: string) {
await graphqlClient.request(DELETE_TODO_TASK, {
filter: JSON.stringify({ _id: id })
});
}
```
**ALWAYS use AdvanceDataTable component. Never create custom table implementations.**
```typescript
import { AdvanceDataTable } from '@/components/core/AdvanceDataTable';
const columns = [
{ header: 'Title', accessorKey: 'Title' },
{ header: 'Status', accessorKey: 'Status' },
{ header: 'Priority', accessorKey: 'Priority' },
];
<AdvanceDataTable
columns={columns}
data={tasks}
onEdit={handleEdit}
onDelete={handleDelete}
/>
```
Follow `recipes/react-hook-form-integration.md`:
```typescript
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Form, FormField, FormItem, FormLabel, FormControl } from '@/components/ui/form';
const taskSchema = z.object({
title: z.string().min(1, 'Title is required'),
status: z.string(),
priority: z.number().int().min(1).max(5),
});
type TaskFormData = z.infer<typeof taskSchema>;
function TaskForm() {
const form = useForm<TaskFormData>({
resolver: zodResolver(taskSchema),
defaultValues: { title: '', status: 'pending', priority: 3 }
});
const onSubmit = async (data: TaskFormData) => {
// Handle submission
};
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Title</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
</FormItem>
)}
/>
{/* More fields */}
</form>
</Form>
);
}
```
**ALWAYS use ConfirmationModal. Never use browser confirm() or AlertDialog.**
```typescript
import { ConfirmationModal } from '@/components/core/ConfirmationModal';
function TaskList() {
const [isOpen, setIsOpen] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const handleDeleteClick = (id: string) => {
setSelectedId(id);
setIsOpen(true);
};
const handleConfirm = async () => {
if (selectedId) {
await deleteTask(selectedId);
setIsOpen(false);
}
};
return (
<>
{/* Your list UI */}
<ConfirmationModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onConfirm={handleConfirm}
title="Delete Task"
message="Are you sure you want to delete this task?"
/>
</>
);
}
```
**AFTER implementing features with static text, translate all user-facing strings using MCP tools.**
See `recipes/translation-integration.md` for complete instructions.
#### Quick Translation Workflow
1. **Extract hardcoded strings** to translation keys:
```typescript
// Before:
<h1>Task Dashboard</h1>
// After:
import { useTranslation } from '@/hooks/useTranslation';
const { t } = useTranslation();
<h1>{t('taskDashboard')}</h1>
```
2. **Add route mapping** in `src/i18n/route-module-map.ts`:
```typescript
export const routeModuleMap: Record<string, string> = {
'/tasks': 'tasks',
'/tasks/create': 'tasks',
// ...existing mappings
};
```
3. **Create translation module** using MCP:
```python
create_module(module_name="tasks")
```
4. **Add translations** for all supported languages:
```python
save_module_keys_with_translations(
module_name="tasks",
keys_with_translations=[
{
"key": "taskDashboard",
"translations": {
"en": "Task Dashboard",
"es": "Panel de Tareas",
"fr": "Tableau de Bord des Tâches"
}
}
]
)
```
5. **Document keys** in TASKS.md and test on route
**DEFAULT: Hide ALL sidebar items - start with clean slate!**
```typescript
// Option 1: No sidebar at all (most apps)
// Remove AppSidebar component entirely
// Option 2: Custom sidebar (only if needed)
// Add ONLY items for user's requested features
const sidebarItems = [
{ label: 'Dashboard', path: '/dashboard', icon: 'home' },
{ label: 'Tasks', path: '/tasks', icon: 'list' },
{ label: 'Settings', path: '/settings', icon: 'settings' },
];
// NEVER show demo items like inventory, invoices, IAM
// unless explicitly requested by user
```
```bash
git checkout -b feature/[task-name]
git add .
git diff --staged
git commit -m "feat: implement [task] using MCP and SELISE patterns
git checkout main
git merge feature/[task-name]
```
Update `TASKS.md` using this status system:
```markdown
```
✓ Always read `llm-docs/` documentation BEFORE implementation
✓ Use MCP tools for ALL schema and cloud operations
✓ Follow 3-layer component hierarchy strictly
✓ Use `graphqlClient` from `@/lib/graphql-client`
✓ Use AdvanceDataTable for all tables
✓ Use ConfirmationModal for all confirmations
✓ Document all operations in CLOUD.md
✓ Update TASKS.md as you work
✓ Get project key from `.env` or `.env.{environment}`
✓ Verify schema names with `list_schemas()` before implementing
✓ Use MongoDB filter format: `JSON.stringify({ _id: "123" })`
✓ Use `_id` field for filtering (never `ItemId`)
✓ Translate all static text after implementation
✗ Create schemas manually - always use MCP
✗ Copy GraphQL patterns from inventory module
✗ Use Apollo Client (use `graphqlClient` instead)
✗ Skip reading recipes before implementation
✗ Create custom components when SELISE components exist
✗ Bypass the 3-layer component hierarchy
✗ Use browser `confirm()` or `AlertDialog`
✗ Show irrelevant sidebar items (inventory, IAM, etc.)
✗ Implement features without user confirmation
✗ Forget to document MCP operations in CLOUD.md
When conflicts arise, follow this priority:
1. **MCP tool usage** (schema and cloud operations)
2. **Recipes** (`llm-docs/recipes/`)
3. **Component hierarchy** (`llm-docs/component-catalog/`)
4. **General patterns** (other documentation)
```bash
npm install
npm start
npm run lint
npm test
npm run build
grep VITE_X_BLOCKS_KEY .env | cut -d '=' -f2
grep VITE_X_BLOCKS_KEY .env.dev | cut -d '=' -f2
```
Before considering any feature complete:
This skill guides you through building production-ready SELISE Blocks applications with MCP automation, strict architectural patterns, and comprehensive documentation practices. Always read project docs first, use MCP for cloud operations, follow the 3-layer hierarchy, and maintain tracking files throughout development.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/selise-blocks-react-development/raw