sass-mohfarawati/skills/mohs-frontend-system/SKILL.md

name, description

name	description
mohs-frontend-system	Use this skill for frontend work in Next.js, Tailwind CSS, and shadcn/ui projects, especially when editing pages, layouts, components, styling, or refactoring UI systems. Apply it when Codex needs to keep visual decisions consistent, reuse shared primitives, centralize tokens and layout patterns, and avoid mixed old and new UI approaches.

Mohs Frontend System

Overview

Follow the existing project structure. Reuse shared components before creating new ones. Keep visual decisions global and system-driven instead of scattering them inside page files.

Workflow

1. Inspect the current frontend structure before editing.
2. Find existing shared primitives in components/ui/* and components/layout/*.
3. Check global tokens and style rules in app/globals.css.
4. Check Tailwind mapping in tailwind.config.ts.
5. Decide whether the change belongs in global styles, shared primitives, or page-level composition.
6. Reuse and extend shared patterns instead of introducing one-off classes or duplicated markup.
7. Finish the refactor completely. Do not leave mixed patterns behind.

System Rules

• Follow the existing project structure.
• Reuse shared components before creating new ones.
• Keep visual decisions global, not scattered in page files.
• Prefer tokens and shared primitives over repeated raw classes.
• Prefer consistency over creativity.
• Do not invent random styles, spacing, radius, shadows, or layouts.
• Use shadcn/ui as a base only, not as the final design language.
• Keep layout primitives shared.
• Keep UI primitives shared.
• Do not leave old and new patterns mixed together.
• Do not leave partial refactors.

File Ownership

• Global styles and tokens: app/globals.css
• Tailwind mapping: tailwind.config.ts
• Shared UI: components/ui/*
• Shared layout: components/layout/*

Implementation Rules

• Put reusable visual decisions into shared layers first.
• Keep page files focused on composition and data flow.
• If a new pattern is needed in more than one place, extract it immediately.
• If an old pattern conflicts with the new one, replace the old pattern in the touched area instead of leaving both.
• Match the existing code style and naming conventions of the repo.

Output Style

1. Briefly explain the change.
2. List files to edit or create.
3. Execute the full implementation.