'components' 검색 결과

Find reusable UI components in Storybook, create or update stories that show their states, run story tests, and publish a curated review so others can inspect the results of UI changes.

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

• Find existing components to reuse in UI changes
• Update stories alongside component changes
• Run story tests

Build web pages and interface components with a clear visual direction and working code. Shape typography, colors, layouts, and animation around the intended audience and purpose, with support for HTML/CSS/JS, React, and Vue implementations.

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

• Build a landing page with a clear visual identity
• Refine a dashboard’s layout and typography
• Create React components with coordinated colors and motion

Integrate GSAP animations into React and Next.js components using useGSAP, element references, and scoped selectors. The skill guides dependency updates, event callbacks, and cleanup when components unmount, while keeping animation code out of server rendering.

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

• Adding GSAP animations to React components
• Restricting animations to elements within one component
• Cleaning up animations when components unmount

Refactor React components with too many true-or-false options into reusable parts. Provides guidance on component composition, shared state, and flexible interfaces, with examples of good and problematic implementations and specific guidance for React 19.

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

• Refactoring components with too many boolean options
• Designing reusable component libraries
• Reviewing shared state and component architecture

Design reusable interface components in React, Vue, and Svelte. Organize how components fit together, define clear configuration options, and choose styling approaches while addressing accessibility, responsive layouts, and maintenance across component libraries or design systems.

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

• Build a reusable UI component library
• Standardize component options across a design system
• Refactor complex existing components

Turns Figma screens and components into code that follows an existing project’s conventions. Uses design specifications, screenshots, and assets to guide implementation, reuse existing components, and check the finished interface against the design.

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

• Implement a button from a Figma design link
• Build a dashboard from Figma frames
• Adapt a design to existing project components

Refactor React components into reusable pieces with clearer interfaces. Provides patterns for replacing excessive boolean settings, sharing state through providers, and designing component libraries, with additional guidance for React 19 APIs.

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

• Refactor components with too many boolean settings
• Design a reusable component library
• Review shared state and provider structure

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 and update Mastra application interfaces using existing components from @mastra/playground-ui. Follow shared visual styles, arrange layouts with Tailwind utilities, and connect themes and stylesheets while avoiding duplicated components or unsupported appearance overrides.

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

• Building a new Mastra application screen
• Adjusting layouts with existing components
• Connecting shared themes and stylesheets

Inspect and edit Figma files through JavaScript using the Plugin API. Create shapes, text, reusable components, and design variables, then check structure and screenshots as changes are made in small steps.

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

• Inspect pages and existing components in a Figma file
• Create reusable components and variants
• Create and bind color or spacing variables

Build or update Figma screens from code or descriptions using an existing design system, a shared set of components and visual rules. Assemble sections with reusable components, colors, spacing, and styles, then check their appearance.

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

• Recreate an application page in Figma
• Build a landing page with shared components
• Update a Figma screen to match code

Turn JSON layout definitions into SVG or PNG images with Satori. Use this skill to create social sharing previews and cards, assemble standard layout and text components, or define custom components for image specifications.

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

• Creating social sharing preview images from JSON
• Building social cards with standard components
• Rendering AI-generated JSON image definitions

Integrate GSAP animations into React and Next.js components using useGSAP, element references, and scoped selectors. The skill guides dependency updates, event callbacks, and cleanup when components unmount, while keeping animation code out of server rendering.

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

• Adding GSAP animations to React components
• Restricting animations to elements within one component
• Cleaning up animations when components unmount

Build Vue 3 components and reusable logic, manage shared application data with Pinia, and configure Nuxt 3 projects. Supports mobile apps, offline web features, TypeScript checks, component tests, and Vite build optimization.

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

• Build Vue 3 components and reusable logic
• Manage shared application data with Pinia
• Configure Nuxt 3 server rendering and static generation

Check pinned Convex components against recommended versions, then upgrade them individually with user approval. Each update includes migration steps, type checking, and a build check, with rollback if validation fails.

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

• Checking Convex components for outdated versions
• Reviewing migration details before approving an update
• Upgrading components with build checks and rollback

Use SwiftUI interface components and appearance settings in an Expo SDK 55 app. The skill guides package installation, wrapping SwiftUI content in Host, and embedding React Native components within a SwiftUI layout.

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

• Add SwiftUI interface components to an Expo app
• Embed React Native components in a SwiftUI layout
• Check component and modifier APIs for SDK 55

Integrate charts and architecture diagrams into React or Next.js apps. Plan which parts run in the browser, separate rendering from application state, and address loading performance, mobile layouts, accessibility, and shareable views.

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

• Integrating D3 charts into React components
• Choosing browser or server rendering in Next.js
• Sharing chart filters and selections through URLs

Organize existing code components into business areas to prepare for service separation. Produce domain maps, component assignment tables, and refactoring plans that align namespaces, the naming structure used to organize code, with business responsibilities.

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

• Grouping existing components by business responsibility
• Planning service extraction from an existing application
• Aligning code namespaces with business areas

Turn Figma screens and components into code that follows an existing project's conventions. Retrieve design details, screenshots, and assets through Figma MCP, an agent connection, then reuse existing components and check the implementation against the design.

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

• Implement a button from a Figma design
• Build a dashboard layout from Figma
• Extend existing components to match a design

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 screens, forms, and lists with shared UI components and design tokens, named values for spacing, colors, and typography. Provides patterns for consistent layouts, button variants, validation messages, and reusable component properties.

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

• Building screens with shared UI components
• Replacing fixed colors and spacing with design tokens
• Creating consistent forms and list layouts

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

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

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