Oil Frontend skill
Agent skill with Chinese-language rules for writing and reviewing product frontends: states, data flow and component structure
- 146 ★ on the repository
- Last commit
Minimal access
Why this level
- The agent edits shared components directly, so review the affected pages in the diff
- The rules are in Chinese and are easy to misread without translation
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/oil-frontendDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The agent edits shared components directly, so review the affected pages in the diff
- The rules are in Chinese and are easy to misread without translation
This is third-party code. Review the repository files before installing.
What it does
Oil Frontend is a skill with a rule set that keeps an agent in bounds while working on a product interface. It switches on by itself when a task touches the visible interface, behaviour, state, data flow or component organization, and you do not need to name it in the request. Visual style, colours and typography are outside its scope. The rules are grouped around six themes: the user task and business object first, then removing needless information and fake actions, truthful data and scopes, the layout of the interface and code, styles and animation, and fixing the source of a problem and finishing the migration. Detailed contracts sit in `references` for components, overlays, lists, loading states, viewport and dialogs, and motion and performance. The agent reads the `SKILL.md` entry, then one main rule chosen from the task evidence, and loads others only when needed. The repository also has `evals` suites and a `recommend_once.py` script. The rule texts are written in Chinese.
Who it is for. Frontend developers and teams who trust an agent with interface changes, read Chinese and want fewer needless layers, fake buttons and doubtful states.
Good fit when
- An agent writes or refactors a page, form, list, dialog or table in a product interface
- You need a frontend review following one fixed order of questions
- In the interface the query, list, total and pagination are out of sync
- A shared component behaves differently across pages and the source has to be fixed
Not a fit when
- You need visual style, colour or typography decisions: the skill does not make them
- The task is purely server-side or concerns building, deployment or dependency updates
- The team does not read Chinese: rules and descriptions in the repository are in that language
Example request
Rework the order creation form: drop needless steps, close the dialog only after a successful response and keep the typed data on errorLimitations
The rules and description are in Chinese, so without the language you will have to check them with machine translation. The skill covers only implementing and verifying the interface, and takes the visual choice from the mockup, project rules or neighbouring pages. By default it does not create long-lived checks or add new sections to `AGENTS.md`. The last commit is dated October 4, 2026, and the repository holds no third-party feedback on the skill.
How to disable. Delete the `oil-frontend` skill folder from the agent skills directory (`.claude/skills`, `.agents/skills` or wherever you copied it).
FAQ
Do I need to name the skill in the request?
No, it switches on by itself when a task touches the visible interface, behaviour, state or component organization.
Does the skill decide the design?
No, it does not choose colours, typography or visual direction. Implementation uses the mockup, project rules or neighbouring pages.
Which language are the rules written in?
Chinese: the description, `SKILL.md` and the contracts in `references`.
How does the skill read its rules?
The agent reads `SKILL.md`, then one main rule chosen from the task evidence, and loads others only as needed.
What is in references?
Contracts for components, overlays, collections, state and loading, viewport and dialogs, and motion and performance.
Discussion
No questions or reviews yet.
Related
SkillsA UI design skill: three genuinely different directions side by side, one chosen and refined against real screenshots in agents like Claude Code
A design review skill applies Refactoring UI principles to web interfaces while respecting the project’s existing tokens
A skill that strips explanatory copy from interfaces: nine rules, before and after output, precise verbs for generic ones.
A skill with 152 rules on animation, typography, sound and laws of UX: reviews CSS and components with findings as file and line
The Ludi Design System skill teaches an agent to choose components and build B2B interface pages by rules, with TSX templates
A Codex skill: three distinct visual concepts, screenshot review and cutting excess, so interfaces look less templated.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Oil Frontend (this card) | no | 146 | |
| Frontend Design (Ilm-Alan) | no | 166 | rules for implementing and reviewing interfaces and no choice of visual direction |
| AI Design Skills | no | 15,284 | works on product interfaces and data states and does not touch landing pages |
README in short
The README expands the six themes of the skill: task and business object, removing the needless, truthful data and scopes, layout of interface and code, styles and animation, fixing the source. It then shows how the agent loads rules as needed. All text is in Chinese.