Back to tags
Tag

Agent Skills with tag: component-composition

35 skills match this tag. Use tags to discover related Agent Skills and explore similar workflows.

symfony:twig-components

Build reusable UI components with Symfony UX Twig Components and Live Components for reactive interfaces

phpsymfonytwiglive-components
MakFly
MakFly
304

reka-ui

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.

vueui-componentscomponent-compositionaccessibility
onmax
onmax
351

document-writer

Use when writing blog posts or documentation markdown files - provides writing style guide (active voice, present tense), content structure patterns, and MDC component usage. Overrides brevity rules for proper grammar. Use nuxt-content for MDC syntax, nuxt-ui for component props.

markdowndocument-templatesstyle-guidecomponent-composition
onmax
onmax
351

castella-core

Build desktop, web, or terminal UIs with Castella. Create widgets, components, layouts, manage reactive state, handle events, and use the theme system.

ui-componentscomponent-compositionreactive-stateevent-driven
i2y
i2y
321

react-patterns

Comprehensive React 19 patterns expert covering Server Components, Actions, use() hook, useOptimistic, useFormStatus, useFormState, React Compiler, concurrent features, Suspense, and modern TypeScript development. Proactively use for any React development, component architecture, state management, performance optimization, or when implementing React 19's latest features.

reacttypescriptcomponent-compositionstate-management
giuseppe-trisciuoglio
giuseppe-trisciuoglio
472

product-design

Automates design review, token extraction, component mapping, and implementation planning. Reduces design handoff from 6-10 hours to 5 minutes via direct Figma MCP integration. Auto-invoke when user mentions design review, Figma mockup, or design handoff.

figma-integrationdesign-tokensdesign-systemscomponent-composition
alekspetrov
alekspetrov
504

frontend-component

Create React/Vue component with TypeScript, tests, and styles. Auto-invoke when user says "create component", "add component", "new component", or "build component".

reactvuetypescriptui-components
alekspetrov
alekspetrov
504

code-connect-components

Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. Requires Figma MCP server connection.

figmacomponent-compositiondesign-systemstool-integration
figma
figma
12911

ui

Generates UI components and feedback forms. Use when user mentions コンポーネント, component, UI, ヒーロー, hero, フォーム, form, フィードバック, feedback, 問い合わせ. Do NOT load for: 認証機能, バックエンド実装, データベース操作, ビジネスロジック.

component-compositionfeedbackform-filling
Chachamaru127
Chachamaru127
1036

react-patterns

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

reactreact-hookscomponent-compositiondesign-patterns
xenitV1
xenitV1
10917

shadcn-management

|

shadcn-uicomponent-compositionreacttypescript
julianromli
julianromli
12918

TanStack Table

|

reacttypescripttanstack-tablecomponent-composition
jezweb
jezweb
13119

artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

claude-skillsreacttailwind-cssshadcn-ui
skillcreatorai
skillcreatorai
41431

design-documentation

Transform approved requirements into comprehensive technical designs. Define system architecture, component interactions, data models, and interfaces to create a blueprint for implementation.

software-architecturecomponent-compositiondata-modelingAPI-design
Kiro Team
Kiro Team
457140

reflex

Build and debug Reflex (rx) UIs in this repo. Use for editing ui/*.py, choosing rx components, fixing Var/conditional/foreach issues, and applying responsive/layout patterns from the Reflex docs.

pythonui-componentscomponent-compositionreflex
QuixiAI
QuixiAI
50964

swiftui-ui-patterns

Best practices and example-driven guidance for building SwiftUI views and components. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens, or needing component-specific patterns and examples.

swiftuiui-componentscomponent-compositiondesign-patterns
Dimillian
Dimillian
1,00258

svelte

Svelte 5 patterns including TanStack Query mutations, shadcn-svelte components, and component composition. Use when writing Svelte components, using TanStack Query, or working with shadcn-svelte UI.

sveltetanstack-queryshadcn-sveltecomponent-composition
EpicenterHQ
EpicenterHQ
3,858254

Page 2 of 2 · 35 results