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

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

将多个界面设计图批量转换为Vue 3页面与共享组件，合并相关页面状态，映射到Vant等界面库，并生成初步的页面导航代码。

• 将设计图转换为Vue 3组件
• 合并列表和加载中的页面状态
• 将重复界面区域提取为共享组件

围绕用户操作与可见结果，为React组件和钩子编写或修复测试，模拟网络响应并检查无障碍问题，同时判断哪些内容需要在真实浏览器中验证。

• 为React表单和组件补充测试
• 验证自定义钩子与异步更新
• 模拟API成功与失败响应

根据网站或业务界面的用途与用户确定设计方向，调整字体、配色、布局和动效，优先使用现有组件，并检查不同屏幕宽度下的显示效果。

• 改善已有业务界面的外观
• 确定新网站的设计方向
• 改善移动端显示和长标签排版

为React和Next.js界面的实现与审查提供示例，涵盖组件组合、状态管理、数据获取、显示性能、表单验证，以及键盘操作和焦点管理。

• 整理可复用的React组件
• 审查状态管理与数据获取
• 提高长列表的显示速度

协助创建Angular页面组件与服务，设计状态管理、表单和页面导航，并根据项目版本选择实现方式，编写测试、检查构建结果。

• 新建Angular应用
• 实现表单与状态管理
• 设计页面导航与访问控制

Build complex interactive artifacts for claude.ai with React, Tailwind CSS, and shadcn/ui. Start from a configured project, develop interfaces with state management or navigation, and bundle the result into one shareable HTML file.

中文简介正在准备中。当前显示英语简介。

• Building interactive interfaces with multiple components
• Creating artifacts with state management and navigation
• Developing interfaces with shadcn/ui components

使用shadcn/ui和Tailwind CSS实现易于操作的表单、表格及自适应布局，统一配色、间距和深色模式，并兼顾键盘操作与屏幕阅读器。

• 制作支持键盘操作的表单
• 调整手机和电脑上的页面布局
• 统一配色与深色模式

根据代码或文字说明创建、更新Figma界面，使用设计系统的组件，以及颜色、间距等共享视觉设置，将应用页面转换为Figma设计。

• 将应用代码转换为Figma设计
• 根据文字说明创建界面
• 使用共享组件更新界面

帮助在React或Next.js中实现并审查GSAP动画，明确目标元素和组件作用范围，处理依赖变化时的重设与组件卸载时的清理，并避免在服务端渲染时执行。

• 为React界面添加动画
• 处理组件卸载时的动画清理
• 检查动画目标的作用范围

为Apple产品的界面与交互设计提供指引入口，介绍涵盖iOS、macOS等平台的14项技能，帮助查找设计基础、界面组件和操作方式的相关指南。

• 查阅iOS应用设计指南
• 查找macOS界面组件指引
• 了解visionOS交互设计

Set up an existing Storybook installation with a working preview file and stories that display real components. The skill checks prerequisites, then uses Storybook’s setup command and the instructions it provides.

中文简介正在准备中。当前显示英语简介。

• Configuring preview settings in an existing Storybook installation
• Adding stories for real project components
• Checking Storybook version requirements before setup

Set up a working preview file and stories, examples showing real components, in an existing Storybook project. Check the installed version first, then follow the setup instructions produced by Storybook’s command.

中文简介正在准备中。当前显示英语简介。

• Set up a preview file in an existing Storybook project
• Prepare stories for real components
• Check Storybook prerequisites before setup

Analyze Git changes or pull requests against a knowledge graph, a map of code components and relationships. Identify modified files, nearby dependencies, affected architectural layers, and review risks, then save data for a dashboard visualization.

中文简介正在准备中。当前显示英语简介。

• Understanding a pull request before review
• Checking the impact of uncommitted changes
• Reviewing changes across architectural layers

Analyze project code, configuration, and documentation to build a graph for interactive architecture exploration. It maps components and dependencies, supports Japanese descriptions, and can update the analysis based on changes since the previous analyzed commit.

中文简介正在准备中。当前显示英语简介。

• Understand the structure of an unfamiliar project
• Explore dependencies between components
• Generate architecture descriptions in Japanese

Analyze a Figma file and turn its pages, screens, components, instances, and design tokens—shared design values—into an interactive graph. Open the dashboard to explore the file's structure and relationships.

中文简介正在准备中。当前显示英语简介。

• Review the structure of a Figma file
• Explore components, variants, and instances
• Inspect how shared design values are used

Build complex claude.ai artifacts with React, Tailwind CSS, and shadcn/ui. Create interfaces with multiple components, state management for changing data, and routing between views, then package the app into one self-contained HTML file for sharing.

中文简介正在准备中。当前显示英语简介。

• Creating interfaces with multiple components
• Building artifacts with changing data and multiple views
• Sharing a React app as a single HTML file

Review JavaScript error handling in source code and browser behavior. Find unhandled asynchronous failures, improve logs with useful context, and add React Error Boundaries, components that handle rendering errors, so failures are handled explicitly and are easier to investigate.

中文简介正在准备中。当前显示英语简介。

• Reviewing error handling in asynchronous code
• Adding Error Boundaries to React components
• Improving logs for debugging

Bring Figma logos, brand colors, and components into HyperFrames as local assets and editable HTML. Reconstruct animation from storyboard states, with additional motion import options when a compatible connector or native export is available.

中文简介正在准备中。当前显示英语简介。

• Import a Figma logo as a video asset
• Apply brand colors across imported components
• Turn a Figma frame into editable HTML

Improve Remotion Studio rendering performance by limiting which components update with every frame. The skill guides on-demand timeline reads and React.memo usage, helping keep stable components from rerendering unnecessarily while preserving updates where the displayed frame matters.

中文简介正在准备中。当前显示英语简介。

• Reduce unnecessary rerenders on every frame
• Read the current frame only when an event needs it
• Move frame-dependent rendering into a small child component

Guides Avalonia interface layout with Zafiro.Avalonia, using shared styles, reusable components, and purpose-specific containers. Helps reduce repeated XAML, the markup used to define interfaces, and simplify deeply nested layouts.

中文简介正在准备中。当前显示英语简介。

• Simplifying deeply nested screen layouts
• Sharing styles across multiple screens
• Extracting reusable interface components

Create and organize Claude Code plugins with guidance on configuration files, commands, agents, skills, hooks, and MCP servers. Learn where components belong, how automatic loading works, and how to reference files across different installation locations.

中文简介正在准备中。当前显示英语简介。

• Create the directory structure for a new plugin
• Organize commands, agents, skills, and hooks
• Make file references work across installation locations

Modernize existing React applications through version upgrades and migration from class components to Hooks, functions for state and lifecycle behavior. Includes React 18 rendering APIs, grouped state updates, and features for prioritizing interface updates.

中文简介正在准备中。当前显示英语简介。

• Plan an upgrade from React 16 through React 18
• Rewrite class components with Hooks
• Extract shared logic into custom Hooks