agentsclimarketplace

Ui component

Skill sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/ui-component

AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 1,987+ agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.

Install
npx -y skills add sickn33/agentic-awesome-skills --skill ui-component

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Generate a new UI component following the StyleSeed design conventions

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.1 KB, as published. Nobody here has run it

UI Component Generator

When to Use

Use this skill when you need generate a new UI component following the StyleSeed design conventions.

When NOT to use

  • For full-page scaffolding → use /ss-page
  • For composed multi-component patterns → use /ss-pattern
  • For tweaking an existing component — just edit the file directly
  • For non-StyleSeed projects (no components/ui/ directory or no Tailwind v4)

Generate a new component: $0 Description: $ARGUMENTS

Instructions

  1. First, read the design system seed for context:

    • Read CLAUDE.md for component conventions
    • Read css/theme.css for available design tokens
    • Read components/ui/button.tsx as a reference pattern

  2. Follow these conventions strictly:

    • Use function declaration (not const)
    • Add data-slot="component-name" attribute
    • Use cn() from @/components/ui/utils for all className merging
    • Use React.ComponentProps<> for prop typing
    • Always support className prop for overrides
    • Use CVA (class-variance-authority) if the component has variants
    • Use semantic color tokens (bg-card, text-foreground) — never inline hex

  3. Design token usage:

    • Colors: text-foreground, bg-card, text-brand, text-muted-foreground, border-border
    • Shadows: shadow-[var(--shadow-card)], shadow-[var(--shadow-elevated)]
    • Radius: rounded-md, rounded-lg, rounded-2xl
    • Spacing: multiples of 6px (p-1.5, p-3, p-6)
    • Motion: duration-[var(--duration-fast)], ease-[var(--ease-default)]

  4. Typography rules:

    • Display (36-48px): leading-none tracking-[-0.02em]
    • Heading (18-24px): leading-snug tracking-[-0.01em]
    • Body (14-17px): leading-normal (default tracking)
    • Caption uppercase (10-13px): tracking-[0.05em]
    • Use size-* shorthand instead of w-* h-*
    • Use ms-*/me-* instead of ml-*/mr-* (logical properties)

  5. Accessibility requirements:

    • Minimum touch target: 44x44px (min-h-11 min-w-11)
    • Support aria-* attributes passthrough
    • Use focus-visible:ring-2 focus-visible:ring-ring for keyboard focus
    • Respect prefers-reduced-motion for animations

  6. Export the component as a named export (not default)

  7. Place the file in the appropriate directory:

    • Primitive/reusable → src/components/ui/
    • Composed pattern → src/components/patterns/

Limitations

  • Use this skill only when the task clearly matches its upstream source and local project context.
  • Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
  • Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.