Standardized workflow for adding a new "Vertical Slice" feature to QoreDB, from Rust backend to React frontend. Use this when the user asks to "add a feature", "create a new command", or "connect backend to frontend".
Install
mkdir -p .claude/skills/feature-creator && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13684" && unzip -o skill.zip -d .claude/skills/feature-creator && rm skill.zipInstalls to .claude/skills/feature-creator
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Standardized workflow for adding a new "Vertical Slice" feature to QoreDB, from Rust backend to React frontend. Use this when the user asks to "add a feature", "create a new command", or "connect backend to frontend".About this skill
Feature Creator
This skill guides the creation of a complete feature in QoreDB, ensuring type safety and architectural consistency across the Rust/Tauri/React stack.
Workflow
1. Backend (Rust)
-
Create Command File: Create a new file in
src-tauri/src/commands/<feature>.rsusing the template below.- Define a
[Feature]Responsestruct derivingSerialize. - Implement the function with
#[tauri::command]. - Use
crate::SharedStateif state access involves locking (e.g.state.lock().await).
- Define a
-
Register Module: In
src-tauri/src/lib.rs:- Add
pub mod <feature>;in thecommandsmodule block (orsrc-tauri/src/commands/mod.rsif applicable, but QoreDB useslib.rsfor registration). - Add the command to the
tauri::generate_handler!macro list.
- Add
2. Frontend Interface (TypeScript)
- Update
src/lib/tauri.ts: This file acts as the central SDK for the backend.- Define the Types (Interfaces) for Arguments and Responses.
- Export a typed
async functionthat callsinvoke('command_name', { args }). - Rule: Never call
invokedirectly in components. Always go throughsrc/lib/tauri.ts.
3. Frontend Logic (React)
-
Create Hook (Optional but Recommended): If the feature involves loading states or complex side effects, create
src/hooks/use<Feature>.ts.- Use the
assets/hook.tspattern.
- Use the
-
Implement UI:
- Import the function from
@lib/tauri(or the hook). - Handle
loadinganderrorstates explicitly.
- Import the function from
Templates
Rust Command (src-tauri/src/commands/)
use serde::Serialize;
use crate::SharedState;
#[derive(Debug, Serialize)]
pub struct FeatureResponse {
pub success: bool,
pub data: Option<String>, // Replace with specific type
pub error: Option<String>,
}
#[tauri::command]
pub async fn feature_command(
state: tauri::State<'_, SharedState>,
id: String,
) -> Result<FeatureResponse, String> {
// Access state:
// let state = state.lock().await;
Ok(FeatureResponse {
success: true,
data: Some("Success".to_string()),
error: None,
})
}
TypeScript SDK (src/lib/tauri.ts)
// TYPES
export interface FeatureResponse {
success: boolean;
data?: string;
error?: string;
}
// COMMANDS
export async function featureCommand(id: string): Promise<FeatureResponse> {
return invoke('feature_command', { id });
}
Checklist
- Rust: Command created and public
- Rust: Command registered in
generate_handler! - TS: Interface defined in
src/lib/tauri.ts - TS: Wrapper function exported in
src/lib/tauri.ts - UI: Error handling implemented (Try/Catch or State)