modeskill [github]

modeskill is a local-first Skill that helps Coding Agents keep UI and interaction patterns consistent across multiple projects.

While building several projects under Modelab, I ran into a recurring problem:
when one person maintains multiple VibeCoding projects, they may start with a similar look and feel, but over time their typography, colors, buttons, forms, modals, spacing, error states, and page structures gradually drift apart.

The traditional solution would be to create a fixed design system or copy the same CSS template into every project.
But that does not fully fit my workflow. Each project has a different purpose, technical structure, and level of maturity. I do not want every project to be forced into the exact same template.

That is why I built modeskill.

The core idea of modeskill is not to provide a fixed UI kit.
Instead, it provides a consistency method for Coding Agents.

A user can define a local workspace, choose which projects should be treated as references, and select which project is the current target. Based on real code and style evidence from those projects, modeskill helps the agent decide which rules should be inherited, which should be adapted, which are project-specific, which are still unresolved, and which older patterns should not be carried forward.

For example, I can set easy as the primary reference project, use trans or another project as a secondary reference, and then set a new project as the target. When I ask Codex or another Coding Agent to use modeskill, the agent is not simply copying styles from one project to another. It first analyzes the actual UI patterns shared across the projects, then gives more grounded and safer recommendations.

The current version focuses on typography hierarchy, color semantics, spacing, components, forms, modal behavior, responsive behavior, and engineering conventions. The analysis result is classified into several types: inherited rules, adapted rules, project-specific decisions, unresolved areas, and deprecated patterns.

modeskill also includes a local settings page. Users can open a local browser interface, configure their workspace, choose primary and secondary reference projects, and select the target project. This page only runs on the user’s own machine. It is not a hosted web app, and it does not upload local project paths or private configuration.

Because AI coding tools can easily make unintended changes, modeskill puts strong emphasis on safety boundaries. In v0.1, reference projects are always read-only, target projects are read-only by default, local configuration does not automatically become write permission, and private .local files are excluded from GitHub. It is designed as an analysis and decision framework, not as a black-box tool that automatically rewrites real projects.

At the current v0.1 stage, modeskill can configure a workspace, discover multiple projects, assign project roles, provide a UI consistency methodology, save local configuration, validate schemas, manage Git-synced modules and local-only modules, and verify the workflow through example projects. It does not yet automatically extract a complete design system from real projects, monitor UI drift, or directly modify production code. Those capabilities are planned for later versions.

I built this project because I wanted to combine design system thinking with AI-assisted coding.
For me, VibeCoding is not just about asking AI to write code. It is about turning product judgment, design logic, and safety boundaries into a reusable workflow.

modeskill is my attempt in that direction.

It is not meant to make every project look exactly the same.
It is meant to help related projects stay consistent, explainable, and maintainable while still keeping their own functional differences.