「component」の検索結果

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).

日本語の概要は準備中です。原文の説明を表示しています。

visionOS / iOS 空間コンピューティングリファレンス。RealityKit、ARKit、visionOS SwiftUI API。 Entity, ModelEntity, AnchorEntity, Component, RealityView, MeshResource, Material, System, EntityAction, GaussianSplatComponent, ComputeGraphComponent, PhysicsJointsComponent, ForceEffectComponent, ClothBodyComponent, NavigationComponent, NavigationMeshComponent, NavigationController, ImmersiveSpace, ImmersionStyle, Model3D, WindowGroup, VolumetricWindowStyle, ObjectTrackingProvider, RoomTrackingProvider, ARSession, ARWorldTrackingConfiguration, ARKitSession, WorldTrackingProvider, HandTrackingProvider, SceneReconstructionProvider。

Symfony UX LiveComponent for reactive server-rendered UI -- components that re-render via AJAX on user interaction, zero JavaScript required. Use when building live search, real-time filtering, dynamic forms, inline validation, dependent selects, auto-save, polling, deferred/lazy rendering, or any UI that updates itself based on user input. Code triggers: AsLiveComponent, LiveProp, LiveAction, data-model, data-loading, data-live-action-url, ComponentWithFormTrait, LiveListener, emit, defer, lazy, polling. Also trigger when the user asks "how to build a search that filters as I type", "how to validate a form in real-time", "how to make a reactive component in PHP", "how to build dependent selects", "how to defer component rendering", "how to communicate between components via emit", "how to bind a form to a LiveComponent". Do NOT trigger for static reusable UI without reactivity (use twig-component), pure client-side JS behavior (use stimulus), or page-level navigation (use turbo).

日本語の概要は準備中です。原文の説明を表示しています。

Creates complete AEM components with dialog, HTL template, Sling Model, unit tests, and clientlibs. Supports extending Core Components and project components. When a Figma design URL is provided, fetches the design via Figma MCP (get_design_context) and translates it into pixel-perfect HTL, CSS, and JS. Follows Adobe Experience League best practices for AEM Cloud Service and 6.5. Use this skill whenever the user mentions creating, building, generating, or scaffolding an AEM component, or mentions component types like teaser, card, hero, banner, accordion, tabs, carousel, list, navigation, breadcrumb, or any custom AEM component. Also trigger when the user wants to extend a Core Component, create a component dialog, add a Sling Model, or convert a Figma design into an AEM component.

日本語の概要は準備中です。原文の説明を表示しています。

Creates complete AEM components with dialog, HTL template, Sling Model, unit tests, and clientlibs. Supports extending Core Components and project components. When a Figma design URL is provided, fetches the design via Figma MCP (get_design_context) and translates it into pixel-perfect HTL, CSS, and JS. Follows Adobe Experience League best practices for AEM Cloud Service and 6.5. Use this skill whenever the user mentions creating, building, generating, or scaffolding an AEM component, or mentions component types like teaser, card, hero, banner, accordion, tabs, carousel, list, navigation, breadcrumb, or any custom AEM component. Also trigger when the user wants to extend a Core Component, create a component dialog, add a Sling Model, or convert a Figma design into an AEM component.

日本語の概要は準備中です。原文の説明を表示しています。

Build production-ready frontend components with accessible markup, sensible props, defined states, and tested behavior. Use this skill whenever the user wants to build a component from scratch, refactor an existing one, design a component API, or implement a UI element with proper states and accessibility. Triggers on build a component, create a button, create a modal, create a form input, component API, props design, component states, refactor component, accessible component. Also triggers when implementing UI from a design that needs to be reusable.

日本語の概要は準備中です。原文の説明を表示しています。

Decide which plugin component type to use and how to organize components at scale. Covers the component lifecycle (discovery and activation phases), decision framework for choosing between commands, skills, agents, hooks, and MCP servers, and organization patterns for each component type. Use when asking "which component type should I use", "command vs skill vs agent", "when to use a hook vs MCP server", "component lifecycle", "how to organize plugin components", "plugin structure patterns", or "scale a plugin with many components".

日本語の概要は準備中です。原文の説明を表示しています。

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.

日本語の概要は準備中です。原文の説明を表示しています。

Plan complex Blazor UI features by decomposing them into focused components. USE FOR: building a complex Blazor page with multiple sections, planning component decomposition, designing a multi-section dashboard or layout, breaking down a large UI feature into composable components, pages with sidebars and content panels, any page with 3+ distinct visual sections or multiple interacting sub-features, identifying parent-child relationships and data flow. DO NOT USE FOR: creating new Blazor projects or apps from scratch (use create-blazor-project), implementing a single individual component (use author-component), writing component code with parameters and EventCallback (use author-component), or simple single-component pages.

