✨Data Intelligence Lab@HKU✨

Build dashboard panels in plain TypeScript with titles, counts, loading states, and retry controls. Includes patterns for escaping external text before HTML insertion to address XSS, where untrusted content can run scripts in a page.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding stock or calendar panels to a dashboard
• Escaping external API text before HTML insertion
• Adding loading, error, and retry states

Build dashboard panels in plain TypeScript with data fetching and loading states. The pattern uses cached data, fallback values, and a circuit breaker, which temporarily pauses requests after repeated failures, to handle API problems.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a stock dashboard panel with periodic updates
• Adding request cooldowns and fallback values for API failures
• Sharing loading, error, and count displays across panels

Build a dark dashboard with panels that adapt to screen width. The skill provides CSS for consistent colors, monospace text, panel headers, scrolling content, status badges, and loading or error states.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building dashboards with multiple information panels
• Adapting panel layouts for phones and large screens
• Standardizing dark colors and monospace text

Plan a personal monitoring dashboard using a reference for panels, data sources, APIs, refresh intervals, and development priorities. It covers schedules, messages, news, stocks, finances, and combined views such as a daily briefing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Choosing which dashboard panel to build next
• Checking panel APIs and data structures
• Planning a combined view of schedules, messages, and stocks

Build sidebars and widgets that receive data updates from their caller. This skill uses a single shared module instance, separate creation and update functions, and stored references to page elements for partial updates.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a sidebar that updates frequently
• Display data supplied by an external controller
• Update selected page elements without rebuilding the whole widget

Build reusable React components that save settings in browser storage and support keyboard selection. The patterns cover settings dialogs and command palettes, with guidance on TypeScript types, storage keys, and managing keyboard focus.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Keeping app settings across page reloads
• Building command selection with arrow keys and Enter
• Creating reusable settings dialogs

Implement scheduled data updates for dashboard panels with separate refresh intervals. Pause timers while the browser tab is hidden, stagger eligible updates on return to reduce request bursts, and prevent overlapping requests for the same panel.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Setting different refresh intervals for dashboard panels
• Pausing periodic updates while a browser tab is hidden
• Staggering panel updates when returning to a tab

Turn code patterns, task procedures, or informal documentation into reusable SKILL.md files for OpenSpace. The workflow guides descriptions, actionable instructions, dependency references, and format checks so agents can select skills for relevant tasks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Package a code pattern as a reusable skill
• Turn informal documentation into SKILL.md
• Define a repeatable workflow for an agent

Run TypeScript type checks when standard commands fail, then filter diagnostics to files involved in your task. Preserve the compiler’s exit status while reviewing relevant errors separately from existing project errors.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Running type checks when npx tsc fails
• Reviewing diagnostics for newly created files
• Filtering errors to a feature directory

Implement polling, or repeated data checks, that slows down after failures and returns to its normal interval after success. The TypeScript pattern also pauses hidden tabs, staggers overdue refreshes, and manages multiple update tasks independently.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Keep dashboard data updated through temporary API failures
• Pause polling while a browser tab is hidden
• Manage different refresh intervals for multiple data sources

Write large text files when write_file or shell_agent fails because of content size limits. The fallback passes multiline content through run_shell to Python, with guidance on escaping characters and checking the saved file.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Saving large source files after a write_file failure
• Writing long JSON or Markdown files
• Handling content with complex shell escaping

Build dashboard panels in vanilla TypeScript with resizing, saved layout state, loading indicators, and retry controls. Examples also show how to wrap existing data-fetching functions with caching and temporary request pauses after repeated failures.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building dashboard panels in vanilla TypeScript
• Saving panel sizes across page reloads
• Adding retry controls to failed data requests

Build serverless endpoints that relay external API requests for a dashboard while keeping API keys on the server. Includes Vercel examples for input checks, caching, cross-origin access, and consistent JSON responses.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Connect a dashboard to external APIs without exposing API keys
• Create endpoints for stock quotes and news
• Standardize API responses and error handling

Build a new dashboard or admin panel by following existing project patterns. This skill coordinates server endpoints, service logic, interface components, registration, and styling, then checks that the pieces connect consistently.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding a new dashboard panel
• Implementing a feature across server and interface layers
• Matching existing panel conventions

Create a detailed specification for a dashboard, covering its purpose, panels, data sources, refresh schedules, and interactions. Use a reusable structure to document what each panel shows and how users and external systems interact with it.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Define requirements before building a dashboard
• Document data sources and refresh schedules for each panel
• Specify navigation and external system connections

Save large text files when write_file or shell_agent encounters payload size limits. Create the parent directory first, write the content with Python through run_shell, and verify the resulting file.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Saving large source files after write errors
• Writing files into new nested directories
• Saving long JSON or Markdown content

Build TypeScript interface panels with badges, thumbnails, and colors driven by data. Organize shared behavior in a base class, including fetch retries, error recovery, and saved panel size and expansion state.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a news panel with thumbnails
• Adding badges colored by data source
• Preserving panel size and expansion state

Diagnose file access problems by checking directories, permissions, file headers, and line counts in parallel batches. Also reviews TypeScript imports, fixes duplicates and type-only imports, and checks module exports before retrying the failed operation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigate missing files, incorrect paths, and permission errors
• Review multiple source files in parallel batches
• Check CSS and configuration file headers and line counts

Create dashboard panels in plain TypeScript using the browser’s page-building API. Follow a shared base class to add titles, counts, loading indicators, error messages, manual retry buttons, and periodically refreshed content.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add a stock price panel to a dashboard
• Show loading indicators and retry buttons on failure
• Standardize titles and item counts across panels

Build dashboard panels in plain TypeScript with automatic retries for failed requests, error messages, and retry buttons. Save expanded or collapsed state and panel dimensions in localStorage, the browser’s local storage.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building dashboard panels in TypeScript
• Adding automatic retries to failed requests
• Saving panel size and collapsed state

Inspect the first few lines of a file and its total line count in one shell call. Combine head and wc -l with a visible separator to check generated or modified files with fewer calls.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Checking the beginning and line count of a generated file
• Inspecting a file after edits
• Checking several output files after a build

Transfer CSS styles between files by comparing existing rules and adding missing styles. The workflow preserves existing content, maps CSS variables to the destination’s names, and checks the appended rules after the update.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Moving styles between projects
• Reusing component styles while preserving existing rules
• Matching CSS variables to the destination

Compare a file’s current content with its intended replacement before writing. Skip matching files to avoid unnecessary rebuilds and timestamp changes, with guidance on readable diffs, line endings, encoding, and exact content requirements.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Replacing configuration files only when content changes
• Avoiding rebuilds caused by unchanged generated files
• Reviewing differences before replacing a whole file

Run TypeScript checks without generating output files, with a fallback when the usual commands fail. The workflow records existing errors, filters diagnostics to changed files, and repeats checks after fixes to assess the modified code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Check TypeScript files after editing
• Retry checks when npx or the local binary fails
• Separate existing errors from changed-file diagnostics