2.3K skills · sorted by relevance
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
Inspect React Native components, their input values and internal state, and measure rendering performance for a specific interaction. Use the findings to investigate slow components, repeated rendering, and the causes behind a component rendering again.
Build and style React Native components using Tailwind CSS v4 classes with Uniwind. The reference covers project setup, component-specific styling properties, theme configuration, and ways to apply classes to third-party components while avoiding common implementation mistakes.
Turn Figma screens and components into code that follows an existing project's conventions. The workflow retrieves design details and assets, reuses existing components, and checks the resulting interface against Figma screenshots.
Build modern React Native components using function components and composition. Use when building or refactoring React Native function components and composable UI.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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).
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.