npx skills add smithery/Higashi-Kota --skill ui-component
sickn33/agentic-awesome-skills
ui-component
Generate a new UI component following the StyleSeed design conventions
Installation
$
npx skills add sickn33/agentic-awesome-skills --skill ui-component
Similar popular skills
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
agent-browser
Shared topics
vercel-labs/agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…
810.4K installs
vercel-react-best-practices
Shared topics
vercel-labs/agent-skills
697.8K installs
web-design-guidelines
Shared topics
vercel-labs/agent-skills
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…
617.3K installs
microsoft-foundry
Shared topics
microsoft/azure-skills
Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …
576.5K installs
azure-hosted-copilot-sdk
Shared topics
microsoft/azure-skills
440.4K installs
azure-enterprise-infra-planner
Shared topics
microsoft/azure-skills
Architect and provision enterprise Azure infrastructure from workload descriptions. For cloud a…
402.8K installsAlso in this package
Other skills from sickn33/agentic-awesome-skills · top by installs.
npx skills add sickn33/agentic-awesome-skills
More details
Agent compatibility
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Claude Code
Declared
Cursor
Not declared
Codex
Not declared
GitHub Copilot
Not declared
Windsurf
Not declared
Gemini CLI
Not declared
Cline
Not declared
OpenCode
Not declared
Also listed on
Alternate registries and mirrors of this skill.
Repository health
Stars
46.2K
License
LICENSE
Default branch
main
Open issues
0
Status
Active
Skill metadata
Parsed from SKILL.md frontmatter.
LicenseMIT
Declared agents
claude-code
Package contents
Files included with this skill beyond the listing page.
-
skill md
SKILL.md3,249 B -
docs
SUMMARY.md90 B
History
- First seen on skills.sh
- First recorded snapshot · 98 installs
SKILL.md
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
- 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
- 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
- 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)]
- 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)
- 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
- Export the component as a named export (not default)
- Place the file in the appropriate directory:
- Primitive/reusable → src/components/ui/ - Composed pattern → src/components/patterns/
Example
User request:
Generate a new UI component following the StyleSeed design conventions.
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.