개발 스킬

Build dashboard panels in plain TypeScript using a shared Panel class. Examples cover form submission, input validation, error messages, browser storage, and immediate display updates, with a finance tracker demonstrating how the pieces fit together.

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

• Building dashboard panels with a shared structure
• Adding required-field and numeric input checks
• Saving entered data in the browser

Analyze an existing codebase to identify reusable design patterns in components, services, APIs, styling, and refresh scheduling. Produces structured descriptions with representative code, conventions, dependencies, and adaptation notes for reuse or later conversion into skills.

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

• Understanding the structure of a large codebase
• Extracting reusable component and service designs
• Following an existing project's conventions in a new project

Build TypeScript services that fetch API data for display panels. Use a circuit breaker, which pauses calls after repeated failures, alongside caching and default values, while keeping API keys on the server through proxy endpoints.

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

• Separating API calls from display components
• Pausing requests after repeated API failures
• Configuring cached data and default values

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

Add thumbnails, colored badges, and data-driven styling to TypeScript lists, cards, and panels. Coordinate component logic with CSS, include fallbacks for missing data, and check how the updated display handles empty lists and long text.

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

• Adding category or source badges to lists
• Displaying thumbnails with placeholders for missing images
• Changing colors and styles based on item data

Add a complete dashboard panel in plain TypeScript, from server routes and data services to the visible component and registration. The workflow checks existing routing patterns and includes request failure handling, caching, and saved panel state.

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

• Adding a dashboard panel across server and browser code
• Connecting routes to Express or http.createServer
• Adding caching and cooldowns after repeated failures

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

Build TypeScript data services that separate API calls from display components. Add caching and a circuit breaker, which pauses calls after repeated failures, while keeping user-triggered requests able to report errors directly.

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

• Building data services for automatically refreshed panels
• Pausing repeated calls to a failing API
• Separating generation errors from background refresh handling

Transfer CSS rules between files by checking existing styles, adapting CSS variables, and appending changes. The workflow verifies each added selector with grep, a text-search command, to identify missing selectors that line counts or end-of-file checks may overlook.

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

• Moving CSS rules between projects
• Adding component styles while preserving existing rules
• Adapting styles to different CSS variable names

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 and sidebars in plain TypeScript. Provides patterns for panels that fetch data on a timer and sidebars updated by external callers, including retries, saved display settings, and styles inserted only once.

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

• Build dashboard panels that refresh on a timer
• Create sidebars updated with externally supplied data
• Save and restore panel size and collapsed state

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

Set up a personal monitoring dashboard with Vite and TypeScript. The skill provides a folder layout, dependency and build settings, and a page entry point for organizing stock and news panels, data services, and shared utilities.

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

• Start a personal stock and news dashboard
• Organize panels separately from data-fetching code
• Prepare TypeScript and Vite configuration files

Build TypeScript summary panels that combine data already fetched by other panels. Accept partial updates, wait for required fields before rendering, and update displayed metrics without additional network requests, using reusable base classes and a coordinator.

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

• Combine email and stock metrics in one summary panel
• Wait for required data before showing a summary
• Update metrics using data fetched by other panels

Build dashboard panels in vanilla TypeScript with shared loading and error displays, saved panel state, and request handling. Examples show retries with increasing delays and CircuitBreaker integration to pause repeated failures and reuse cached results.

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

• Building dashboard panels in vanilla TypeScript
• Adding caching and cooldowns to existing service calls
• Retrying requests with increasing delays

Build dashboard panels with patterns for handling failed API requests. TypeScript examples cover retries, cached data, temporary pauses after repeated failures, loading and error displays, and saving panel size and expansion state in the browser.

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

• Building dashboard panels that handle API failures
• Adding loading, error, and retry displays
• Preserving panel size and expansion state

Build dashboard panels in plain TypeScript with saved sizes and expanded or collapsed states. The pattern includes data fetching retries with increasing delays, loading indicators, error messages, and a shared base class for consistent panel behavior.

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

• Restoring panel sizes and expanded or collapsed states
• Adding automatic retries when data fetching fails
• Standardizing loading and error displays across panels

Build dashboard panels in plain TypeScript with automatic retries, saved panel settings, and clear error states. Keep panel-specific helper functions in the same file to make each component easier to understand and maintain.

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

• Build a panel that retries failed data requests
• Save panel dimensions and expanded or collapsed state
• Keep time and status formatting helpers beside panel code

Turn existing source code into reusable learning materials. This skill identifies architectural patterns and implementation techniques, then organizes them into a SKILL.md with structured metadata, explanatory code templates, practical examples, and validation steps.

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

• Create teaching materials from reference code
• Document reusable implementation patterns
• Prepare code templates with usage examples

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

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

List and count folders in a specified path using list_dir results. Distinguishes directories from files, handles hidden and system entries, and presents an alphabetically sorted inventory with the path and total count.

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

• Check the folders that make up a project
• Create an inventory of skill or module directories
• Explore the directory layout of a repository

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

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