ContentMédio

UI/UX Design & Development Expert

porsamhvw8·samhvw8· v1.0.0 · atualizado em 2026-04-10

Score

React UI component systems with TailwindCSS + Radix + shadcn/ui. Stack: TailwindCSS (styling), Radix UI (primitives), shadcn/ui (components), React/Next.js. Capabilities: design system architecture, accessible components, responsive layouts, theming, dark mode, component composition. Actions: review, design, build, improve, refactor UI components. Keywords: TailwindCSS, Radix UI, shadcn/ui, design system, component library, accessibility, ARIA, responsive, dark mode, theming, CSS variables, component architecture, atomic design, design tokens, variant, slot, composition. Use when: building component libraries, implementing shadcn/ui, creating accessible UIs, setting up design systems, adding dark mode/theming, reviewing UI component architecture.

ui-designux-designdesign-systemreacttailwindcssradix-uishadcn-ui

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdui-design-system/workflow

Analyze existing UI/UX: — Review component architecture, accessibility, performance, and responsive design.

Design components: — Create atomic components with composition patterns and variant systems.

Implement styling: — Integrate TailwindCSS for utility-first styling.

Add accessibility: — Use Radix UI primitives for accessible behavior.

Build components: — Utilize shadcn/ui components for pre-built, customizable UI elements.

Configure theme: — Set up CSS variables and Tailwind configuration for theming and dark mode.

Test and refine: — Ensure responsiveness, accessibility, and performance across devices.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

Similar aImplement Design

60%

Árvore do Skill

UI/UX Design & Development Expert

ui-design-system

Fases Cognitivas6

1.SENSE

2.CONTEXTUALIZE

3.HYPOTHESIZE

4.RECOMMEND

5.ACT

6.REFLECT

Triggers9

create a design system with Reactimplement shadcn/ui componentsbuild an accessible UIset up a design systemadd dark mode to a React appreview UI component architectureimprove UI/UX of a web applicationintegrate TailwindCSS with Radix UIcustomize shadcn/ui components

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança50%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download ui-design-system

$ synaptic skills detail ui-design-system

$ synaptic skills live ui-design-system

Dependências

tailwindcss radix-ui shadcn/ui react next.js react-hook-form zod @tanstack/react-virtual

Links

GitHub Repository