Comprehensive development workflow for building web applications using Selise Blocks platform with MCP integration, React/TypeScript, and automated schema management. Includes feature planning, schema creation, translation workflows, and component patterns.
A complete workflow for building web applications using the Selise Blocks platform with FastMCP server integration for automated project setup and schema management.
This skill guides you through developing applications on the Selise Blocks platform, covering:
**BEFORE any coding or user interaction:**
1. **Read core documentation** in this exact order:
- `llm-docs/workflows/user-interaction.md` - User communication patterns
- `llm-docs/workflows/feature-planning.md` - Task breakdown methodology
- `llm-docs/recipes/graphql-crud.md` - Data operations (ONLY source for CRUD!)
- `llm-docs/recipes/translation-integration.md` - i18n integration
- `llm-docs/agent-instructions/selise-development-agent.md` - Development workflows
- `llm-docs/component-catalog/component-quick-reference.md` - Component hierarchy
2. **Verify MCP server availability:**
- Check for available MCP tools (create_schema, list_schemas, get_projects, etc.)
- Confirm authentication status using `get_auth_status` tool
3. **Get project key from environment:**
```bash
# Default environment
PROJECT_KEY=$(grep VITE_X_BLOCKS_KEY .env | cut -d '=' -f2)
# Specific environment (dev, prod, test)
PROJECT_KEY=$(grep VITE_X_BLOCKS_KEY .env.dev | cut -d '=' -f2)
```
4. **Create tracking files** (MUST be created before proceeding):
- `FEATURELIST.md` - User's desired features and requirements
- `TASKS.md` - Technical task breakdown with status tracking
- `SCRATCHPAD.md` - Implementation notes and decisions
- `CLOUD.md` - MCP operations log and schema documentation
5. **Engage with user** following patterns from `user-interaction.md`:
- Ask clarifying questions about desired features
- Document each feature clearly in `FEATURELIST.md`
- Confirm understanding before technical planning
- Example questions:
- "What are the main features you need?"
- "Who will be using this application?"
- "What data needs to be stored and managed?"
6. **Get explicit user confirmation:**
- Present the documented features from `FEATURELIST.md`
- Wait for user approval before proceeding to technical planning
7. **Analyze feature requirements:**
- Review confirmed features in `FEATURELIST.md`
- Identify data entities needed
- Design schema structures
- Document schema plan in `CLOUD.md`
8. **Use MCP tools to create schemas** (CRITICAL - NOT manual):
```python
# List existing schemas first
list_schemas(project_key=PROJECT_KEY)
# Create schema for each entity
create_schema(
project_key=PROJECT_KEY,
schema_name="ProjectNameEntityName", # e.g., "TaskAppTasks"
fields=[
{"name": "Title", "type": "String"},
{"name": "Status", "type": "String"},
{"name": "Priority", "type": "Int"},
{"name": "DueDate", "type": "Date"}
]
)
# Verify schema creation
get_schema_details(project_key=PROJECT_KEY, schema_name="ProjectNameEntityName")
# Finalize when ready
finalize_schema(project_key=PROJECT_KEY, schema_name="ProjectNameEntityName")
```
9. **Document all MCP operations in CLOUD.md:**
- Schema names created
- Field configurations
- Any issues or modifications
- MCP tool responses
10. **Set up feature module structure** (follow inventory pattern for structure ONLY):
```
src/modules/[feature-name]/
├── components/ # Feature-specific components
├── graphql/ # Queries and mutations
├── hooks/ # Feature hooks
├── services/ # Business logic
├── types/ # TypeScript types
└── index.ts # Public exports
```
11. **Follow 3-layer component hierarchy:**
- **Layer 1**: Feature Components (`src/modules/*/components/`)
- **Layer 2**: Block Components (`src/components/core/`)
- **Layer 3**: UI Components (`src/components/ui/`)
- NEVER skip layers or create custom implementations when Selise components exist
12. **Implement GraphQL operations** (FOLLOW `recipes/graphql-crud.md` EXACTLY):
**CRITICAL QUIRKS:**
- Query fields: SchemaName + 's' (TodoTask → TodoTasks)
- Mutations: operation + SchemaName (insertTodoTask, updateTodoTask)
- Input types: SchemaName + Operation + Input (TodoTaskInsertInput)
- ALWAYS use MongoDB filter format: `JSON.stringify({_id: "123"})`
- Use `_id` for filtering, NEVER `ItemId`
- Use `graphqlClient` from `lib/graphql-client`, NOT Apollo Client
- Response path: `result.[SchemaName]s.items` (no 'data' wrapper)
Example query:
```typescript
import { graphqlClient } from '@/lib/graphql-client';
const GET_TASKS = `
query GetTasks($filter: String) {
TaskAppTasks(filter: $filter) {
items {
_id
Title
Status
Priority
}
}
}
`;
const result = await graphqlClient.request(GET_TASKS, {
filter: JSON.stringify({ Status: "active" })
});
const tasks = result.TaskAppTasks.items;
```
13. **Use required Selise components:**
- **Data tables**: ALWAYS use AdvanceDataTable (never custom tables)
- **Forms**: React Hook Form + Zod validation
- **Confirmations**: ConfirmationModal (never browser confirm() or AlertDialog)
- **Styling**: Tailwind CSS classes
14. **Update TASKS.md as you work:**
- `[ ]` → Pending
- `[🔄]` → In Progress
- `[x]` → Completed
- Add notes about decisions in SCRATCHPAD.md
15. **Extract hardcoded strings to translation keys:**
```typescript
// Before
<h1>Welcome to Dashboard</h1>
// After
import { useTranslation } from '@/hooks/useTranslation';
const { t } = useTranslation();
<h1>{t('dashboard.welcome')}</h1>
```
16. **Add route mapping** in `src/i18n/route-module-map.ts`:
```typescript
export const routeModuleMap: Record<string, string> = {
'/dashboard': 'dashboard',
'/tasks': 'tasks',
'/settings': 'settings',
};
```
17. **Create translation module via MCP:**
```python
# Get available languages
get_translation_languages(project_key=PROJECT_KEY)
# Create module
create_module(
project_key=PROJECT_KEY,
module_name="tasks",
module_description="Task management translations"
)
# Add translations for all languages
save_module_keys_with_translations(
project_key=PROJECT_KEY,
module_name="tasks",
keys_with_translations=[
{
"key": "tasks.title",
"translations": {
"en": "Tasks",
"fr": "Tâches",
"de": "Aufgaben"
}
}
]
)
```
18. **Test translation loading on routes**
19. **Default: Remove ALL sidebar items** (start with clean slate):
```typescript
// Most apps: Remove AppSidebar component entirely
// If navigation needed: Add ONLY user's features
const sidebarItems = [
{ label: 'Dashboard', path: '/dashboard', icon: 'home' },
{ label: 'Tasks', path: '/tasks', icon: 'list' },
// ONLY items user requested - NO inventory, IAM, etc.
];
```
20. **NEVER show template items** (inventory, invoices, IAM) unless explicitly requested
21. **Run quality checks:**
```bash
npm run lint # Code quality
npm test # Unit tests
npm run build # Production build test
```
22. **Test all CRUD operations:**
- Create new records
- Read/list records with filters
- Update existing records
- Delete records with confirmation
23. **Verify translations** on all routes
24. **Create feature branch:**
```bash
git checkout -b feature/[task-name]
```
25. **Before committing, update tracking files:**
- Mark task complete in TASKS.md: `[x]`
- Add implementation notes to SCRATCHPAD.md
- Update FEATURELIST.md if scope changed
- Document schema changes in CLOUD.md
26. **Compliance checklist:**
- [ ] Used MCP for schema creation
- [ ] Followed 3-layer component hierarchy
- [ ] Used AdvanceDataTable for tables
- [ ] Used ConfirmationModal for confirmations
- [ ] Followed recipes from llm-docs
- [ ] Added translations for all UI text
- [ ] Updated TASKS.md with completion status
- [ ] Removed/hidden irrelevant sidebar items
27. **Commit with detailed message:**
```bash
git add .
git diff --staged # Review changes
git commit -m "feat: implement [task] using MCP and Selise patterns
- Completed: [specific features from FEATURELIST.md]
- Updated: TASKS.md, SCRATCHPAD.md status
- Schemas: [schemas from CLOUD.md]
- References: #[issue-number]"
```
28. **Merge to main:**
```bash
git checkout main
git merge feature/[task-name]
```
1. MCP tool usage and patterns
2. Recipes from llm-docs/recipes/
3. Component hierarchy from component-catalog/
4. General patterns and documentation
**User Request:** "I need a task management app"
**Workflow:**
1. Read documentation files
2. Create tracking files
3. Ask clarifying questions → document in FEATURELIST.md
4. Get confirmation
5. Use MCP to create TaskAppTasks schema with fields: Title, Status, Priority, DueDate
6. Implement components following 3-layer hierarchy
7. Add translations for all labels
8. Remove all default sidebar items, add only: Dashboard, Tasks, Settings
9. Test and commit
**Scenario:** Dashboard page has hardcoded English text
**Steps:**
1. Extract strings: "Dashboard" → `t('dashboard.title')`
2. Add route mapping: `/dashboard` → `dashboard` module
3. Use MCP create_module for "dashboard"
4. Use MCP save_module_keys_with_translations with all languages
5. Test on /dashboard route
```bash
npm install
npm start
npm run lint
npm test
npm run build
git checkout -b feature/task-name
git add .
git commit -m "feat: description"
git checkout main
git merge feature/task-name
grep VITE_X_BLOCKS_KEY .env
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/selise-blocks-development-guide/raw