I've been thinking a lot lately about how I can make my knowledge and craft more valuable in the times we live in. I've been building UI libraries for the past 10 years, and I've been on a quest to perfect the components that I build. I want to share my knowledge with you. Like most of you, probably, I've been using a lot of AI in my craft, and I feel most of the time the code is just good enough, but never at the level of quality that I strive for or that I would reach if I wrote it by hand. That needs to change, and I want it to change for everyone else, too. That's how the Open Components initiative was born.
Each component gets a single page that walks through four directions: User Interface, User Experience, Developer Experience, and Agentic Experience, and ends with a checklist. Every rule in it has an ID like `button/keep-focus`, a level and a way to check it, so you or your agents can cite it in a code review. Every page is also published as markdown, and provides the contract as a YAML file, containing every rule in about an eighth of the page’s length.
It’s still early. Right now there are only the Button and Input components and a page on how to name your design tokens. Each component comes with a reference implementation that meets every rule, along with its tests. Reference implementation is in Vue for now, since that’s my daily driver, but the documentation comes with code examples from multiple UI frameworks. More components will follow, with the same structure.
It isn’t a component library, so there’s nothing to install. It’s a set of rules you can hold your own components to, whichever library or framework you use.
I’d love your feedback and contribution. Tell me what you think of the rules, what I’ve missed, and which component you’d like to see next.
Thanks for reading!
Site: https://opencomponents.dev Button: https://opencomponents.dev/docs/components/button GitHub: https://github.com/uxfront-com/open-components