'components' 검색 결과

Build OpenBot administration and settings screens with shared layout components. Provides consistent page widths, row structures, control sizes, and dialog layouts, including patterns for switches, editable summaries, and read-only values.

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

• Adding an administration or settings page
• Adding a settings row to an existing screen
• Choosing between a switch and an editing dialog

Sparkle Design の UI コンポーネントを shadcn registry 経由でプロジェクトに追加するスキル。 パッケージマネージャの自動検出、設定バリデーション、コンポーネントインストール、 Storybook 統合、CSS セットアップ、トラブルシューティングをカバーする。 「Sparkle コンポーネントを追加」「sparkle-design のコンポーネントをインストール」 「@sparkle-design のセットアップ」「コンポーネントをどう追加する」 「registry の設定」「components.json の設定」への言及で発動する。 English: "add a sparkle button", "install sparkle-design card", "add @sparkle-design/input", "set up components from sparkle registry", "how do I install components", "registry setup"

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

React 18/19 화면 구성 요소의 구현과 검토를 지원합니다. 상태 관리, 데이터 조회, 폼, 로딩·오류 표시, 서버와 브라우저의 경계, 접근성 설계를 다룹니다.

• React 화면 구성 요소 검토하기
• 공유 상태를 둘 위치 결정하기
• 폼과 데이터 조회 방식 설계하기

Look up a project's existing UI components in Storybook, including their props, or configuration inputs, and usage examples. Use the findings to answer questions and identify components to reuse before building duplicates.

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

• Find existing UI components
• Check component props and usage examples
• Answer questions about component usage

Build Blazor interfaces with Microsoft Fluent UI components. The skill guides library setup, forms, selection controls, dialogs, notifications, and themes, and helps troubleshoot missing interface elements caused by provider configuration or JavaScript integration issues.

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

• Setting up Fluent UI in a Blazor application
• Building forms with selection and autocomplete controls
• Adding dialogs and toast notifications

Develop and modify the Handsontable Angular wrapper with guidance on component lifecycle, settings updates, and NgZone, which controls change detection. It also covers standalone examples, global configuration, and the build and test workflow.

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

• Fix settings updates in the Angular wrapper
• Review change detection around grid operations
• Update examples to standalone components

Build and improve React interfaces with guidance on component structure, hooks, state management, and Server Components. Review unnecessary rendering, extract reusable logic, and implement accessible forms and loading states using established React patterns.

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

• Reviewing component structure and shared state
• Investigating unnecessary rendering
• Extracting reusable custom hooks

Find and inspect UI components in MagicPath, add them to an app, and adapt their behavior and styling. Apply themes or create and edit canvas components from code, including work based on an existing repository interface.

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

• Find UI components and add them to an app
• Apply a MagicPath theme to an interface
• Create or edit a component on the canvas

Build and maintain interfaces with shadcn/ui components, reusable pieces such as forms, cards, and dialogs. Find suitable components, follow project settings, fix composition and styling issues, and review updates while preserving local changes.

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

• Build settings pages and dashboards
• Fix form and dialog composition
• Update components while preserving local changes

Refactor React components that have too many true-or-false settings into reusable, flexible parts. This skill guides component composition, shared state, and API design, with examples and separate guidance for React 19 features.

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

• Refactoring components with many boolean props
• Designing a reusable component library
• Organizing state shared by sibling components

Add Preline UI components and ready-made page sections to HTML files through the Preline MCP server. The skill guides component selection, CSS and script placement, and assembly of pages containing multiple components.

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

• Adding a Preline UI component to an existing HTML file
• Building a page from ready-made sections
• Assembling a dashboard with multiple components

Find repeated interface elements and shared visual values, then turn them into reusable components and design tokens, named values for colors or spacing. Update existing uses and document the additions within the project's design system.

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

• Consolidating repeated buttons and cards
• Turning colors and spacing into shared tokens
• Unifying inconsistent interface components

Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, marketing sites, dashboards, or interactive UIs requiring pre-made animated components instead of hand-crafting animations. Triggers on tasks involving animated UI components, Magic UI, React Bits, shadcn/ui integration, Tailwind CSS components, or component library selection. Alternative to manually implementing animations with Framer Motion or GSAP.

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

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

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

Defines where UI components belong in Operately (TurboUI-first). Use when creating, changing, reviewing, or migrating UI components, adding features that need UI, or deciding whether to refactor legacy app UI in app/assets/js/components or app/assets/js/features. Covers pure TurboUI components, component reuse, the app bridge pattern, and legacy migration scenarios.

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

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.

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

Build or audit Next.js 16 App Router apps using a next-beats-style React Server Components architecture. Use when scaffolding a new app, adding a feature, reviewing an existing app, refactoring route-loader-shaped pages into feature-owned async server components, deciding where queries/actions/components live, keeping pages synchronous with `params.then()`, placing Suspense boundaries, choosing the client/server boundary, designing skeletons, preventing CLS, or following Cache Components Instant Navigation. Also use when the user asks about RSC composition, components receiving IDs instead of route params, `'use cache'`, `cacheTag`, `updateTag`, static-shell prerendering, or making an app easier for AI agents to modify.

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

Build accessible UI components with React Aria Components. Use when developers mention React Aria, react-aria-components, accessible components, or need unstyled accessible primitives. Provides documentation for building custom accessible UI with hooks and components.

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

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.

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

Build accessible UI components with React Aria Components. Use when developers mention React Aria, react-aria-components, accessible components, or need unstyled accessible primitives. Provides documentation for building custom accessible UI with hooks and components.

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

Build accessible UI components with React Aria Components. Use when developers mention React Aria, react-aria-components, accessible components, or need unstyled accessible primitives. Provides documentation for building custom accessible UI with hooks and components.

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

Build and update Paperclip interfaces using shared rules for colors, typography, status indicators, layouts, and interactions. Reuse existing components and keep the component catalog and showcase page aligned with new or changed interface elements.

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

• Add pages that follow Paperclip UI conventions
• Create reusable interface components
• Standardize status colors and priority icons

Builds or updates a Figma design system library from an existing codebase. Helps keep reusable design components aligned with the components already shipped in a product, giving design teams a reference that reflects the implementation.

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

• Creating a Figma library from an existing codebase
• Updating a design library to match shipped components
• Aligning design references with implementation

Look up Ant Design React components in official documentation to find available settings, default values, and usage examples. Check subcomponents and methods, and consult type definitions in the antd package when TypeScript details are needed.

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

• Checking component settings and default values
• Finding usage examples and demo code
• Looking up available subcomponents and methods