Hyvä UI components are ready-made parts like headers, footers, and menus for your Hyvä theme. You can add them quickly without building from scratch. This guide helps you pick a component, see its variants, and copy the files into your theme folder.
You start by checking if the Hyvä UI package is installed. Then you choose a theme or create a new child theme. Next you select a non-CMS component and a variant like Basic or Enhanced. The skill reads the component’s instructions and copies the files, keeping track of what is new or updated.
Anyone working on a Hyvä theme in Magento can use this to speed up their work. The process is step-by-step and clear.
Global
mkdir -p ~/.claude/skills/hyva-ui-componentProject
mkdir -p .claude/skills/hyva-ui-componentSource Repository
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density