skills.rest
Avihusitton
AvihusittonCOMMUNITY
Explore all skills by this author →
GitHub

ui-component

Generate design-token-driven React UI components with accessibility defaults for StyleSeed Toss projects.

1|Updated May 10, 2026
Search Tags:#accessibility#frontend#react#design-system#ui-components#design-tokens#styleseed
One-click install
npx skills add https://github.com/Avihusitton/gil-therapy --skill ui-component-avihusitton
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-component
Source: https://github.com/Avihusitton/gil-therapy/tree/main/.agents/skills/ui-component
Command: npx skills add https://github.com/Avihusitton/gil-therapy --skill ui-component-avihusitton

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates inconsistent, ad-hoc UI component creation in StyleSeed-based frontend projects, ensuring all components follow standardized design tokens, accessibility rules, and structural conventions without manual guesswork or design system drift.

Core Features & Use Cases

  • StyleSeed Convention Alignment: Generates components that strictly follow Toss seed design language, including semantic tokens, predictable typing, and reusable variants.
  • Built-in Accessibility Defaults: Automatically includes 44x44px touch targets, visible keyboard focus, and reduced-motion support to meet accessibility standards out of the box.
  • Use Case: When building a new button or card component for a StyleSeed project, use this Skill to generate code that matches existing project conventions instead of writing custom markup that diverges from the design system.

Quick Start

Use the ui-component skill to generate a new accessible button component for your StyleSeed project that uses semantic design tokens and supports primary, secondary, and disabled variants.

Frequently Asked Questions about ui-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate React UI components that follow design system conventions?▼

Generate React UI components that follow design system conventions by using design-token-driven code generation to produce standardized markup with semantic tokens, typed variants, and className passthrough. This eliminates inconsistent ad-hoc styling and prevents design system drift in frontend projects.

What is design-token-driven UI component generation and how does it work?▼

Design-token-driven UI component generation applies predefined spacing, typography, and interaction patterns to output reusable, typed React components. It automatically maps semantic tokens to structural conventions, ensuring consistent visual language and accessibility compliance across generated UI primitives.

Can I build accessible frontend UI components with built-in keyboard and focus support?▼

Build accessible frontend UI components with built-in keyboard and focus support by generating code that automatically includes 44x44px touch targets, visible keyboard focus states, and reduced-motion support. These accessibility defaults meet compliance standards out of the box without manual configuration.

Does the generated React component code support variants and data-slot identification?▼

Generated React component code supports variants and data-slot identification by producing reusable, typed components with predictable variant typing and data-slot attributes for structural targeting. This enables consistent variant application and reliable component composition across frontend workflows.

What's the best way to eliminate inconsistent ad-hoc markup and styling in frontend projects?▼

Eliminate inconsistent ad-hoc markup and styling in frontend projects by generating standardized UI component code that aligns with existing design system conventions. This approach enforces semantic token usage, structural predictability, and accessibility compliance instead of relying on manual guesswork.

When should I not use automated UI component generation for frontend development?▼

Avoid automated UI component generation when your frontend project does not use the StyleSeed Toss design language or when components require highly custom interaction patterns outside predefined spacing and typography tokens. It is designed for standard UI primitives and composed components within that specific design system.

Related Skills

Explore More Design & Creative Skills→
KRISHNA0RKRISHNA0R
25

ui-component

Generate UI components with StyleSeed Toss semantic tokens and accessible defaults.

Community
Intermediate
hopeoverturehopeoverture
6

form-generator-rhf-zod

Generate React forms with React Hook Form, Zod validation, and shadcn/ui controls.

Community
Advanced
Bbeierle12Bbeierle12
8

form-accessibility

Implement WCAG 2.2 AA form accessibility patterns in React/TypeScript projects.

Community
Basic
anonymouswhite07anonymouswhite07

ui-component

Generate StyleSeed Toss UI components with token-driven props and accessibility defaults.

Community
Intermediate