What is this?
A collection of agent skills for Claude Code that help you build better interfaces, covering UI, typography, colors, accessibility, layout and product writing.
A collection of agent skills for Claude Code that help you build better interfaces, covering UI, typography, colors, accessibility, layout and product writing.Is this a code library or something else?It's not a library you import into code — it's a set of markdown skill files that run as a Claude Code plugin, giving the agent domain knowledge about interface design.
It's not a library you import into code — it's a set of markdown skill files that run as a Claude Code plugin, giving the agent domain knowledge about interface design.How do I add these skills to my project?You install the repo as a Claude Code plugin, after which the individual skills (like better-ui, better-typography, interface-review) become available to the agent.
You install the repo as a Claude Code plugin, after which the individual skills (like better-ui, better-typography, interface-review) become available to the agent.Do I need anything besides Claude Code to use these?The README only mentions Claude Code as the install target, so these skills are built specifically to run inside Claude Code with no other dependency listed.
The README only mentions Claude Code as the install target, so these skills are built specifically to run inside Claude Code with no other dependency listed.Do all these skills run automatically, or do some need to be triggered?Most skills like better-ui or better-colors are applied automatically during review, but a few — interface-review, explain-interface, break and variant — are explicitly marked as user-invoked, meaning you have to call them yourself.
Most skills like better-ui or better-colors are applied automatically during review, but a few — interface-review, explain-interface, break and variant — are explicitly marked as user-invoked, meaning you have to call them yourself.What does the better-interface skill do?It combines all of the individual better- skills (UI, typography, colors, accessibility, layout, writing) into a single combined review of your interface.
It combines all of the individual better- skills (UI, typography, colors, accessibility, layout, writing) into a single combined review of your interface.What does the break skill do?It renders a component you pick in every state and scenario on a temporary page and stress-tests it, which is useful for catching edge cases.
It renders a component you pick in every state and scenario on a temporary page and stress-tests it, which is useful for catching edge cases.How is variant different from break?variant builds multiple alternative versions of a component you're working on to help you iterate on design, while break stress-tests one existing component across all its states.
variant builds multiple alternative versions of a component you're working on to help you iterate on design, while break stress-tests one existing component across all its states.Why did the author create this skill collection?The skills package up topics the author regularly writes about on their personal website and in their design-engineering magazine, Interfaces.
The skills package up topics the author regularly writes about on their personal website and in their design-engineering magazine, Interfaces.What are similar projects?evondevKit, ui-ux-pro-max-skill, baoyu-design, material, interface-design, oil-ui, skills, appllama-skills
evondevKit, ui-ux-pro-max-skill, baoyu-design, material, interface-design, oil-ui, skills, appllama-skillsWhich topics is it in?color, layout, ui-design, writing, claude-code-plugin, typography, design-system, claude-code-skill, agent-skill, accessibility, design, ui-components
color, layout, ui-design, writing, claude-code-plugin, typography, design-system, claude-code-skill, agent-skill, accessibility, design, ui-components