'components' 검색 결과

Build Vue 3 components with TypeScript and Composition API, a way to organize component logic. Define inputs, events, and two-way bindings, manage reactive data, and use built-in components for transitions and state preservation.

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

• Build Vue components with TypeScript
• Define component inputs, events, and two-way bindings
• Update displays and react to data changes

Add datasets, models, and other components to machine learning projects using consistent registration and creation patterns. The skill guides file placement, configuration, and automatic module loading so new components fit the project's established architecture.

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

• Adding a registered Dataset class
• Creating a model driven by configuration
• Wiring registration and creation logic in a new module

Build web pages, application interfaces, and components with a clear visual direction suited to their purpose and audience. It turns design choices about typography, color, layout, and motion into working frontend code with consistent visual details.

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

• Building a landing page with a clear visual direction
• Designing and implementing a dashboard
• Creating styled React components

Convert an older Blazor Server app into a .NET 8+ Blazor Web App while preserving interactive server behavior. It guides changes to page structure, startup configuration, authentication state sharing, and validation of the converted app.

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

• Converting a .NET 6 or .NET 7 Blazor Server app
• Moving the host page into App.razor
• Updating authentication state sharing

Generate ASP.NET Core pages, components, or API endpoints for creating, reading, updating, and deleting database records. Follow the project's existing styling and code conventions, with database migrations and verification of the generated functionality.

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

• Add database-backed record management pages
• Generate Minimal API endpoints for a model
• Create Blazor forms that match existing styling

Build working web pages, application interfaces, and components with a clear visual direction. Shape typography, color, layout, and animation around the intended audience and purpose, producing coordinated design and code in HTML, CSS, JavaScript, React, or Vue.

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

• Building a landing page with a clear visual style
• Designing and implementing a dashboard
• Refining typography, colors, and spacing in an existing interface

Build working web pages, components, and application interfaces around a clear visual direction. Shape typography, color, spacing, and animation to suit the audience and purpose, producing cohesive designs instead of repetitive, generic layouts.

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

• Creating a landing page with a distinct visual direction
• Designing and building a dashboard
• Styling React components consistently

Build modern React Native components using function components and composition. Use when building or refactoring React Native function components and composable UI.

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

Build standalone Angular components with Signals inputs, OnPush change detection, Control Flow, and Smart/Dumb patterns. Use when building standalone Angular components, implementing @if/@for control flow, applying OnPush change detection, or implementing Signals in Angular components.

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

Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills. Use when theming components, implementing light/dark mode, creating brand styles, customizing visual design, ensuring design consistency, or supporting RTL languages.

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

Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.

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

Guides conversion of a pre-.NET 8 Blazor Server app into a .NET 8+ Blazor Web App. USE FOR: migrating apps that use AddServerSideBlazor and MapBlazorHub to the AddRazorComponents/MapRazorComponents model, converting _Host.cshtml to an App.razor root component, replacing blazor.server.js with blazor.web.js, migrating CascadingAuthenticationState to a service, adopting new Blazor Web App features like enhanced navigation and streaming rendering. DO NOT USE FOR: apps that are already Blazor Web Apps (already use AddRazorComponents and MapRazorComponents), Blazor WebAssembly or hosted Blazor WebAssembly apps (different migration path), apps that should stay on the Blazor Server hosting model without converting, or apps still targeting .NET Framework.

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

Create or review Blazor components (.razor files) with correct architecture. USE FOR: writing new Blazor components that do NOT involve JavaScript interop, implementing parameters and EventCallback, RenderFragment slots, component lifecycle (OnInitializedAsync, OnParametersSet), async patterns, IAsyncDisposable, CancellationToken, CSS isolation, code-behind. DO NOT USE FOR: creating new projects (use create-blazor-project), JavaScript interop or calling browser APIs from Blazor (use use-js-interop), forms and validation (use collect-user-input), prerendering issues (use support-prerendering), HTTP data fetching patterns (use fetch-and-send-data), coordinating state between unrelated components (use coordinate-components).

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

