How Custom Opencode Skills Boosted My Coding Productivity

I was developing a web application using React, Tailwind CSS, and many libraries, such shadcn/ui, axios, React Query, etc.

I was using Opencode with models like Qwen and DeepSeek for programming. But I ran into a lot of problems, for example, the AI would repeat components that already existed. It also created variables that were supposed to be constants and duplicated them in several files. In general, the code quality wasn't very good.

In the long run, this creates maintenance issues, slows down development, and can also affect security. That's why I decided to start using skills. I started with the most famous, such vercel-react-best-practices and frontend-design. I also used Midudev's autoskills library, which identifies the best skills for our project and installs them.

That helped a bit with results, but the change that had the biggest impact on my productivity was creating my own skills, tailored specifically to my project. For example, I made a skill that explains the architecture I follow, based on Feature Sliced Design. In it, I defined how to organize the folder structure, the tech stack used, examples for creating components, how to use hooks, how to use React Query for server requests, and a lot of other project specific details.

Then I created another skill focused on testing with Vitest. It includes a detailed checklist of what to check, which files to test, and how to structure the tests.

Finally, I made two more skills. The first one makes the AI model check whether a component already exists before creating a new one, so we avoid duplicate files and components. The second one is about building reusable, highly configurable components using props. For example, I built a DataTable component that can render data as a table. It takes a bunch of optional props that let you extend its functionality depending on the use case, like running a function when you click a row, or passing in a list of actions that show up in a popover, like edit, delete, or view details for an item. All of that behavior changes dynamically based on the props you pass in.

All of this works together thanks to the skills. When I want to build a new feature, I first use the architecture skill to follow the project's structure and defined tech stack. Then I combine it with the reusable-component skill and the one for building reusable components. This workflow has really boosted my productivity, code quality, component reuse, and how easy it is to write and maintain automated tests.