日本語の概要は準備中です。原文の説明を表示しています。

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.

日本語の概要は準備中です。原文の説明を表示しています。

Plan complex Blazor UI features by decomposing them into focused components. USE FOR: building a complex Blazor page with multiple sections, planning component decomposition, designing a multi-section dashboard or layout, breaking down a large UI feature into composable components, pages with sidebars and content panels, any page with 3+ distinct visual sections or multiple interacting sub-features, identifying parent-child relationships and data flow. DO NOT USE FOR: creating new Blazor projects or apps from scratch (use create-blazor-project), implementing a single individual component (use author-component), writing component code with parameters and EventCallback (use author-component), or simple single-component pages.

日本語の概要は準備中です。原文の説明を表示しています。

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.

日本語の概要は準備中です。原文の説明を表示しています。

Research UI component patterns across the component.gallery corpus — 60 canonical component types, ~95 production design systems, 2,600+ examples — plus an AI-era overlay (prompt inputs, tool-call cards, streaming status, citations) and composite patterns (command palette, app shell, agent console). Compare implementations, find alternative component names, ground frontend decisions in real-world precedent. Pairs with minoan-frontend-design for research-then-build workflows. Triggers on component patterns, how do others implement X, design system research, component comparison, AI chat components, agent UI patterns.

日本語の概要は準備中です。原文の説明を表示しています。

Write a component spec for engineering handoff. Use when the user says "component spec", "design handoff", "spec this component", "document this component for engineering", "Figma handoff", "component documentation", "how do I hand this off", or needs to communicate a UI component design to developers - even if they don't explicitly say "component spec".

日本語の概要は準備中です。原文の説明を表示しています。

Create or edit the Universal Editor component configuration (component-definition.json, component-models.json, component-filters.json) for AEM Edge Delivery Services blocks. Use this skill whenever the user mentions component models, component definitions, component filters, block configuration for the Universal Editor, UE block setup, adding a new block to UE, configuring block properties, block authoring fields, or any task involving the three JSON config files that control how blocks appear in the Universal Editor. Also trigger when the user wants to create a new EDS/Franklin block with UE support, modify block fields, add a block to the section filter, or asks about how blocks connect to the Universal Editor.

日本語の概要は準備中です。原文の説明を表示しています。

Create or edit the Universal Editor component configuration (component-definition.json, component-models.json, component-filters.json) for AEM Edge Delivery Services blocks. Use this skill whenever the user mentions component models, component definitions, component filters, block configuration for the Universal Editor, UE block setup, adding a new block to UE, configuring block properties, block authoring fields, or any task involving the three JSON config files that control how blocks appear in the Universal Editor. Also trigger when the user wants to create a new EDS/Franklin block with UE support, modify block fields, add a block to the section filter, or asks about how blocks connect to the Universal Editor.

日本語の概要は準備中です。原文の説明を表示しています。

Symfony UX frontend stack -- decision tree and orchestrator for choosing between Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons, and UX Map. Use when the user is unsure which tool fits, wants to combine multiple UX packages, or asks a general frontend architecture question in Symfony. Also trigger when the user asks "which UX package should I use", "how to make this interactive", "should I use Stimulus or LiveComponent", "how to structure my Symfony frontend", "what is the difference between Turbo and LiveComponent", "should this be a Frame or a LiveComponent", "how do these UX packages work together", "what is the Symfony way to do frontend". Do NOT trigger when the user clearly names a specific tool (stimulus, turbo, twig-component, live-component, ux-icons, ux-map) -- defer to the specialized skill instead.

日本語の概要は準備中です。原文の説明を表示しています。

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の画面部品をレビューしたいとき
• 共有する状態の置き場所を決めたいとき
• フォームとデータ取得の設計

Reactの画面部品やフックを、利用者の操作と表示結果に沿ってテストします。通信の模擬やアクセシビリティ確認、実ブラウザーで検証する範囲の判断も支援します。

• Reactのフォームや部品のテスト追加
• 独自フックと非同期更新の検証
• APIの成功・失敗応答を模擬したいとき

Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

日本語の概要は準備中です。原文の説明を表示しています。

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).

日本語の概要は準備中です。原文の説明を表示しています。

Modify a specific Component on a GameObject in opened Prefab or in a Scene. Allows direct modification of component fields and properties without wrapping in GameObject structure. Use 'gameobject-component-get' first to inspect the component structure before modifying. Three modification surfaces are available (componentDiff, pathPatches, jsonPatch) — see the skill body for details.

日本語の概要は準備中です。原文の説明を表示しています。