Extract component metadata from a Figma design system and generate production-ready QML controls. Use this skill whenever someone wants to turn Figma components into QML files — whether they say "generate components from Figma", "create QML controls based on a design system", "convert Figma components to QML", "build the component library", "extract button/input/checkbox from Figma", or anything similar. Requires design-tokens.json and QML design system singletons to already exist (from the token extraction skill). Uses Figma MCP to inspect components one at a time and maps variants, states, sizing, and token usage to idiomatic Qt Quick Controls 2 patterns. Trigger this skill at the component generation step of any QML design-system workflow.

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

Build correct cached/dynamic boundaries in the Next.js App Router when Cache Components or PPR are enabled. Use when working with cacheComponents, Partial Prerendering (PPR), 'use cache', cacheLife, cacheTag, updateTag, or revalidateTag, to avoid request-context leaks and enforce proper cache invalidation. Not for the Pages Router or when Cache Components/PPR are off.

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

Build modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.

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

Symfony UX TwigComponent for reusable UI building blocks -- server-rendered components with PHP classes and Twig templates. Use when creating buttons, cards, alerts, badges, navbars, or any reusable UI element with props, blocks/slots, computed properties, or anonymous (template-only) components. Code triggers: AsTwigComponent, #[AsTwigComponent], ExposeInTemplate, PreMount, PostMount, <twig:Alert />, <twig:Button>, component(), computed properties, anonymous component, HTML syntax. Also trigger when the user asks "how to create a reusable component", "how to make a component library", "how to pass props to a component", "how to use slots/blocks in a component", "how to build a design system in Symfony", "what is the HTML syntax for components", "how to create a component without a PHP class". Do NOT trigger for components that re-render dynamically on user input (use live-component), for JS behavior (use stimulus), or for page navigation (use turbo).

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

Use Kanpeki component library in React projects. Activate when user wants to add, use, customize, or compose accessible UI components from Kanpeki (@kanpeki/*). Triggers: shadcn CLI, copy-paste components, Field.Root, composeRenderProps, ~/components/ui/*, React Aria Components + Tailwind CSS 4.1 + CVA. Covers installation, component patterns, forms (React Hook Form, TanStack Form), theming, and dark mode.

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

Test UI components the way users interact with them using Testing Library — query by role, text, and label instead of implementation details. Use when someone asks to "test React components", "Testing Library", "user-centric testing", "test accessibility", "test without implementation details", or "render and query components in tests". Covers React Testing Library, queries, user events, async testing, and accessibility assertions.

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

Convert Stitch HTML and screenshots into modular Vite/React/TypeScript components, or sync existing components to updated Stitch designs, with local architecture and validation checks.

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

Use this skill when styling components, adding shadcn/ui components, or configuring Tailwind v4 design tokens. Trigger words: スタイリング, Tailwind, shadcn, コンポーネント追加, デザイントークン, テーマ, CSS, クラス, ボタン, カード, ダークモード.

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

Build websites and web apps using 21st.dev — the largest marketplace of shadcn/ui-based React Tailwind components with 1400+ components. Use when user mentions "21st.dev", "21st", "ใช้ 21st", "จาก 21st", "build with 21st", "21st component", "21st magic MCP", or references the 21st.dev component registry in any language. Covers building complete sites (landing pages, dashboards, portfolios, e-commerce storefronts, auth pages), browsing and installing individual 21st.dev components into existing projects, and setting up the 21st.dev MCP server. Also trigger when user wants premium UI components specifically from the 21st.dev registry. Do NOT trigger for general web development, standard shadcn/ui, plain Tailwind CSS, React Native, API development, testing, deployment, or any task that doesn't explicitly reference 21st or 21st.dev.

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

Build reusable, composable, and maintainable React/Vue/Angular components following established design patterns like compound components, render props, custom hooks, and HOCs. Use when creating component libraries, implementing component composition, building reusable UI elements, designing prop APIs, managing component state patterns, implementing controlled vs uncontrolled components, creating compound components, using render props or children as functions, building custom hooks, or establishing component architecture standards.

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

Build modern Next.js 13+ applications using App Router architecture with Server Components, Client Components, and advanced routing patterns. Use when implementing server-first rendering, creating nested layouts, building parallel routes, implementing intercepting routes, using React Server Components, optimizing data fetching with server-side async components, implementing streaming with Suspense, managing client-side interactivity boundaries, or leveraging Next.js 13+ app directory features for performant, SEO-friendly React applications.

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