skills.rest
threadedstack
threadedstackOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tdsk-components

Documents the shared React component library @tdsk/components including components, hooks, and theming.

Updated Jan 4, 2026
Search Tags:#theming#react#components#hooks#mui#monaco#shared-library
One-click install
npx skills add https://github.com/threadedstack/threadedstack --skill tdsk-components-threadedstack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tdsk-components
Source: https://github.com/threadedstack/threadedstack/tree/main/.claude/skills/tdsk-components
Command: npx skills add https://github.com/threadedstack/threadedstack --skill tdsk-components-threadedstack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers working on the Admin and Threads SPAs need accurate knowledge of the shared @tdsk/components library—its 40 components, 41 hooks, theming system, and barrel export quirks—to avoid import errors and duplicated work. ## Core Features & Use Cases - Component & Hook Reference: Catalogs all MUI-based components (Inputs, Dialogs, Drawer, Monaco, Icons) and hooks organized by category (dom, data, api, theme, permissions). - Barrel Export Gotchas: Documents which items are NOT re-exported from index barrels (e.g., InfoTip, NamedIcon, useDefsFilters) and must be imported by direct path. - Theming & Patterns: Explains makeTheme('dark'/'light'), gutter spacing helpers, HOCs like TooltipHoc, and the CacheProvider context. - Use Case: When building a new settings drawer in the Admin SPA, consult this Skill to find the right Drawer and DrawerActions components, correct import paths, and theming conventions. ## Quick Start Ask which component and import path to use for adding a confirmation dialog with delete action in the Threads SPA.

Frequently Asked Questions about tdsk-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I import components from @tdsk/components correctly?▼

Most components import from the main barrel, but some are not re-exported and need direct paths. InfoTip, NotificationCount, NamedIcon, useDefsFilters, useForceUpdate, useMergedRef, useMonacoActions, AutoInput, SelectInputValue, and CardActions must be imported from their own directories.

What components are available in the @tdsk/components library?▼

The library provides about 40 MUI-based components across categories: Inputs, Buttons, Dialogs, Drawer, Monaco editor, Icons, Layout (Accordion, Card, Tabs, Menu), Selectors, Auth (FeatureGate, Login, Permissions), and chat/artifact rendering components.

How do I set up dark and light themes with this component library?▼

Call makeTheme('dark') or makeTheme('light') to create MUI theme instances, optionally passing breakpoints. Hooks like useTheme, useColor, useIsDarkMode, and useJoinSx help consume the theme inside components.

Does @tdsk/components support the Monaco code editor?▼

Yes, it includes Monaco, MonacoActions, and LangSelect components plus the useMonaco hook, built on @monaco-editor/react. Note that useMonacoActions is not in the monaco hooks barrel and needs a direct import.

Why is my import from @tdsk/components undefined?▼

The item is likely missing from its parent index.ts barrel. Known cases include NamedIcon, useDefsFilters, useForceUpdate, useMergedRef, AutoInput, SelectInputValue, and CardActions—import these by direct path instead.

How is the @tdsk/components library built and tested?▼

It builds with tsup producing CJS (dist/index.js), ESM (dist/esm/index.js), and type definitions (dist/index.d.ts). Tests run with Vitest, @testing-library/react, and jsdom.

Related Skills

Explore More Software Engineering Skills→
christopher-busschristopher-buss
6

pnpm

Centralizes Node.js package storage to speed up multi-package project installs and save disk space via a shared addressable cache and strict dependency resolution.

Community
Advanced
spuneiarturspuneiartur
1

api-hook-wiring

Wire frontend components to backend APIs using Axios and React Query hooks.

Community
Advanced
blueprintuiblueprintui
335

testing-visual

Automate visual regression testing for UI components across themes and states.

Official
Intermediate
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate