Oil Frontend
当任务需要实现、修改、重构或评审产品前端的可见界面、交互行为、前端状态与数据流、组件或样式组织时主动使用，无需用户点名；也用于这些前端行为的测试与验证策略。适用于页面、表单、列表、弹窗、响应式、样式与动效实现和前端代码归属调整。不用于视觉风格、配色、排版与设计方向这类设计判断，也不用于纯后端、构建部署、依赖升级、只修导入路径的机械改动、仅操作现有网站、仅生成设计图片或讨论本 Skill；用户明确要求不使用时不触发。
Install
npx skills add oil-oil/oil-frontend --skill oil-frontendgit clone --depth 1 https://github.com/oil-oil/oil-frontend.git /tmp/oil-frontend
mkdir -p ~/.claude/skills
cp -r /tmp/oil-frontend/. ~/.claude/skills/oil-frontendPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Oil Frontend 从用户任务和完成结果出发，修复真正出错的信息、交互、数据流、布局或共享实现。 ## 核心原则 - 沿用用户对浏览、选择、编辑和提交的已有认知；可见内容服务于识别、判断、操作和结果反馈。 - 同一业务数据有明确的权威来源，一个用户意图只执行一次；失败时保留对象、位置和已输入内容。 - 优先使用项目已有的设计变量、组件和成熟能力；既有模式错误时修复源头。简单逻辑直接实现，不为少量代码引入依赖。 - 把用户时间、工具调用和上下文 Token 作为执行成本；在覆盖目标风险和必需门禁的前提下，按需取证、合并改动与验证，证据充分即停止。 ## 修好问题，不顺手增加一套管理办法 - 优先修正产生问题的原代码，让同类输入都能正确处理。没有业务要求，不按某个名称、ID、页面或当前数据增加特殊判断；把这些判断搬进配置文件也不算解决问题。 - 不因为“以后可能需要”或“这样更保险”增加开关、多层封装或备用处理流程。只有当前需求确实用得上，才增加；已有正常实现能完成时直接复用。 - 能用现有工具检查，就不要新写检查脚本。一次排查不默认留下长期测试，更不默认接入 CI，变成每次提交或发布都必须通过的检查。确有容易再犯、影响实际使用的问题且现有测试查不出时，再补最小测试。 - 检查页面表现和操作结果，不把当前代码写法或数据值固定成永久要求。正常改名、改文案或更新数据，不应让无关检查失败；用户明确要求固定的内容或接口格式除外。 - 每次修复都思考如何避免再犯，但不必每次向 AGENTS.md／Skill 追加一条规定。先把原代码或原规则改对，合并重复内容、替换过时要求；不要为“防止过度设计”再写评分脚本或增加审批步骤。 - 不把所有固定值和检查都当成问题。业务规定的数量、协议规定的取值、项目统一的颜色和间距可以保留；防止越权、无效输入、丢数据和重复扣费的有效检查也要保留。 ## 按需读取 1. 先读本文件作为入口，再看用户提供的证据和相关实现，定位要改变的结果与影响范围；不先通读参考规范再找问题。仅修导入路径等机械错误时停止，不读取参考文件。 2. 在确定方案和修改前，按目标或初步证据选择一个主要规则；不必先证明完整根因，也不按文件扩展名、CSS、动画关键词或参考文件中的链接追加读取。 3. 出现当前规则无法处理的独立问题时，才补充对应规则；复杂任务按阶段读取，不预先加载全套，也不因固定数量上限遗漏必要规则。当前上下文已有完整且未变化的规则时直接复用，不重复读取。 优先按要改变的行为或已知故障选规则；列表、表单等承载形式只在其结构本身需要调整时作为主要路由。表中“涉及”指本次要改变或存在待解决问题，不是代码里恰好出现该元素。 | 当前任务 | 主要规则 | 仅在这些情况补充 | | --- | --- | --- |
Details
- Skill name
oil-frontend- Repository
- oil-oil/oil-frontend
- License
- MIT
- Repo updated
- 4 October 2026
FAQ
What does the Oil Frontend skill do?
当任务需要实现、修改、重构或评审产品前端的可见界面、交互行为、前端状态与数据流、组件或样式组织时主动使用，无需用户点名；也用于这些前端行为的测试与验证策略。适用于页面、表单、列表、弹窗、响应式、样式与动效实现和前端代码归属调整。不用于视觉风格、配色、排版与设计方向这类设计判断，也不用于纯后端、构建部署、依赖升级、只修导入路径的机械改动、仅操作现有网站、仅生成设计图片或讨论本 Skill；用户明确要求不使用时不触发。
How do I install the Oil Frontend skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add oil-oil/oil-frontend --skill oil-frontend. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Oil Frontend popular?
It lives in oil-oil/oil-frontend, which has 139 GitHub stars and 5 forks.
Related skills
Tidyfactor Styler
120TidyFactor/Styler
Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL). Operates directly inside existing codebases across React/Next.js, PHP, WordPress, and Vanilla HTML/CSS/JS. Trigger on commands 'brief', 'component', 'section', 'page', 'redesign', 'typography', 'palette', 'layout', 'rtl', 'motion', 'styles', or requests for UI polishing and RTL refactoring.
Design Auditor
92Ashutos1997/claude-design-auditor-skill
Audit designs against 19 rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Auto-detects framework and design system (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap). Runs code superpowers across all 19 categories: aria, focus, contrast, tokens, responsive, motion, forms, navigation, spacing, states, microcopy, elevation, iconography/SVG. Flags color blindness risk. Audits dark patterns, ethical design, Nielsen's heuristics. Outputs before/after diffs, developer handoff reports, wireframe-to-spec. English and Korean. Triggers on: check my design, review my UI, audit my layo
Nerv UI
96mdrbx/nerv-ui
Build original, accessible React command-center interfaces with the published @mdrbx/nerv-ui component library. Use for dashboards, monitoring terminals, operational tools, authentication screens, or sharp industrial HUD-style UI in React, Vite, or Next.js.
Persian Motion Director
148atmirrr/persian-motion-director
Direct and build professional motion design (promo and launch films, kinetic typography, animated explainers, social clips, title sequences) with correct Persian/Farsi and right-to-left typography, in Remotion or plain web code. Use this skill whenever the user wants a video, animation, motion graphics, teaser or animated text that contains Persian, Farsi, Arabic-script or RTL text, and whenever they say a motion piece looks "default", "like a slideshow", "AI-made" or "not pro", or that the Persian looks off, broken or disconnected, even if they never say "motion design". It brings the anti-sl
Anti UI Slop
78uizze/uizze
Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".
Prototype to Figma
141alima-max/prototype-to-figma-skill
Converts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.