How do I install the Frontend System skill?

Run npx skillmds@latest add zrozoom/frontend-system in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend System safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend System?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend System free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend System?

ZroZoom (@zrozoom) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend System by zrozoom — Agent Skill

Name: Frontend System
Author: ZroZoom

Frontend System

UI/UX expert. Use for creating components, styling (Tailwind), accessibility, and translations (I18n). Trigger when: create a component, change appearance, add a chart, translate, stwórz komponent, zmień wygląd, dodaj wykres, przetłumacz.

ZroZoom 8e8b3e3 2.4 KB Updated Sep 17, 2026

File contents

🎨 Frontend & Design System

1. Internationalization (I18n)

[!CAUTION] ZERO HARDCODED STRINGS! Every user-visible text must use the useTranslation hook / t() (or your project's i18n equivalent).

Required languages: define the project's locale list in your i18n config (e.g. pl.json, en.json, ...).

Key structure:

{
  "component.action.state": "Text"
}

3. Styling

Framework: Tailwind CSS
Animations: Framer Motion (for UI interactions) or CSS Transitions
Responsiveness: Mobile-first (sm:, md:, lg:)
Dark mode: Supported via dark: classes

4. SEO

New public pages MUST include the <SEO /> component:

<SEO 
  title="Page title" 
  description="Description for search engines" 
/>

5. Accessibility (a11y)

Use semantic HTML (<nav>, <main>, <article>)
All interactive elements must have aria-label or visible text
Colors: minimum 4.5:1 contrast ratio (WCAG AA)

6. Pitfalls (Lessons Learned)

P1. Runtime fetch of static files

Mistake: Files fetched via fetch() at runtime (not imported) reside outside public/ → they don't end up in dist/. Fix: Runtime files MUST be in public/. Only public/ is copied to the build output.

P2. Config defensiveness

Mistake: Missing field in a JSON config (e.g., xRange) → TypeError crash in the renderer. Fix: Always use optional chaining with defaults: config?.xRange ?? [-5, 5].

P3. useIsMobile — matchMedia vs resize

Mistake: addEventListener('resize') + innerWidth — less performant and off-by-one at the breakpoint. Fix: matchMedia('(max-width: ${breakpoint - 1}px)') — performant, no overlap.

P4. PWA cache — large chunks

Mistake: Default workbox maximumFileSizeToCacheInBytes limit (2MB) silently skips large chunks. Fix: Increase the limit when the bundle grows. Without this, offline mode loses critical resources.

P5. Ratings / nullable values: null vs 0

Mistake: Missing rating mapped as ?? 0 → renders 0 stars (grey), as if someone rated it 0. Fix: Use ?? undefined — triggers the "no rating" state (yellow default).

---name: frontend-systemdescription: UI/UX expert. Use for creating components, styling (Tailwind), accessibility, and translations (I18n). Trigger when: create a component, change appearance, add a chart, translate, stwórz komponent, zmień wygląd, dodaj wykres, przetłumacz.---# 🎨 Frontend & Design System## 1. Internationalization (I18n)> [!CAUTION]> **ZERO HARDCODED STRINGS!**> Every user-visible text must use the `useTranslation` hook / `t()` (or your project's i18n equivalent).**Required languages:** define the project's locale list in your i18n config (e.g. `pl.json`, `en.json`, ...).**Key structure:**```json{ "component.action.state": "Text"}```## 3. Styling- **Framework**: Tailwind CSS- **Animations**: Framer Motion (for UI interactions) or CSS Transitions- **Responsiveness**: Mobile-first (`sm:`, `md:`, `lg:`)- **Dark mode**: Supported via `dark:` classes## 4. SEONew public pages **MUST** include the `<SEO />` component:```tsx<SEO title="Page title" description="Description for search engines" />```## 5. Accessibility (a11y)- Use semantic HTML (`<nav>`, `<main>`, `<article>`)- All interactive elements must have `aria-label` or visible text- Colors: minimum 4.5:1 contrast ratio (WCAG AA)## 6. Pitfalls (Lessons Learned)### P1. Runtime fetch of static files**Mistake:** Files fetched via `fetch()` at runtime (not imported) reside outside `public/` → they don't end up in `dist/`.**Fix:** Runtime files MUST be in `public/`. Only `public/` is copied to the build output.### P2. Config defensiveness**Mistake:** Missing field in a JSON config (e.g., `xRange`) → `TypeError` crash in the renderer.**Fix:** Always use optional chaining with defaults: `config?.xRange ?? [-5, 5]`.### P3. useIsMobile — matchMedia vs resize**Mistake:** `addEventListener('resize')` + `innerWidth` — less performant and off-by-one at the breakpoint.**Fix:** `matchMedia('(max-width: ${breakpoint - 1}px)')` — performant, no overlap.### P4. PWA cache — large chunks**Mistake:** Default workbox `maximumFileSizeToCacheInBytes` limit (2MB) silently skips large chunks.**Fix:** Increase the limit when the bundle grows. Without this, offline mode loses critical resources.### P5. Ratings / nullable values: null vs 0**Mistake:** Missing rating mapped as `?? 0` → renders 0 stars (grey), as if someone rated it 0.**Fix:** Use `?? undefined` — triggers the "no rating" state (yellow default).

Frequently asked questions