Agent skill
build-app
Create a Datagrok application with routing, views, and data access
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/build-app
SKILL.md
Build a Datagrok Application
Help the user create a full Datagrok application inside a package, with entry points, views, routing, and data access.
Usage
/build-app [app-name] [--in-package <package-name>]
Instructions
1. Create or use an existing package
If no package exists yet:
grok create <PackageName>
cd <PackageName>
npm install
Add an app to the package:
grok add app <AppName>
2. Define the app entry point
Modern Datagrok apps use the @grok.decorators.app decorator on a static method:
import * as grok from 'datagrok-api/grok';
import * as ui from 'datagrok-api/ui';
import * as DG from 'datagrok-api/dg';
export const _package = new DG.Package();
export class PackageFunctions {
@grok.decorators.app({
name: 'MyApp',
description: 'Description of the app',
icon: 'images/icons/app-icon.png',
})
static myApp(
@grok.decorators.param({options: {'meta.url': true, 'optional': true}}) path?: string
): void {
// App initialization logic
}
}
The meta.url parameter captures the URL path after the app name, enabling routing.
3. Add navigation with AppTreeBrowser
For apps with multiple views, define a tree browser linked to the app:
@grok.decorators.appTreeBrowser({app: 'MyApp'})
static async myAppTreeBrowser(treeNode: DG.TreeViewGroup): Promise<void> {
treeNode.item('Home').onSelected.subscribe((_) => { /* show home view */ });
const dataGroup = treeNode.group('Data');
dataGroup.item('View 1').onSelected.subscribe((_) => { /* show view 1 */ });
dataGroup.item('View 2').onSelected.subscribe((_) => { /* show view 2 */ });
}
4. Build the main view
Most apps start with a custom view or a table view:
// Custom view
const view = DG.View.create();
view.name = 'My App';
view.root.appendChild(ui.divV([
ui.h1('Welcome'),
ui.divText('App content here')
]));
grok.shell.addView(view);
// Table view with data
const df = await grok.data.demo.demog(100);
const tv = grok.shell.addTableView(df);
tv.addViewer('Scatter plot');
Use ui.splitH / ui.splitV for layout composition.
5. App URLs and launching
- Single app in package:
https://<host>/apps/<APP_NAME> - Multiple apps in package:
https://<host>/apps/<PACKAGE_NAME>/<APP_NAME> - Users find apps in
Functions | Appsin the sidebar.
6. Data access patterns
Database queries:
const result = await grok.data.query('PackageName:QueryName', {param1: 'value'});
REST endpoints (with CORS proxy):
const response = await grok.dapi.fetchProxy('https://api.example.com/data');
User data storage (persist settings):
await grok.dapi.userDataStorage.postValue('storeName', 'key', 'value');
const val = await grok.dapi.userDataStorage.getValue('storeName', 'key');
7. Build and publish
npm run build
grok publish dev
Behavior
- Ask for the app name and purpose if not clear from the request.
- Default to TypeScript with decorator-based entry points.
- When the user asks about routing, explain the
meta.urlparameter pattern. - When the user needs data access, guide them to the appropriate pattern (database query, REST proxy, file share).
- Follow Datagrok coding conventions: no excessive comments, no curly brackets for one-line if/for, catch/else-if on new line.
- Suggest
AppTreeBrowserfor apps that need multi-view navigation. - Remind the user to configure server keys via
grok configif they haven't published before.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?